Center element horizontally in React Native-CodePudding

I want to center a button horizontally, this is my code:

  return (
    <View style={styles.root}>
      <View style={styles.container}>
        <SafeAreaView style={HEADER}>
          <SliderBox
            style={{ height: '100%' }}
            currentImageEmitter={index => setCurrentSliderNumber(index)}
            images={data.images}>
          </SliderBox>
        </SafeAreaView>
        {currentSliderNumber == data.images.length - 1 ? <View style={styles.item}>
          <Button
            style={styles.getStartedButton}
            appearance="ghost"
            status="control"
            onPress={onGetStartedPressed}
          >
            Get Started
          </Button>
        </View> : null}
      </View>
    </View>
  )

and this is my styling:

const styles = StyleSheet.create({
  forgotPasswordButton: {
    paddingHorizontal: 0,
  },
  root: {
    flex: 1,
    height: '100%',
    backgroundColor: '#fff'
  },
  container: {
    borderColor: 'rgba(0,0,0,0.2)',
  },
  getStartedButton: {
    marginVertical: 12,
    backgroundColor: 'red'
  },
  item: {
    borderColor: 'rgba(0,0,0,0.2)',
    position: 'absolute',
    top: '80%',
    left: '50%'
  }, text: {
    position: 'absolute',
    top: '30%',
    left: '10%'
  }
})

I also tried to add alingnItems:center to root:

root: {
        flex: 1,
        height: '100%',
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
      }

But the result is not the one expected:

CodePudding user response：

Try changing the item style object to this:

item: {
    borderColor: 'rgba(0,0,0,0.2)',
    position: 'absolute',
    top: '80%',
    left:0,
    width:"100%",
    alignItems:"center",
    justifyContent:"center"
  },

CodePudding user response：

Do not use position until it's necessary you should use flex properties.

return (
    <View style={styles.root}>
      <View style={styles.container}>
        <SafeAreaView style={HEADER}>
          <SliderBox
            style={{ height: '100%' }}
            currentImageEmitter={index => setCurrentSliderNumber(index)}
            images={data.images}>
          </SliderBox>
        </SafeAreaView>
        {currentSliderNumber == data.images.length - 1 ? <View style={styles.item}>
          <Button
            style={styles.getStartedButton}
            appearance="ghost"
            status="control"
            onPress={onGetStartedPressed}
          >
            Get Started
          </Button>
   

 </View> : null}
      </View>
    </View>
  )

Styles

const styles = StyleSheet.create({
  forgotPasswordButton: {
    paddingHorizontal: 0,
  },
  root: {
    flex: 1,
    height: '100%',
    backgroundColor: '#fff'
  },
  container: {
    borderColor: 'rgba(0,0,0,0.2)',
    flexGrow:1,
    justifyContent: "space-between"
  },
  getStartedButton: {
    marginVertical: 12,
    backgroundColor: 'red',
    alignSelf:"center",
    flexGrow:2,
  },
  item: {
    borderColor: 'rgba(0,0,0,0.2)',
    flexGrow:1,
    justifyContent:"center",
    alignItem:"center",
  }, text: {
  }
})

Check out the layout docs