Agregando botón de login con Facebook para iOS

Clase 20 de 36 • Curso de React Native 2016

Clase anteriorSiguiente clase

Resumen

Ya tenemos nuestra aplicación de Facebook creada, ahora agregaremos el botón para que los usuarios puedan hacer login

Alex Agüero León

student•

Por alguna razón el botón de Facebook Login no me renderea. 😦

Gonzalo Aguirre

teacher•

Podés probar agregándole estilos y ver si es ese el botón efectivamente.

En estos casos “raros” mi consejo es cerrar el packager y volver a correr react-native run-ios

Alex Agüero León

student•

Con los estilos verifico que ese es el botón, ya reinicié el packager e incluso volví a cargar los frameworks y agregar las líneas XML al Info.plist, buildea correcto en Xcode.
No se si pueda haber algún problema en la carga de los assets del FBSDK porque contiene mucho código deprecado en Xcode.

ernesto

student•

Hola gente, pude solucionar el problema del botón de login que no renderiza siguiendo estas instrucciones.

Y para fixear el problema de que después de loguearse no redirecciçona a la app

David Flores Medrano

student•

yo ya había hecho esos pasos en anteriores videos, pero ni así me renderiza el botón

Gonzalo A. Burgos Trincado

student•

Hola, me pasa lo mismo y no he podido solucionar que aparezca el botón de Facebook.

Juan Alexis Tito Lopez

student•

Juan Alexis Tito Lopez

student•

Me sale esta advertencia y no puedo solucionarlo

Matias Niz

student•

@gonzaloaguirre tengo el mismo problema, alguna solucion posible existe?

Jose Meira

student•

Excelente curso, está increible!!

Gonzalo Aguirre

teacher•

Gracias @d4ank0c! Que bueno que te haya gustado 😃

Juan Alexis Tito Lopez

student•

A que se debe este error? No puedo avanzar

Diego Forero

Team Platzi•

Lo que dice el error es que los props deben estar definidos, creo que falta mas tracestack del error para encontrar el punto donde falta que los definas.

Antonio Ramírez Oyervides

student•

Me marca el mismo error. Pero si cambio el orden de las scene, funciona bien. Alguno sabe si login va arriba de root?

render(){
return <Router>
<Scene key=“root”>
<Scene key=“login” component={LoginView} hideNavBar />
<Scene key=“home” component={HomeView} hideNavBar />
<Scene key=“artistDetail” component={ArtistDetailView} />
</Scene>
</Router>

Isaac Halabe

student•

Me marca un error dice que <Router/> no puede tener 2 <Scenes/>

Intento poner esto:

<Router>
 	<Scene key="login" component={LoginView} hideNavBar/>
          <Scene key="root">
         	 <Scene key="home" component={HomeView} hideNavBar/>
          	<Scene key="artistDetail" component={ArtistDetailView} hideNavBar={isAndroid}/>
        </Scene>
</Router>

y en cambio solo puedo poner esto

<Router>
        <Scene key="root">
          <Scene key="login" component={LoginView} hideNavBar/>
          <Scene key="home" component={HomeView} hideNavBar/>
          <Scene key="artistDetail" component={ArtistDetailView} hideNavBar={isAndroid}/>
        </Scene>
 </Router>

en donde si mando a llamar Actions.root() sigue siendo el de LoginView

Jesus Emmanuel Gonzalez Pio

student•

Tengo este error tambien, lo pudiste resolver?

Abraham Solorzano

student•

Guys, como están ?

Reporte el mismo error y mi solución fue la siguiente

<Scene key="root">
                <Scene key="login" component={LoginView} hideNavBar />
                <Scene key="home" component={HomeView} hideNavBar />
                <Scene key="artistDetail" component={ ArtistDetail } hideNavBar={isAndroid} />
            </Scene>

Gonzalo A. Burgos Trincado

student•

Hola compañeros, para los que siguen este curso y tuvieron problemas con el randerizado del botón de Facebook, les dejaré unos pasos que me sirvieron para solucionar este problema:
En xcode tenia el problema en el Bundle Identifier, tienen qe cambiarlo, agréguenle unos números al final, porque creo que ya existen muchas aplicaciones con el nombre de PlatziMusic.
por ejemplo: org.reactjs.native.example.PlatziMusic1234
Luego intenta instalar react-native-sdk pero la versión 0.6.0 con el siguiente código:

$ npm install react-native-fbsdk@0.6.0 --save
$ react-native link react-native-fbsdk

prueben con eso, si no les funciona comenten o mándenme un mensaje e intentare ayudarlos.

Saludos desde Chile 😄

Sebastian Rojas Parra

student•

se puede tambien hacer con una sola linea

<code>
react-native install react-native-fbsdk@0.6.0

😃

Jose Alvarez Alvarez

student•

Tengo el mismo problema, no se muestra el botón de facebook, se mira un cuadro rojo.

Si corro el proyecto con el comando react-native run-ios, se mira el cuadro rojo.
Pero si abro el proyecto con Xcode y lo corro desde ahi si funciona y se mira el botón.

Que podría ser?

Ricardo Azpeitia P.

student•

No entiendo a que te refieres puedes poner una captura de pantalla y explicarnos mas a fondo?

Jose Alvarez Alvarez

student•

Esto se mira corriendo el proyecto desde la terminal.

Y si abro el proyecto de ios con el xcode y le doy build and run desde el Xcode.

Sale correcto, a que crees que se deba?

Christian Núñez

student•

En en el emulador no me jalo, pero en XCODE si…porque?

Miguel Cobas

student•

@gonzaloaguirre Tengo problemas ya que al ingresar a Facebook no termina de hacer la operación por lo tanto no me devuelve el login. Alguna idea del porque pasa eso?

Gonzalo Aguirre

teacher•

Obtenés algún error en particular?

Miguel Cobas

student•

No me aparece error, sino simplemente al autenticar no cierra el navegador.

Maximiliano Opitz

student•

Como cambiar el texto que muestra el boton al hacer login y logout?

Miguel Cobas

student•

Para cambiar el texto te recomiendo usar el LoginManager solo tiene un inconveniente en ios solamente muestra el texto y no en forma de botón, por ende tienes que crear una vista para que se vea como botón
Te anexo un ejemplo espero te sirva

  handleFacebookLogin () {
    LoginManager.logInWithReadPermissions(['public_profile', 'email', 'user_friends']).then(
      function (result) {
        if (result.isCancelled) {
          console.log('Login cancelled')
        } else {
          console.log('Login success with permissions: ' + result.grantedPermissions.toString())
        }
      },
      function (error) {
        console.log('Login fail with error: ' + error)
      }
    )
  }
  render () {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Bienvenidos a PlatziMusic</Text>
          <Button style={styles.ButtonFb}
            onPress={this.handleFacebookLogin}
            title="Log in with Facebook"
          />
       </View>
    );
  }

