Armando la ArtistBox

Clase 12 de 36 • Curso de React Native 2016

Resumen

Vamos a comenzar nuestra aplicación del curso: PlatziMusic

Para poder reutilizar el código con React Native en IOS y Android sin tener que copiar y pegar en ambos archivos creamos un nuevo archivo llamado app.js.

Puedes usar esta imagen de David Bowie para crear el ArtistBox: https://static.platzi.com/media/files/bowie_a927fdf3-b321-4a5c-99ca-239cc86c57bc.png

Para los íconos de nuestra aplicación usaremos react-native-vector-icons una librería con 3000 íconos customizables.

Recuerda:
Las imágenes necesitan tener un tamaño definido, por defecto es cero.

Para vincular un paquete instalado con el proyecto, debemos correr el comando:

react-native link [nombre paquete]

Jormar Arellano Gonzalez

company_admin•

En mi caso, estoy probando desde linux con el emulador de Android y los íconos no se ven en el emulador después de ejecutar el comando:

react-native link react-native-vector-icons

Para arreglarlo, tuve que ejecutar nuevamente el comando:

react-native run-android

…de forma tal que react-native compilara de nuevo el proyecto y, después de eso, los íconos se vieron sin problema alguno.

No sé si era relevante, pero espero que le sirva a alguien.

Nardo Nykolyszyn

student•

Necesitas correr npm i luego

Fernando Ontiveros

student•

Si alguien está viendo esto en 2018 y tiene este issue:

Error: While resolving module `react-native-vector-icons/MaterialIcons`, the Haste package `react-native-vector-icons` was found

Carlos Raez

student•

Yo tb tengo el problema y no se como solucionarlo Gracias!!

CARLOS ERNESTO DESEDA RODRIGUEZ

student•

Gracias, funciono a la perfección!
Ya estaba atorado en esa parte xD

Fernando Ontiveros

student•

Si al correr la app en iOS les aparece lo siguiente: Unrecognized font family “Ionicons” pueden hacer lo siguiente:

watchman watch-del-all
rm -rf node_modules && npm install
rnpm link
npm start -- --reset-cache
react-native run-ios

Miguel Cobas

student•

Excelente gracias estaba justo con ese error

Miguel Cobas

student•

Me salio un error, ahora tengo que estar compilando la app cada vez que hago un cambio, me podrias ayudar?

Joel Humberto Gomez Paredes

student•

Si por andar de curiosos estan en el simulador de iOS, cambian la imagen del ejemplo y no se las muestra, chequen que este por https sino aqui hay mas información al respecto info

Ludwig Angarita

student•

Perfecto, muchas gracias 😃

José Tuzinkievicz

student•

Después de instalar react-native-vector-icons, al compilar el proyecto me tiraba unos errores como:
java.io.IOException: Could not delete path '…
lo resolví entrando (desde la terminal de Windows) a la carpeta android del proyecto y ejecuté gradlew clean.
Con eso resolví el problema, lo comparto por si a alguien le sirve.

Camilo Sandoval

student•

Me has salvado después de un par de horas, lei tu comentario, Muchas gracias

Bruno Cicerchia

student•

Así quedo mi aplicación ❤️

Juan Matilla

student•

Alguien sabe como solucionar esto?

Diego Forero

Team Platzi•

Revisa que se este construyendo correctamente el bundle, al parecer hay un problema en ese punto, no esta creando el bundle y no lo encuentra y se rompe.

IA Interactive

student•

ejecuta este comando en tu consola

rm ./node_modules/react-native/local-cli/core/__fixtures__/files/package.json

Dante Jauregui Yallico Jauregui Yallico

student•

me gusto como haces el Styling, yo estoy haciendo algo parecido para ReactJS (para web):

const HeaderBar = () => {
	return     <div>
				<h1 style={styles.title}>Ventas</h1>

				<Button content='Exportar' />	
				<Button content='Filtrar' />
        	       </div>
};


const styles = StyleSheet.create({
	title: {
		display: 'inline',
		color: '#2b2b2b'
	}
});

pero no me esta saliendo (error: Uncaught TypeError: StyleSheet.create is not a function) 😦

