Extend example for decorator usage

Author: DanielMSchmidt

Example.js

@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+import {
+  StyleSheet,
+  Text,
+  View
+} from 'react-native';
+import ScrollableTabView, {DefaultTabBar, } from 'react-native-scrollable-tab-view';
+
+import SensorExample from './SensorExample';
+import SensorAwareViewExample from './SensorAwareViewExample';
+
+export default class Example extends Component {
+  render() {
+    return (
+      <ScrollableTabView
+        style={{marginTop: 20, }}
+        renderTabBar={() => <DefaultTabBar />}
+      >
+        <SensorExample tabLabel="Sensors" />
+        <SensorAwareViewExample tabLabel="SensorAwareView" />
+      </ScrollableTabView>
+    );
+  }
+}

SensorAwareViewExample.js

@@ -0,0 +1,70 @@
+import React, { Component } from 'react';
+import {
+  StyleSheet,
+  Text,
+  View
+} from 'react-native';
+import RNSensors from 'react-native-sensors';
+
+function SensorView(props) {
+  const Component = RNSensors.decorator({
+    ...props,
+  })(SensorsDisplay);
+
+  return (
+    <Component />
+  )
+}
+
+const SensorDisplay = ({ value, name }) => (
+  <Text style={styles.welcome}>{name}: {value}</Text>
+);
+
+class SensorsDisplay extends Component {
+  render() {
+    const {
+      Accelerometer,
+      Gyroscope,
+      Magnetometer,
+    } = this.props;
+
+    debugger;
+
+    return (
+      <View style={styles.container}>
+        <SensorDisplay name="Accelerometer" value={Accelerometer} />
+        <SensorDisplay name="Gyroscope" value={Gyroscope} />
+        <SensorDisplay name="Magnetometer" value={Magnetometer} />
+      </View>
+    );
+  }
+}
+
+export default class SensorAwareViewExample extends Component {
+  render() {
+    return (
+      <View style={styles.container}>
+        <SensorView Accelerometer Gyroscope Magnetometer />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+  welcome: {
+    fontSize: 20,
+    textAlign: 'center',
+    margin: 10,
+  },
+  instructions: {
+    textAlign: 'center',
+    color: '#333333',
+    marginBottom: 5,
+  },
+});

index.android.js

@@ -1,5 +1,5 @@
 import React from 'react';
 import { AppRegistry } from 'react-native';
-import SensorExample from './SensorExample';
+import Example from './Example';
 
-AppRegistry.registerComponent('SensorExample', () => SensorExample);
+AppRegistry.registerComponent('SensorExample', () => Example);

index.ios.js

@@ -1,5 +1,5 @@
 import React from 'react';
 import { AppRegistry } from 'react-native';
-import SensorExample from './SensorExample';
+import Example from './Example';
 
-AppRegistry.registerComponent('SensorExample', () => SensorExample);
+AppRegistry.registerComponent('SensorExample', () => Example);

package.json

@@ -9,6 +9,7 @@
   "dependencies": {
     "react": "15.4.1",
     "react-native": "0.39.2",
+    "react-native-scrollable-tab-view": "^0.7.0",
     "react-native-sensors": "next"
   },
   "devDependencies": {