# Product List
## `Light`
### `Dark`
```js
import React from 'react';
import {
View,
Text,
FlatList,
Image,
TouchableOpacity,
SafeAreaView,
useColorScheme,
} from 'react-native';
import { Data1 } from './Data1';
const ProductList = () => {
const colorScheme = useColorScheme();
const isDarkMode = colorScheme === 'dark';
const backgroundColor = isDarkMode ? '#121212' : '#fff';
const textColor = isDarkMode ? '#fff' : '#000';
const borderColor = isDarkMode ? '#333' : '#eee';
const subTextColor = isDarkMode ? '#bbb' : '#555';
const renderItem = ({ item }) => (
![]()
);
return (
item.id.toString()}
renderItem={renderItem}
/>
);
};
export default ProductList;
```
### `Dark`
```js
import React from 'react';
import {
View,
Text,
FlatList,
Image,
TouchableOpacity,
SafeAreaView,
useColorScheme,
} from 'react-native';
import { Data1 } from './Data1';
const ProductList = () => {
const colorScheme = useColorScheme();
const isDarkMode = colorScheme === 'dark';
const backgroundColor = isDarkMode ? '#121212' : '#fff';
const textColor = isDarkMode ? '#fff' : '#000';
const borderColor = isDarkMode ? '#333' : '#eee';
const subTextColor = isDarkMode ? '#bbb' : '#555';
const renderItem = ({ item }) => (