diff --git a/example/app.json b/example/app.json index 851024a..57ea6ce 100644 --- a/example/app.json +++ b/example/app.json @@ -1,5 +1,5 @@ { - "name": "@gorhom/portal-example", + "name": "React Native Portal", "displayName": "React Native Portal Example", "expo": { "name": "@gorhom/portal-example", @@ -17,6 +17,7 @@ "ios": { "supportsTablet": true }, + "userInterfaceStyle": "automatic", "assetBundlePatterns": [ "**/*" ] diff --git a/example/package.json b/example/package.json index 5a6a2c0..53e6319 100644 --- a/example/package.json +++ b/example/package.json @@ -12,31 +12,34 @@ "test": "jest" }, "dependencies": { - "@gorhom/showcase-template": "^2.0.4", + "@gorhom/showcase-template": "^2.1.0", "@react-native-community/masked-view": "0.1.11", - "@react-navigation/bottom-tabs": "^5.11.11", - "@react-navigation/native": "^5.9.4", - "@react-navigation/stack": "^5.14.5", - "expo": "^41.0.1", - "expo-splash-screen": "~0.10.2", - "react": "16.13.1", - "react-dom": "16.13.1", - "react-native": "0.63.4", - "react-native-gesture-handler": "~1.10.3", - "react-native-reanimated": "~2.2.0", - "react-native-safe-area-context": "3.2.0", - "react-native-screens": "~3.3.0", - "react-native-unimodules": "~0.13.3", - "react-native-web": "~0.16.5" + "@react-native-masked-view/masked-view": "0.2.6", + "@react-navigation/bottom-tabs": "^6.0.9", + "@react-navigation/native": "^6.0.6", + "@react-navigation/native-stack": "^6.2.5", + "@react-navigation/stack": "^6.0.11", + "expo": "^44.0.0", + "expo-splash-screen": "~0.14.1", + "react": "17.0.1", + "react-dom": "17.0.1", + "react-native": "0.64.3", + "react-native-gesture-handler": "~2.1.0", + "react-native-reanimated": "~2.3.1", + "react-native-safe-area-context": "3.3.2", + "react-native-screens": "~3.10.1", + "react-native-unimodules": "~0.15.0", + "react-native-web": "0.17.1" }, "devDependencies": { - "@babel/core": "~7.9.0", + "@babel/core": "^7.12.9", "@babel/runtime": "^7.12.18", - "@expo/webpack-config": "^0.12.76", - "@types/react": "~16.9.35", - "@types/react-native": "~0.63.2", + "@expo/webpack-config": "~0.16.2", + "@types/react": "~17.0.21", + "@types/react-native": "~0.64.12", + "babel-loader": "^8.2.3", "babel-plugin-module-resolver": "^4.1.0", - "babel-preset-expo": "8.3.0", - "typescript": "~4.0.0" + "babel-preset-expo": "9.0.1", + "typescript": "~4.3.5" } } diff --git a/example/src/components/Button.tsx b/example/src/components/Button.tsx new file mode 100644 index 0000000..b907d55 --- /dev/null +++ b/example/src/components/Button.tsx @@ -0,0 +1,37 @@ +import React, { ReactNode } from 'react'; +import { ViewStyle, TextStyle, StyleSheet } from 'react-native'; +import { ShowcaseButton, ShowcaseLabel } from '@gorhom/showcase-template'; + +interface ButtonProps { + label: string; + endContent?: string | ReactNode; + style?: ViewStyle; + labelStyle?: TextStyle; + onPress: () => void; +} + +export const Button = ({ + label, + endContent, + style, + labelStyle, + onPress, +}: ButtonProps) => ( + + {label} + {endContent && endContent} + +); + +const styles = StyleSheet.create({ + container: { + flexDirection: 'row', + justifyContent: 'space-between', + alignContent: 'center', + alignItems: 'center', + }, +}); diff --git a/example/src/components/CounterModal.tsx b/example/src/components/CounterModal.tsx new file mode 100644 index 0000000..e09311e --- /dev/null +++ b/example/src/components/CounterModal.tsx @@ -0,0 +1,82 @@ +import React from 'react'; +import { + GestureResponderEvent, + StyleSheet, + Text, + TouchableOpacity, + TouchableWithoutFeedback, + View, +} from 'react-native'; + +interface SimpleModalProps { + count: number; + onIncrease: () => void; + onPress: (event: GestureResponderEvent) => void; +} + +export const CounterModal = ({ + count, + onIncrease, + onPress, +}: SimpleModalProps) => { + return ( + + + + Counter Modal + + {count} + + + + + + + - + + + + + + + ); +}; + +const styles = StyleSheet.create({ + backdropContainer: { + ...StyleSheet.absoluteFillObject, + backgroundColor: 'rgba(0, 0, 0, 0.5)', + justifyContent: 'center', + alignItems: 'center', + }, + buttonContainer: { + ...StyleSheet.absoluteFillObject, + justifyContent: 'center', + alignItems: 'center', + }, + modalContainer: { + padding: 24, + backgroundColor: 'white', + }, + actionButton: { + width: 25, + height: 25, + borderRadius: 25, + marginHorizontal: 2, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: 'rgba(0, 0, 0, 0.5)', + }, +}); diff --git a/example/src/screens/HomeScreen.tsx b/example/src/screens/HomeScreen.tsx deleted file mode 100644 index 20e6c60..0000000 --- a/example/src/screens/HomeScreen.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React, { useMemo } from 'react'; -import Showcase from '@gorhom/showcase-template'; -import { useNavigation } from '@react-navigation/native'; -import { version, description } from '../../../package.json'; -import { useSafeAreaInsets } from 'react-native-safe-area-context'; - -const data = [ - { - name: 'Basic', - slug: 'Basic', - }, - { - name: 'Modal', - slug: 'Modal', - }, - { - name: 'Popover', - slug: 'Popover', - }, -]; - -const RootScreen = () => { - // hooks - const { navigate } = useNavigation(); - const safeInsets = useSafeAreaInsets(); - - // variables - const author = useMemo( - () => ({ - username: 'Mo Gorhom', - url: 'https://gorhom.dev', - }), - [] - ); - - // callbacks - const handleOnPress = (slug: string) => navigate(slug); - - // renders - return ( - - ); -}; - -export default RootScreen; diff --git a/example/src/screens/ModalScreen.tsx b/example/src/screens/ModalScreen.tsx index 5aa8b9d..cce3693 100644 --- a/example/src/screens/ModalScreen.tsx +++ b/example/src/screens/ModalScreen.tsx @@ -46,7 +46,7 @@ const styles = StyleSheet.create({ }); export default () => ( - + diff --git a/example/src/screens/NativeScreen.tsx b/example/src/screens/NativeScreen.tsx new file mode 100644 index 0000000..1df564a --- /dev/null +++ b/example/src/screens/NativeScreen.tsx @@ -0,0 +1,89 @@ +import React, { useCallback, useState } from 'react'; +import { Platform, StyleSheet, View } from 'react-native'; +import { Portal } from '@gorhom/portal'; +import { ShowcaseLabel } from '@gorhom/showcase-template'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { useNavigation } from '@react-navigation/native'; +import { FullWindowOverlay } from 'react-native-screens'; +import { Button } from '../components/Button'; +import { CounterModal } from '../components/CounterModal'; + +const Stack = createNativeStackNavigator(); + +const DummyScreen = () => { + const [showModal, setShowModal] = useState(false); + const [count, setCount] = useState(0); + const { navigate } = useNavigation(); + + const handleModalTogglePress = useCallback(() => { + setShowModal(state => !state); + }, []); + + const handleNavigatePress = useCallback(() => { + navigate({ + // @ts-ignore + name: 'B', + key: `screen-a-${Math.random()}`, + }); + }, [navigate]); + + return ( + + +