Workshop – React Native – The News App

馃幁 Idioma/language

Espa帽ol

Overview

In this workshop we are going to create a mobile application using React Native, for this we will use Expo to generate the initial boilerplate and modify what is necessary to develop the application that will be described below.

The idea is to create a News application that includes at least the following functionalities:

  • Being able to show a list of the main News (Including Title and photo)
  • Being able to show the list by different countries from a list.
  • From an input that the user enters and returns only the news that contain said word or begin with it.
  • Being able to go to the detail of the character where you should be able to select two subscreens:
    • See the description of the info provided by the api (the free version provides only a couple of lines), author of the info, date published
    • See a link where you can access the resources of the original information.

screens configuration

we would need the following screens:

  • Home: will contain the search bar and the News list
  • Detail: when the user selects a News, they must enter this screen with some lower tabs to switch between Information and Links. Initially the first one will be displayed.
  • Information: will contain the detailed information of the news
  • Link: will contain a link that will redirect us to the origin of the information.

Let’s start

Descripci贸n

En este workshop vamos a crear una aplicaci贸n mobile utilizando React Native, para ello usaremos Expo para generar el boilerplate inicial y sobre el modificar lo necesario para elaborar la aplicaci贸n que se describir谩 a continuaci贸n.

La idea es crear una aplicaci贸n sobre Noticias en la cual se incluyan por lo menos las siguientes funcionalidades:

  • Poder mostrar un listado de las principales Noticias (Incluyendo Titulo y foto)
  • Poder mostrar ellistado por distintos paises a partir de una lista.
  • a partir de un input que ingrese el usuario y devuelva solo las noticias que contengan dicha palabra o comienzen con ella.
  • Poder ir al detalle del personaje donde se deben poder seleccionar dos subpantallas:
    • Ver la descripci贸n de la info otorgada por la api (la verdion free otorga solo un par de lineas),autor de la info , feche publicada
    • Ver un link a donde poder acceder a los recursos de la informacion original.

Configuraci贸n de Screens

nececsitar铆amos las siguientes pantallas:

  • Home: contendr谩 la barra de b煤squeda y el listado de Noticias
  • Detail: cuando el usuario seleccione una Noticia se deber谩 ingresar a esta pantalla con unos tabs inferiores para ir a switcheando entre Information y Links. Inicialmente se mostrar谩 la primera.
  • Information: contendr谩 la informaci贸n detallada de la noticia
  • Link: contendr谩 un link que nos redirigira al origen de la informacion.

Starting

Prerequisites: To run the react-native project on your mobile or emulator you need some more specific settings, I recommend this link (https://facebook.github.io/react-native/docs/getting-started) if you do not already have the recommended settings on your machine.

  1. Install Git e NodeJS, in case you don’t have them yet.

  2. Clone repository:

    $ git clone https://github.com/Hans-Rafael/React-Native-NewsApp.git

  3. Go to project folder:

    $ cd News

  4. Install all dependences:

    $ npm install ou yarn

  5. Finally run:

    $ react-native run-android (Android)
or
$ react-native run-ios (IOS)

    or or $ npm start

    
Now you will see the app running on your mobile phone or emulator :D

GitHub

View Github