I am just starting with React, I spent some days learning about it. I want to navigate my app normally before futher studying, I hope someone can correct my code. I am not achieving what I want.

I have this on my App.js

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { colors } from './src/utils/colors';
import { Telefone } from './src/telefone';
import { Menu } from './src/menu';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Procurar } from './src/procurar';
import  PassageiroFrm  from './src/PassageiroFrm';


function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function ProcurarScreen() {
  return (
      <Procurar></Procurar>
   
  );
}

function PassageiroScreen(navigation) {
  return (
      <PassageiroFrm></PassageiroFrm>
   
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1,  justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}
function LoginScreen() {
  return (
      <Telefone></Telefone>
  
  );
}

const Tab = createBottomTabNavigator();


export default function App({navigation}) {
  return (
    <View style={styles.container}>
   
      
    
      <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="login" component={LoginScreen} />
        <Tab.Screen name="cadastro" component={PassageiroScreen} />
        <Tab.Screen name="início" component={ProcurarScreen} />
        <Tab.Screen name="corridas" component={SettingsScreen} />

      </Tab.Navigator>
    </NavigationContainer>


    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.azul,
   
    
  },
});

I can navigate fine from this screen. But how about navigation on other screens.
This component doesn't navigate to "cadastro" when the button is clicked.

 import React from 'react';
import {View, Text, StyleSheet, Image} from 'react-native';
import {TextInput} from 'react-native-paper';
import { colors } from './utils/colors';
import { Button } from 'react-native';
import PassageiroFrm from './PassageiroFrm';
import { Procurar } from './procurar';
import { Link } from 'react-router-dom';
import { useNavigation } from '@react-navigation/native';

let i = 0;



export const Telefone = ( {}) => (


   

    <View style={StyleSheet.container}>
     <View style={{ justifyContent :'center', alignItems: 'center'}} >
       <Image  source={ require("./imagens/placa.jpg")}></Image>
       </View>
       <TextInput label="Entre com o seu telefone"/>
       <Button  color="#F0C228"    
       
       
       style={{ fontColor:"red",  buttonText: {
        color: "black",
      } }}    onPress={() => regiao()} title="Entrar">   </Button> 
       

        <Text>Ainda não sou passageiro</Text>
        <Button  color="#F0C228" onPress={() =>  navigation.navigate('cadastro')  } title="ser um passageiro">   </Button>
 

    </View>
    )

    function ProcurarScreen() {
        const navigation = useNavigation();
      }

    const styles = StyleSheet.create({
        container: {
            flex: 1,
        },
        text: {
            color: colors.branco
        }
    })

CodePudding user response：

I would try the following in your Telefone component:

import React from 'react';
import {View, Text, StyleSheet, Image} from 'react-native';
import {TextInput} from 'react-native-paper';
import {colors} from './utils/colors';
import {Button} from 'react-native';
import PassageiroFrm from './PassageiroFrm';
import {Procurar} from './procurar';
import {Link} from 'react-router-dom';
import {useNavigation} from '@react-navigation/native';

let i = 0;

export const Telefone = () => {
  const navigation = useNavigation();
  return (
    <>
      <View style={StyleSheet.container}>
        <View style={{justifyContent: 'center', alignItems: 'center'}}>
          <Image source={require('./imagens/placa.jpg')}></Image>
        </View>
        <TextInput label="Entre com o seu telefone" />
        <Button
          color="#F0C228"
          style={{
            fontColor: 'red',
            buttonText: {
              color: 'black',
            },
          }}
          onPress={() => regiao()}
          title="Entrar">
          {' '}
        </Button>

        <Text>Ainda não sou passageiro</Text>
        <Button color="#F0C228" onPress={() => navigation.navigate('cadastro')} title="ser um passageiro">
          {' '}
        </Button>
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  text: {
    color: colors.branco,
  },
});

So basically, I moved const navigation = useNavigation(); inside Telefone component.

Good luck!

CodePudding user response：

Actually I changed this

     <Tab.Screen name="login" component={LoginScreen} />

to:

      <Tab.Screen name="cadastro" component={PassageiroFrm} /> //Component itself not a function

so the navigation was available on the component

export const Telefone = ({navigation}) => {


  return (
    <>
      <View style={StyleSheet.container}>
        <View style={{justifyContent: 'center', alignItems: 'center'}}>
          <Image source={require('./imagens/taxi_placa.jpg')}></Image>
        </View>
        <TextInput label="Entre com o seu telefone" />
        <Button
          color="#F0C228"
          style={{
            fontColor: 'red',
            buttonText: {
              color: 'black',
            },
          }}
          onPress={() => regiao()}
          title="Entrar">
          {' '}
        </Button>

        <Text>Ainda não sou passageiro</Text>
        <Button color="#F0C228" onPress={() => navigation.navigate('cadastro')} title="ser um passageiro">
          {' '}
        </Button>
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  text: {
    color: colors.branco,
  },
});