title: Navigating between screens having two separate react native files
body: <p>I am new to react native and I want to navigate between screens. I have two sample files </p>
  
  <pre><code>#App.js
  import React from 'react';
  import { StyleSheet, Text, View } from 'react-native';
  import Home from './src/Home';
  
  export default class App extends React.Component {
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;Home/&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#FFEB3B',
      alignItems: 'center',
      justifyContent: 'center',
    },
  });
  </code></pre>
  
  <p>and another file </p>
  
  <pre><code>#Home.js
  import React from 'react';
  import { StyleSheet, Text, View, TouchableOpacity} from 'react-native';
  
  export default class Home extends React.Component {
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;TouchableOpacity style={styles.button}&gt;
            &lt;Text style={styles.buttonText}&gt;User&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
          &lt;TouchableOpacity style={styles.button}&gt;
            &lt;Text style={styles.buttonText}&gt;Contractor&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
    },
    buttonText: {
      fontSize:16,
      fontWeight:'500',
      color:'#212121',
      textAlign:'center'
    },
    button: {
      width:300,
      borderRadius: 25,
      backgroundColor:'#FCE4EC',
      marginVertical: 10,
      paddingVertical:16
  
    }
  });
  </code></pre>
  
  <p>How do I make it that when either User or Contractor are clicked in Home.js file they take me to different screens preferably using stacknavigator. I tried the documentation but can't seem to figure out the way forward.</p>