Armando nuestro listado de artistas

Clase 15 de 36 • Curso de React Native 2016

Resumen

Es un buen momento para reorganizar un poco nuestro código. Creemos la carpeta src/ en nuestro directorio raíz del proyecto. En esta carpeta incluiremos toda el código fuente principal (source o src) de nuestra app PlatziMusic.

Como ya vimos en el video anterior, ScrollView era un componente que no servía mucho para mostrar una cantidad considerable de elementos, ya que los dibuja en pantalla a todos juntos, estropeando la experiencia del usuario.

Reemplacémoslo por ListView, un componente que irá dibujando en pantalla los elementos a medida que se vaya haciendo scroll.

Para lograrlo, debemos pasarle las propiedades dataSource y renderRow al ListView de artistas.

PlatziMusic ya va tomando forma. En el siguiente video, ya no mostraremos en pantalla 500 David Bowies, sino que obtendremos datos de la API de last.fm

alfredo salomon cruz

student•

ListView parece haber quedado obsoleto ahora se usa FlatList, ahi va la modificacion del app.js q a mi me funcionó:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  ScrollView,
  Image,
  FlatList,
} from 'react-native';

import Icon from 'react-native-vector-icons/Ionicons'

import ArtistBox from './ArtistBox'

export default class proyectodiez extends Component {
  render() {
    const artist = {
      image: 'https://lastfm-img2.akamaized.net/i/u/300x300/31a51f6e3ec647c8997150ec837891c7.png',
      name: 'David Bowie',
      likes: 200,
      comments: 140
    }
    
    return (
        <FlatList
          data={Array(20).fill(artist)}
          renderItem={({item}) => <ArtistBox artist={artist} />}
        />

    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'lightgray',
    paddingTop: 50,
  },
});

AppRegistry.registerComponent('proyectodiez', () => proyectodiez);

Patricio Yumbillo

student•

y para complementar esta solución.
Aparece una advertencia que indica que la llaves principales estan perdidas estoy es debido a que este componente requier de un campo unico para mejorar la renderizacion. Se soluciona poniendo un: keyExtractor={item => item.email}

Benjamin Castillo Eguez

student•

gracias!!

Carlos Alfaro

student•

Parece ser que ahora react-native tiene nuevas formas de List Views; FlatList y SectionList. Cual deberiamos de usar?

Simón Ottoniel González Acosta

student•

En la documentacion explica que si vas a usar secciones en la lista uses “SectionList” de lo contrario simplemente usar “FlatList” FlatList

Kenny Chavez

student•

Hola, tengo el problema de que en ArtistList.js no me acepta props.artists

this.state = {
dataSource: ds.cloneWithRows(props.artists),
};

Me aparece este error:
Can’t find variable: props

Y le estoy pasando correctamente el array en app.js, que sería este:

render() {
const artist = {
image: ‘’,
name: ‘Artist Box’,
likes: ‘250’,
comments: ‘30’
};
const artists = Array(500).fill(artist);

return (
  <View style={ styles.container }>
    <ArtistList artists={artists} />
  </View>
);

}

¿Alguna idea de lo que pueda ser?

GRUPORPP SAC 20492353214

student•

Seguramente te falta pasar props al constructor:

constructor(props) {
    super(props);
   ...
}

Augusto Gonzalez

student•

Me aparece este error cuando sigo al pie de la letra. Estoy haciendo los pasos en Android. Voy a continuar hasta el final. Porque probé el código final y si esta funcionando perfecto.

Ricardo Azpeitia P.

student•

Muy posiblemente no lo estas haciendo al pie de la letra porque te esta fallando.

Pero dice que estaba esperando un string si tu componente es built-in o una funcion o clase si tu componente es compuesto.

Y luego te dice que revises el método PlatziMusic.

diego aguirre

student•

hola tengo un problema con listview, estoy cargando una lista de 1300 item, una vez cargada la lista quiere presionar un item con el evento onPress pero demora en responder solo sucede en el primer toque, que puede estar pasando? ya probe tambien con FlatList y otros componente pero siempre sucede lo mismo. Probe cargando menos item y sucede igual.

Gonzalo Aguirre

teacher•

Hola @diego_la2, tenés el código a mano?

Enrique López

student•

Comparto el problema que tuve en windows.
no me funciono “mv” pero si el “move” por si a alguien le sirve.

Cristian Caballero

student•

Alguien podria explicarme por favor la logica de esta linea

const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => {
r1 !== r2
}});

gracias

Alejandro Sanabria

student•

const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => {
r1 !== r2
}});

Es básicamente es una comparación entre el row anterior y el nuevo si es diferente el row1 del row2 retorna true.

