Pixel Shape RN: code

App.tsx

@@ -22,6 +22,7 @@ import WebglCubeMapsScreen from './app/components/WebglCubeMaps';
 import PixiScreen from './app/components/Pixi';
 import DragNDropScreen from './src/dragNdrop';
 import NonDeclarativeScreen from './src/nonDeclarative';
+import PixelShapeRNScreen from './app/components/PixelShapeRNScreen';
 
 if (Platform.OS !== 'web') {
   require('react-native').LogBox.ignoreLogs([
@@ -77,6 +78,10 @@ function HomeScreen({navigation}) {
         title="babylonjs Non-Declarative"
         onPress={() => navigation.navigate('NonDeclarative')}
       />
+      <Button
+        title="Pixel Shape RN"
+        onPress={() => navigation.navigate('PixelShapeRN')}
+      />
     </View>
   );
 }
@@ -153,6 +158,11 @@ function App(): JSX.Element {
           component={NonDeclarativeScreen}
           options={{title: 'Non-Declarative'}}
         />
+        <Stack.Screen
+          name="PixelShapeRN"
+          component={PixelShapeRNScreen}
+          options={{title: 'Pixel Shape RN'}}
+        />
       </Stack.Navigator>
     </NavigationContainer>
   );

android/app/src/main/AndroidManifest.xml

@@ -2,6 +2,7 @@
 
     <uses-permission android:name="android.permission.INTERNET" />
     <uses-permission android:name="android.permission.RECORD_AUDIO" />
+    <uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE" />
 
     <application
       android:name=".MainApplication"

app/components/PixelShapeRNScreen.js

@@ -0,0 +1,51 @@
+import React, {Component} from 'react';
+import {Platform, StyleSheet, View} from 'react-native';
+import ManageExternalStorage from 'react-native-external-storage-permission';
+if (Platform.OS !== 'web') {
+  var {PERMISSIONS, request} = require('react-native-permissions').default;
+}
+import PixelShapeRN from 'pixelshapern/src/index';
+import {PixelShapeContext} from 'pixelshapern/src/context';
+
+export default class PixelShapeRNScreen extends Component {
+  componentDidMount() {
+    if (Platform.OS === 'android') {
+      ManageExternalStorage.checkAndGrantPermission().then(granted => {
+        if (!granted) {
+          console.warn('NoStoragePermissionCanNotSaveOrLoadGifFile');
+        }
+      });
+    }
+
+    if (Platform.OS === 'ios') {
+      request(
+        Platform.select({
+          ios: PERMISSIONS.IOS.PHOTO_LIBRARY,
+        }),
+      ).then(response => {
+        if (response !== 'granted') {
+          console.warn('NoStoragePermissionCanNotSaveOrLoadGifFile');
+        }
+      });
+    }
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <PixelShapeContext.Provider value={{}}>
+          <PixelShapeRN />
+        </PixelShapeContext.Provider>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+});

package.json

@@ -30,6 +30,7 @@
     "@babylonjs/loaders": "5.1.0",
     "@flyskywhy/react-native-gcanvas": "6.0.15",
     "@githubprimer/octicons-react": "^8.5.0",
+    "@react-native-community/slider": "4.2.0",
     "@react-navigation/native": "^6.0.10",
     "@react-navigation/native-stack": "6.6.2",
     "@testing-library/jest-dom": "^4.2.4",
@@ -42,20 +43,25 @@
     "intl": "1.2.5",
     "m4.js": "^1.0.0",
     "modal-enhanced-react-native-web": "^0.2.0",
+    "pixelshapern": "2.0.14",
     "pixi.js": "7.1.1",
     "pixi.js-legacy": "7.1.1",
     "react": "18.2.0",
     "react-babylonjs": "3.1.2",
     "react-dom": "18.2.0",
     "react-native": "0.71.6",
     "react-native-babylonjs": "1.1.2",
+    "react-native-blob-util": "0.19.11",
+    "react-native-external-storage-permission": "1.0.0",
+    "react-native-fast-image": "8.5.11",
     "react-native-font-picker": "1.0.0",
     "react-native-fs": "^2.18.0",
     "react-native-get-asset": "1.0.0",
     "react-native-live-audio-fft": "1.3.0",
     "react-native-permissions": "3.10.1",
     "react-native-safe-area-context": "3.4.1",
     "react-native-screens": "3.20.0",
+    "react-native-system-file-browser": "1.1.0",
     "react-native-web": "^0.17.5",
     "react-prism": "^4.3.2",
     "react-reconciler": "^0.25.1",