start app example

packages/playground/src/App.js

@@ -15,10 +15,13 @@ import {
 import data from './data';
 import loadImage from './utils/loadImage';
 import Loader from './Loader';
+import Store from './Store';
 
 const { width, height } = Dimensions.get('screen');
 
 class App extends Component {
+  _isMounted = false;
+
   constructor(props) {
     super(props);
     this.state = {
@@ -45,6 +48,10 @@ class App extends Component {
       console.log('images loaded');
       // this.setState({ loaded: true })
     });
+
+    setTimeout(() => {
+      this.setState({ loaded: true })
+    }, 100)
   }
 
   render() {
@@ -59,19 +66,11 @@ class App extends Component {
       );
     }
 
-    if (!loaded) {
-      return (
-        <View style={{ backgroundColor: '#1C1E21', width, height }}>
-          <Loader/>
-        </View>
-      );
-    }
-
     return (
       <View style={{ backgroundColor: '#1C1E21', width, height }}>
-        <Text>Noice</Text>
+        { !loaded ? <Loader/> : <Store/> }
       </View>
-    );
+    )
   }
 }
 

packages/playground/src/Loader.js

@@ -0,0 +1,60 @@
+import React, {Component} from 'react';
+import {
+  Text,
+  View,
+  registerComponent,
+  StyleSheet,
+  Dimensions,
+} from '../../react-ape/reactApeEntry';
+
+import Spinner from './Spinner';
+
+const {width, height} = Dimensions.get('screen');
+
+// Create Custom Components
+const custom = {
+  Spinner: registerComponent('Spinner', Spinner),
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    left: width / 2 - 40,
+    top: height / 4,
+    backgroundColor: '#1C1E21',
+  }
+});
+
+class Loader extends Component {
+  _interval = null;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      degrees: 0.0,
+    };
+  }
+
+  componentDidMount() {
+    this._interval = setInterval(() => {
+      const {degrees} = this.state;
+      this.setState({degrees: degrees + 0.1});
+    }, 10);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this._interval);
+  }
+
+  render() {
+    const {degrees} = this.state;
+    return (
+      <View style={ styles.container }>
+        <custom.Spinner degrees={degrees} style={{ top: height / 4 + 8, left: width / 2 - 60, color: 'white' }} />
+        <Text style={{ color: 'white' }}>Loading Store...</Text>
+      </View>
+    );
+  }
+}
+
+export default Loader;

packages/playground/src/Store.js

@@ -0,0 +1,43 @@
+import React, {Component} from 'react';
+import {
+  Text,
+  View,
+  registerComponent,
+  StyleSheet,
+  Dimensions,
+} from '../../react-ape/reactApeEntry';
+
+const { width, height } = Dimensions.get('screen');
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    left: 200,
+    top: 0,
+    height,
+    width,
+    backgroundColor: 'white',
+    color: 'orange'
+  }
+});
+
+class Store extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  componentDidMount() {
+
+  }
+
+  render() {
+    return (
+      <View style={ styles.container }>
+        <Text>Store...</Text>
+      </View>
+    );
+  }
+}
+
+export default Store;

packages/playground/src/data.js

@@ -0,0 +1,48 @@
+export default [
+  {
+    name: 'Suikoden 2',
+    price: 18.9,
+    imageSrc: 'suikoden-2.jpeg'
+  },
+  {
+    name: 'Suikoden 2',
+    price: 18.9,
+    imageSrc: 'suikoden-2.jpeg'
+  },
+  {
+    name: 'Suikoden 2',
+    price: 18.9,
+    imageSrc: 'suikoden-2.jpeg'
+  },
+  {
+    name: 'Suikoden 2',
+    price: 18.9,
+    imageSrc: 'suikoden-2.jpeg'
+  },
+  {
+    name: 'Suikoden 2',
+    price: 18.9,
+    imageSrc: 'suikoden-2.jpeg'
+  },
+  {
+    name: 'Suikoden 2',
+    price: 18.9,
+    imageSrc: 'suikoden-2.jpeg'
+  },
+  {
+    name: 'Suikoden 2',
+    price: 18.9,
+    imageSrc: 'suikoden-2.jpeg'
+  },
+  {
+    name: 'Suikoden 2',
+    price: 18.9,
+    imageSrc: 'suikoden-2.jpeg'
+  },
+  {
+    name: 'Suikoden 2',
+    price: 18.9,
+    imageSrc: 'suikoden-2.jpeg'
+  },
+];
+

packages/playground/src/utils/loadImage.js

@@ -0,0 +1,11 @@
+function loadImage(url) {
+  return new Promise(resolve => {
+    const image = new Image();
+    image.addEventListener('load', () => {
+      resolve(image);
+    });
+    image.src = url;
+  });
+}
+
+export default loadImage;