JSON in React Native FlatList

You can store the JSON inside a var (eg. myJSON), and do JSON.parse in FlatList prop.

This is the simplest way. After achieve that, you can improve performance using useEffect and useState to avoid unnecessary re-render.

import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text } from 'react-native';

// JSON.stringify only used here to simulate a true JSON
const myJson = JSON.stringify([
  {
    "id": 794,
    "name": "Premium Quality",
    "catalog_visibility": "visible",
    "price": "21.99",
    "regular_price": "21.99",
    "sale_price": "",
    "categories": [
      {
        "id": 9,
        "name": "Clothing",
        "slug": "clothing"
      },
      {
        "id": 14,
        "name": "T-shirts",
        "slug": "t-shirts"
      }
    ],
    "tags": [],
    "images": [
      {
        "id": 792,
        "date_created": "2017-03-23T14:01:13",
        "date_created_gmt": "2017-03-23T20:01:13",
        "date_modified": "2017-03-23T14:01:13",
        "date_modified_gmt": "2017-03-23T20:01:13",
        "src": "https://example.com/wp-content/uploads/2017/03/T_2_front-4.jpg",
        "name": "",
        "alt": ""
      },
      {
        "id": 793,
        "date_created": "2017-03-23T14:01:14",
        "date_created_gmt": "2017-03-23T20:01:14",
        "date_modified": "2017-03-23T14:01:14",
        "date_modified_gmt": "2017-03-23T20:01:14",
        "src": "https://example.com/wp-content/uploads/2017/03/T_2_back-2.jpg",
        "name": "",
        "alt": ""
      }
    ]
  }
]);

function Item({ item }) {
  return (
    <View style={styles.item}>
      <Text style={styles.title}>{item.name} - {item.price}</Text>

      <View style={{ flex: 1 }}>
        <Text>Categories: </Text>

        {item.categories.map((category) => {
          return (
            <Text>{category.name}</Text>
          )
        })}
      </View>

      <View style={{ flex: 1 }}>
        <Text>Images: </Text>

        {item.images.map((image) => {
          return (
            <Text>Image src: {image.src}</Text>
          )
        })}
      </View>
    </View>
  );
}

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={JSON.parse(myJson)}
        renderItem={Item}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});