Auth

Sledeća aplikacija će se baviti autentifikacijom kao jednom od najčešće potrebnih funkcionalnosti modernih mobilnih aplikacija.
U te svrhe koristićemo Firebase.

App koji predstavlja root naše aplikacije, i onda ćemo ga importovati unutar oba index fajla i to je sve sto ce oni raditi, samo importovati app i registrovati komponentu.
Napravićemo novi folder sa nazivom src unutar koga ćemo smestiti našu app komponentu

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class App extends Component {
  render() {
    return (
      <View>
        <Text> Hello World! </Text>
      </View>
    );
  }
}

export default App;

Za sada neka samo prikazuje običan tekst. Sada je josš samo potrebno da odemo u naše index fajlove obrišemo sav kod koji je tamo i napisemo

import { AppRegistry } from 'react-native';
import App from './src/app';

AppRegistry.registerComponent('auth', () => App);

Čime smo jednostavno importovali našu komponentu i registrovali je. Sada kada uradite reload simulatora videćete u gornjem levu uglu tekst "Hello World!".

I na ovaj način dobijamo tu mogućnost da menjamo samo jedan fajl (app.js) i iste promene se dešavaju i na androidu i na ios uredjajima, samim tim uspeli smo da centralizujemo kod.

Želimo da naša aplikacija izlgeda otprilike ovako

Imaće header, dva input polja za email i šifru korisnika i na dnu će imati dugme čijim klikom će se ulogovati u aplikaciju. Za sada je plan da nakon uspešnog logovanja korisnik na ekranu vidi samo dugme za log out. Želimo da još uvek sve ostane jednostavno.

Posmatrajući ovu skicu možemo uočiti da se ponavljaju neke komponente iz prethodne aplikacije, kao što je na primer header, a i input polja mogu predstavljati jednu Card komponentu sa CardSection komponentama unutar nje. Tako da ćemo iskoristi komponente koje smo već pisali. (Radi vežbe vi ih možete napisati ponovo ili napraviti totalno drugačije, ovde ćemo se pridržavati već napravljenih)
Za početak pravimo unutar foldera src novi folder components i tu smeštamo fajlove komponenti. Iskoristićemo sledeće komponente : Header, Card, CardSection i Button.

U slučaju da nema ove fajlove uvek ih možete naći na git repository-mu koji prati ovaj tutorijal.