feat: Initial working creation

Author: robertleeplummerjr

.gitignore

@@ -0,0 +1,14 @@
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+web-report/
+
+# macOS
+.DS_Store

App.tsx

@@ -0,0 +1,104 @@
+import React, { Component, Fragment } from 'react';
+import { Button, StyleSheet, Text, View } from 'react-native';
+import { GLView } from 'expo-gl';
+import { GPU, IKernelRunShortcut } from '@gpujs/expo-gl';
+
+async function createVanillaKernel() {
+  const context = await GLView.createContextAsync();
+  const gpu = new GPU({ context });
+  return gpu.createKernel(function () {
+    return Math.random();
+  }, {
+    output: [2048, 2048],
+  });
+}
+
+interface IAppState {
+  error: any,
+  kernel: IKernelRunShortcut,
+  milliseconds: number,
+  kernelResult: number[][],
+  kernelRunning: boolean,
+}
+
+export default class App extends Component<any, IAppState> {
+  setError = error => {
+    this.setState({ error });
+  };
+
+  setKernel = async kernel => {
+    this.setState({ kernel });
+  };
+
+  runKernel = () => {
+    this.setState({
+      kernelRunning: true,
+    });
+    const start = Date.now();
+    const result = this.state.kernel();
+    const milliseconds = Date.now() - start;
+    this.setState({
+      kernelResult: result as number[][],
+      milliseconds,
+      kernelRunning: false,
+    });
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      error: null,
+      kernel: null,
+      kernelResult: null,
+      milliseconds: null,
+      kernelRunning: false,
+    };
+  }
+
+  componentDidMount(): void {
+    createVanillaKernel()
+      .catch(this.setError)
+      .then(this.setKernel);
+  }
+
+  render() {
+    const {
+      error,
+      kernel,
+      kernelResult,
+      milliseconds,
+      kernelRunning,
+    } = this.state;
+
+    let children;
+
+    if (error) {
+      children = <Text>There was an error { error.toString() }</Text>;
+    } else if (!kernel) {
+      children = <Text>Loading context</Text>;
+    } else {
+      children = <Fragment>
+        <Button
+          disabled={kernelRunning}
+          onPress={this.runKernel}
+          title="Tap to run Kernel"
+        />
+        {
+          kernelResult
+            ? <Text>Kernel calculated with length of { kernelResult.length * kernelResult[0].length } and took { milliseconds } milliseconds</Text>
+            : null
+        }
+      </Fragment>
+    }
+    return (<View style={styles.container}>{children}</View>);
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

README.md

@@ -1,2 +1,3 @@
 # expo-gl-example
 A GPU.js native example used with https://github.com/gpujs/expo-gl
+Created using `expo init` with minimal working example.

app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "A GPU.js native example",
+    "slug": "gpujs_example",
+    "privacy": "public",
+    "sdkVersion": "36.0.0",
+    "platforms": [
+      "ios",
+      "android",
+      "web"
+    ],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    }
+  }
+}

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};