Add some examples

Example/navigation/index.js

@@ -0,0 +1,125 @@
+import React, { Component } from 'react';
+import {
+  StyleSheet,
+  Button,
+  View,
+  TextInput,
+  Animated,
+  Image,
+  requireNativeComponent,
+} from 'react-native';
+import { createStackNavigator } from 'react-navigation';
+// import { createStackNavigator } from './react-navigation/react-navigation';
+
+export const LifecycleAwareView = requireNativeComponent(
+  'RNSLifecycleAwareView',
+  null
+);
+
+const IMGS = [
+  require('./img/dawid-zawila-628275-unsplash.jpg'),
+  require('./img/dawid-zawila-715178-unsplash.jpg'),
+  require('./img/janusz-maniak-143024-unsplash.jpg'),
+  require('./img/janusz-maniak-272680-unsplash.jpg'),
+];
+
+const Background = ({ index }) => (
+  <Image
+    resizeMode="cover"
+    source={IMGS[index % IMGS.length]}
+    style={{
+      opacity: 0.5,
+      width: null,
+      height: null,
+      ...StyleSheet.absoluteFillObject,
+    }}
+  />
+);
+
+class DetailsScreen extends React.Component {
+  static navigationOptions = ({ navigation }) => {
+    return {
+      title: 'Details screen #' + navigation.getParam('index', '0'),
+    };
+  };
+  animvalue = new Animated.Value(0);
+  rotation = this.animvalue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+  state = { count: 1, text: '' };
+  componentDidMount() {
+    Animated.loop(
+      Animated.timing(this.animvalue, {
+        toValue: 1,
+        duration: 1000,
+        useNativeDriver: false,
+      })
+    ).start();
+    setInterval(() => this.setState({ count: this.state.count + 1 }), 500);
+  }
+  render() {
+    const index = this.props.navigation.getParam('index', 0);
+    return (
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+        <Background index={index} />
+        <Button
+          title="More details"
+          onPress={() =>
+            this.props.navigation.push('Details', {
+              index: index + 1,
+            })
+          }
+        />
+        <TextInput
+          placeholder="Hello"
+          style={styles.textInput}
+          onChangeText={text => this.setState({ text })}
+          text={this.state.text}
+        />
+        <Animated.View
+          style={{
+            transform: [
+              {
+                rotate: this.rotation,
+              },
+            ],
+            marginTop: 20,
+            borderColor: 'blue',
+            borderWidth: 3,
+            width: 20,
+            height: 20,
+          }}
+        />
+      </View>
+    );
+  }
+}
+
+const App = createStackNavigator(
+  {
+    Details: DetailsScreen,
+  },
+  {
+    initialRouteName: 'Details',
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+  textInput: {
+    backgroundColor: 'white',
+    borderWidth: 1,
+    padding: 10,
+    marginHorizontal: 20,
+    alignSelf: 'stretch',
+    borderColor: 'black',
+  },
+});
+
+export default App;