skip to Main Content

I have multiple page in my project, I want to go to other page when I will click on "Hello World One" and "Hello World Two" How can I do that?
Thanks in advance for your support.

Please check the image link for better understanding my question- enter image description here

import React, {  useState } from 'react';
    
import { View, Button, Text, FlatList, Dimensions, Image, StyleSheet, ScrollView, TouchableOpacity, ImageBackground, SafeAreaView } from 'react-native';
    
     const data = [
    {id: 'a', value: 'From here Navigate to page one ', },
    {id: 'b', value: 'From here Navigate to page two'},
    {id: 'c', value: 'From here Navigate to page three'},
    {id: 'd', value: 'From here Navigate to page four'},
    {id: 'e', value: 'E'},
    {id: 'f', value: 'F'},
  ];
      const numColumns = 2;
      const size = Dimensions.get('window').width/numColumns;
      const styles = StyleSheet.create({
        itemContainer: {
          width: size,
          height: size,
        },
        item: {
          flex: 1,
          margin: 3,
          textAlign: "center",
          textAlignVertical:"center",
          backgroundColor: 'lightblue',
        }
      });
      
      const Testing = ({ navigation }) => {
        return (
          <FlatList
            data={data}
            renderItem={({item}) => (
              <View style={styles.itemContainer}>
                <Text style={styles.item}>{item.value}</Text>
              </View>
            )}
            keyExtractor={item => item.id}
            numColumns={numColumns} />
        );
      }
    
    
    export default Testing;

3

Answers


  1. You can wrap the div in a Pressable (or TouchableOpacity, or Button from library, or anything you can press) and adding an onPress event;

    const Testing = ({ navigation }) => {
        return (
          <FlatList
            data={data}
            renderItem={({item}) => (
              <Pressable onPress={() => console.log("I've been pressed. Replace this console log with whatever you're using to switch pages")}>
                <View style={styles.itemContainer}>
                  <Text style={styles.item}>{item.value}</Text>
                </View>
              </Pressable>
            )}
            keyExtractor={item => item.id}
            numColumns={numColumns} />
        );
      }
    
    Login or Signup to reply.
  2.       const data = [
            {id: 'a', value: 'ScreenOne', },
            {id: 'b', value: 'ScreenTwo'},
          ];
        renderItem={({item}) => (
                <TouchableOpacity onPress={() => navigation.navigate(item.value)}>
                  <View style={styles.itemContainer}>
                    <Text style={styles.item}>{item.value}</Text>
                  </View>
                </TouchableOpacity>
     )}
    

    make sure you have ScreenOne , ScreenTwo in navigation

      <Stack.Screen name="ScreenOne" component={ScreenOne}/>
      <Stack.Screen name="ScreenTwo" component={ScreenTwo}/>
    
    Login or Signup to reply.
  3. First you have to update your data array and add a property navigateTo and in this property add the screen name which you want to navigate to.

    Note:

    Use the name which you have use in your navigation code.

    const data = [
        {id: 'a', value: 'From here Navigate to page one ',navigateTo:"SCREEN_NAME" },
        {id: 'b', value: 'From here Navigate to page two',navigateTo:"SCREEN_NAME"},
        {id: 'c', value: 'From here Navigate to page three',navigateTo:"SCREEN_NAME"},
        {id: 'd', value: 'From here Navigate to page four',navigateTo:"SCREEN_NAME"},
        {id: 'e', value: 'E',navigateTo:"SCREEN_NAME"},
        {id: 'f', value: 'F',navigateTo:"SCREEN_NAME"},
      ];
    

    Now update your JSX and add a TouchableOpacity and add an onPress event. When its fired simply navigate to that screen.

     const Testing = ({ navigation }) => {
            return (
              <FlatList
                data={data}
                renderItem={({item}) => (
                  <TouchableOpacity onPress={()=>navigation.navigate(item.navigateTo)} style={styles.itemContainer}>
                    <Text style={styles.item}>{item.value}</Text>
                  </TouchableOpacity>
                )}
                keyExtractor={item => item.id}
                numColumns={numColumns} />
            );
          }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search