React native: there is way to view the list of the “zone_name” into flatlist from sqlite table?

See more:

Javascript

SQLite

React

, +

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}>

           ///// HERE I NEED THE FLATLIST //////

        </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 .