ReferenceError: Can't find variable: navigation [React Native]

Question

Good day. I'm quite new to React Native. I am using the react-native-app-intro-slider for the app's intro/welcome screens. The intention is to then navigate to the Login Screen once the user is done or once they press the skip button.

Below is the code I have implemented in the OnboardingScreen. I am however getting an error with regards to the navigation.

import {
  StyleSheet,
  View,
  Text,
  Image, 
  StatusBar
} from 'react-native';
import AppNavigator from '../navigation/Screens';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import AppIntroSlider from 'react-native-app-intro-slider';
import Onboarding from 'react-native-onboarding-swiper';
import LoginScreen from '../screens/auth/LoginScreen';

const data = [
  {
    title: 'Header 1',
    text: 'Description.\nSay something cool',
    image: require('../assets/images/Slider_1.png'),
    bg: '#ffffff',
  },
  {
    title: 'Header 2',
    text: 'Description.\nSay something cool',
    image: require('../assets/images/Slider_2.png'),
    bg: '#ffffff',
  },
  {
    title: 'Header 3',
    text: 'Description.\nSay something cool',
    image: require('../assets/images/Slider_3.png'),
    bg: '#ffffff',
  },
];

const styles = StyleSheet.create({
  slide: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'white',
  },
  image: {
    width: 320,
    height: 320,
    marginVertical: 32,
  },
  text: {
    fontSize: 20,
    color: '#000000',
    textAlign: 'center',
  },
  title: {
    fontSize: 30,
    fontWeight: 'bold',
    color: '#000000',
    textAlign: 'center',
  },
  dotStyle: {
    backgroundColor: '#000'
  },
});

const Stack = createStackNavigator();

function Root() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Login" component={LoginScreen} />
    </Stack.Navigator>
  );
}
export default class OnboardingScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showRealApp: false,
      //To show the main page of the app
    };
  }
  _onDone = () => {
    navigation.navigate('Root', {
      screen: 'LoginScreen'
    });
    //this.props.navigation.navigate('LoginScreen');
    //this.setState({ showRealApp: true });
  };
  _onSkip = () => {
    this.setState({ showRealApp: true });
  };

  _renderItem = ({item}) => {
    return (
      <View
        style={[
          styles.slide,
          {
            backgroundColor: item.bg,
          },
        ]}>
        <Text style={styles.title}>{item.title}</Text>
        <Image source={item.image} style={styles.image} />
        <Text style={styles.text}>{item.text}</Text>
      </View>
    );
  };

  _keyExtractor = (item) => item.title;

  render() {
    return (
      <View style={{flex: 1}}>
        <StatusBar translucent backgroundColor="transparent" />
        <AppIntroSlider
          keyExtractor={this._keyExtractor}
          renderItem={this._renderItem}
          bottomButton
          showPrevButton
          onDone={this._onDone}
          showSkipButton={true}
          onSkip={this._onSkip}
          data={data}
        />
      </View>
    );
  }
}

Navigation error

Answer 1

There are various mistakes you are doing here. First, I highly recommend you to structure your RN project in a way that it matches your needs, I won't talk a lot about this but I can give you a heads up. Usually, you have a separete folder/file with the route for your app, so move all your code related to react-navigation there. Once moved, you have to create a new stack that contains your welcome screen. So, it may look like:

const AppContainer = () => (
  <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="Intro" component={OnBoardingScreen} />
      <Stack.Screen name="Login" component={LoginScreen} />
    </Stack.Navigator>
  </NavigationContainer>
)

export default AppContainer

In the above code we are introducing a new stack that will be taken as the first screen to be reached. Why is this needed? You need to tell somehow to react-navigation the screens you are using in order to navigate to them. Once added the stack, you will have access to the navigation prop. There is another change here, you have to change your App.js file with the new component we are exporting from the above code which will be the root for the project. Once you have done with this, then you can use your _onDone method like this:

_onDone = () => {
    /* use the name you used for the stack.
    Also, you don't need to specify the screen
    for this use case since you are not nesting
    the navigators */
    this.props.navigation.navigate('Intro');
  };

And that's all. Basically, you needed to add a new stack with your OnBoardingScreen and start using the navigation prop