how to set center a button on screen - native base

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!

Text

Button

where is my wrong?

2 Answers
2

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

alignSelf: 'center'

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


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

Text

Button

title

<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

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy