React native: есть ли способ просмотреть список “zone_name” во flatlist из таблицы sqlite?

---

Есть способ просмотреть список "Zone_Name" во flatList, который позволяет мне также нажимать и выбирать результаты "Zone_Name" столько, сколько я хочу из flatlist.

этот плоский список будет показан только тогда, когда я нажму на кнопку "TouchableOpacity" в разделе "Списки областей". Что такое лучший способ сделать это ?

таблица выглядит так : "tblUserConnectResponseData"

это поле выглядит так : "Successor_Zones"

содержание поля таково:

[{"Zone_ID": 66, "Zone_Name": "BOB", "Zone_ID": 20, "Zone_Name": "FROG"}]

Здесь я хочу поместить плоский список в комментарий там .

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>
      </>
    );
  }
}

Что я уже пробовал:

мне нужна помощь с этой логикой .

---