ReferenceError: Can't find variable: styles - reactjs

Question

In my react-native project I experienced the above error
My App.js file:
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
//Screens
import Header from './Shared/Header'
import ProductContainer from './Screens/Products/ProductContainer'
export default function App() {
return (
<View style={styles.container}>
<Header />
<ProductContainer />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
My ProductCotainer.js file:
import React, { useState, useEffect } from 'react'
import { View, StyleSheet, ActivityIndicator, FlatList} from 'react-native'
import ProductList from './ProductList';
const data = require('../../assets/data/products.json');
const ProductContainer = () => {
const [products, setProducts ] = useState([]);
useEffect(() => {
setProducts(data);
return () => {
setProducts([])
}
}, [])
return (
<View style={styles.container}>
<Text>Product Container</Text>
<View style={styles.listContainer}>
<FlatList
data={products}
numColumns={2}
renderItem={({item}) => <ProductList
key={item.id}
item={item}/>}
keyExtractor={item => item.name}
/>
</View>
</View>
)
}
export default ProductContainer;
Please help me to solve this issue
Thanks in advance

Answer 1

You did not define the styles in the ProductCotainer.js file.
In order to use the styles you have 2 options:
Define it in each file that uses it. Which can be pretty hard to maintain in case of a medium/large app that has lots of common styles.
Define a style file that gets imported in each file that uses the styles. This would be a good starting point