Por si no entiendes la syntaxis de es6 la paso a es5 que es mas común, aunque siempre vas a ver es6 en todo react native.

var DataSource =  new ListView.DataSource({ rowHasChanged: function compareRows(row1, row2) {
	return row1 !== row2;
} })

Juan Dominguez Chavez

student•

consulta en la parte de los errores, cuando clickeo el error el editor no me manda donde esta este, estoy con windows 10 y visual studio code, hay que hacer algo adicional para conseguir esto?

ariel ventura

student•

Hola Tengo Una Duda implementando el componente FlatList,
desde el file App.js le paso al ArtisList mediante props un array,

    const artists = Array(200).fill(artist)
    return (
      <View style={styles.container}>
        <ArtistList artists= {artists}/>
      </View>
    );

MI DUDA ES AL RECIBIR ESAS PROPS EN EL FILE ArtistList.js COMO HAGO PARA ACTUALIZAR EL STATE Y SE ACTUALIZE CON EL ARRAY DE ARTISTAS.

import ArtistBox from './ArtistBox'
export default class ArtistList extends Component<{}> {
  constructor (props) {
    super(props);

    this.state = {
      dataSource: []
    };
  }
  componentWillReceiveProps(newProps){
  
  }
  render() {
    console.warn(this.props.artists)

    const artist = this.props.artists
    return (
      <FlatList
        data = {this.state.dataSource}
        renderItem={({item}) => <ArtistBox artist={artist}/>}
      />
    );
  }
}

Carlos Alfonso Peña Serrano

student•

Este es mi ArtistList:

import React, { Component } from 'react'
import { StyleSheet, FlatList } from 'react-native'

import ArtisBox from './ArtisBox'

export default class ArtistList extends Component {
 
  constructor (props) {
    super(props)
    
    this.state = { artist: this.props.artists }
  }

  _keyExtractor = (item, index) => item.name

  
  renderArtist = ({item}) => (
    <ArtisBox artist={item} />
  );

  render () {
    return (
      <FlatList
        data={this.props.artists}
        extraData = {this.state.artist}
        keyExtractor={this._keyExtractor}
        renderItem={this.renderArtist}
      />
    )
  }
}

Manuel Esparza

student•

Para aprovechar el curso al máximo, les recomiendo usar rninit es una herramienta que permite que instalen una version especifica del react native, ya que este curso esta hecho en React Native 0.37, y con las versiones actuales se pierden algunas elementos como ListView y en los siguientes videos es algo frustrante seguir el video sin tener el mismo código que el profesor e intentar adaptar ListView a FlatList.

Manuel Esparza

student•

Una vez que ya sepan usar una version de React Native van a poder adaptarse a nuevas mas facil

Izael Ruelas Garcia

student•

Si se siguen los pasos del video no se tiene problemas con ListView en ReactNative 0.52, más adelante si no se utiliza la versión 0.37 existen problemas??

Santiago Maya

student•

intentado hacerlo con flatlist lo hice así, pero no se si esta bien o mal, cual seria la forma correcta?

export default class PlatziMusic extends Component {

 	render() {
 		const artist = {
 			image : 'https://lastfm-img2.akamaized.net/i/u/300x300/31a51f6e3ec647c8997150ec837891c7.png',
 			name : 'David Ramírez',
 			likes : 3790,
 			comments : 460
 		}

 		const perritos = Array(2).fill(artist);

 		return (
 			<View style={styles.container}>
 				<ArtistList artists={perritos} artista={artist} />
 			</View>
 		);
 	}
}

export default class ArtistList extends Component {

 	constructor(props) {
 		super(props);



 		this.state = {

 		};
 	}

 	render() {

 		console.log(this.props.artists);

 		return (
 			<FlatList
 			data={
 				this.props.artists
 			}
 			renderItem={
 				({item}) =><ArtistBox artist={this.props.artista} />
 			}
 			/>
 			);
 	}
 }

Esnor Noel Enrique Vaca Moreno

student•

Según el códgio de ArtistList.js del video podría quedar así:

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  FlatList, 
} from 'react-native';
import ArtistBox from './ArtistBox';

export default class ArtistList extends Component {
  renderItem({ item, index }) {
    return <ArtistBox artist={item} />;
  }

  render() {   
    return (
      <FlatList
        data={this.props.artists}
        renderItem={this.renderItem}
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'lightgray',
    paddingTop: 50,
  },
  image: {
    width: 150,
    height: 150,
  },
});

David Flores Medrano

student•

Gracias maestro!

Carlos David Ramírez Gómez

student•

