how to render nested json data into flatlist in react native using functional component

this is the json data i am using

const RestaurantsData = [ {

    "BeveragesData": [


        {
            id: 1,
            title: 'Thick Shake Factory',
            price: 210,
            Image: require('../../assests/images/thickchake.jpg'),

        },

        {
            id: 2,
            title: 'Thick Shake Factory',
            price: 120,
            Image: require('../../assests/images/thickchake.jpg'),

        },
        {
            id: 3,
            title: 'Juice Point',
            price: 180,
            Image: require('../../assests/images/juicepoint.jpg'),

        },
        {
            id: 4,
            title: 'Juice Point',
            price: 320,
            Image: require('../../assests/images/juicepoint.jpg'),

        },



    ],

    "DesertsData": [

        {
            id: 1,
            title: 'Deserts Shop',
            price: 120,
            Image: require('../../assests/images/desert1.jpg'),

        },

        {
            id: 2,
            title: 'Cool Deserts',
            price: 100,
            Image: require('../../assests/images/desert2.jpg'),

        },
        {
            id: 3,
            title: 'Paradise',
            price: 80,
            Image: require('../../assests/images/paradise.png'),

        },
        {
            id: 4,
            title: 'Juice Point',
            price: 154,
            Image: require('../../assests/images/desert2.jpg'),


        },


    ]

} ] export default RestaurantsData;

this is my code

import React from "react"; import { Text, Image, TouchableOpacity,
> StyleSheet, View, FlatList, ImageBackground } from 'react-native';
> import RestaurantsData from '../screens/Data/data';
> 
> const Restaurant = (props) => {
>     const Data = props.route.params
>     const renderItem = ({ item }) => {
>         return (
>             <View style={styles.flatlist}>
>                 <Image source={item.Image} style={styles.flatlistimage} />
>                 <TouchableOpacity >
>                     <Text style={{ fontSize: 20, color: 'black', fontWeight: 'bold' }}>{item.title}</Text>
>                 </TouchableOpacity>
>             </View>
>         )
>     }
>     return (
>         <View style={styles.container}>
>             <FlatList
>                 data={RestaurantsData }
>                 renderItem={renderItem}
>                 keyExtractor={item => item.id}
>             />
>         </View>
>     ) }
> 
> export default Restaurant;

You did not provide enough information like how you want to structure your JSX. But this is how you can render nested data.

Example:

 <View style={styles.container}>
  <FlatList
    data={RestaurantsData}
    renderItem={({ item }) => {
      return (
        <>
          {item.BeveragesData.map((secItem) => (
            <View key={secItem.id}>
              <Text>{secItem.title}</Text> <Text>{secItem.price}</Text>
            </View>
          ))}

          {item.DesertsData.map((secItem) => (
            <View key={secItem.id}>
              <Text>{secItem.title}</Text> <Text>{secItem.price}</Text>{" "}
            </View>
          ))}
        </>
      );
    }}
  />
</View>;