new example app

examples/sample/App.js

@@ -1,20 +1 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
-
-export default function App() {
-  return (
-    <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
-      <StatusBar style="auto" />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
+export { default } from './src/Moti.Skeleton'

examples/sample/babel.config.js

@@ -1,6 +1,29 @@
-module.exports = function(api) {
-  api.cache(true);
+const path = require('path')
+
+module.exports = function (api) {
+  api.cache(true)
   return {
     presets: ['babel-preset-expo'],
-  };
-};
+    plugins: [
+      'react-native-reanimated/plugin',
+      [
+        'module-resolver',
+        {
+          extensions: ['.tsx', '.ts', '.js', '.json'],
+          alias: {
+            // For development, we want to alias the library to the source
+            moti$: path.join(__dirname, '../../packages/moti/src/index.tsx'),
+            'moti/skeleton': path.join(
+              __dirname,
+              '../../packages/moti/src/skeleton/index.ts'
+            ),
+            'moti/interactions': path.join(
+              __dirname,
+              '../../packages/moti/src/interactions/index.ts'
+            ),
+          },
+        },
+      ],
+    ],
+  }
+}

examples/sample/metro.config.js

@@ -0,0 +1,32 @@
+// Learn more https://docs.expo.io/guides/customizing-metro
+const { getDefaultConfig } = require('expo/metro-config')
+const path = require('path')
+
+const config = getDefaultConfig(__dirname)
+
+// npm v7+ will install ../node_modules/react-native because of peerDependencies.
+// To prevent the incompatible react-native bewtween ./node_modules/react-native and ../node_modules/react-native,
+// excludes the one from the parent folder when bundling.
+config.resolver.blockList = [
+  ...Array.from(config.resolver.blockList ?? []),
+  new RegExp(path.resolve('../..', 'node_modules', 'react-native')),
+]
+
+config.resolver.nodeModulesPaths = [
+  path.resolve(__dirname, './node_modules'),
+  path.resolve(__dirname, '../../node_modules'),
+]
+
+config.resolver.assetExts.push('mjs')
+config.resolver.assetExts.push('cjs')
+
+config.watchFolders = [path.resolve(__dirname, '../..')]
+
+config.transformer.getTransformOptions = async () => ({
+  transform: {
+    experimentalImportSupport: false,
+    inlineRequires: true,
+  },
+})
+
+module.exports = config

examples/sample/package.json

@@ -1,7 +1,6 @@
 {
   "name": "sample",
   "version": "1.0.0",
-  "main": "node_modules/expo/AppEntry.js",
   "scripts": {
     "start": "expo start",
     "android": "expo start --android",
@@ -11,11 +10,15 @@
   "dependencies": {
     "expo": "~50.0.7",
     "expo-status-bar": "~1.11.1",
+    "moti": "^0.27.2",
     "react": "18.2.0",
-    "react-native": "0.73.4"
+    "react-native": "0.73.4",
+    "react-native-gesture-handler": "~2.14.0",
+    "react-native-reanimated": "~3.6.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0"
+    "@babel/core": "^7.20.0",
+    "babel-plugin-module-resolver": "^5.0.0"
   },
   "private": true
 }

examples/sample/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "compilerOptions": {},
+  "extends": "expo/tsconfig.base"
+}