Christian Núñez

student•

MacBook-Pro-de-Christian:MusicX Mandrake$ react-native link
Scanning 479 folders for symlinks in /Applications/MAMP/htdocs/MusicX/node_modules (15ms)
rnpm-install info Android module react-native-fbsdk is already linked
rnpm-install info Linking react-native-fbsdk ios dependency
rnpm-install ERR! Something went wrong while linking. Error: Expected “/*”, “//”, or “{” but “<” found.
Please file an issue here:

Expected “/*”, “//”, or “{” but “<” found.

Christian Núñez

student•

Hola en el package.json debes de cambiar la version de la libreria de Facebook, pon la “react-native-fbsdk”: “^0.6.0”, ese mismo error tenia y solo cambie la version, y vuelves hacer el npm install y lo linkeo sin problemas.

Sebastian Rojas Parra

student•

Para los que tengan el problema del boton rojo, lo solucione siguiendo los siguientes pasos :

Christian Núñez

student•

Me pueden ayudar a ver que me falta, mi boton de Facebook no se ve, solo aparece el contorno.

Nacho Décima

student•

Yo hice esto -
Download the SDK and unzip the archive to ~/Documents/FacebookSDK

de ahi movie a xcode los archivos necesarios

luego cambie en el package.json

“react-native-fbsdk”: “0.6.0”,

hice el npm install y el link para y quedo funcionando

Inti Mateo Chiliguano

student•

Hola amigos, tengo el siguiente problema
El momento que hago react-native link react-native-fbsdk y luego le doy a react-native run-ios después de mostrar el splash screen se pone la pantalla totalmente negra y mata a la app

Tengo las siguientes versiones:
node: v9.3.0
react: 16.0.0
react-native: 0.51.0
react-native-fbsdk: 0.7.0
xcode 9.2
mac os sierra: 10.13.2

Le he hecho de todo y aun asi sigue sin funcionar, le quito el link del react-native-fbsdk y funciona perfectamente la app

Felipe Donoso

student•

Hola has podido solucionarlo?me aparece lo mismo, así que googleare un poco más a ver si pillo el por qué, saludos

Inti Mateo Chiliguano

student•

ups! recien entro por la web y veo tu comment.
Si lo logre, al parecer es un error en el proceso de agregar los frameworks al xcode, tuve que hacerlo algunas veces hasta que funcionó, si hacer ningún cambio de versiones ni nada.
Lo bueno es que tenia el proyecto versionado con lo que si no funcionaba volvía al estado donde no había agregado nada y empezaba el proceso de nuevo hasta que funcionó.
Hay que ser muy prolijos al momento de agregar frameworks/wraps

Alejandro Mizael Gálvez Alcaraz

student•

no puedo hacer que funcione … alguien tiene este problema

Katherine Vanessa HC

student•

Buenas, en caso se les presente en error en #import <FBSDKCoreKit/FBSDKCoreKit.h> indicando que no existe, comparto con ustedes lo que me ayudo a solucionarlo:

Select the Project
Libraries
Select “RCTFBSDK.xcodeproj”
Build Settings
Add your custom the path in “Framework Search Paths” eg: ~/Documents/FacebookSDK
Clean Build -> ⇧⌘K (Shift + Command + K) - to clean builded frameworks.
Build the project; project should build successfully.

El mismo proceso realizarlo en el proyecto principal, les dejo el link en el cual encontré este dato, que me ayudo un mucho:

<Router>
 	<Scene key="login" component={LoginView} hideNavBar/>
          <Scene key="root">
         	 <Scene key="home" component={HomeView} hideNavBar/>
          	<Scene key="artistDetail" component={ArtistDetailView} hideNavBar={isAndroid}/>
        </Scene>
</Router>

<Router>
        <Scene key="root">
          <Scene key="login" component={LoginView} hideNavBar/>
          <Scene key="home" component={HomeView} hideNavBar/>
          <Scene key="artistDetail" component={ArtistDetailView} hideNavBar={isAndroid}/>
        </Scene>
 </Router>

<Scene key="root">
                <Scene key="login" component={LoginView} hideNavBar />
                <Scene key="home" component={HomeView} hideNavBar />
                <Scene key="artistDetail" component={ ArtistDetail } hideNavBar={isAndroid} />
            </Scene>

  handleFacebookLogin () {
    LoginManager.logInWithReadPermissions(['public_profile', 'email', 'user_friends']).then(
      function (result) {
        if (result.isCancelled) {
          console.log('Login cancelled')
        } else {
          console.log('Login success with permissions: ' + result.grantedPermissions.toString())
        }
      },
      function (error) {
        console.log('Login fail with error: ' + error)
      }
    )
  }
  render () {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Bienvenidos a PlatziMusic</Text>
          <Button style={styles.ButtonFb}
            onPress={this.handleFacebookLogin}
            title="Log in with Facebook"
          />
       </View>
    );
  }

Agregando botón de login con Facebook para iOS

Lanzamiento del Curso

Intro a React Native y a Platzimusic, el proyecto del curso

Requerimientos técnicos del curso

Guía de instalación de React Native

Guía de instalación para desarrollar para Android

Introducción al Desarrollo Mobile

¿De qué se trata este Curso de React Native?

Tres enfoques para desarrollo de aplicaciones móviles

Qué es React Native y sus componentes básicos

Primera App con React Native

Instalación y configuración de entorno

Creando tu primera aplicación

Developer Experience (DX)

Componentes y APIs

Estilos y Layout con Flexbox

PlatziMusic

Armando la ArtistBox

Componentes reutilizables

Contenedores con Scroll

Armando nuestro listado de artistas

Consume datos de la API de last.fm para listar los artistas

Routing y Navegación

Agregando una vista de detalle

Autenticación de usuarios

Agregando login con Facebook para iOS

Agregando botón de login con Facebook para iOS

Agregando botón de login con Facebook para Android

Configurando autenticación con Firebase

Agreguemos las funcionalidades principales a nuestra app: likes y comentarios

Refactor y referencias de Firebase

Agrega la funcionalidad para hacer Like a un artista

Envia comentarios de un artista y almacénalos en Firebase

Lista los comentarios de un artista trayendo los datos desde Firebase

Agrega un avatar de usuario para mostrar en los comentarios

Refinando detalles de la app

Mejorando la UI/UX de PlatziMusic para Android y iOS en cada caso

Agrega recursos de imágenes en la aplicación para la pantalla de login

Agrega un ícono bonito para PlatziMusic

Llevando la app a los Stores

Cómo subir tu aplicación de React Native al Play Store

Cómo subir tu aplicación de React Native al App Store

Conclusiones

Cierre del curso

Desafíos

Desafío 1 - Lista los artistas top de tu país

Desafío 2 - Lista la cantidad precisa de comentarios

Desafío 3 - Comparte un artista en Facebook o Whatsapp