How to Create and Navigate Dynamic Routes or screens in React Native

Question

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

export default function Home({ navigation }) {



 const gotoSubs = () => {


 navigation.navigate("Subscription");

  };



 const gotoLoan = () => {
    navigation.navigate("LoanRequest");
  };



 const [modalOPen, setModalOpen] = useState(false);
  return (
    <ImageBackground
      source={require("../assets/Subs.png")}
      style={styles.container}
    >
      <View style={styles.contentholder}>
        <View style={styles.content}>
          <TouchableOpacity style={styles.card} onPress={gotoSubs}>
            <Image
              source={require("../assets/subscription.png")}
              style={styles.img}
            />
            <Text style={styles.text}>Subscription</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.card} onPress={()=>setModalOpen(true)}>
            <Image
              source={require("../assets/loanrequest.png")}
              style={styles.img}
            />
            <Text style={styles.text}>Request Loan</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.content}>
          <TouchableOpacity style={styles.card}>
            <Image
              source={require("../assets/pending.png")}
              style={styles.img}
            />
            <Text style={styles.text}>Pending Loan Request</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.card}>
            <Image
              source={require("../assets/lonepayment.png")}
              style={styles.img}
            />
            <Text style={styles.text}>Loan Payment</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.content}>
          <TouchableOpacity style={styles.card}>
            <Image
              source={require("../assets/lonehistory.png")}
              style={styles.img}
            />
            <Text style={styles.text}>Loan History</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.card}>
            <Image
              source={require("../assets/recovery.png")}
              style={styles.img}
            />
            <Text style={styles.text}>Recovery</Text>
          </TouchableOpacity>
        </View>
      </View>
      <Modal visible={modalOPen} style={styles.Loanrequest}>
        <View style={styles.Loanrequest}>
         <TouchableOpacity style={styles.Loancard} onPress={()=>setModalOpen(false)}>
            <Text style={styles.text}>User has not subscribe</Text>
          </TouchableOpacity>
        </View>
      </Modal>
      <StatusBar style="auto" />
    </ImageBackground>
  );
}

here is the codes for my navigation file

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);

is there a way of making it better link including all in a flatlist?

Answer 1

You can create common function and pass the screen you want to navigate, so only in one method you can navigate to desired screen:

export default function Home({ navigation }) {



 const gotoScreen = (screenName) => {
   navigation.navigate(screenName);
 };


 const [modalOPen, setModalOpen] = useState(false);
  return (
    <ImageBackground
      source={require("../assets/Subs.png")}
      style={styles.container}
    >
      <View style={styles.contentholder}>
        <View style={styles.content}>
          <TouchableOpacity style={styles.card} onPress={()=>gotoScreen("Subscription")}>
            <Image
              source={require("../assets/subscription.png")}
              style={styles.img}
            />
            <Text style={styles.text}>Subscription</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.card} onPress={()=>setModalOpen(true)}>
            <Image
              source={require("../assets/loanrequest.png")}
              style={styles.img}
            />
            <Text style={styles.text}>Request Loan</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.content}>
          <TouchableOpacity style={styles.card}>
            <Image
              source={require("../assets/pending.png")}
              style={styles.img}
            />
            <Text style={styles.text}>Pending Loan Request</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.card}>
            <Image
              source={require("../assets/lonepayment.png")}
              style={styles.img}
            />
            <Text style={styles.text}>Loan Payment</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.content}>
          <TouchableOpacity onPress={()=>{goToScreen("LoanRequest")}} 
            style={styles.card}>
            <Image
              source={require("../assets/lonehistory.png")}
              style={styles.img}
            />
            <Text style={styles.text}>Loan History</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.card}>
            <Image
              source={require("../assets/recovery.png")}
              style={styles.img}
            />
            <Text style={styles.text}>Recovery</Text>
          </TouchableOpacity>
        </View>
      </View>
      <Modal visible={modalOPen} style={styles.Loanrequest}>
        <View style={styles.Loanrequest}>
         <TouchableOpacity style={styles.Loancard} onPress={()=>setModalOpen(false)}>
            <Text style={styles.text}>User has not subscribe</Text>
          </TouchableOpacity>
        </View>
      </Modal>
      <StatusBar style="auto" />
    </ImageBackground>
  );
}