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

En este video vamos a ver cómo refinar algunos detalles de la UI y la UX.

Lo primero que podemos mejorar es en la vista de detalle del artista donde en iOS se muestra la barra superior con el botón para volver al listado de artistas, pero ocupa mucho espacio sólo por un botón. Y en Android ese espacio está desaprovechado totalmente. Arreglémoslo poniendo un título en el navbar superior y mostrándolo también en Android.

En nuestro archivo app.js donde definimos las rutas de nuestra aplicación, debemos quitar la línea que mostraba o no el navbar de acuerdo si era Android o iOS, colocarle un título que diga “Comentarios” y siempre mostrar el navbar. Quedaría de la siguiente manera:

<Scene key="artistDetail" component={ArtistDetail} title="Comentarios" hideNavBar={false} />

Ahora ya podemos quitar el Text que dice “Comentarios” del ArtistDetailView así como su import.

Otra cosa que vamos a querer mejorar es la carga de la aplicación. Una vez que entramos a la aplicación aparece un botón para seguir. En primer lugar, si no lo han quitado aún, pueden hacerlo modificando el LoginView pasando el llamado a Actions.root() al callback de firebaseAuth de la siguiente manera:

firebaseAuth.signInWithCredential(credential).then((credentials) => {
    this.setState({ credentials })
    Actions.root()
}

También podemos quitar el indicador del nombre, si sigue ahí.

En segundo lugar, la carga de los artistas se puede mejorar agregando un indicador de carga como un spinner. En nuestra HomeView podemos hacer que el estado del componente inicie con artists: null y que en el render del mismo, si se cumple que !artists (es decir que es igual a null) entonces podemos mostrar un ActivityIndicator, un spinner que nos da 'react-native'. El método render del HomeView quedaría así:

render() {
    const artists = this.state.artists

    return (
      <View style={styles.container}>
        { !artists && <ActivityIndicator size="large" /> }
        { artists && <ArtistList artists={artists} /> }
      </View>
    );
  }

Como pueden ver, el spinner será de una manera en iOS y de otra en Android, de acuerdo al componente nativo que tiene cada sistema operativo para mostrar un spinner.

Por último vamos a sacarle el padding que aparece arriba del listado de artistas, pero en iOS sí queremos tener algo de padding porque tendremos el status bar del sistema operativo mismo, que muestra nuestro operador de telefonía, la hora, la batería, etc.
En este caso en vez de resolverlo con un if, el módulo Platform de 'react-native'nos da otra opción:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'lightgray',
    paddingTop: Platform.select({
      ios: 30,
      android: 10
    }),
  },
});

Si tienes alguna duda, consulta los archivos de este video en la pestaña de archivos.

En el siguiente video agregaremos una imagen de fondo en nuestra pantalla de Login.