Estou com um problema no meu código, ele está mostrando corretamente os elementos na tela, mas não está dando o scrolling, vi problemas parecidos aqui no fórum, mas nada funcionou. obs: Tirei o pois ele retornava um erro por ter uma Flatlist dentro , e vi aqui no fórum que tem que tirar ele.
App.js
import React, { Fragment } from 'react';
import {Text,
Image,
Dimensions,
StyleSheet,
FlatList} from "react-native";
import Cabecalho from './src/components/Cabecalho';
const largura = Dimensions.get("screen").width;
const informacoes = [
{id: 1, usuario: "Ricardo"},
{id: 2, usuario: "Marina"},
{id: 3, usuario: "João"},
]
const App = () => {
return (
<FlatList
data = {informacoes}
keyExtractor = {(item) => item.id.toString()}
renderItem = {({ item }) =>
<Fragment>
<Cabecalho nomeUsuario = {item.usuario}/>
<Image
source = {require("./res/img/alura.jpg")}
style = {estilo.imagem}
/>
</Fragment>
}
/>
);
};
const estilo = StyleSheet.create({
imagem: {
width: largura,
height: largura,
flex: 1
},
})
export default App;
Cabeçalho
import React, { Fragment } from 'react';
import {
Text,
Image
} from 'react-native';
import estilo from "./estilo"
const Cabecalho = ({nomeUsuario}) => {
return (
<Fragment>
<Image
source = { require('../../../res/img/alura.jpg')}
style = {estilo.fotoUsuario}/>
<Text>{nomeUsuario}</Text>
</Fragment>
)
}
export default Cabecalho;
estilo.js
import {StyleSheet} from "react-native"
const estilo = StyleSheet.create({
fotoUsuario: {
width: 40,
height: 40
},
})
export default estilo;
Pesquisei no stackOverflow sobre, e já tentei colocar a flatlist dentro de uma View, colocar o flex: 1, colocar dentro de uma ... ( como dito em outra pergunta aqui no fórum) mas nada funcionou...
Além disso tentei reinstalar o aplicativo, com o run-android mas ele retorna uma um erro (node:20868) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency.
Obrigado!