como se haria ese mismo estilo de estyling en REACTJS?? porfavor tu apoyo Gonzalo

Gonzalo Aguirre

teacher•

StyleSheet es parte de react-native (fijate que lo requerimos desde react-native y no react).

Para React suelen usarse otras alternativas, pero podrías definir los estilos sin usar StyleSheet.create() sino usando un objeto plano y funcionaría.

const styles = {
	title: {
		display: 'inline',
		color: '#2b2b2b'
	}
};

Augusto Gonzalez

student•

Para los que tuvieron problemas a la hora de implementar el plugin de vector-icons en Android. Después de hacer el:

react-native link react-native-vector-icons

Les va a decir que no encuentra el import de vector-icons. Para esto tendrá que configurarlo manual uno a uno. En mi caso particular lo que no estaba era lo siguiente:

Edit android/app/build.gradle (note: app folder) to look like this:

apply plugin: 'com.android.application'

android {
  ...
}

dependencies {
  compile fileTree(dir: 'libs', include: ['*.jar'])
  compile "com.android.support:appcompat-v7:23.0.1"
  compile "com.facebook.react:react-native:+"  // From node_modules
+ compile project(':react-native-vector-icons')
}

Jose Alvarez Alvarez

student•

En react para web también aplica esta manera de poner estilos, style={[styles.box, styles.red]} ?

Sacha Lifszyc

teacher•

Claro, puedes poner estilos de css con un objeto de JavaScript con una sintaxis similar a la de CSS. Mira en la documentación de React la parte de style.

Roman Salazar Lopez Salazar Lopez

student•

Hola, tengo un problema. El dia de ayer comenze con el curso y llegue asta esta leccion. Hoy trate de correr mi aplicacion con react-native run-ios me da un error que dice: Commandrun-iosunrecognized. Make sure that you have runnpm installand that you are inside a react-native project.
Ya intente actualizar la version de npm y no puedo correr mi aplicaion.

Cualquier ayuda sera muy agradecida.

Héctor Niño Jaimes

student•

Ejecuta npm run ios

Patricio Yumbillo

student•

Hola que tal. Como resolviste el tema ? y pues siempre estoy dentro de la carpeta del proyecto. me sale el mismo mensaje

Jose Carlo Rojas Mora

student•

Hola cuando instale el pack de iconos me apareció un error similar a este (caso para usuarios de windows 10 - android):

` ERROR  EPERM: operation not permitted, lstat 'G:\www\cim-cadastramento\android\app\build\generated\source\r\debug\android\support\transition\R.java'
{"errno":-4048,"code":"EPERM","syscall":"lstat","path":"G:\\www\\cim-cadastramento\\android\\app\\build\\generated\\source\\r\\debug\\android\\support\\transition\\R.java"}
Error: EPERM: operation not permitted, lstat 'G:\www\cim-cadastramento\android\app\build\generated\source\r\debug\android\support\transition\R.java'
    at Error (native)`

Al leer encontré una posible solución, consiste basicamente que cuando corran el react-native run-android y abre el packager lo cierran inmediatamente y esperan que haga un **BUILD SUCCEFUL ** luego lo vuelven abrir (el packager) con lo siguiente node_modules/react-native/local-cli/cli.js start , dejo el link de donde lo lei por si no me explique,

Juan Dominguez Chavez

student•

me salio ese error, ejecuto npm start en la consola luego de este y se reparo.

José Tuzinkievicz

student•

yo lo solucioné reiniciando el terminal

Izael Ruelas Garcia

student•

Después de instalar vector-icons, ejecutar link, cerrar el simulador y ejecutar react-native run-ios me aparece en el Simulador el siguiente error No bundle url present alguién sabe por qué o como solucionarlo?

Javier Rocha

student•

Si les da error

react-native link react-native-vector-icons

Actualicen primero react-native ejecutando

react-native-upgrade

Después si pueden usar link sin error

Oscar Barajas Tavares

Team Platzi•

¡gracias por el aporte!

Josué Barrios Rodriguez

student•

Hola, se podría pasar la altura de un componente de manera dinámica?, es decir utilizando this.props ??

