react-native-linear-gradient: Gradient not working as expected

On OS X El Capitan version 10.11.5 (15F34)

node --version v6.0.0 nam --v v6.2.2 react-native-cli: 1.0.0 react-native: 0.28.0 watchman --v 4.5.0 xcode 7.3.1

I have this code using linear gradient copied from the code given in the examples section:

import LinearGradient from 'react-native-linear-gradient';

const styles = StyleSheet.create({
  parent: {
    flex: 1,
    backgroundColor: colors.MAIN_BACKGROUND_COLOR
  },
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  linearGradient: {
    paddingLeft: 15,
    paddingRight: 15,
    borderRadius: 5
  },
  buttonText: {
    fontSize: 18,
    fontFamily: 'Gill Sans',
    textAlign: 'center',
    margin: 10,
    color: '#ffffff',
    backgroundColor: 'transparent',
  },
});

render() {
  return (
      <View style={styles.parent}>
        <View style={styles.container}>
          <LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}>
            <Text style={styles.buttonText}>
              Sign in with Facebook
            </Text>
          </LinearGradient>
        </View>
      </View>);
}

And this is the result that I wasn’t expecting:

Does someone know the problem with my code and why is it not applying in the proper way? Thank you