Committing altogether. React Native or 'react-native' method source.

.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    "babel-preset-react-native-stage-0/decorator-support"
+  ],
+  "env": {
+    "development": {
+      "plugins": [
+        "transform-react-jsx-source"
+      ]
+    }
+  }
+}

.expo/packager-info.json

@@ -0,0 +1 @@
+{}

.expo/settings.json

@@ -0,0 +1,9 @@
+{
+  "hostType": "tunnel",
+  "lanType": "ip",
+  "dev": true,
+  "strict": false,
+  "minify": false,
+  "urlType": "exp",
+  "urlRandomness": "48-rkc"
+}

.flowconfig

@@ -0,0 +1,70 @@
+[ignore]
+; We fork some components by platform
+.*/*[.]android.js
+
+; Ignore templates for 'react-native init'
+.*/local-cli/templates/.*
+
+; Ignore the website subdir
+<PROJECT_ROOT>/node_modules/react-native/website/.*
+
+; Ignore the Dangerfile
+<PROJECT_ROOT>/node_modules/react-native/danger/dangerfile.js
+
+; Ignore "BUCK" generated dirs
+<PROJECT_ROOT>/node_modules/react-native/\.buckd/
+
+; Ignore unexpected extra "@providesModule"
+.*/node_modules/.*/node_modules/fbjs/.*
+.*/node_modules/fbemitter/.*
+
+; Ignore duplicate module providers
+; For RN Apps installed via npm, "Libraries" folder is inside
+; "node_modules/react-native" but in the source repo it is in the root
+.*/Libraries/react-native/React.js
+
+; Ignore polyfills
+.*/Libraries/polyfills/.*
+
+; Ignore misbehaving dev-dependencies
+.*/node_modules/reqwest/.*
+.*/node_modules/xdl/.*
+
+; Ignore expo dependencies
+
+; Ignore Expo SDK + some of it's dependencies temporarily:
+; https://github.com/expo/expo/issues/162
+.*/node_modules/expo/src/.*
+.*/node_modules/react-native-gesture-handler/.*
+
+[include]
+
+[libs]
+node_modules/react-native/Libraries/react-native/react-native-interface.js
+node_modules/react-native/flow/
+node_modules/expo/flow/
+
+[options]
+emoji=true
+
+module.system=haste
+
+munge_underscores=true
+
+module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
+
+suppress_type=$FlowIssue
+suppress_type=$FlowFixMe
+suppress_type=$FlowFixMeProps
+suppress_type=$FlowFixMeState
+suppress_type=$FixMe
+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(5[0-3]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(5[0-3]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
+suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
+
+unsafe.enable_getters_and_setters=true
+
+[version]
+^0.53.0

.watchmanconfig

@@ -0,0 +1 @@
+{}

App.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import HomeView from './Components/HomeView'
+
+export default class App extends React.Component {
+  render() {
+    return (
+      <HomeView />
+    )
+  }
+}

App.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import App from './App';
+
+import renderer from 'react-test-renderer';
+
+it('renders without crashing', () => {
+  const rendered = renderer.create(<App />).toJSON();
+  expect(rendered).toBeTruthy();
+});

Components/HomeView.js

@@ -0,0 +1,101 @@
+import React, { Component } from 'react';
+import { Button } from 'react-native';
+
+import { StyleSheet, Text, View } from 'react-native';
+import SoundBox from './SoundBox'
+import VolumeView from './VolumeView'
+
+let defaultVolume = 0.6
+export default class App extends React.Component {
+
+  constructor(props) {
+     super(props)
+     this.state = {
+       volumeControlState: true
+     }
+     this.volumeControlChanged=this.volumeControlChanged.bind(this)
+  }
+
+  render() {
+    return (
+      <View style={styles.verticalContainer}>
+        <View style={styles.volumeControlContainer}>
+          <View style={styles.volumeControl}>
+            <VolumeView onVolumeControlStateChange={this.volumeControlChanged}/>
+          </View>
+        </View>
+        <View style={styles.horizontalContainer}>
+          <SoundBox ref={instance => { this.rain = instance; }} name="Rain" volume={defaultVolume} fileName="Rain" title="Let it Rain!" style={styles.leftOne}/>
+          <SoundBox ref={instance => { this.fire = instance; }} name="Fire" volume={0.8} fileName="Fire" title="Lit the Fire!" style={styles.leftOne}/>
+        </View>
+        <View style={styles.horizontalContainer}>
+          <SoundBox ref={instance => { this.wind = instance; }} name="Wind" volume={0.4} fileName="Wind" title="Let the Wind Pass!" style={styles.leftOne}/>
+          <SoundBox ref={instance => { this.thunder = instance; }} name="Thunder" volume={0.3} fileName="Thunder" title="Let the Thunder shout!" style={styles.rightOne}/>
+        </View>
+      </View>
+    );
+  }
+
+  volumeControlChanged(volumeState) {
+    // console.warn(volumeState);
+    this.rain.volumeControlChanged(volumeState)
+    this.fire.volumeControlChanged(volumeState)
+    this.wind.volumeControlChanged(volumeState)
+    this.thunder.volumeControlChanged(volumeState)
+  }
+}
+
+//CSS
+const styles = StyleSheet.create({
+  verticalContainer: {
+    flex: 2,
+    backgroundColor: '#efefef',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+  },
+  horizontalContainer: {
+    flex: 1,
+    // backgroundColor: '#fffeee',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+  leftOne: {
+    flex: 1,
+    width: 100,
+    // backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  rightOne: {
+    flex: 1,
+    width: 200,
+    // backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  volumeControlContainer: {
+    flex: 0.3,
+    justifyContent: 'flex-end',
+    flexDirection: 'row',
+    // top: 20
+  },
+  volumeControl: {
+    flex: 1,
+    flexDirection: 'row',
+    // backgroundColor: '#fff',
+    // alignItems: 'center',
+    justifyContent: 'flex-end',
+    right: 20,
+    top: 20
+  }
+});
+
+class HomeView extends React.Component {
+
+  constructor(props) {
+   super(props)
+  }
+
+}