React Native Custom Action Sheet

Hey folks, let us try to build an iOS-like Action Sheet with React Native.

Illustration By Udhaya Chandran

Setting up React Native Project.

(Skip to next section, if already done..)

Go ahead to this link https://reactnative.dev/docs/environment-setup#docsNav and follow the steps on creating a new react native project.

npx react-native init RNCustomActionSheet

To start the application run npx react-native run-ios inside your React Native project folder. Open your project in VS Code and head to the file named App.js.And remove the code under the return statement and replace it with:

return {
 <>
  <View>
  </View>
 <>
}

You have successfully finished creating a project.

Let us create a folder src/actionSheet and a file index.js

This is going to be our <ActionSheet/> component.

This component will require an array of action items of structure like this:

{
    id: <Unique Id>,
    label: '<Label for an action item>',
    onPress: () => {
        
         <On Press Callback for the action item>
    }
}

Let us start coding the ActionSheet Component.

This component accepts an array of action items, appends an object at the end.

{
   id: '#cancel',
   label: 'Cancel',
   onPress: props?.onCancel
}

Additionally, we need to pass an onCancelcallback which will close the Action Sheet.

The component is styled as per an iOS Action Sheet.

All we have to do now is to wrap the above component inside a <Modal/> and position it at the bottom of the screen.

Okay now, let us see how this works.

Works great.
You can also pass in actionTextColor to change the color of the Label.

This also works fine in Android. Let us try it with the different text color.

Used libraries :

1. React Native Modal

This is Karthik representing Timeless.

You can find the repo here.

If you find this blog post helpful, share it with a friend.

If you find any difficulties please feel free to add your comments.