# Feed Style
### `Light`
### `Dark`
```js
import React from 'react';
import {
View,
Text,
TouchableOpacity,
Image,
SafeAreaView,
FlatList,
Dimensions,
StyleSheet,
useColorScheme,
} from 'react-native';
import { Data } from './Data';
const { width } = Dimensions.get('window');
const FeedList = () => {
const colorScheme = useColorScheme();
const isDarkMode = colorScheme === 'dark';
const backgroundColor = isDarkMode ? '#000' : '#fff';
const textColor = isDarkMode ? '#fff' : '#000';
const borderColor = isDarkMode ? '#333' : '#ddd';
const renderItem = ({ item }) => (
);
return (
item.id.toString()}
renderItem={renderItem}
removeClippedSubviews={false}
/>
);
};
const styles = StyleSheet.create({
itemContainer: {
flexDirection: 'row',
borderBottomWidth: 1,
padding: 10,
},
profileContainer: {
marginRight: 10,
},
profileImage: {
width: 40,
height: 40,
borderRadius: 20,
},
nameRow: {
flexDirection: 'row',
justifyContent: 'space-between',
},
nameContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'center',
},
nameText: {
fontWeight: '700',
fontSize: 16,
},
usernameText: {
fontWeight: '300',
fontSize: 16,
marginLeft: 5,
},
timeContainer: {
flexDirection: 'row',
alignItems: 'center',
},
timeText: {
fontWeight: '300',
fontSize: 14,
marginRight: 5,
},
moreText: {
fontWeight: '600',
fontSize: 20,
},
contentContainer: {
width: '100%',
paddingVertical: 4,
},
postContainer: {
marginTop: 8,
},
postImage: {
width: width * 0.9,
height: width * 0.5,
borderRadius: 10,
},
});
export default FeedList;
```
### `Dark`
```js
import React from 'react';
import {
View,
Text,
TouchableOpacity,
Image,
SafeAreaView,
FlatList,
Dimensions,
StyleSheet,
useColorScheme,
} from 'react-native';
import { Data } from './Data';
const { width } = Dimensions.get('window');
const FeedList = () => {
const colorScheme = useColorScheme();
const isDarkMode = colorScheme === 'dark';
const backgroundColor = isDarkMode ? '#000' : '#fff';
const textColor = isDarkMode ? '#fff' : '#000';
const borderColor = isDarkMode ? '#333' : '#ddd';
const renderItem = ({ item }) => (
);
return (
item.id.toString()}
renderItem={renderItem}
removeClippedSubviews={false}
/>
);
};
const styles = StyleSheet.create({
itemContainer: {
flexDirection: 'row',
borderBottomWidth: 1,
padding: 10,
},
profileContainer: {
marginRight: 10,
},
profileImage: {
width: 40,
height: 40,
borderRadius: 20,
},
nameRow: {
flexDirection: 'row',
justifyContent: 'space-between',
},
nameContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'center',
},
nameText: {
fontWeight: '700',
fontSize: 16,
},
usernameText: {
fontWeight: '300',
fontSize: 16,
marginLeft: 5,
},
timeContainer: {
flexDirection: 'row',
alignItems: 'center',
},
timeText: {
fontWeight: '300',
fontSize: 14,
marginRight: 5,
},
moreText: {
fontWeight: '600',
fontSize: 20,
},
contentContainer: {
width: '100%',
paddingVertical: 4,
},
postContainer: {
marginTop: 8,
},
postImage: {
width: width * 0.9,
height: width * 0.5,
borderRadius: 10,
},
});
export default FeedList;
```