title: How to Create and Navigate Dynamic Routes or screens in React Native
body: <p>I am developing an app which has 6 icons on the dashboard which when you click it navigate you to different screens
  I created a touchable opacity to represent each of the icons
  but the problem is I have a lot of code repetition is there a better way to do it without repeating the touchable opacity?
  here is the code for the dashboard and all the items</p>
  <pre><code>export default function Home({ navigation }) {
  
  
  
   const gotoSubs = () =&gt; {
  
  
   navigation.navigate(&quot;Subscription&quot;);
  
    };
  
  
  
   const gotoLoan = () =&gt; {
      navigation.navigate(&quot;LoanRequest&quot;);
    };
  
  
  
   const [modalOPen, setModalOpen] = useState(false);
    return (
      &lt;ImageBackground
        source={require(&quot;../assets/Subs.png&quot;)}
        style={styles.container}
      &gt;
        &lt;View style={styles.contentholder}&gt;
          &lt;View style={styles.content}&gt;
            &lt;TouchableOpacity style={styles.card} onPress={gotoSubs}&gt;
              &lt;Image
                source={require(&quot;../assets/subscription.png&quot;)}
                style={styles.img}
              /&gt;
              &lt;Text style={styles.text}&gt;Subscription&lt;/Text&gt;
            &lt;/TouchableOpacity&gt;
            &lt;TouchableOpacity style={styles.card} onPress={()=&gt;setModalOpen(true)}&gt;
              &lt;Image
                source={require(&quot;../assets/loanrequest.png&quot;)}
                style={styles.img}
              /&gt;
              &lt;Text style={styles.text}&gt;Request Loan&lt;/Text&gt;
            &lt;/TouchableOpacity&gt;
          &lt;/View&gt;
          &lt;View style={styles.content}&gt;
            &lt;TouchableOpacity style={styles.card}&gt;
              &lt;Image
                source={require(&quot;../assets/pending.png&quot;)}
                style={styles.img}
              /&gt;
              &lt;Text style={styles.text}&gt;Pending Loan Request&lt;/Text&gt;
            &lt;/TouchableOpacity&gt;
            &lt;TouchableOpacity style={styles.card}&gt;
              &lt;Image
                source={require(&quot;../assets/lonepayment.png&quot;)}
                style={styles.img}
              /&gt;
              &lt;Text style={styles.text}&gt;Loan Payment&lt;/Text&gt;
            &lt;/TouchableOpacity&gt;
          &lt;/View&gt;
          &lt;View style={styles.content}&gt;
            &lt;TouchableOpacity style={styles.card}&gt;
              &lt;Image
                source={require(&quot;../assets/lonehistory.png&quot;)}
                style={styles.img}
              /&gt;
              &lt;Text style={styles.text}&gt;Loan History&lt;/Text&gt;
            &lt;/TouchableOpacity&gt;
            &lt;TouchableOpacity style={styles.card}&gt;
              &lt;Image
                source={require(&quot;../assets/recovery.png&quot;)}
                style={styles.img}
              /&gt;
              &lt;Text style={styles.text}&gt;Recovery&lt;/Text&gt;
            &lt;/TouchableOpacity&gt;
          &lt;/View&gt;
        &lt;/View&gt;
        &lt;Modal visible={modalOPen} style={styles.Loanrequest}&gt;
          &lt;View style={styles.Loanrequest}&gt;
           &lt;TouchableOpacity style={styles.Loancard} onPress={()=&gt;setModalOpen(false)}&gt;
              &lt;Text style={styles.text}&gt;User has not subscribe&lt;/Text&gt;
            &lt;/TouchableOpacity&gt;
          &lt;/View&gt;
        &lt;/Modal&gt;
        &lt;StatusBar style=&quot;auto&quot; /&gt;
      &lt;/ImageBackground&gt;
    );
  }
  </code></pre>
  <p>here is the codes for my navigation file</p>
  <pre><code>import {createStackNavigator} from 'react-navigation-stack';
   import {createAppContainer} from 'react-navigation';
  import Home from '../screens/Home';
  import Subscription from '../screens/Subscription';
  import LoanRequest from '../screens/LoanRequest'
  
  
  
  const screens = {
      Home:{
          screen: Home,
          navigationOptions:{
              title:'',
              headerStyle:{
                  backgroundColor:'#122C91'
              }
          }
      },
   
      Subscription:{
          screen: Subscription,
          navigationOptions:{
              color:'#fff',
              headerStyle:{
                  backgroundColor:'#122c91',
              },
              headerTintColor: '#fff',
          }
      },
      LoanRequest: {
          screen: LoanRequest,
          navigationOptions: {
              color:'#fff',
              headerStyle:{
                  backgroundColor:'#122c91',
              },
              headerTintColor: '#fff', 
          }
      },
      LoanPayment: {
          screen: Loanpayment,
          navigationOptions: {
              color:'#fff',
              headerStyle:{
                  backgroundColor:'#122c91',
              },
              headerTintColor: '#fff', 
          }
      },
      Loanpending: {
          screen: Loanpending,
          navigationOptions: {
              color:'#fff',
              headerStyle:{
                  backgroundColor:'#122c91',
              },
              headerTintColor: '#fff', 
          }
      }
   
  
  }
  const HomeStack = createStackNavigator(screens);
  export default createAppContainer(HomeStack);
  </code></pre>
  <p>is there a way of making it better link including all in a flatlist?</p>