How to center text in Facebook Login Button for React Native (Android)?

Question

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.')}
/>

did you find a solution? – Ahmed Kamal Apr 30 '19 at 01:33 — Ahmed Kamal, Apr 30 '19 at 01:33
Okay I'll post my answer – Ahmed Kamal Apr 30 '19 at 19:55 — Ahmed Kamal, Apr 30 '19 at 19:55

score 4 · Accepted Answer · answered Apr 30 '19 at 20:09

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

Going through this nightmare right now. Thanks for this – KeshavDulal Oct 10 '20 at 13:23 — KeshavDulal, Oct 10 '20 at 13:23

How to center text in Facebook Login Button for React Native (Android)?

1 Answers1