Gonzalo Aguirre

teacher•

Si claro, pero deberías desde tu componente tomar el valor de esa prop (supongamos que se llame height) y aplicarla como estilo a tu componente. Algo similar a lo siguiente

class MiComponente extends Component {
  render() {
    return (
      <View style={{ height: this.props.height }}>
        ...
      </View>
    )
  }
}

// y al usarlo
<MiComponente height={100} />

Yonathan Gutierrez

student•

cuando corro ios, me lo tira en el navegador, como puedo corregirlo para que lo haga en el emulador (uso mac valga la aclaración…)

Gonzalo Aguirre

teacher•

Hola @y0sh_claus, es muy raro esto que contás! A qué te referís exactamente con que te lo tira en el navegador?

Ernesto Llanos

student•

Xq no uses en lugar del archivo app.js el archivo index.js ? Ya que al no definidir el nombre de la plataforma ( android, ios ) tomaria ese archivo por defecto

Pablo Almonte

student•

No me aparece la pantalla Roja de error. A que se debe eso? Estoy en Android con Windows 10

christian perez macedo

student•

Disculpen que me salga de tema, pero tengo un pequeño problema,
si quiero usar un componente webview, dentro de el quiero mostrar una
pagina web que tengo(en realidad es solo codigo dentro una variable HTML y indicado source={{html: HTML}} dentro webview), pero esta necesita un par de files .css e .js ,
no se como encontrar los files source, estan en una carpeta que he llamado web adentro del proyecto. se los agradesco de anteprima.

<code>          "<link rel=\"stylesheet\" type=\"text/css\" href=\"web/katex.min.css\">\n" +
                "<link rel=\"stylesheet\" type=\"text/css\" href=\"web/style.css\">\n" +
                "<script type=\"text/javascript\" src=\"web/katex.min.js\"></script>\n" +
                "<script type=\"text/javascript\" src=\"web/auto-render.min.js\"></script>\n" +

Gonzalo Aguirre

teacher•

Se me ocurren dos opciones:

Hostear esos files en algun dominio publico y que cada href apunte a la url que correponda
Pegar esos scripts a mano antes de tu codigo. Esto si ya sabes de antemano cuales son esos scripts.

Espero que se haya entendido

christian perez macedo

student•

Gracias, para mi la segunda opcion es perfecta!

Santiago Maya

student•

En la ultima version de react native ya esta app.js, pero como haria si quiero un feature especifico de ios o android individualmente?

const HeaderBar = () => {
	return     <div>
				<h1 style={styles.title}>Ventas</h1>

				<Button content='Exportar' />	
				<Button content='Filtrar' />
        	       </div>
};


const styles = StyleSheet.create({
	title: {
		display: 'inline',
		color: '#2b2b2b'
	}
});

apply plugin: 'com.android.application'

android {
  ...
}

dependencies {
  compile fileTree(dir: 'libs', include: ['*.jar'])
  compile "com.android.support:appcompat-v7:23.0.1"
  compile "com.facebook.react:react-native:+"  // From node_modules
+ compile project(':react-native-vector-icons')
}

` ERROR  EPERM: operation not permitted, lstat 'G:\www\cim-cadastramento\android\app\build\generated\source\r\debug\android\support\transition\R.java'
{"errno":-4048,"code":"EPERM","syscall":"lstat","path":"G:\\www\\cim-cadastramento\\android\\app\\build\\generated\\source\\r\\debug\\android\\support\\transition\\R.java"}
Error: EPERM: operation not permitted, lstat 'G:\www\cim-cadastramento\android\app\build\generated\source\r\debug\android\support\transition\R.java'
    at Error (native)`

<code>          "<link rel=\"stylesheet\" type=\"text/css\" href=\"web/katex.min.css\">\n" +
                "<link rel=\"stylesheet\" type=\"text/css\" href=\"web/style.css\">\n" +
                "<script type=\"text/javascript\" src=\"web/katex.min.js\"></script>\n" +
                "<script type=\"text/javascript\" src=\"web/auto-render.min.js\"></script>\n" +

Armando la ArtistBox

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