Navigation With Flatlist Data in React Native - react-native

Question

Hello Here i have some data as the form of Flatlist and i have extracted it, now i want to move on that
screen that i have clicked on example
if i clicked on screen A then i will moved to screen A,
if i clicked on screen B then i will moved on screen B,
if i clicked on screen C then i will moved to screen C,
if i clicked on screen D then i will moved on screen D, And
Show their Header Also
How to call proper screen according to their header and screen..
How to Navigate it..
Sample image here
Code Here..
import React, {useState} from 'react';
import {
FlatList,
Image,
View,
Text,
SafeAreaView,
StyleSheet,
TouchableOpacity
} from 'react-native';
import App1 from './App1';
const dummyArray = [
{id: '1', value: 'A',exdate: '2020', City: 'Delhi'},
{id: '2', value: 'A',exdate: '2019',City: 'Mumbai'},
{id: '3', value: 'C',exdate: '2015 ',City: 'Indore'},
{id: '4', value: 'D',exdate: '2016',City: 'Patna'},
{id: '5', value: 'E',exdate: '2000',City: 'Raipur'},
];
const Home = ({ navigation }) => {
const [listItems, setListItems] = useState(dummyArray);
function handlePick(item){
}
const ItemView = ({item}) => { //flatlist data view
return (
// FlatList Item
<View style={styles.itemView}>
<TouchableOpacity style={styles.button} activeOpacity={.5}
onPress={()=>handlePick(item)}>
<View style={styles.stateView}>
<Text style={styles.textItem} onPress={() => getItem(item)}>
{item.value}
</Text>
<Image source={require('./right.jpg')} style={{marginLeft: 70, marginTop: 5,width: 30, height: 30}} />
</View>
<View
style={{
marginTop: 3,
height: 1,
width: '100%',
backgroundColor: '#C8C8C8'
}}
/>
<Text style={styles.text}>Date{"\t\t\t\t"}{item.exdate}</Text> //flatlist Data
<Text style={styles.capitalText}>Capital City{"\t\t\t\t\t\t"}{item.City}</Text> //flatlistCity
</TouchableOpacity>
</View>
);
};
const ItemSeparatorView = () => {
return (
// FlatList Item Separator
<View
style={{
backgroundColor: '#C8C8C8'
}}
/>
);
};
};
return (
<SafeAreaView style={{flex: 1}}>
<View style={styles.container}>
<FlatList
data={listItems}
ItemSeparatorComponent={ItemSeparatorView}
renderItem={ItemView}
keyExtractor={(item, index) => index.toString()}
/>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
flex: 1,
marginLeft: 10,
marginRight: 10,
marginBottom: 10,
},
textItem: {
marginTop: 5,
fontSize: 18,
flexDirection: 'row',
fontWeight: 'bold',
height: 20,
width: 250,
},
itemView: {
height: 150,
padding: 10,
margin: 8,
backgroundColor: '#fff'
},
stateView:{
height: 40,
flexDirection: 'row',
},
text:{
marginTop: 5,
width: 300,
height: 28
},
});
export default Home;
Please Suggest any solution..
Thanks..

Answer 1

Try this way
function handlePick(item){
const route = `Screen${item.value}`; // dynamic screen like 'ScreenA' or 'ScreenB' etc...
navigation.navigate(route, {data: item} ); This way will navigate to route with data object of item
}