React native, using TouchableOpacity onPress

Question

I just started learning react native. I am currently trying to implement TouchableOpacity on image rendering from an array and use the info for that element from the array to create a new page. The goal of the code is to have a userInfo page that lists all the images and once you tap on an image, it will show details of that user (you will see just this user and no other ones) using userDetails. I know my TouchableOpacity part will not work, but I don't know how to make it work.

This is from my userInfo.js:

const UserInfo =() => {
    const users = [
        {userName: "A",
         imageSource: require("../../assets/users/A.jpg"),
         bio: "this is A"
        },
        {userName: "B",
        imageSource: require("../../assets/users/B.jpg"),
        bio: "this is B"
        },
        {userName: "C",
        imageSource: require("../../assets/users/C.jpg"),
        bio: "this is C"
        }
    ]

    return(
        <FlatList 
        showsVerticalScrollIndicator={false}
        keyExtractor={(users)=> users.userName}
        data={users}
        renderItem = {({item})=>{
            return <View>
                <TouchableOpacity onPress={userInfoLink(users.userName, users.imageSource, users.bio)}>
                    <View style={styles.viewBox}><Image style={styles.image} source={item.imageSource}/></View>
                </TouchableOpacity>
                <Text style={styles.text}>{item.userName}</Text>
            </View>;
        }}
        />
    )
};

This is from my userDetails.js:

const UserDetail=({imageSource, userName, bio}) => {
    return <View>
        <View style={styles.viewBox}><Image style={styles.image} source={imageSource}/></View>
        <Text style={styles.text}>User name: {userName}</Text>
        <Text style={styles.text}>Bio: {bio}</Text>
    </View>;
}

Answer 1

Ok, after doing some research I found a way to make it work. I used navigation.navigate and passing parameters into the page.

Here is my return code in UserInfo.js:

    return(
        <FlatList 
        showsVerticalScrollIndicator={false}
        keyExtractor={(users)=> users.userName}
        data={users}
        renderItem = {({item})=>{
            return <View>
                <TouchableOpacity onPress={()=>{navigation.navigate('UserDetails', {imageSource: item.imageSource, userName: item.userName, bio:item.bio })}}>
                    <View style={styles.viewBox}><Image style={styles.image} source={item.imageSource}/></View>
                </TouchableOpacity>
                <Text style={styles.text}>{item.userName}</Text>
            </View>;
        }}
        />
    )

Here is the code in UserDetails.js:

const UserDetail=({navigation}) => {
    const imageSource = navigation.getParam('imageSource', 'a no image image');  
    const userName = navigation.getParam('userName', 'username error');  
    const bio = navigation.getParam('bio', 'bio error');  

    return <View>
        <Text style={styles.title}>User Detail</Text>
        <View style={styles.viewBox}><Image style={styles.image} source={imageSource}/></View>
        <Text style={styles.text}>User name: {userName}</Text>
        <Text style={styles.text}>Bio: {bio}</Text>
        <Button title="User Info" onPress={()=>{navigation.navigate('UserInfo')}}/>
    </View>;
}