How can i move my button upside as the text is-CodePudding

i want my text and button up side of my screen,but both the elements both have few gaps between so i gave marginBottom to my text and than that text gone upside but i want that button to be upside so i have marginBottom to button too, but now its not going upside how can i make it upside? where style issue is coming? explain me mistake too..

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',
  },
});

CodePudding user response：

You're using alignItems: 'center' and justifyContent: 'center'. These two properties combined make the contents of container be positioned in the center. alignItems:center vertically centers the contents, and justifyContent:center horizontally centers the contents.

Since Text is the upper child element, giving it a marginBottom will space it out from the View element containing the Button. If you compare your screen with and without that marginBottom on the Text you'll notice that the button also moves slightly to the bottom if you include the marginBottom on the Text.

So in short, your code is doing exactly what you tell it to do: container tries to position all children to its center.

To fix this, you might want to remove the container:{ alignItems:'center', } property. This will most likely push all your elements to the top of the container. After that you might simply use marginTop on your Text element to push the contents down.

CodePudding user response：

Change both marginBottom