chore: added Expo example (#958)

* chore: move current exmple to bare folder

* chore: move shared code from bare to app

* chore: added expo example

* chore: added gesture handler root view

.gitignore

@@ -38,7 +38,7 @@ android.iml
 
 # Cocoapods
 #
-example/ios/Pods
+Pods/
 
 # node.js
 #

example/app/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@gorhom/bottom-sheet-example-app",
+  "description": "Example app for @gorhom/bottom-sheet",
+  "version": "0.0.1",
+  "main": "./src/index",
+  "react-native": "./src/index",
+  "private": true,
+  "peerDependencies": {
+    "@gorhom/portal": "^1.0.13",
+    "@gorhom/showcase-template": "^2.1.0",
+    "@react-native-community/blur": "^3.6.0",
+    "@react-native-community/masked-view": "0.1.11",
+    "@react-navigation/bottom-tabs": "^6.0.9",
+    "@react-navigation/elements": "^1.2.1",
+    "@react-navigation/material-top-tabs": "^6.0.6",
+    "@react-navigation/native": "^6.0.6",
+    "@react-navigation/native-stack": "^6.2.5",
+    "@react-navigation/stack": "^6.0.11",
+    "faker": "^4.1.0",
+    "nanoid": "^3.3.3",
+    "react": "17.0.2",
+    "react-native": "0.68.1",
+    "react-native-gesture-handler": "^2.1.0",
+    "react-native-maps": "^0.30.1",
+    "react-native-pager-view": "^5.4.9",
+    "react-native-reanimated": "^2.8.0",
+    "react-native-redash": "^16.0.11",
+    "react-native-safe-area-context": "4.2.4",
+    "react-native-screens": "^3.10.1",
+    "react-native-tab-view": "^3.1.1",
+    "@babel/core": "^7.13.10",
+    "@babel/runtime": "^7.13.10",
+    "@types/faker": "^4.1.12",
+    "@types/react": "^17.0.35",
+    "@types/react-native": "^0.66.5",
+    "metro-react-native-babel-preset": "^0.67.0",
+    "typescript": "^4.2.4"
+  }
+}

example/app/src/App.tsx

@@ -0,0 +1,40 @@
+import React, { useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { ShowcaseApp } from '@gorhom/showcase-template';
+import { screens as defaultScreens } from './screens';
+import { version, description } from '../../../package.json';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+
+const author = {
+  username: 'Mo Gorhom',
+  url: 'https://gorhom.dev',
+};
+
+interface AppProps {
+  screens?: any[];
+}
+
+export const App = ({ screens: providedScreens }: AppProps) => {
+  const screens = useMemo(
+    () => [...defaultScreens, ...(providedScreens ? providedScreens : [])],
+    [providedScreens]
+  );
+  return (
+    <GestureHandlerRootView style={styles.container}>
+      <ShowcaseApp
+        name="Bottom Sheet"
+        description={description}
+        version={version}
+        author={author}
+        data={screens}
+      />
+    </GestureHandlerRootView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexGrow: 1,
+  },
+});

example/app/src/components/button/Button.tsx

@@ -0,0 +1,23 @@
+import React, { memo } from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+import { ShowcaseButton, ShowcaseLabel } from '@gorhom/showcase-template';
+
+interface ButtonProps {
+  label: string;
+  labelStyle?: TextStyle;
+  style?: ViewStyle;
+  onPress: () => void;
+}
+
+const ButtonComponent = ({
+  label,
+  labelStyle,
+  style,
+  onPress,
+}: ButtonProps) => (
+  <ShowcaseButton containerStyle={style} onPress={onPress}>
+    <ShowcaseLabel style={labelStyle}>{label}</ShowcaseLabel>
+  </ShowcaseButton>
+);
+
+export const Button = memo(ButtonComponent);

example/app/src/components/button/index.ts

@@ -0,0 +1 @@
+export { Button } from './Button';

example/src/components/contactItem/ContactItem.tsx → example/app/src/components/contactItem/ContactItem.tsx

@@ -78,6 +78,4 @@ const styles = StyleSheet.create({
   },
 });
 
-const ContactItem = memo(ContactItemComponent);
-
-export default ContactItem;
+export const ContactItem = memo(ContactItemComponent);

example/app/src/components/contactItem/index.ts

@@ -0,0 +1 @@
+export { ContactItem } from './ContactItem';

example/src/components/contactList/ContactList.tsx → example/app/src/components/contactList/ContactList.tsx

