import React from "react";

import { Image, StyleSheet, Text, View } from 'react-native';

import IconImage from '../assets/icons8-user-64.png';

export default function ListComponents(props) {

return (

<View style={styles.container}>

<Text style={styles.title}>Component đầu tiên</Text>

<Image style={styles.categoryImage} source={IconImage} />

</View>

);

}

const styles = StyleSheet.create({

container: {

alignItems: 'center',

padding: 16,

borderRadius: 4,

backgroundColor: '#FFF',

// Android

elevation: 5,

// IOS

shadowColor: '#000',

shadowOpacity: 0.3,

shadowRadius: 10,

shadowOffset: { height: 0, width: 0 },

marginBottom: 16

},

categoryImage: {

height: 46,

width: 46

},

title:{

textTransform: 'uppercase',

marginBottom: 8,

fontWeight: '700'

}

})

import { StatusBar } from 'expo-status-bar';

import React from 'react';

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

import ListComponents from './Components/ListComponents';

export default function App() {

return (

<View style={styles.container}>

<ListComponents />

<ListComponents />

<ListComponents />

</View>

);

}

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#fff',

alignItems: 'stretch',

justifyContent: 'center',

paddingLeft: 16,

paddingRight: 16

},

});