const {
Image,
StyleSheet,
Text,
View,
} = React
import RectangleButton from '../RectangleButton/index'
import FBSDKLogin from 'react-native-fbsdklogin'
const {
FBSDKLoginManager
} = FBSDKLogin
// TODO: Replace with a real facebook icon
const FACEBOOK_ICON = require('image!bottomBar__rewards--on')
export default class FacebookLoginButton extends React.Component {
static defaultProps = {
readPermissions: [],
publishPermissions: [],
onLoginFinished: () => {},
}
render() {
const {
style,
} = this.props
const icon = <Image source={FACEBOOK_ICON} style={styles.icon}/>
return (
<RectangleButton
color='#3B5997'
textColor='white'
onPress={() => this.signIn()}
icon={icon}
iconStyles={styles.icon}
textStyle={styles.text}
style={[style, styles.button]}>
Sign In With <Text style={styles.facebookLabel}>Facebook</Text>
</RectangleButton>
)
}
signIn() {
const {
readPermissions,
onLoginFinished,
} = this.props
FBSDKLoginManager.logInWithReadPermissions(readPermissions, onLoginFinished)
}
}
const styles = StyleSheet.create({
button: {
flexDirection: 'row',
},
text: {
flex: 3,
fontSize: 14,
},
facebookLabel: {
fontWeight: 'bold',
},
icon: {
flex: 1,
}
})