Passando parâmetros por rotas em React Native
Tags: react, reactnative, programming, android
Published: 2023-05-24 20:23:46

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 hook`useState` 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á `group`e `setGroup`. Ao adicionar no `input` o `setGroup` receberá tudo que foi escrito no `group`. E adicionamos na navegação da página o `group`que 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:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zzwl33rtcq7bikp9b9uz.jpeg)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/izu3i5llatr1mcjwpou3.jpeg)

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