Mi versión con FlatList
Archivo ArtistList

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import Icon from 'react-native-vector-icons/Ionicons';
import {
  Platform,
  StyleSheet,
  FlatList
} from 'react-native';
import ArtistBox from './ArtistBox';

type Props = {};
export default class ArtistList extends Component<Props> {
    constructor(props){
        super(props);
    }
    render() {
        return (
            <FlatList
                data={this.props.artists}
                renderItem={({item}) => <ArtistBox artist = {this.props.artist} />}
            />
        );
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'lightgray',
    paddingTop: 50
  }
});

Archivo App

import React, { Component } from 'react';
import Icon from 'react-native-vector-icons/Ionicons';
import {
  Platform,
  StyleSheet,
  View,
  FlatList
} from 'react-native';
import ArtistList from './components/ArtistList';

type Props = {};
export default class App extends Component{
  render() {
    const artist = {
      img : 'https://static.platzi.com/media/files/bowie_a927fdf3-b321-4a5c-99ca-239cc86c57bc.png',
      name : 'David Bowie Sensei',
      likes : 200,
      comments : 140
    }
    const artists = Array(30).fill(artist);
    return (
      <View style={styles.container}>
        <ArtistList  artists={artists} artist={artist}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'lightgray',
    paddingTop: 50
  }
});

Julio J Yépez

student•

Tip de oro ...

Julio J Yépez

student•

Mi versión con FlatList:
App.js

import React, { Component } from 'react';
import {
  StyleSheet,
  FlatList
} from 'react-native';
import ArtistBox from './components/ArtistBox'

export default class App extends Component {
  constructor( props ){
    super( props )
    const artist = {
      'imguri'  : 'https://goo.gl/A2XfWa',
      'name'    : 'Euphoria',
      'comments': 110,
      'likes'   : 50
    }
    const artists = Array(500).fill( artist )
    this.state = {
      artists // --- ES6
    }
  }
  render() {
    return (
      <FlatList
        data       = { this.state.artists }
        renderItem = { artist => <ArtistBox artist = {artist} /> }
      />
    );
  }
}
const styles = StyleSheet.create({
  container:{
    flex:1,
    backgroundColor: '#eee'
  }
})

ArtistBox.js

(...)
export default class ArtistBox extends Component {
  render() {
    const { imguri, likes, comments, name } = this.props.artist.item
    return (
      <View style={styles.artistBox}>
        <Image
          style = {styles.image}
          source = {{uri: imguri}}
        />
        <View style={styles.info}>
          <Text style={styles.name}>{name}</Text>
          <View style={styles.row}>
            <View style={styles.dato}>
              <Icon name="ios-heart-outline" size={36} color="grey"/>
              <Text style={styles.count}>{likes}</Text>
            </View>
            <View style={styles.dato}>
              <Icon name="ios-chatboxes-outline" size={36} color="grey"/>
              <Text style={styles.count}>{comments}</Text>
            </View>
          </View>
        </View>
      </View>
    )
  }
}
(...)

Julio J Yépez

student•

Esta línea …

const { imguri, likes, comments, name } = this.props.artist.item
Me fastidió demasiado … porque item no se declara … pero es obligatorio.

Katherine Vanessa HC

student•

Tienes razón, no se visualiza la imagen, si no se coloca this.props.artist.item, se conoce alguna explicación? saludos

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  ScrollView,
  Image,
  FlatList,
} from 'react-native';

import Icon from 'react-native-vector-icons/Ionicons'

import ArtistBox from './ArtistBox'

export default class proyectodiez extends Component {
  render() {
    const artist = {
      image: 'https://lastfm-img2.akamaized.net/i/u/300x300/31a51f6e3ec647c8997150ec837891c7.png',
      name: 'David Bowie',
      likes: 200,
      comments: 140
    }
    
    return (
        <FlatList
          data={Array(20).fill(artist)}
          renderItem={({item}) => <ArtistBox artist={artist} />}
        />

    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'lightgray',
    paddingTop: 50,
  },
});

AppRegistry.registerComponent('proyectodiez', () => proyectodiez);

import ArtistBox from './ArtistBox'
export default class ArtistList extends Component<{}> {
  constructor (props) {
    super(props);

    this.state = {
      dataSource: []
    };
  }
  componentWillReceiveProps(newProps){
  
  }
  render() {
    console.warn(this.props.artists)

    const artist = this.props.artists
    return (
      <FlatList
        data = {this.state.dataSource}
        renderItem={({item}) => <ArtistBox artist={artist}/>}
      />
    );
  }
}

import React, { Component } from 'react'
import { StyleSheet, FlatList } from 'react-native'

import ArtisBox from './ArtisBox'

