Passando parâmetros por rotas em React Native

Criando uma nova aplicação, tive a necessidade de passar um determinado parâmetro que estava em um input, de modo que em uma tela seguinte o título seria o que foi digitado nele. Utilizei um método aprendido recentemente que pode auxiliar os que desejam saber como fazer isso, neste artigo explicarei como executei a resolução.

O Problema -

Como explicado antes, eu quero passar um parâmetro dinâmico escrito em um input e substituir por um título em outra página. Mas como fazer isso? Meu código estava do seguinte modo:

(...)

export function NewGroup(){

    const navigation = useNavigation();

    function handleNew(){
        navigation.navigate('players',{"teste"});
    }


    return(
        <Container>
            <Header showBackButton/>

            <ContentTwo>
                <Icon/>

                <Highlight
                    title="Nova Turma"
                    subtitle="Crie turmas e adicione pessoas"
                />

                <Input
                    placeholder="Nome da turma..."
                    placeholderTextColor= "#7C7C8A"
                />  
            </ContentTwo>

            <Button
                title="Criar"
                onPress={handleNew}
            />  
        </Container>
    );
}

Neste código, temos a base de um componente que tem um input e button. Neste botão,temos uma função chamada handleNew que quando clicada executa a navegação para outra tela com nome player.

A Solução -

Para que no clique do botão eu não só passe para a próxima página, como também buscar o valor descrito dentro do input, é necessário fazer uma manipulação de estado. Com isso, utilizo o hookuseState e crio uma constante que irá pegar o parâmetro escrito. O código ficará do seguinte modo:

export function NewGroup(){

    const [group, setGroup] = useState('');

    const navigation = useNavigation();

    function handleNew(){
        navigation.navigate('players',{ group });
    }


    return(
        <Container>
            <Header showBackButton/>

            <ContentTwo>
                <Icon/>

                <Highlight
                    title="Nova Turma"
                    subtitle="Crie turmas e adicione pessoas"
                />

                <Input
                    placeholder="Nome da turma..."
                    placeholderTextColor= "#7C7C8A"
                    onChangeText={setGroup}
                />  
            </ContentTwo>

            <Button
                title="Criar"
                onPress={handleNew}
            />  
        </Container>
    );
}

Neste código, criamos uma const que guardará groupe setGroup. Ao adicionar no input o setGroup receberá tudo que foi escrito no group. E adicionamos na navegação da página o groupque irá ser carregado para a tela seguinte.

Recebendo o parâmetro de outra tela -

Para receber o que foi escrito no input da tela anterior, fazemos o seguinte:

type RouteParams = {
    group: string;
}



export function Players (){

    const [team, setTeam] = useState('Time A');
    const [players, setPlayers] = useState([]);

    const route = useRoute();
    const { group } = route.params as RouteParams;

return(
        <Container>
            <Header showBackButton/>

            <ContentOne>
                <Highlight 
                title={group}
                subtitle="Adicione e separe os times"
                /> 
            </ContentOne>

Importamos o useRoute que é um hook que acessa propriedades de outras telas, e nela criamos um hook com nome route que irá receber esse hook. Após isso, nós desestruturamos dentro de uma const o parâmetro da tela anterior, e nele será recebido: route.params as RouteParams; esse caminho se deve a tipagem necessária para que o typescript pudesse reconhecer que parâmetros ele recebe, que é uma string. Logo após isso, escolhemos onde será trazido o parâmetro que escolhi ser o título da página.

Vejamos o resultado:

Ao passar o parâmetro digitado, o título da tela seguinte irá mudar do seguinte modo:

Esse foi o método que utilizei para resolver esse problema, espero que esse artigo tenha o ajudado. Obrigado por ler até aqui!!!

Comments

[Rodrigo Cordeiro]

Costumo utilizar da forma abaixo, assim consigo pegar outros elementos da rota (além dos parâmetros) e deixar uma interface contendo todas as rotas (passando também para outros pontos, como o navigation)

  const { params } = useRoute<RouteProp<RoutesInterface, "Route_name">>();