diff --git a/.npmignore b/.npmignore index 2eed458..0281d96 100644 --- a/.npmignore +++ b/.npmignore @@ -24,4 +24,5 @@ tsconfig.json .github/ .prettierrc.js .eslintrc.js +package-lock.json diff --git a/README.md b/README.md index 818e7d7..00c51d6 100644 --- a/README.md +++ b/README.md @@ -23,18 +23,13 @@ Check out the [installation](https://rnas.vercel.app/installation) section of ou Check out our dedicated documentation page for info about this library, it's features, API reference and more: [https://rnas.vercel.app](https://rnas.vercel.app) -## Migrating from v0.7.0 +## Migrating from v0.9.x The new version of ActionSheet introduces some **breaking changes**. Please read through the [migration guide](https://rnas.vercel.app/guides/migrate) and take the necessary steps. ## Examples The source code for the example (showcase) app is under the example/ directory. If you want to play with the ActionSheet but don't feel like trying it on a real app, you can run the [example snack](https://snack.expo.dev/@ammarahmed/github.com-ammarahm-ed-react-native-actions-sheet:expo-example). - -## Documentation for v0.7.0 & older - -You can find the docs in [v0.7.0 branch](https://github.com/ammarahm-ed/react-native-actions-sheet/tree/v0.7.0) - ## Consider supporting with a ⭐️ [star on GitHub](https://github.com/ammarahm-ed/react-native-actions-sheet/) If you are using the library in one of your projects, consider supporting with a star. It takes a lot of time and effort to keep this maintained and address issues and bugs. Thank you. diff --git a/app/components/button.tsx b/app/components/button.tsx index a287ca0..b8348c0 100644 --- a/app/components/button.tsx +++ b/app/components/button.tsx @@ -1,14 +1,20 @@ -import {Text, TextStyle, TouchableOpacity} from 'react-native'; -import {TouchableOpacityProps} from 'react-native-gesture-handler'; +import { + Pressable, + PressableProps, + StyleProp, + Text, + TextStyle, + ViewStyle, +} from 'react-native'; export function Button( - props: TouchableOpacityProps & { + props: PressableProps & { btnTitleStyle?: TextStyle; title: string; }, ) { return ( - , ]}> {props.title} - + ); } diff --git a/app/examples.tsx b/app/examples.tsx index a9def8f..48e0a44 100644 --- a/app/examples.tsx +++ b/app/examples.tsx @@ -1,27 +1,49 @@ /* eslint-disable curly */ -import React from 'react'; +import React, {act, useRef} from 'react'; import { + Image, Linking, + Pressable, ScrollView, StatusBar, StyleSheet, Text, - TouchableOpacity, + View, } from 'react-native'; -import {SheetManager} from 'react-native-actions-sheet'; +import ActionSheet, { + ActionSheetRef, + SheetManager, +} from 'react-native-actions-sheet'; import {SafeAreaView} from 'react-native-safe-area-context'; const MainScreen = () => { + const actionSheetRef = useRef(null); const examples: { title: string; onOpen: () => void; }[] = [ + { + title: 'Simple Sheet', + onOpen: () => { + actionSheetRef.current?.show(); + }, + }, { title: 'Hello', onOpen: () => { SheetManager.show('hello'); }, }, + { + title: 'Floating Sheet', + onOpen: () => { + SheetManager.show('floating-sheet', { + overrideProps: { + gestureEnabled: false, + }, + }); + }, + }, { title: 'Draw under status bar', onOpen: () => { @@ -108,6 +130,12 @@ const MainScreen = () => { SheetManager.show('flashlist'); }, }, + { + title: 'LegendList', + onOpen: () => { + SheetManager.show('legend-list'); + }, + }, { title: 'Resize', onOpen: () => { @@ -126,46 +154,91 @@ const MainScreen = () => { SheetManager.show('sheet-router'); }, }, + { + title: 'Custom scroll handlers', + onOpen: () => { + SheetManager.show('custom-scroll-handlers'); + }, + }, ]; - // Examples left to add - // 5. Resize with animation on add/remove item. - return ( <> - + + + + I opened without SheetManager! + + + - - Examples - + + {examples.map(item => ( - { item.onOpen(); }} - style={styles.btn}> + style={pressed => ({ + height: 50, + justifyContent: 'center', + alignItems: 'center', + alignSelf: 'center', + backgroundColor: pressed.pressed ? '#d9d9d9' : 'white', + paddingHorizontal: 10, + borderRadius: 10, + elevation: 5, + shadowColor: 'black', + shadowOffset: {width: 0.3 * 4, height: 0.5 * 4}, + shadowOpacity: 0.2, + shadowRadius: 0.7 * 4, + width: '100%', + marginBottom: 10, + })}> {item.title} - + ))} @@ -176,32 +249,16 @@ const MainScreen = () => { export default MainScreen; const styles = StyleSheet.create({ - btn: { - height: 50, - justifyContent: 'center', - alignItems: 'center', - alignSelf: 'center', - backgroundColor: '#2563eb', - paddingHorizontal: 10, - borderRadius: 10, - elevation: 5, - shadowColor: 'black', - shadowOffset: {width: 0.3 * 4, height: 0.5 * 4}, - shadowOpacity: 0.2, - shadowRadius: 0.7 * 4, - width: '100%', - marginBottom: 10, - }, safeareview: { justifyContent: 'center', flex: 1, - backgroundColor: 'white', + backgroundColor: '#d6d6d6', alignItems: 'center', gap: 10, - paddingTop: 40, + paddingTop: 20, }, btnTitle: { - color: 'white', + color: 'block', fontWeight: 'bold', }, }); diff --git a/app/examples/custom-scroll-handlers.tsx b/app/examples/custom-scroll-handlers.tsx new file mode 100644 index 0000000..5f86c51 --- /dev/null +++ b/app/examples/custom-scroll-handlers.tsx @@ -0,0 +1,115 @@ +import React, {useCallback} from 'react'; +import {ScrollView, Text, View} from 'react-native'; +import ActionSheet, {useScrollHandlers} from 'react-native-actions-sheet'; +import {Gesture, GestureDetector} from 'react-native-gesture-handler'; + +/** + * This needs to be a separate component for simultaneousHandlers to get populated properly from the PanGestureContext. + * @returns + */ +function CustomScrollView() { + const scrollHandlers = useScrollHandlers(); + const gesture = Gesture.Native().simultaneousWithExternalGesture( + ...scrollHandlers.simultaneousHandlers, + ); + const vegetableNamesWithEmoji = [ + '🍅 Tomato', + '🥕 Carrot', + '🥦 Broccoli', + '🥒 Cucumber', + '🌶️ Hot Pepper', + '🫑 Bell Pepper', + '🧄 Garlic', + '🧅 Onion', + '🍄 Mushroom', + '🥔 Potato', + '🥬 Leafy Green', + '🥑 Avocado', + '🍆 Eggplant', + '🥝 Kiwi Fruit', + '🍓 Strawberry', + '🍈 Melon', + '🍒 Cherries', + '🍑 Peach', + '🍍 Pineapple', + '🥭 Mango', + '🍉 Watermelon', + '🍌 Banana', + '🍋 Lemon', + '🍊 Orange', + '🍎 Red Apple', + '🍏 Green Apple', + '🍐 Pear', + '🍇 Grapes', + '🍉 Watermelon', + '🍌 Banana', + ]; + + const renderItem = useCallback( + (item, index) => ( + + {item} + + ), + [], + ); + + return ( + + + + Vegetables + + + {vegetableNamesWithEmoji.map(renderItem)} + + + ); +} + +function CustomScrollHandlers() { + return ( + + + + + + ); +} + +export default CustomScrollHandlers; diff --git a/app/examples/flashlist.tsx b/app/examples/flashlist.tsx index e12fdb8..6f3d311 100644 --- a/app/examples/flashlist.tsx +++ b/app/examples/flashlist.tsx @@ -1,9 +1,11 @@ import React, {useCallback} from 'react'; import {Text, View} from 'react-native'; -import ActionSheet from 'react-native-actions-sheet'; -import {FlashList} from 'react-native-actions-sheet/dist/src/views/FlashList'; +import ActionSheet, {ScrollView, useSheetRef} from 'react-native-actions-sheet'; +import {FlashList} from '@shopify/flash-list'; +import {Button} from '../components/button'; function FlashListSheet() { + const ref = useSheetRef(); const vegetableNamesWithEmoji = [ '🍅 Tomato', '🥕 Carrot', @@ -88,20 +90,20 @@ function FlashListSheet() { [], ); return ( - + +