I'm using button of native base library.

this is whole my codes:

  <LinearGradient
      start={{x: 0.0, y: 0.1}} end={{x: 0.5, y: 1.0}}
      locations={[0.2,0.23,0.9]}
      colors={[randomColor1,randomColor1, randomColor2]}
      style={{flex:1,height:'100%',width:'100%',flexDirection: 'column'}}>

      <View style={{width:'100%',height:'100%',flexDirection:'column',flex:1}}>
        <View style={{flexDirection:'column',alignItems:'center',justifyContent:'center'}}>
          <Text style={{fontSize:22,marginTop:20,color:'#fff',fontWeight:'bold',textAlign:'center'}}>Powerful Composition</Text>
          <Button style={{textAlign:'center',justifyContent: 'center',alignItems: 'center',paddingLeft:40,paddingRight:40,marginTop:10,height:40}} light><Text style={{textAlign:'center'}}> JOIN </Text></Button>
        </View>

        <Text style={{fontSize:18,marginTop:20,color:'#fff',fontWeight:'bold',textAlign:'center',position:'absolute',left:0,bottom:0,marginLeft:6,marginBottom:6}}>607.8 K Votes</Text>

        <Text style={{fontSize:18,marginTop:20,color:'#fff',fontWeight:'bold',textAlign:'center',position:'absolute',right:0,bottom:0,marginLeft:6,marginBottom:6,marginRight:4}}>9 Days Left</Text>

      </View>


  </LinearGradient>

my Text is center of screen. but the Button that is below of it is at the left screen!

where is my wrong?

I'm using button of native base library.

this is whole my codes:

  <LinearGradient
      start={{x: 0.0, y: 0.1}} end={{x: 0.5, y: 1.0}}
      locations={[0.2,0.23,0.9]}
      colors={[randomColor1,randomColor1, randomColor2]}
      style={{flex:1,height:'100%',width:'100%',flexDirection: 'column'}}>

      <View style={{width:'100%',height:'100%',flexDirection:'column',flex:1}}>
        <View style={{flexDirection:'column',alignItems:'center',justifyContent:'center'}}>
          <Text style={{fontSize:22,marginTop:20,color:'#fff',fontWeight:'bold',textAlign:'center'}}>Powerful Composition</Text>
          <Button style={{textAlign:'center',justifyContent: 'center',alignItems: 'center',paddingLeft:40,paddingRight:40,marginTop:10,height:40}} light><Text style={{textAlign:'center'}}> JOIN </Text></Button>
        </View>

        <Text style={{fontSize:18,marginTop:20,color:'#fff',fontWeight:'bold',textAlign:'center',position:'absolute',left:0,bottom:0,marginLeft:6,marginBottom:6}}>607.8 K Votes</Text>

        <Text style={{fontSize:18,marginTop:20,color:'#fff',fontWeight:'bold',textAlign:'center',position:'absolute',right:0,bottom:0,marginLeft:6,marginBottom:6,marginRight:4}}>9 Days Left</Text>

      </View>


  </LinearGradient>

my Text is center of screen. but the Button that is below of it is at the left screen!

where is my wrong?

• javascript
• react-native
• native-base

3 Answers 3

You need to add the style alignSelf: 'center' to the styles

<Button style={{alignSelf:'center',{/*Other Styles*/}}}> JOIN </Text></Button>

Try justifyContent: 'center' if AlignSelf doesn't work.

Instead of passing a Text element to your Button ponent you should use the title prop

<Button 
  style={{
    textAlign:'center',
    justifyContent: 'center',
    alignItems: 'center',
    paddingLeft:40,
    paddingRight:40,
    marginTop:10,
    height:40
  }}
  light
  title="JOIN"
/>

You can see in this snack the button is centered