I am using Facebook SDK's (via react-native-fbsdk
) Login Button in my React-Native application.
The button text Continue with Facebook
appears centered vertically in iOS but is off-center in Android (7.0).
Is my only option to make my own custom button which calls the LoginManager manually, or is there a way to align the text using styles (I tried alignItems and justifyContent)? It seems like I have to do the former based on this SO question.
This is my code as of now:
<LoginButton
scope={'public_profile email'}
style={{
width: 220,
height: 40
}}
onLoginFinished={this._facebookLogin}
onLogoutFinished={() => console.log('logout.')}
/>
You can wrap the button into a container
<View style={{
width: 220, // whatever you want
height: 50, // whatever you want
justifyContent: 'center', // center the button
backgroundColor: '#4267B2', // the same as the actual button
paddingHorizontal: 10 // optionally add some horizontal padding for better looking
}}>
<LoginButton
scope={'public_profile email'}
style={{
flex: 1, // fill the container
maxHeight: 30 // the default height
}}
onLoginFinished={this._facebookLogin}
onLogoutFinished={() => console.log('logout.')}
/>
</View>
The results
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With