/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React, {Fragment} from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Image,
Dimensions,
ScrollView,
FlatList,
StatusBar,
} from 'react-native';
const width = Dimensions.get('screen').width;
const fotos = [
{id: "1", usuario: 'rafael'},
{id: "2", usuario: 'alberto'},
{id: "3", usuario: 'vitor'}
];
const App = () => {
return (
/*
<ScrollView style={{marginTop: 20}}>
{fotos.map(foto =>
<View key={foto.id}>
<Text>{foto.usuario}</Text>
<Image source={require('./resources/img/alura.png')} style={{width:width, height:width}} />
</View>
)}
</ScrollView>
*/
//<View style={{ paddingTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight }}>
<FlatList style={styles.container}
data={fotos}
keyExtractor={item => item.id}
renderItem={ ({item}) =>
<View >
<View style={styles.cabecalho}>
<Image source={require('./resources/img/alura.jpg')}
style={styles.fotoDePerfil} />
<Text>{item.usuario}</Text>
</View>
<Image source={require('./resources/img/alura.jpg')}
style={styles.foto} />
</View>
}
/>
//</View>
);
};
export default App;
const styles = StyleSheet.create({
container: {
marginTop: 20
},
cabecalho: {
margin: 10,
flexDirection: 'row',
alignItems: 'center'
},
fotoDePerfil: {
marginRight: 10,
borderRadius: 20,
width:40, height:40
},
foto: {
width:width,
height:width
}
})