0
I’m taking a course where the app screen should be this way, with the component at the top not exceeding the layout limit:
But in my code it was like this:
You can see until the icon has been cut.
Follow the code of App.js, which is the same as the course.
import React from 'react';
import { View } from 'react-native';
import Topo from './componentes/Topo';
import Texto from './componentes/Texto';
import Cards from './componentes/Cards';
export default function App () {
return (
<View>
<Topo />
<Texto />
<Cards />
</View>
);
}
The code of the component (Topo
) index js.:
import React from 'react';
import { View, Text, Image } from 'react-native';
import estilo from './estilo'
import churrasco from '../../assets/churrasco.png';
export default function Topo() {
return (
<View style={estilo.box}>
<Image style={estilo.boxIcone} source = { churrasco } />
<View>
<Text style={estilo.boxTitulo}>Churrasco em casa</Text>
<Text style={estilo.boxSubtitulo}>Calculando a comida e a bebida</Text>
</View>
</View>
)
}
I think maybe it can be the version, since this course should have a little bit of time.
Can you enlighten me as to why this happens? And what is the solution?
Have any answers helped you? Take a look at [tour] and learn how to accept a reply.
– Rafael Tavares