ReactNative App Quick Actions for Android & iOS. Inspired by Expo Quick Actions & react-native-actions-shortcuts. Supports both Old (Native Module) and New (Turbo Module) Architecture of ReactNative
yarn install react-native-app-quick-actions
or
npm install react-native-app-quick-actions
iOS Requires one additional step to capture the quick action data when app is launched with a quick action.
In the AppDelegate.m
or AppDelegate.mm
file of the integrating project, below code needs to be placed.
#import "AppQuickActions.h"
-(void)application:(UIApplication *)application performActionForShortcutItem:(UIApplicationShortcutItem *)shortcutItem completionHandler:(void (^)(BOOL))completionHandler{
[AppQuickActions performActionForQuickActionItem:shortcutItem completionHandler:completionHandler];
}
No specific setup required
method | Description |
---|---|
setQuickActions | sets the quick actions |
getQuickActions | gets the current quick actions |
clearQuickActions | clears existing quick actions |
Key | Android | iOS | Description |
---|---|---|---|
type | ✅ | ✅ | unique string for the quick action |
title | ✅ | ✅ | title string for the quick action |
shortTitle | ✅ | ❌ | shortTitle string which will be shown when there is space constraint in Android |
subtitle | ❌ | ✅ | subtitle string which will be shown below title in iOS |
iconName | ✅ | ✅ | iconName string |
data | ✅ | ✅ | object to have user defined values |
import AppQuickActions from 'react-native-app-quick-actions';
you can also import the QuickActionItem
type if working with typescript for defining the Quick Action Item.
import AppQuickActions, { type QuickActionItem } from 'react-native-app-quick-actions';
const quickActionItems = [
{
type: 'com.quickactions1',
title: 'Quick Action 1',
subtitle: 'Simple Quick Action',
iconName: 'shortcut',
data: {
link: '/test',
},
},
{
type: 'com.quickactions2',
title: 'Quick Action 2',
data: {
link: '/test2',
},
},
];
useEffect(() => {
AppQuickActions.setQuickActions(quickActionItems).then((items) => {
console.log(`---> Quick Action Items Set: ${JSON.stringify(items)}`);
});
}, []);
AppQuickActions.getQuickActions().then((items) =>
console.log(`---> Current Quick Action Items: ${JSON.stringify(items)}`)
);
AppQuickActions.getInitialQuickAction().then((item) =>
console.log(`---> App Launched with QUick Action: ${JSON.stringify(item)}`)
);
When app launched with quick action this method can be used besides listening for event. On iOS subsequent calls to this method will result in null.
AppQuickActions.clearQuickActions();
useEffect(() => {
const eventEmitter = new NativeEventEmitter(AppQuickActions);
const sub = eventEmitter.addListener(
'onQuickActionItemPressed',
({ item, initial }) => {
const { type, data } = item;
console.log(
`---> Quick Action Item Clicked type:${type}, data:${JSON.stringify(data)}, isInitial: ${initial}`
);
}
);
return () => sub.remove();
}, []);
Either the app is launched with a quick action or when the app is brought to foreground using a quick action, In both cases event is emitted and the
initial
flag is set accordingly in the callback.
For convenience there is hook for handling quick action events.
useAppQuickActionHandler(({ item, initial }) => {
const { type, data } = item;
console.log(
`---> Quick Action Item Clicked type:${type}, data:${JSON.stringify(data)}, isInitial: ${initial}`
);
});
Icons needs to be in drawables folder. For guidelines on shortcut icons you can follow this guide
Icons in iOS needs to be inside Asset Catalogue. For icon guidelines you can follow this guide
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
Made with create-react-native-library