title: Can someone help me with a React Navigation screen change problem?
body: <p>I'm having a problem getting my React Navigation to actually transition screens. I've used it successfully before and I cannot figure out what my problem is this time. I click my button and no transition happens. I think it might be a problem with the inline onPress not running....does it have to be in Main Button? Or does the inline code on App.js override anything in MainButton.js.</p>
  <p>Also...NarScreen is the screen I'm trying to get to.</p>
  <p>FILE 1: App.js</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import 'react-native-gesture-handler';
  import React from 'react';
  import { View, Text, StyleSheet, Image } from 'react-native';
  import { NavigationContainer } from '@react-navigation/native';
  import { createStackNavigator } from '@react-navigation/stack';
  import { color } from 'react-native-reanimated';
  import MainButton from './components/MainButton';
  import NarScreen from './screens/NarScreen.js'
  
  function HomeScreen({ navigation }) {
    return(
        &lt;View style={styles.background}&gt;
          &lt;View style={styles.logo}&gt;
            &lt;Image source={require('./components/HNS1.png')} style={styles.image} resizeMode='contain' /&gt;
          &lt;/View&gt;
          &lt;View style={styles.buttons}&gt;
          &lt;MainButton onPress={() =&gt; navigation.navigate('Nar')}&gt;NAR Test&lt;/MainButton&gt;
          &lt;MainButton&gt;Tripoli Test&lt;/MainButton&gt;
          &lt;/View&gt;
        &lt;/View&gt;
     
    );
  }
  
  function Nar({ navigation }) {
    return(
     &lt;NarScreen /&gt;
    )
  }
  
  
  const Stack = createStackNavigator();
  
  function App() {
    return(
      &lt;NavigationContainer&gt;
        &lt;Stack.Navigator&gt;
          &lt;Stack.Screen name="Home" component={HomeScreen} /&gt;
          &lt;Stack.Screen name="Nar" component={Nar} /&gt;
        &lt;/Stack.Navigator&gt;
      &lt;/NavigationContainer&gt;
    );
  
  }
  
  const styles = StyleSheet.create({
    background: {
      backgroundColor: '#00629B',
      flex: 1,
    },
    buttons: {
      marginTop: "20%",
      marginLeft: 10,
    },
    image: {
      width: '80%',
      height: 300,
      borderRadius: 20,
    },
    logo: {
      borderRadius: 200,
      marginTop: '30%',
      alignItems: 'center'
    },
    });
  
  
    export default App;
    </code></pre>
  </div>
  </div>
  </p>
  <p>File 2: NarScreen.js</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import React from 'react';
  import { View, Text, Button, StyleSheet } from 'react-native';
  
  const NarScreen = props =&gt; {
      return(
          &lt;View&gt;
              &lt;Text&gt;BigScreen!&lt;/Text&gt;
          &lt;/View&gt;
      )
  }
  export default NarScreen;</code></pre>
  </div>
  </div>
  </p>
  <p>FILE 3: MainButton.js</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import React from 'react';
  import {View, Text, StyleSheet, TouchableOpacity, } from 'react-native';
  
  const MainButton = props =&gt; {
      return &lt;TouchableOpacity&gt;
          &lt;View style={styles.button}&gt;
              &lt;Text style={styles.buttonText}&gt;{props.children}&lt;/Text&gt;
          &lt;/View&gt;
      &lt;/TouchableOpacity&gt;
  }
  
  const styles = StyleSheet.create({
      button: {
          backgroundColor: "#FCD757",
          paddingVertical: 30,
          paddingHorizontal: 30,
          height: 100,
          width: 300,
          marginTop: "10%",
          borderRadius: 10,
          marginLeft: '12%',
          justifyContent: 'space-between',
          
      },
      buttonText: {
          color: 'black',
          fontSize: 26,
          textAlign: 'center',
          
      }
  
  })
  
  export default MainButton;</code></pre>
  </div>
  </div>
  </p>