Add more examples

Author: Minishlink

docs/.storybook/decorator-centered.js

@@ -3,9 +3,10 @@ import { StyleSheet, View } from 'react-native';
 
 const styles = StyleSheet.create({
   root: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
     minHeight: '100vh',
-    maxWidth: 680,
-    marginHorizontal: 'auto'
   }
 });
 

docs/stories/gradientBackground.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+
+export default () => (
+  <LinearGradient start={{ x: 0.5, y: 1 }} end={{ x: 0.5, y: 0 }} colors={['red', 'blue']} style={styles.page}>
+    <Text style={styles.buttonText}>Hello !</Text>
+  </LinearGradient>
+);
+
+const styles = StyleSheet.create({
+  page: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  buttonText: {
+    fontSize: 18,
+    textAlign: 'center',
+    color: '#ffffff',
+    backgroundColor: 'transparent',
+  },
+});

docs/stories/index.js

@@ -1,7 +1,11 @@
 import React from 'react';
-
-import { storiesOf } from '@storybook/react';
 import LinearGradient from 'react-native-linear-gradient';
 import { View } from 'react-native';
+import signInWithFacebook from './signInWithFacebook';
+import gradientBackground from './gradientBackground';
+
+import { storiesOf } from '@storybook/react';
 
-storiesOf('LinearGradient', module).add('simple', () => <LinearGradient colors={['red', 'blue']} />);
+storiesOf('LinearGradient', module)
+.add('signInWithFacebook', signInWithFacebook)
+.add('gradientBackground', gradientBackground);

docs/stories/signInWithFacebook.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+
+export default () => (
+  <TouchableOpacity>
+    <LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}>
+      <Text style={styles.buttonText}>Sign in with Facebook</Text>
+    </LinearGradient>
+  </TouchableOpacity>
+);
+
+const styles = StyleSheet.create({
+  linearGradient: {
+    paddingLeft: 15,
+    paddingRight: 15,
+    borderRadius: 5,
+  },
+  buttonText: {
+    fontSize: 18,
+    fontFamily: 'Gill Sans',
+    textAlign: 'center',
+    margin: 10,
+    color: '#ffffff',
+    backgroundColor: 'transparent',
+  },
+});

src/index.js

@@ -3,22 +3,14 @@ import { StyleSheet, View } from 'react-native';
 
 export default props => {
   return (
-    <div
-      style={{
-        display: 'flex',
-        flex: 1,
-        flexDirection: 'column',
-        alignItems: 'stretch',
-        background: `linear-gradient(to top, ${props.colors.join(',')})`,
-      }}
-    >
-      <View style={[styles.container, props.style]}>{props.children}</View>
-    </div>
+    <View style={[styles.container, props.style, { backgroundImage: `linear-gradient(to top, ${props.colors.join(',')})` }]}>
+      {props.children}
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
+    alignSelf: 'stretch',
   },
 });