Clickable Flat list item with Navigate something page in React Native

Question

I put the local image and button in the flat list.

1. How do I retrieve an image from Json?

2. How do I move to another page when I click?

I'd like to divide up the script.

This is my code

export default class HotFlatList extends Component {
    render() {
    return(
        <View style={{flex:1, flexDirection:'column'}}>
            <View>
                <FlatList style={{backgroundColor:'block', opacity: 1}}
                    horizontal={true}
                    data={hotFlatListData}
                    renderItem={({item, index}) => {
                        return (
                            // <HorizontalFlatListItem item={item} index={index} parentFlatList={this}>
                            // </HorizontalFlatListItem>
                            <TouchableOpacity 
                            onPress={() => navigation.navigate("../components/Hook")}
                            style={{marginLeft: 20, alignItems: 'center'}}>
                                <Image source={require('../assets/apple.jpeg')} style={{borderRadius:30}}/>
                                <View style={{width: '100%', backgroundColor: '#02ad94', opacity: 0.5}}></View>
                                <Text style={{color: 'white', fontWeight: 'bold', fontSize:20, marginEnd: 5, marginTop: 5}}>apple</Text>
                            </TouchableOpacity>
                        );
                    }}
                    keyExtractor={item => item.hour}
                >

                </FlatList>
            </View>
        </View>
    );
            }
}

Answer 1

To retrieve image from JSON, like

const hotFlatListData = [{image: require('../assets/apple.jpeg')},{..}]

<Image source={item.image} style={{borderRadius:30, width:xx, height:xx}}/>

Move another page when click, like

// remove this and extract "navigation" from function "props"
<TouchableOpacity onPress={() => navigation.navigate("ScreenRoute")}>
  ....
</TouchableOpacity>