title: ReferenceError: Can't find variable: navigation [React Native]
body: <p>Good day. I'm quite new to React Native. I am using the <a href="https://github.com/Jacse/react-native-app-intro-slider" rel="nofollow noreferrer">react-native-app-intro-slider</a> 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. </p>
  
  <p>Below is the code I have implemented in the OnboardingScreen. I am however getting an error with regards to the navigation. </p>
  
  <pre><code>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 (
      &lt;Stack.Navigator&gt;
        &lt;Stack.Screen name="Login" component={LoginScreen} /&gt;
      &lt;/Stack.Navigator&gt;
    );
  }
  export default class OnboardingScreen extends Component {
    constructor(props) {
      super(props);
      this.state = {
        showRealApp: false,
        //To show the main page of the app
      };
    }
    _onDone = () =&gt; {
      navigation.navigate('Root', {
        screen: 'LoginScreen'
      });
      //this.props.navigation.navigate('LoginScreen');
      //this.setState({ showRealApp: true });
    };
    _onSkip = () =&gt; {
      this.setState({ showRealApp: true });
    };
  
    _renderItem = ({item}) =&gt; {
      return (
        &lt;View
          style={[
            styles.slide,
            {
              backgroundColor: item.bg,
            },
          ]}&gt;
          &lt;Text style={styles.title}&gt;{item.title}&lt;/Text&gt;
          &lt;Image source={item.image} style={styles.image} /&gt;
          &lt;Text style={styles.text}&gt;{item.text}&lt;/Text&gt;
        &lt;/View&gt;
      );
    };
  
    _keyExtractor = (item) =&gt; item.title;
  
    render() {
      return (
        &lt;View style={{flex: 1}}&gt;
          &lt;StatusBar translucent backgroundColor="transparent" /&gt;
          &lt;AppIntroSlider
            keyExtractor={this._keyExtractor}
            renderItem={this._renderItem}
            bottomButton
            showPrevButton
            onDone={this._onDone}
            showSkipButton={true}
            onSkip={this._onSkip}
            data={data}
          /&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/agPN8.png" rel="nofollow noreferrer">Navigation error</a></p>