@@ -1,5 +1,5 @@
-import React, { useMemo, useCallback, ComponentProps } from 'react';
-import { StyleSheet, Text, Platform, View, ViewStyle } from 'react-native';
+import React, { useMemo, useCallback, ComponentProps, memo } from 'react';
+import { Text, Platform, View, ViewStyle } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useFocusEffect } from '@react-navigation/native';
 import {
@@ -12,8 +12,9 @@ import {
 import {
   createContactListMockData,
   createContactSectionsMockData,
-} from '../../utilities';
-import ContactItem from '../contactItem';
+} from '../../utilities/createMockData';
+import { ContactItem } from '../contactItem';
+import { styles } from './styles';
 
 export interface ContactListProps
   extends Pick<
@@ -31,7 +32,7 @@ const keyExtractor = (item: any, index: number) => `${item.name}.${index}`;
 const handleGetItem = (data: any[], index: number) => data[index];
 const handleGetCount = (data: any[]) => data.length;
 
-const ContactList = ({
+const ContactListComponent = ({
   type,
   count = 25,
   style,
@@ -181,24 +182,4 @@ const ContactList = ({
   return null;
 };
 
-const styles = StyleSheet.create({
-  sectionHeaderContainer: {
-    paddingTop: 24,
-    paddingBottom: 6,
-    backgroundColor: 'white',
-  },
-  sectionHeaderTitle: {
-    fontSize: 16,
-    textTransform: 'uppercase',
-  },
-  container: {
-    overflow: 'visible',
-    flex: 1,
-  },
-  contentContainer: {
-    paddingHorizontal: 16,
-    overflow: 'visible',
-  },
-});
-
-export default ContactList;
+export const ContactList = memo(ContactListComponent);

example/app/src/components/contactList/index.ts

@@ -0,0 +1,2 @@
+export { ContactList } from './ContactList';
+export type { ContactListProps } from './ContactList';

example/app/src/components/contactList/styles.ts

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  sectionHeaderContainer: {
+    paddingTop: 24,
+    paddingBottom: 6,
+    backgroundColor: 'white',
+  },
+  sectionHeaderTitle: {
+    fontSize: 16,
+    textTransform: 'uppercase',
+  },
+  container: {
+    overflow: 'visible',
+    flex: 1,
+  },
+  contentContainer: {
+    paddingHorizontal: 16,
+    overflow: 'visible',
+  },
+});

example/app/src/components/contactList/styles.web.ts

@@ -0,0 +1,20 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  sectionHeaderContainer: {
+    paddingTop: 24,
+    paddingBottom: 6,
+    backgroundColor: 'white',
+  },
+  sectionHeaderTitle: {
+    fontSize: 16,
+    textTransform: 'uppercase',
+  },
+  container: {
+    flex: 1,
+    paddingHorizontal: 16,
+  },
+  contentContainer: {
+    paddingHorizontal: 16,
+  },
+});

example/src/components/customBackground/CustomBackground.tsx → example/app/src/components/customBackground/CustomBackground.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import { BottomSheetBackgroundProps } from '@gorhom/bottom-sheet';
 import Animated, {
@@ -8,7 +8,7 @@ import Animated, {
 
 interface CustomBackgroundProps extends BottomSheetBackgroundProps {}
 
-const CustomBackground: React.FC<CustomBackgroundProps> = ({
+const CustomBackgroundComponent: React.FC<CustomBackgroundProps> = ({
   style,
   animatedIndex,
 }) => {
@@ -31,7 +31,7 @@ const CustomBackground: React.FC<CustomBackgroundProps> = ({
   return <Animated.View pointerEvents="none" style={containerStyle} />;
 };
 
-export default CustomBackground;
+export const CustomBackground = memo(CustomBackgroundComponent);
 
 const styles = StyleSheet.create({
   container: {

example/app/src/components/customBackground/index.ts

@@ -0,0 +1 @@
+export { CustomBackground } from './CustomBackground';

example/src/components/customFooter/CustomFooter.tsx → example/app/src/components/customFooter/CustomFooter.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { memo, useCallback, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import {
   BottomSheetFooter,
@@ -18,7 +18,9 @@ const AnimatedRectButton = Animated.createAnimatedComponent(RectButton);
 
 interface CustomFooterProps extends BottomSheetFooterProps {}
 
-const CustomFooter = ({ animatedFooterPosition }: CustomFooterProps) => {
+const CustomFooterComponent = ({
+  animatedFooterPosition,
+}: CustomFooterProps) => {
   //#region hooks
   const { bottom: bottomSafeArea } = useSafeAreaInsets();
   const { expand, collapse, animatedIndex } = useBottomSheet();
@@ -106,4 +108,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default CustomFooter;
+export const CustomFooter = memo(CustomFooterComponent);

example/app/src/components/customFooter/index.ts

@@ -0,0 +1 @@
+export { CustomFooter } from './CustomFooter';

example/src/components/customHandle/CustomHandle.tsx → example/app/src/components/customHandle/CustomHandle.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { StyleProp, StyleSheet, Text, ViewStyle } from 'react-native';
 import { BottomSheetHandleProps } from '@gorhom/bottom-sheet';
 import Animated, {
@@ -15,7 +15,7 @@ interface CustomHandleProps extends BottomSheetHandleProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const CustomHandle: React.FC<CustomHandleProps> = ({
+const CustomHandleComponent: React.FC<CustomHandleProps> = ({
   title,
   style,
   animatedIndex,
@@ -110,7 +110,7 @@ const CustomHandle: React.FC<CustomHandleProps> = ({
   );
 };
 
-export default CustomHandle;
+export const CustomHandle = memo(CustomHandleComponent);
 
 const styles = StyleSheet.create({
   container: {

example/app/src/components/customHandle/index.ts

@@ -0,0 +1 @@
+export { CustomHandle } from './CustomHandle';

example/src/components/headerHandle/HeaderHandle.tsx → example/app/src/components/headerHandle/HeaderHandle.tsx

@@ -9,7 +9,7 @@ interface HeaderHandleProps extends BottomSheetHandleProps {
   children?: string | React.ReactNode | React.ReactNode[];
 }
 
-const HeaderHandle = ({ children, ...rest }: HeaderHandleProps) => {
+const HeaderHandleComponent = ({ children, ...rest }: HeaderHandleProps) => {
   return (
     <BottomSheetHandle
       style={styles.container}
@@ -47,4 +47,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default memo(HeaderHandle);
+export const HeaderHandle = memo(HeaderHandleComponent);

example/app/src/components/headerHandle/index.ts

@@ -0,0 +1 @@
+export { HeaderHandle } from './HeaderHandle';

example/src/components/searchHandle/SearchHandle.tsx → example/app/src/components/searchHandle/SearchHandle.tsx

@@ -60,8 +60,6 @@ const SearchHandleComponent = ({
   );
 };
 
-const SearchHandle = memo(SearchHandleComponent);
-
 export const styles = StyleSheet.create({
   container: {
     paddingHorizontal: 16,
@@ -85,4 +83,4 @@ export const styles = StyleSheet.create({
   },
 });
 
-export default SearchHandle;
+export const SearchHandle = memo(SearchHandleComponent);

example/app/src/components/searchHandle/index.ts

@@ -0,0 +1 @@
+export { SearchHandle, SEARCH_HANDLE_HEIGHT } from './SearchHandle';

example/app/src/index.ts

@@ -0,0 +1,8 @@
+export { App } from './App';
+export { default as ModalBackdropExample } from './screens/modal/BackdropExample';
+export { withModalProvider } from './screens/modal/withModalProvider';
+export { Button } from './components/button';
+export { ContactList } from './components/contactList';
+export { ContactItem } from './components/contactItem';
+export { SearchHandle, SEARCH_HANDLE_HEIGHT } from './components/searchHandle';
+export * from './utilities/createMockData';

example/src/screens/advanced/BackdropExample.tsx → example/app/src/screens/advanced/BackdropExample.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { View, StyleSheet } from 'react-native';
 import BottomSheet, { BottomSheetBackdrop } from '@gorhom/bottom-sheet';
-import Button from '../../components/button';
-import ContactList from '../../components/contactList';
-import HeaderHandle from '../../components/headerHandle';
+import { Button } from '../../components/button';
+import { ContactList } from '../../components/contactList';
+import { HeaderHandle } from '../../components/headerHandle';
 
 const BackdropExample = () => {
   // state

example/src/screens/advanced/CustomBackgroundExample.tsx → example/app/src/screens/advanced/CustomBackgroundExample.tsx

@@ -1,10 +1,10 @@
 import React, { useCallback, useMemo, useRef } from 'react';
 import { View, StyleSheet } from 'react-native';
 import BottomSheet from '@gorhom/bottom-sheet';
-import CustomBackground from '../../components/customBackground';
-import Button from '../../components/button';
-import ContactList from '../../components/contactList';
-import HeaderHandle from '../../components/headerHandle';
+import { CustomBackground } from '../../components/customBackground';
+import { Button } from '../../components/button';
+import { ContactList } from '../../components/contactList';
+import { HeaderHandle } from '../../components/headerHandle';
 
 const CustomBackgroundExample = () => {
   // hooks

example/src/screens/advanced/CustomHandleExample.tsx → example/app/src/screens/advanced/CustomHandleExample.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback, useMemo, useRef } from 'react';
 import { View, StyleSheet } from 'react-native';
 import BottomSheet from '@gorhom/bottom-sheet';
-import CustomHandle from '../../components/customHandle';
-import Button from '../../components/button';
-import ContactList from '../../components/contactList';
+import { CustomHandle } from '../../components/customHandle';
+import { Button } from '../../components/button';
+import { ContactList } from '../../components/contactList';
 
 const CustomHandleExample = () => {
   // hooks