CODEWITHSUNDEEP
javascriptreact-nativemobilenavigationreact-native-navigation
Adoga Patricia
Adoga Patricia

Reputation: 129

couldn't find a navigation object error in react native

It's my first time using react native and I want to move to another screen (slide2), I have an error which reads "We couldn't find a navigation object. Is your component inside a navigator?" they said the error is in slide one I am kind of stuck, this is how far I have gone. Please also explaining a bit will be very much appreciated and showing me what to add and where, thank you.

slideOne.js page code

import 'react-native-gesture-handler';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import React from 'react';
import {useNavigation} from '@react-navigation/native';
import SlideTwo from './SlideTwo';

import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  TextInput,
  Button,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

function SlideOne() {
const navigation = useNavigation();
  return (
    <React.Fragment>
      <View style={styles.body}>
        <View style={styles.wrapper}>
          <View style={styles.imageWrap}></View>

          <TextInput
            placeholder="What should we refer to you as?"
            placeholderTextColor="#03444F60"
            style={styles.textInput}
            underlineColorAndroid="transparent"
          />
        </View>
        <View style={styles.label}>
          <Text style={styles.labelText}>First Name</Text>
        </View>

        <View style={styles.textWrap}>
          <Text style={styles.text}>Back</Text>
          <Text style={styles.text}>Next</Text>
        </View>
        <Button
          title="Go to screen two"
          onPress={() => navigation.navigate('SlideTwo')}
        />
      </View>
    </React.Fragment>
  );
}
export default SlideOne;

this is my index.js where the routing is

    import 'react-native-gesture-handler';
    import {NavigationContainer} from '@react-navigation/native';
    import {createStackNavigator} from '@react-navigation/stack';
    import {AppRegistry} from 'react-native';
    import App from './App';
    import SlideOne from './SlideOne';
    import SlideTwo from './SlideTwo';
    import {name as appName} from './app.json';
    AppRegistry.registerComponent(appName, () => SlideOne);

app.js code

import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import {NavigationContainer} from '@react-navigation/native';

import SlideOne from './SlideOne';
import SlideTwo from './SlideTwo';

// NAVIGATION
const StackNavigator = createStackNavigator();

function App() {
  <NavigationContainer>
    <StackNavigator.Navigator>
      <StackNavigator.Screen name="SlideOne" component={SlideOne} />
      <StackNavigator.Screen name="SlideTwo" component={SlideTwo} />
    </StackNavigator.Navigator>
  </NavigationContainer>;
}

export default App;

Upvotes: 0

Views: 10743

Answers (1)

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16364

The problem is in your index.js where you use the register the SlideOne component which is not required. You should register the App component like below.

AppRegistry.registerComponent(appName, () => App);

Now the error is on your component which is SlideOne not being inside the Navigator which is true. When you run the app you skip the App and directly render the SlideOne component which is not connected to any navigator so when you try to navigate you end up in the error.

When you use your App component you render the SlideOne component which is inside a navigator so it will work as expected.

Upvotes: 1

Related Questions