Migrating Guide

Migrating to v0.9.0

v0.9.0 does not include any huge breaking changes to the API however there are some changes introduced to improve the overall DX of the library and ease of use.

Dependencies

The library now depends on react-native-gesture-handlers library which is usually already installed in almost every React Native project.

npm install react-native-gesture-handlers

Registering sheets

Registering sheets works the same way, however to get better type intellisense across your code base, it is recommended that you extend some internal interfaces and define your sheets as follows:

import {SheetDefinition} from 'react-native-actions-sheet';
 
declare module 'react-native-actions-sheet' {
  interface Sheets {
    'example-sheet': SheetDefinition<{
      payload: {
        userId: string;
      };
      returnValue: boolean;
    }>;
    'awesome-sheet': SheetDefinition;
  }
}

Now you will get complete intellisense automatically in most functions.

SheetProps

The SheetProps type is a bit changed.

Before:

const ExampleSheet = (props: SheetProps<{message: string}>) => {
 
  return ...
}

After:

const ExampleSheet = (props: SheetProps<'example-sheet'>) => {
  return ...
};

`id= not required

Previously you had to do this for every ActionSheet.

<ActionSheet id={props.sheetId} />

Now it's not needed anymore. You can however define the exact sheet id directly to get intellisense for payload/returnValue etc like below:

<ActionSheet
  id="example-sheet"
  onClose={data => {
    // data is fully typed based on SheetDefinition of example-sheet.
  }}
/>

Scrolling

See Scrolling guide to learn how to migrate away from useScrollHandlers and use dedicated scrolling views provided by react-native-actions-sheet.

Safe Area Insets

It is recommended to set insets from react-native-safe-area-context library on the <ActionSheet/> component via the safeAreaInsets prop.

Migrating to v0.8.0

v0.8.0 introduces some breaking changes. I tried to minimize them as much as possible but since this is a complete rewrite some of the features of this library have changed.

Some props have been removed

keyboardShouldPersistTaps & keyboardDismissMode: Since we don't use ScrollView internally anymore, these props have been removed.

testIDs.scrollview: Same reason as above.

onPositionChanged: This props has been replaced by onChange which gives more control on action sheet position.

openAnimationDuration & closeAnimationDuration: These have been replaced by openAnimationConfig & closeAnimationConfig which give granular control over the spring animations for open & close.

bounciness & bounceOnOpen: Timing animation is not used anymore so this has been removed.

extraScroll: We did not need this prop, containerStyle can handle the same behaviour already.

indicatorColor has been replaced by indicatorStyle.

bottomOffset & initialOffsetFromBottom: You can use snapPoints & initialSnapIndex which is much simpler way to control action sheet.

ActionSheetRef

We now have a ActionSheetRef type that should be used in useRef hooks:

Before:

const actionSheetRef = useRef<ActionSheet>(null);

After:

import { ActionSheetRef } from 'react-native-actions-sheet';
const ExampleSheet = () => {
const actionSheetRef = useRef<ActionSheetRef>(null);
...

SheetManager changes

SheetManager.show & SheetManager.hide functions have changed:

From:

SheetManager.show('sheet-id', {data: 'hello world'});

to

SheetManager.show('sheet-id', {
  payload: {data: 'hello world'},
});

And hide has changed similarly:

SheetManager.hide('sheet-id', {data: 'hello world'});

to

SheetManager.hide('sheet-id', {
  payload: {data: 'hello world'},
});

registerSheet changes

The registerSheet function now takes multiple contexts so a sheet with same id can be opened in multiple contexts.

registerSheet('sheet-id', ExampleSheet, 'context-a', 'context-b');

SheetManager.show('sheet-id', {
  context: 'context-b',
});

ScrollView behaviour changes

ScrollView previously required handleChildScrollEnd to be attached to it. Now you have to use useScrollHandlers hook.

From:

const actionSheetRef = useRef<ActionSheet>(null);
 
return (
  <ActionSheet>
    <ScrollView
      nestedScrollingEnabled={true}
      onMomentumScrollEnd={() => {
        actionSheetRef.current?.handleChildScrollEnd();
      }}
    />
  </ActionSheet>
);

To:

const actionSheetRef = useRef<ActionSheet>(null);
const scrollHandlers = useScrollHandlers('scroll-1', actionSheetRef);
 
return (
  <ActionSheet>
    <ScrollView {...scrollHandlers} />;
  </ActionSheet>
);

You can now use normal react native ScrollView & FlatList components instead of the ones from react-native-gesture-handler.

ScrollView behaviour has also been changed. You should try it out and see the difference in various states:

1. ActionSheet not fully opened: When the action sheet is not fully opened, scrolling is disabled.
2. ActionSheet fully opened: Scrolling is enabled in downward direction where the content offset would increase. So if you swipe down, action sheet will start to close and if you swipe up, scrollview will scroll.
3. Scroll Offset > 0: When user has scrolled away from 0, then swiping up and down both will result in scrolling inside the ScrollView area.
4. User swipes outside ScrollView area: action sheet will move always.
5. User scrolls to top & keeps swiping down: Nothing happens or RefreshControl will work. The action sheet will not move. User will have to lift their finger and swipe down again to close the action sheet or move it to different snap point.