react-native-facebook-login: Cannot manipulate styles?

I’m trying to do this:

<FBLogin
    style={{marginTop: 10, borderWidth: 1, flex: 1, height: 100, width: 300}}
    onLogin={function(e){console.log(e)}}
    onLogout={function(e){console.log(e)}}
    onCancel={function(e){console.log(e)}}
    onPermissionsMissing={function(e){console.log(e)}}
/>

On iOS, marginTop and bordherWidth works, but the button is quite tiny and I can’t get it bigger. On Android, no styles at all are applied. Am I doing it wrong?

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 15 (4 by maintainers)

Most upvoted comments

You can cheat a little by using a View which wraps the <FBLogin /> component with the same background color. Then you can adjust the size. Of course the font size won’t change but it can be useful.

<View style={{ backgroundColor: '425bb4',width:200, height:40 }} >
    <FBLogin style={{ margin: 5 }} />
</View>

sans titre 3

thibthibaut on Feb 10, 2016

You should be able to wrap the FBLogin button in a view to position it how you’d like, similar to the examples. If you want to style your own button though you can use the LoginMock component as a reference.

https://github.com/magus/react-native-facebook-login/tree/master/example/components

If either method above doesn’t suit your needs, feel free to shoot a pull request if you extend things, especially android side. I could use help there for sure.

magus on Jan 28, 2016