refactor: migrate example app to expo

example/.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

example/.gitignore

@@ -0,0 +1,13 @@
+node_modules/
+.expo/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store

example/App.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { SafeAreaView } from 'react-native';
+
+import { SwipeablePanel } from 'rn-swipeable-panel';
+import { Header } from './src/components/Header';
+import { PanelContent } from './src/components/PanelContent';
+import useSwipeablePanel from './src/hooks/useSwipeablePanel';
+import List from './src/screens/List';
+
+export default function App() {
+  const {
+    panelState,
+    changePanelState,
+    openAboutPanel,
+    openSettingsPanel,
+    openConfigurationsPanel,
+    openDarkPanel,
+    openDefaultPanel,
+    closePanel,
+  } = useSwipeablePanel();
+
+  return (
+    <>
+      <SafeAreaView>
+        <Header title="Examples" />
+        <List
+          openDefaultPanel={openDefaultPanel}
+          openSettingsPanel={openSettingsPanel}
+          openAboutPanel={openAboutPanel}
+          openConfigurationsPanel={openConfigurationsPanel}
+          openDarkPanel={openDarkPanel}
+        />
+      </SafeAreaView>
+      <SwipeablePanel {...panelState} {...panelState.panelStyles} onClose={closePanel}>
+        <PanelContent
+          contentType={panelState.contentType}
+          panelState={panelState}
+          changePanelState={changePanelState}
+        />
+      </SwipeablePanel>
+    </>
+  );
+}

example/app.json

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

example/babel.config.js

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

example/package.json

@@ -0,0 +1,27 @@
+{
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "expo": "~42.0.1",
+    "expo-status-bar": "~1.0.4",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
+    "react-native-typography": "^1.4.1",
+    "react-native-web": "~0.13.12",
+    "rn-swipeable-panel": "^1.2.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.9.0",
+    "@types/react": "~16.9.35",
+    "@types/react-native": "~0.63.2",
+    "typescript": "~4.0.0"
+  },
+  "private": true
+}

examples/components/About/components/Title/index.tsx → example/src/components/About/components/Title/index.tsx

@@ -21,7 +21,7 @@ const Styles = StyleSheet.create({
     marginTop: 18,
   },
   title: {
-    ...material.headline,
+    ...material.body1,
     fontWeight: '500',
     color: 'black',
   },

examples/components/Configurations/index.tsx → example/src/components/Configurations/index.tsx

@@ -1,14 +1,13 @@
 import React from 'react';
-import {StyleSheet, View, Text, Switch} from 'react-native';
-import {AppState} from '../../App';
-import {material} from 'react-native-typography';
+import { StyleSheet, View, Text, Switch } from 'react-native';
+import { material } from 'react-native-typography';
 
 type ConfigurationsProps = {
-  state: AppState;
+  state: any;
   changeState: Function;
 };
 
-export const Configurations = ({state, changeState}: ConfigurationsProps) => {
+export const Configurations = ({ state, changeState }: ConfigurationsProps) => {
   return (
     <React.Fragment>
       <View
@@ -19,27 +18,24 @@ export const Configurations = ({state, changeState}: ConfigurationsProps) => {
             borderBottomWidth: 1,
             borderBottomColor: 'rgba(0,0,0,0.1)',
           },
-        ]}>
+        ]}
+      >
         <Text style={material.headline}>Configurations</Text>
       </View>
       <View style={Styles.configurationItem}>
-        <Text>Is Open</Text>
+        <Text style={Styles.configurationTitle}>Is Open</Text>
         <Switch value={state.isActive} disabled />
       </View>
       <View style={Styles.configurationItem}>
         <Text style={Styles.configurationTitle}>Full Width</Text>
-        <Switch
-          value={state.fullWidth}
-          onValueChange={value => changeState({...state, fullWidth: value})}
-        />
+        <Switch value={state.fullWidth} onValueChange={(value) => changeState({ fullWidth: value })} />
       </View>
       <View style={Styles.configurationItem}>
         <Text style={Styles.configurationTitle}>Close Button</Text>
         <Switch
           value={state.showCloseButton}
-          onValueChange={value =>
+          onValueChange={(value) =>
             changeState({
-              ...state,
               showCloseButton: value,
             })
           }
@@ -49,28 +45,19 @@ export const Configurations = ({state, changeState}: ConfigurationsProps) => {
         <Text style={Styles.configurationTitle}>No Background Opacity</Text>
         <Switch
           value={state.noBackgroundOpacity}
-          onValueChange={value =>
-            changeState({...state, noBackgroundOpacity: value})
-          }
+          onValueChange={(value) => changeState({ noBackgroundOpacity: value })}
         />
       </View>
       <View style={Styles.configurationItem}>
         <Text style={Styles.configurationTitle}>Close on touch outside</Text>
         <Switch
           value={state.closeOnTouchOutside}
-          onValueChange={value =>
-            changeState({...state, closeOnTouchOutside: value})
-          }
+          onValueChange={(value) => changeState({ closeOnTouchOutside: value })}
         />
       </View>
       <View style={Styles.configurationItem}>
         <Text style={Styles.configurationTitle}>Allow outside touch</Text>
-        <Switch
-          value={state.allowTouchOutside}
-          onValueChange={value =>
-            changeState({...state, allowTouchOutside: value})
-          }
-        />
+        <Switch value={state.allowTouchOutside} onValueChange={(value) => changeState({ allowTouchOutside: value })} />
       </View>
     </React.Fragment>
   );
@@ -87,5 +74,5 @@ export const Styles = StyleSheet.create({
     alignItems: 'center',
     backgroundColor: '#fff',
   },
-  configurationTitle: {...material.subheading},
+  configurationTitle: { ...material.subheading },
 });

examples/components/DarkShoppingCart/ProductItem/index.tsx → example/src/components/DarkShoppingCart/ProductItem/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {View, Text, StyleSheet} from 'react-native';
 
-import Icon from 'react-native-vector-icons/Feather';
+import Icon from '@expo/vector-icons/Feather';
 import {material} from 'react-native-typography';
 
 type ProductItemProps = {

examples/components/DarkShoppingCart/index.tsx → example/src/components/DarkShoppingCart/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {View, Text, StyleSheet} from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
+import Icon from '@expo/vector-icons/Feather';
 import {ProductItem} from './ProductItem';
 
 export const DarkPanel = () => {

examples/components/Header/index.tsx → example/src/components/Header/index.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import {StyleSheet, View, Text} from 'react-native';
-import {material} from 'react-native-typography';
+import { StyleSheet, View, Text } from 'react-native';
+import { material } from 'react-native-typography';
 
 type HeaderProps = {
   title: string;
 };
 
-export const Header = ({title}: HeaderProps) => (
+export const Header = ({ title }: HeaderProps) => (
   <View style={HeaderStyles.container}>
     <View style={HeaderStyles.innerContent}>
       <Text style={HeaderStyles.title}>{title}</Text>
@@ -21,7 +21,6 @@ const HeaderStyles = StyleSheet.create({
     display: 'flex',
     justifyContent: 'flex-end',
     alignItems: 'center',
-    marginTop: 50,
   },
   innerContent: {
     width: '90%',