There is way to view the list of the "Zone_Name" into flatList that let me also press and choose results of the "Zone_Name" as many i want from the flatlist.
this flatlist will be showen only when i press on the "TouchableOpacity" of the "area lists". What is the way to do it ?
the table is : "tblUserConnectResponseData"
the field is : "Successor_Zones"
the content of the field is:
[{"Zone_ID": 66, "Zone_Name": "BOB", "Zone_ID": 20, "Zone_Name": "FROG"}]
Here i want put the flatlist in the comment there .
import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';
import MyDatePicker from '../components/MyDatePicker';
export default class Screen2 extends Component {
constructor(props) {
super(props);
this.state = { checked: 'first', activeIndex: 0 };
}
render() {
const { checked } = this.state;
return (
<>
<View style={styles.momImage}>
<Image
style={{
resizeMode: 'contain',
height: 100,
width: 200,
}}
source={require('../assets/mom_1.png')}
/>
</View>
<View style={styles.screen}>
<View style={styles.touch}>
<View style={{ marginBottom: 35 }}>
<View
style={{
flexDirection: 'row',
}}
>
<TouchableOpacity
style={styles.circleButton2}
onPress={() => {
this.setState({ activeIndex: 0 });
}}
activeOpacity={1}
style={
this.state.activeIndex === 0
? styles.circleButton1
: styles.circleButton2
}
>
<Image
source={require('../assets/icondigum1.png')}
style={{ height: 40, width: 40 }}
/>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
this.setState({ activeIndex: 0 });
}}
activeOpacity={1}
style={
this.state.activeIndex === 0
? styles.button
: styles.button2
}
>
<Text style={styles.textButton}>area lists </Text>
</TouchableOpacity>
</View>
</View>
<View
style={{
flexDirection: 'row',
}}
>
<TouchableOpacity
style={styles.circleButton2}
onPress={() => {
this.setState({ activeIndex: 1 });
}}
activeOpacity={1}
style={
this.state.activeIndex === 0
? styles.circleButton2
: styles.circleButton1
}
>
<Image
source={require('../assets/icondigum2.png')}
style={{ height: 45, width: 45 }}
/>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
this.setState({ activeIndex: 1 });
}}
activeOpacity={1}
style={
this.state.activeIndex === 1 ? styles.button : styles.button2
}
>
<Text style={styles.textButton}>places</Text>
</TouchableOpacity>
</View>
</View>
</View>
<View>
<MyDatePicker />
</View>
<View style={styles.AreasPrototypesContainer}>
</View>
<View style={styles.AreasPrototypesBottomView}>
<TouchableOpacity
onPress={() => {
this.props.navigation.navigate('points');
}}
>
<Image
source={require('../assets/pick_choice.png')}
style={{ height: 50, width: 50 }}
/>
</TouchableOpacity>
</View>
</>
);
}
}
What I have tried:
i need some help with this logic .