Migrando para function component no React-Native com React-Navigation

Nesse tutorial veremos como passar uma class component (statefull), para uma function component (stateless).

Nota: Vocês precisam de um conhecimento em React-Native e React-Navigation

ReactJS

Class component para function component

Irei abordar esse assunto, pois eu passei por um problema quando estava tentando personalizar o header. Era necessário adicionar um icon de voltar goBack() e usar a propriedade navigation para fazer isso. Acredito que esse problema seja de outros, então acompanhe esse tutorial para saber como resolver.

Aqui temos a variável Root que chama as screens para renderizar na tela.

Root.js

Abaixo temos uma class component (statefull) no react-native.

class.js

Isso seria uma class component (statefull) muito legal, mas com a vinda do hooks, muitas pessoas estão migrando para o function component (stateless), então iremos ver como ela ficará

function.js

Nada demais até aqui, o grande desafio é quando você quer customizar o header do react-navigation com uma function component. Na class component isso é de boas, é só você passa um static navigationOptions dentro da class, assim você terá acesso ao navigation que está como props dentro da class

classStatic.js

Porém, na function component isso é um pouco diferente, você precisa exportar uma function navigationOptions para dentro do Root, por padrão a function irá receber o navigation como props

functionExport.js

A ideia aqui seria pegar o navigation para customizar o header do react-navigation. Depois no root iremos importar a function que irá receber as props por padrão para usarmos no navigationOptions lá na function component

É basicamente isso!

Conclusão e resumo

Espero que esse artigo tenha te ajudado, basicamente eu escrevi ele porque o

Samuel Mataraso

estava passando por esse problema e me deu essa sacada para escrever esse artigo. O problema seria customizar o header em um function component, porque ele precisava da props navigation. Obrigado ao

Sibelius Seraphini

por ajudar a gente com esse problema.

github: https://github.com/wellers0n

linkedin: https://www.linkedin.com/in/wellerson-moreira-a7308117a/

Obrigado!!!