Find a combination of packages that works reliably

.gitignore

@@ -1,3 +1,5 @@
 node_modules/**/*
 .expo/*
 npm-debug.*
+.idea/*
+.history/*

examples/basic/app.json

@@ -7,7 +7,6 @@
     "version": "1.0.0",
     "primaryColor": "#E44262",
     "icon": "./assets/icon.png",
-    "platforms": ["web", "ios", "android"],
     "loading": {
       "icon": "./assets/icon.png",
       "hideExponentText": false
@@ -17,4 +16,4 @@
     },
     "platforms": ["android", "ios", "web"]
   }
-}
+}

examples/basic/package.json

@@ -8,16 +8,17 @@
   "dependencies": {
     "expo": "^33.0.0-alpha.web.1",
     "expo-asset-utils": "^1.1.0",
-    "expo-pixi": "../../expo-pixi-v1.1.0.tgz",
+    "expo-pixi": "file:./../../../expo-pixi",
     "react": "16.8.6",
     "react-dom": "^16.8.6",
     "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
     "react-native-web": "^0.11.2"
   },
   "devDependencies": {
-    "babel-preset-expo": "^5.1.1",
+    "@babel/core": "^7.7.7",
+    "babel-preset-expo": "^8.0.0",
     "eslint": "^5.16.0",
     "eslint-config-universe": "^1.0.7",
-    "prettier": "^1.17.0"
+    "prettier": "^1.19.1"
   }
 }

examples/comprehensive/components/TouchableView.js

@@ -47,7 +47,7 @@ class TouchableView extends React.Component {
       },
     });
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this._panResponder = this.buildGestures();
   }
 

examples/comprehensive/package.json

@@ -17,8 +17,10 @@
     "react-navigation": "^3.0.9"
   },
   "devDependencies": {
-    "eslint": "^5.12.0",
-    "eslint-config-universe": "^1.0.6",
-    "prettier": "^1.7.4"
+    "@babel/core": "^7.7.7",
+    "babel-preset-expo": "^8.0.0",
+    "eslint": "^5.16.0",
+    "eslint-config-universe": "^1.0.7",
+    "prettier": "^1.19.1"
   }
 }

examples/filter-image/App.js

@@ -56,7 +56,7 @@ export default class App extends Component {
     index: 0,
   };
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     console.log('pixi filters', PIXI.filters);
 
     const filter = filters => {

examples/signature/App.js

@@ -1,72 +1,37 @@
-import Expo from 'expo';
 import * as ExpoPixi from 'expo-pixi';
-import React, { Component } from 'react';
-import { Image, Button, Platform, AppState, StyleSheet, Text, View } from 'react-native';
+import React from 'react';
+import { Button, StyleSheet, View } from 'react-native';
 
-const isAndroid = Platform.OS === 'android';
-function uuidv4() {
-  //https://stackoverflow.com/a/2117523/4047926
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-    var r = (Math.random() * 16) | 0,
-      v = c == 'x' ? r : (r & 0x3) | 0x8;
-    return v.toString(16);
-  });
-}
-
-export default class App extends Component {
-  state = {
-    image: null,
-    strokeColor: 0,
-    appState: AppState.currentState,
-  };
-
-  handleAppStateChangeAsync = nextAppState => {
-    if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
-      if (isAndroid && this.sketch) {
-        this.setState({ appState: nextAppState, id: uuidv4(), lines: this.sketch.lines });
-        return;
-      }
-    }
-    this.setState({ appState: nextAppState });
-  };
-
-  componentDidMount() {
-    AppState.addEventListener('change', this.handleAppStateChangeAsync);
-  }
-
-  componentWillUnmount() {
-    AppState.removeEventListener('change', this.handleAppStateChangeAsync);
-  }
+export default function App() {
+  let sketch = null;
 
   onReady = () => {
     console.log('ready!');
   };
 
-  render() {
-    return (
+  return (
+    <View style={styles.container}>
       <View style={styles.container}>
-        <View style={styles.container}>
-          <View style={styles.sketchContainer}>
-            <ExpoPixi.Signature
-              ref={ref => (this.sketch = ref)}
-              style={styles.sketch}
-              strokeColor={'blue'}
-              strokeAlpha={1}
-              onReady={this.onReady}
-            />
-          </View>
+        <View style={styles.sketchContainer}>
+          <ExpoPixi.Signature
+            ref={ref => (sketch = ref)}
+            style={styles.sketch}
+            strokeColor={'blue'}
+            strokeAlpha={1}
+            onReady={onReady}
+          />
         </View>
-        <Button
-          color={'blue'}
-          title="undo"
-          style={styles.button}
-          onPress={() => {
-            this.sketch.undo();
-          }}
-        />
       </View>
-    );
-  }
+      <Button
+        color={'blue'}
+        title="undo"
+        style={styles.button}
+        onPress={() => {
+          sketch.undo();
+        }}
+      />
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({

examples/signature/app.json

@@ -3,7 +3,7 @@
     "name": "signature",
     "description": "expo-pixi signature example",
     "slug": "expo-pixi-signature",
-    "sdkVersion": "32.0.0",
+    "sdkVersion": "36.0.0",
     "version": "1.0.0",
     "primaryColor": "#E44262",
     "privacy": "public",
@@ -14,6 +14,11 @@
     },
     "ios": {
       "supportsTablet": true
-    }
+    },
+    "platforms": [
+      "android",
+      "ios",
+      "web"
+    ]
   }
 }

examples/signature/package.json

@@ -6,14 +6,19 @@
   "private": true,
   "main": "node_modules/expo/AppEntry.js",
   "dependencies": {
-    "expo": "^32.0.0",
-    "expo-pixi": "file:../../expo-pixi-v0.3.0.tgz",
-    "react": "16.5.0",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz"
+    "expo": "^36.0.0",
+    "expo-gl": "~8.0.0",
+    "expo-pixi": "file:./../../../expo-pixi",
+    "react": "16.9.0",
+    "react-dom": "^16.12.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz",
+    "react-native-web": "^0.12.0-rc.1"
   },
   "devDependencies": {
-    "eslint": "^4.9.0",
-    "eslint-config-universe": "^1.0.6",
-    "prettier": "^1.7.4"
+    "@babel/core": "^7.7.7",
+    "babel-preset-expo": "^8.0.0",
+    "eslint": "^5.16.0",
+    "eslint-config-universe": "^1.0.7",
+    "prettier": "^1.19.1"
   }
 }