I am trying to align my text and button at the top of the screen, but there seems to be a gap between the two elements. I attempted to add marginBottom to the text, which helped move it to the top. However, when I added marginBottom to the button as well, it did not align with the top as desired.
How can I resolve this positioning issue? What mistake am I making in my styling? Please provide an explanation.
import { StyleSheet, Text, View, Button } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text style={{ margin: 16, marginBottom: '80%', backgroundColor: 'black' }}>Hello World</Text>
<View style={{ marginBottom: '80%' }}>
<Button title='Click me' />
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});