import React from 'react';

import { FlatList, StyleSheet } from 'react-native';

import ListComponents from './Components/ListComponents';

export default class App extends React.Component {

constructor(props) {

super(props);

this.state = {

categories: [

{ id: 1, name: 'Component 1' },

{ id: 2, name: 'Component 2' },

{ id: 3, name: 'Component 3' },

{ id: 4, name: 'Component 4' },

{ id: 5, name: 'Component 5' },

{ id: 6, name: 'Component 6' }

]

}

}

render() {

const { categories } = this.state;

return (

<FlatList

data={categories}

renderItem={({ item }) => <ListComponents category={item} />}

keyExtractor={item => `${item.id}`}

contentContainerStyle = {styles.scrollView}

/>

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#fff',

alignItems: 'stretch',

justifyContent: 'center'

},

scrollView: {

paddingLeft: 16,

paddingRight: 16

}

});

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) {

const { category } = props

return (

<View style={styles.container}>

<Text style={styles.title}>{category.name}</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'

}

})