export default class ArtistList extends Component {
 
  constructor (props) {
    super(props)
    
    this.state = { artist: this.props.artists }
  }

  _keyExtractor = (item, index) => item.name

  
  renderArtist = ({item}) => (
    <ArtisBox artist={item} />
  );

  render () {
    return (
      <FlatList
        data={this.props.artists}
        extraData = {this.state.artist}
        keyExtractor={this._keyExtractor}
        renderItem={this.renderArtist}
      />
    )
  }
}

export default class PlatziMusic extends Component {

 	render() {
 		const artist = {
 			image : 'https://lastfm-img2.akamaized.net/i/u/300x300/31a51f6e3ec647c8997150ec837891c7.png',
 			name : 'David Ramírez',
 			likes : 3790,
 			comments : 460
 		}

 		const perritos = Array(2).fill(artist);

 		return (
 			<View style={styles.container}>
 				<ArtistList artists={perritos} artista={artist} />
 			</View>
 		);
 	}
}

export default class ArtistList extends Component {

 	constructor(props) {
 		super(props);



 		this.state = {

 		};
 	}

 	render() {

 		console.log(this.props.artists);

 		return (
 			<FlatList
 			data={
 				this.props.artists
 			}
 			renderItem={
 				({item}) =><ArtistBox artist={this.props.artista} />
 			}
 			/>
 			);
 	}
 }

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  FlatList, 
} from 'react-native';
import ArtistBox from './ArtistBox';

export default class ArtistList extends Component {
  renderItem({ item, index }) {
    return <ArtistBox artist={item} />;
  }

  render() {   
    return (
      <FlatList
        data={this.props.artists}
        renderItem={this.renderItem}
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'lightgray',
    paddingTop: 50,
  },
  image: {
    width: 150,
    height: 150,
  },
});

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import Icon from 'react-native-vector-icons/Ionicons';
import {
  Platform,
  StyleSheet,
  FlatList
} from 'react-native';
import ArtistBox from './ArtistBox';

type Props = {};
export default class ArtistList extends Component<Props> {
    constructor(props){
        super(props);
    }
    render() {
        return (
            <FlatList
                data={this.props.artists}
                renderItem={({item}) => <ArtistBox artist = {this.props.artist} />}
            />
        );
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'lightgray',
    paddingTop: 50
  }
});

import React, { Component } from 'react';
import Icon from 'react-native-vector-icons/Ionicons';
import {
  Platform,
  StyleSheet,
  View,
  FlatList
} from 'react-native';
import ArtistList from './components/ArtistList';

type Props = {};
export default class App extends Component{
  render() {
    const artist = {
      img : 'https://static.platzi.com/media/files/bowie_a927fdf3-b321-4a5c-99ca-239cc86c57bc.png',
      name : 'David Bowie Sensei',
      likes : 200,
      comments : 140
    }
    const artists = Array(30).fill(artist);
    return (
      <View style={styles.container}>
        <ArtistList  artists={artists} artist={artist}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'lightgray',
    paddingTop: 50
  }
});

import React, { Component } from 'react';
import {
  StyleSheet,
  FlatList
} from 'react-native';
import ArtistBox from './components/ArtistBox'

export default class App extends Component {
  constructor( props ){
    super( props )
    const artist = {
      'imguri'  : 'https://goo.gl/A2XfWa',
      'name'    : 'Euphoria',
      'comments': 110,
      'likes'   : 50
    }
    const artists = Array(500).fill( artist )
    this.state = {
      artists // --- ES6
    }
  }
  render() {
    return (
      <FlatList
        data       = { this.state.artists }
        renderItem = { artist => <ArtistBox artist = {artist} /> }
      />
    );
  }
}
const styles = StyleSheet.create({
  container:{
    flex:1,
    backgroundColor: '#eee'
  }
})

(...)
export default class ArtistBox extends Component {
  render() {
    const { imguri, likes, comments, name } = this.props.artist.item
    return (
      <View style={styles.artistBox}>
        <Image
          style = {styles.image}
          source = {{uri: imguri}}
        />
        <View style={styles.info}>
          <Text style={styles.name}>{name}</Text>
          <View style={styles.row}>
            <View style={styles.dato}>
              <Icon name="ios-heart-outline" size={36} color="grey"/>
              <Text style={styles.count}>{likes}</Text>
            </View>
            <View style={styles.dato}>
              <Icon name="ios-chatboxes-outline" size={36} color="grey"/>
              <Text style={styles.count}>{comments}</Text>
            </View>
          </View>
        </View>
      </View>
    )
  }
}
(...)

Armando nuestro listado de artistas

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