React Native button not align center

Question

I'm including a button inside my native base form, but it is not align in center.

<Form>
   ...

   <Item inlineLabel>
      <View style={styles.alignCenter}>
         <Button primary style={styles.btnUpd}><Text> Update </Text></Button>
      </View>
   </Item>
</Form>

My styles:

const styles = StyleSheet.create({
  alignCenter: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  btnUpd: {
    height: 35,
    marginTop: 4,
    marginBottom: 4,
  }
});

I thought I just had to use justifyContent and alignItems center to centralize an object. What am I missing?

Thanks

Mimmasoumi · Accepted Answer · 2020-04-09 22:03:22Z

1

Use <Body> tag to set it to center of your screen and for left and right side of screen you could use <Left> and <Right> like this :

<View>
   <Body>
      <Button>
         <Text> Update </Text>
      </Button>
   </Body>
</View>

answered Apr 9, 2020 at 22:03

Mimmasoumi

312 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Native button not align center

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related