V10

.npmignore

@@ -24,4 +24,5 @@ tsconfig.json
 .github/
 .prettierrc.js
 .eslintrc.js
+package-lock.json
 

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.

app/components/button.tsx

@@ -1,14 +1,13 @@
-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 (
-    <TouchableOpacity
+    <Pressable
       {...props}
       style={[
         {
@@ -27,7 +26,7 @@ export function Button(
           width: '100%',
           marginBottom: 10,
         },
-        props.style,
+        props.style as StyleProp<ViewStyle>,
       ]}>
       <Text
         style={[
@@ -39,6 +38,6 @@ export function Button(
         ]}>
         {props.title}
       </Text>
-    </TouchableOpacity>
+    </Pressable>
   );
 }

app/examples/flashlist.tsx

@@ -1,7 +1,7 @@
 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 } from 'react-native-actions-sheet';
+import {FlashList} from '@shopify/flash-list';
 
 function FlashListSheet() {
   const vegetableNamesWithEmoji = [
@@ -101,7 +101,7 @@ function FlashListSheet() {
         }}>
         <FlashList
           data={vegetableNamesWithEmoji}
-          estimatedItemSize={40}
+          renderScrollComponent={ScrollView}
           ListHeaderComponent={
             <Text
               style={{

app/examples/scrollview.tsx

@@ -1,7 +1,7 @@
 import React, {useCallback} from 'react';
 import {Text, View} from 'react-native';
 import ActionSheet, {ScrollView} from 'react-native-actions-sheet';
-import {TextInput} from 'react-native-gesture-handler';
+import {RefreshControl} from 'react-native-gesture-handler';
 
 function ScrollViewSheet() {
   const vegetableNamesWithEmoji = [
@@ -39,34 +39,36 @@ function ScrollViewSheet() {
 
   const renderItem = useCallback(
     (item, index) => (
-      <TextInput
+      <Text
         key={item + index}
         style={{
           color: 'black',
           fontSize: 20,
           height: 60,
-        }}
-        pointerEvents="none"
-        placeholderTextColor="#a9a9a9"
-        placeholder={item}
-      />
+        }}>
+        {item}
+      </Text>
     ),
     [],
   );
 
   return (
-    <ActionSheet gestureEnabled containerStyle={{
-      maxHeight:'100%',
-      height:'100%'
-    }}>
+    <ActionSheet
+      gestureEnabled
+      snapPoints={[50, 100]}
+      initialSnapIndex={0}
+      containerStyle={{
+        maxHeight: '100%',
+        height: '100%',
+      }}>
       <View
         style={{
           paddingHorizontal: 12,
           alignItems: 'center',
           paddingTop: 20,
           gap: 10,
           width: '100%',
-          height:'100%'
+          height: '100%',
         }}>
         <ScrollView
           style={{

app/examples/snap-me.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Text, View } from 'react-native';
-import ActionSheet, { useSheetRef } from 'react-native-actions-sheet';
+import ActionSheet, { SheetManager, useSheetRef } from 'react-native-actions-sheet';
 import { Button } from '../components/button';
 
 const  SnapMe = () => {
@@ -43,6 +43,17 @@ const  SnapMe = () => {
             width: 250,
           }}
         />
+
+         <Button
+          title="Close All Opened Sheets"
+          onPress={() => {
+            SheetManager.hideAll();
+            console.log("HIDE ALL");
+          }}
+          style={{
+            width: 250,
+          }}
+        />
       </View>
     </ActionSheet>
   );

app/tsconfig.json

@@ -5,7 +5,6 @@
     "esModuleInterop": true,
     "paths": {
       "react-native-actions-sheet": ["../"],
-      "react-native-actions-sheet/dist/src/views/FlashList": ["../dist/src/views/FlashList"],
       "react-native-safe-area-context": ["../example/node_modules/react-native-safe-area-context"]
     }
   }

example/android/gradle.properties

@@ -41,4 +41,4 @@ hermesEnabled=true
 # Use this property to enable edge-to-edge display support.
 # This allows your app to draw behind system bars for an immersive UI.
 # Note: Only works with ReactActivity and should not be used with custom Activity.
-edgeToEdgeEnabled=false
+edgeToEdgeEnabled=true

example/babel.config.js

@@ -1,3 +1,6 @@
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
+  plugins: [
+      'react-native-reanimated/plugin',
+    ],
 };