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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.