chore: add expo-based playground

Author: iChengbo

playground/.gitignore

@@ -0,0 +1,35 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo

playground/App.js

@@ -0,0 +1,59 @@
+/* eslint-disable react-native/no-inline-styles */
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ * @flow strict-local
+ */
+
+import React from 'react';
+import {
+  SafeAreaView,
+  StatusBar,
+  Text,
+  useColorScheme,
+  View,
+  Image,
+  StyleSheet,
+} from 'react-native';
+
+const App = () => {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  return (
+    <SafeAreaView style={{ flex: 1, backgroundColor: '#ddd' }}>
+      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+        <Image
+          source={require('./assets/original_panda.png')}
+          style={styles.img}
+        />
+        <Text style={{ marginTop: 5 }}>
+          Original transparent PNG&nbsp;
+          <Text style={{ fontWeight: 'bold', color: 'red' }}>57KB</Text>
+        </Text>
+        <View style={{ height: 20 }} />
+        <Image
+          source={require('./assets/shrunk_panda.png')}
+          style={styles.img}
+        />
+        <Text style={{ marginTop: 5 }}>
+          Shrunk transparent PNG&nbsp;
+          <Text style={{ fontWeight: 'bold', color: 'red' }}>16KB</Text>
+        </Text>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  img: {
+    borderWidth: 5,
+    borderColor: '#fff',
+    width: 180,
+    height: 180,
+  }
+})
+
+export default App;

playground/app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "playground",
+    "slug": "playground",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

playground/assets/adaptive-icon.png

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

playground/assets/favicon.png

@@ -0,0 +1,10 @@
+// Learn more https://docs.expo.io/guides/customizing-metro
+const { getDefaultConfig } = require('expo/metro-config');
+
+/** @type {import('expo/metro-config').MetroConfig} */
+const config = getDefaultConfig(__dirname);
+
+// use plugin to compress assets
+config.transformer.assetPlugins.push('react-native-imagemin-asset-plugin')
+
+module.exports = config;

playground/assets/icon.png

@@ -0,0 +1,25 @@
+{
+  "name": "playground",
+  "version": "1.0.0",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@expo/webpack-config": "^19.0.0",
+    "expo": "~49.0.13",
+    "expo-status-bar": "~1.6.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.72.5",
+    "react-native-imagemin-asset-plugin": "file:..",
+    "react-native-web": "~0.19.6"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0"
+  },
+  "private": true
+}