Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

InstaAlura não renderiza corretamente no Android (Status Bar repetido)

/**
 * 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
  }
})
1 resposta
solução!

Fernando, boa tarde!

Está ocorrendo devido ao marginTop no styles.container, basta removê-lo que a segunda barra ira desaparecer!

Espero ter ajudado e bons estudos!