How redirect a button in reactnative

user_13934941 0
Viewed 210

Hello i try to learn react-native and i try to do a button who redirect at "settings":

import Home from './components/Home'
import Settings from './components/Settings'

import * as React from 'react';

import { Text,Button,Navigation, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { useNavigation } from '@react-navigation/native';

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        
        <Tab.Screen name="Home" component={Home} />
      </Tab.Navigator>
      <Button

        title="Press me"
        color="#f194ff"
        onPress={() => navigation.navigate("Settings")}
      />
      
    </NavigationContainer>
    
  );
}

With tab navigator, component settings function but when i try with button "ReferenceError: navigation is not defined"

I know that's a simple question but i have already this error (i tried to do "onPress={() => component={Home}} but that doesn't function too

Thanks!

react-native
2 Answers

You did import { useNavigation } from '@react-navigation/native'; but you didn't use it. You probably should add:

const navigation = useNavigation();

so that you can do:

 onPress={() => navigation.navigate("Settings")}
user_134850900

You did not pass { navigation } as prop to App Try this:

import Home from './components/Home'
import Settings from './components/Settings'

import * as React from 'react';

import { Text,Button,Navigation, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { useNavigation } from '@react-navigation/native';


const Tab = createBottomTabNavigator();



export default function App({ navigation }) {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        
        <Tab.Screen name="Home" component={Home} />
      </Tab.Navigator>
      <Button

        title="Press me"
        color="#f194ff"
        onPress={() => navigation.navigate("Settings")}
      />
      
    </NavigationContainer>
    
  );
}
user_111860830
Related