Make example app easier to run

example/App.tsx

@@ -1,13 +1,12 @@
 import * as React from 'react';
 import { View, Text, StatusBar, ScrollView } from 'react-native';
 
-// import { SafeAreaProvider, useSafeArea } from 'react-native-safe-area-context'; in your app.
 import {
   SafeAreaProvider,
   useSafeAreaInsets,
   initialWindowMetrics,
   useSafeAreaFrame,
-} from '../src';
+} from 'react-native-safe-area-context';
 
 const DataView = ({ data }: { data: object | null | undefined }) => (
   <Text style={{ fontSize: 16, lineHeight: 24, color: '#292929' }}>

example/app.json

@@ -2,7 +2,7 @@
   "name": "SafeAreaViewExample",
   "displayName": "SafeAreaViewExample",
   "expo": {
-    "entryPoint": "./example/index",
+    "entryPoint": "./example/index.expo",
     "name": "react-native-safe-area-context",
     "slug": "react-native-safe-area-context",
     "version": "0.1.0",

example/babel.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  plugins: [
+    [
+      'module-resolver',
+      {
+        alias: {
+          'react-native-safe-area-context': './src',
+        },
+      },
+    ],
+  ],
+};

example/ios/SafeAreaViewExample.xcodeproj/project.pbxproj

@@ -248,7 +248,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "export RCT_METRO_PORT=\"${RCT_METRO_PORT:=8081}\"\necho \"export RCT_METRO_PORT=${RCT_METRO_PORT}\" > \"${SRCROOT}/../../node_modules/react-native/scripts/.packager.env\"\nif [ -z \"${RCT_NO_LAUNCH_PACKAGER+xxx}\" ] ; then\n  if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then\n    if ! curl -s \"http://localhost:${RCT_METRO_PORT}/status\" | grep -q \"packager-status:running\" ; then\n      echo \"Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly\"\n      exit 2\n    fi\n  else\n    open \"$SRCROOT/../node_modules/react-native/scripts/launchPackager.command\" || echo \"Can't start packager automatically\"\n  fi\nfi\n";
+			shellScript = "export RCT_METRO_PORT=\"${RCT_METRO_PORT:=8081}\"\necho \"export RCT_METRO_PORT=${RCT_METRO_PORT}\" > \"${SRCROOT}/../../node_modules/react-native/scripts/.packager.env\"\nif [ -z \"${RCT_NO_LAUNCH_PACKAGER+xxx}\" ] ; then\n  if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then\n    if ! curl -s \"http://localhost:${RCT_METRO_PORT}/status\" | grep -q \"packager-status:running\" ; then\n      echo \"Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly\"\n      exit 2\n    fi\n  else\n    open \"$SRCROOT/../../node_modules/react-native/scripts/launchPackager.command\" || echo \"Can't start packager automatically\"\n  fi\nfi\n";
 			showEnvVarsInLog = 0;
 		};
 /* End PBXShellScriptBuildPhase section */

example/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "example",
+  "dependencies": {
+    "expo": "^37.0.8",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-native": "^0.63.0-rc.0",
+    "react-native-web": "^0.12.2"
+  }
+}

metro.config.js

@@ -1,17 +0,0 @@
-/**
- * Metro configuration for React Native
- * https://github.com/facebook/react-native
- *
- * @format
- */
-
-module.exports = {
-  transformer: {
-    getTransformOptions: async () => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: false,
-      },
-    }),
-  },
-};

package.json

@@ -28,7 +28,9 @@
     "validate:prettier": "prettier \"src/**/*.{js,ts,tsx}\" \"example/**/*.{js,ts,tsx}\" --check",
     "validate:jest": "jest",
     "prepare": "bob build",
-    "example:ios": "cd example && react-native run-ios"
+    "example:ios": "cd ./example && react-native run-ios",
+    "example:android": "cd ./example && react-native run-android --no-jetifier",
+    "example:expo": "expo start --config example/app.json"
   },
   "keywords": [
     "react-native",
@@ -53,10 +55,12 @@
     "@types/react-test-renderer": "^16.9.2",
     "@typescript-eslint/eslint-plugin": "^2.30.0",
     "@typescript-eslint/parser": "^2.30.0",
+    "babel-plugin-module-resolver": "^4.0.0",
     "eslint": "6.8.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "3.1.3",
     "expo": "^37.0.8",
+    "expo-cli": "^3.20.1",
     "jest": "^25.5.4",
     "metro-react-native-babel-preset": "^0.59.0",
     "prettier": "^2.0.5",

tsconfig.json

@@ -12,7 +12,11 @@
     "moduleResolution": "node",
     "skipLibCheck": true,
     "lib": ["dom", "es2015", "es2016", "esnext"],
-    "jsx": "react-native"
+    "jsx": "react-native",
+    "baseUrl": ".",
+    "paths": {
+      "react-native-safe-area-context": ["./src"]
+    }
   },
   "exclude": ["node_modules"]
 }