Integrações com React Native - #10 RN + Context API

Nesse tutorial aprenderemos como propagar um estado da aplicação por todas as screens, podendo acessar determinadas informações de qualquer ponto do app.

Compartilhando estados no React Native

O compartilhamento de estados é muito comum por exemplo em ícones de notificação, nomes de usuários e outras situações em que precisamos persistir uma informações em várias partes do app.

Lembre-se que o compartilhamento de estados só dura enquanto o app estiver aberto. Se precisar persistir informações mesmo após o fechamento do app utilize AsyncStorage.

context/Provider.js

Vamos criar primeiramente um diretório context e dentro dele um arquivo chamado Provider.js

import React,{createContext,useState} from 'react';

export const Context = createContext();

export default function Provider({children})
{
    const [pokemons, setPokemons] = useState('100 pokemons');

    return (
        <Context.Provider value={{pokemons, setPokemons}}>
            {children}
        </Context.Provider>
    )
}

Repare no código acima que o que estiver dentro da propriedade value é o que vai ser replicado para as demais screens.

App.js

No entry point App.js vamos englobar todas as screens com o Provider:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import {Home,Cadastro,Login,Busca,Pokedex} from './views';
import Provider from "./context/Provider";

export default function App() {
    const Stack = createStackNavigator();

    return (
        <Provider>
          <NavigationContainer>
              <Stack.Navigator>
                  {/*<Stack.Screen name="Login" component={Login} options={{headerShown:false}} />*/}
                  <Stack.Screen name="Home" component={Home} options={{headerShown:false}} />
                  <Stack.Screen name="Cadastro" component={Cadastro} options={{headerShown:false}} />
                  <Stack.Screen name="Busca" component={Busca} options={{headerShown:false}} />
                  <Stack.Screen name="Pokedex" component={Pokedex} options={{headerShown:false}} />
              </Stack.Navigator>
          </NavigationContainer>
        </Provider>
    );
}

views/Home.js

Agora na views, podemos acessar os valores dos providers:

import React, {useContext, useEffect} from 'react';
import {Image, View, TouchableOpacity,Text} from "react-native";
import {css} from "../assets/css/Css";
import {Context} from "../context/Provider";


export default function Home({navigation}) {

    const {pokemons} = useContext(Context);

    return (
        <View style={css.container}>
            <Text>{pokemons}</Text>
        </View>
    )
}

views/Cadastro.js

Podemos também mudar os estados para todas as screens da aplicação:

import React, {useState, useEffect, useContext} from 'react';
import {Context} from "../context/Provider";

export default function Cadastro({navigation}) {

    const {pokemons,setPokemons} = useContext(Context);

    useEffect(()=>{
        setPokemons('101 Pokemons');
    },[]);
}

No código acima, não esqueça de importar o useContext e o {Context}.

Sucesso nos códigos e na vida!

Precisa de aulas particulares? webdesignemfoco@gmail.com