Skip to content

Commit 372dc80

Browse files
bradbytebradbyte
authored
feat: iOS use custom action sheet (#281)
BREAKING CHANGE: This implementation is backwards compatible, but just to be safe I'm marking this as breaking so that it bumps the major version.
1 parent 86fabab commit 372dc80

File tree

5 files changed

+429
-374
lines changed

5 files changed

+429
-374
lines changed

‎README.md‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ React Native Action Sheet is a cross-platform React Native component that uses t
1010
| -------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
1111
| <img src="https://raw.githubusercontent.com/expo/react-native-action-sheet/master/gif/ios.gif" width="200" height="400"/> | <img src="https://raw.githubusercontent.com/expo/react-native-action-sheet/master/gif/android.gif" width="200" height="400"/> | <img src="https://raw.githubusercontent.com/expo/react-native-action-sheet/master/gif/web.gif" width="400" height="400"/> |
1212

13-
## <img src="data:image/png;base64,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" height="20" width="20" /> [Check out the example snack here!](https://snack.expo.dev/@expo-action-sheet/example)
13+
## [Check out the example snack here!](https://snack.expo.dev/@expo-action-sheet/example)
1414

1515
## Installation
1616

@@ -122,7 +122,7 @@ This library can also be used in the browser with Expo for web.
122122
| `anchor` | number | iPad only option that allows for docking the action sheet to a node. See [ShowActionSheetButton.tsx](/example/ShowActionSheetButton.tsx) for an example on how to implement this. |
123123
| `userInterfaceStyle` | string | The interface style used for the action sheet, can be set to `light` or `dark`, otherwise the default system style will be used. |
124124

125-
### Android/Web-Only Props
125+
### Custom Action Sheet Only (Android/Web) Props
126126

127127
The below props allow modification of the Android ActionSheet. They have no effect on the look on iOS as the native iOS Action Sheet does not have options for modifying these options.
128128

@@ -144,9 +144,21 @@ The below props allow modification of the Android ActionSheet. They have no effe
144144

145145
The following props can be set directly on the `ActionSheetProvider`
146146

147-
| Name | Type | Description |
148-
| ----------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
149-
| `useNativeDriver` | boolean | Windows only option that provides the option to disable the [native animation](https://reactnative.dev/docs/animated#using-the-native-driver) driver for React Native Windows projects targeting _Windows 10 Version-1809 ; Build-10.0.17763.0_ and earlier. `useNativeDriver` is [supported in Version-1903 and later](https://microsoft.github.io/react-native-windows/docs/win10-compat) so if your project is targeting that, you don't need to set this prop. |
147+
| Name | Type | Description |
148+
| ---------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
149+
| `useCustomActionSheet` | boolean | iOS only prop that uses the custom pure JS action sheet (Android/Web version) instead of the native ActionSheetIOS component. Defaults to `false`. |
150+
| `useNativeDriver` | boolean | Windows only option that provides the option to disable the [native animation](https://reactnative.dev/docs/animated#using-the-native-driver) driver for React Native Windows projects targeting _Windows 10 Version-1809 ; Build-10.0.17763.0_ and earlier. `useNativeDriver` is [supported in Version-1903 and later](https://microsoft.github.io/react-native-windows/docs/win10-compat) so if your project is targeting that, you don't need to set this prop. |
151+
152+
```jsx
153+
// example of using useCustomActionSheet on iOS
154+
export default function AppContainer() {
155+
return (
156+
<ActionSheetProvider useCustomActionSheet={true}>
157+
<App />
158+
</ActionSheetProvider>
159+
);
160+
}
161+
```
150162

151163
## Callback
152164

‎example/App.tsx‎

Lines changed: 48 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ import {
33
connectActionSheet,
44
ActionSheetProps,
55
} from '@expo/react-native-action-sheet';
6+
import { Entypo } from '@expo/vector-icons';
67
import * as React from 'react';
8+
import { useState } from 'react';
79
import {
810
Modal,
911
StyleSheet,
@@ -13,11 +15,15 @@ import {
1315
SafeAreaView,
1416
TouchableOpacity,
1517
Share,
18+
Platform,
1619
} from 'react-native';
1720

1821
import ShowActionSheetButton from './ShowActionSheetButton';
1922

20-
type Props = ActionSheetProps;
23+
type Props = ActionSheetProps & {
24+
useCustomActionSheet: boolean;
25+
setUseCustomActionSheet: (next: boolean) => void;
26+
};
2127

2228
interface State {
2329
selectedIndex?: number | null;
@@ -77,6 +83,35 @@ class App extends React.Component<Props, State> {
7783
style={{
7884
alignItems: 'center',
7985
}}>
86+
<View
87+
style={{
88+
alignItems: 'center',
89+
display: Platform.OS === 'ios' ? 'flex' : 'none',
90+
}}>
91+
{this._renderSectionHeader('Use Custom Action Sheet')}
92+
<Text style={{ marginBottom: 10 }}>
93+
On iOS the default action sheet will be the native UI. However, you can optionally
94+
enable the custom JS action sheet by setting the useCustomActionSheet prop on the
95+
provider.
96+
</Text>
97+
<Entypo.Button
98+
backgroundColor={this.props.useCustomActionSheet ? '#3e3e3e' : 'white'}
99+
name={this.props.useCustomActionSheet ? 'check' : 'circle'}
100+
color={this.props.useCustomActionSheet ? '#fff' : '#3e3e3e'}
101+
style={{
102+
borderColor: '#3e3e3e',
103+
borderWidth: 2,
104+
}}
105+
onPress={() => this.props.setUseCustomActionSheet(!this.props.useCustomActionSheet)}>
106+
<Text
107+
style={{
108+
fontSize: 15,
109+
color: this.props.useCustomActionSheet ? '#fff' : '#3e3e3e',
110+
}}>
111+
Use Custom Action Sheet
112+
</Text>
113+
</Entypo.Button>
114+
</View>
80115
{this._renderSectionHeader('Universal Options')}
81116
<ShowActionSheetButton
82117
title="Options Only"
@@ -217,16 +252,19 @@ class App extends React.Component<Props, State> {
217252
}
218253
}
219254

220-
const ConnectedApp = connectActionSheet<object>(App);
255+
const ConnectedApp = connectActionSheet<any>(App);
221256

222-
export default class AppContainer extends React.Component {
223-
render() {
224-
return (
225-
<ActionSheetProvider>
226-
<ConnectedApp />
227-
</ActionSheetProvider>
228-
);
229-
}
257+
export default function WrappedApp() {
258+
const [useCustomActionSheet, setUseCustomActionSheet] = useState(false);
259+
260+
return (
261+
<ActionSheetProvider useCustomActionSheet={useCustomActionSheet}>
262+
<ConnectedApp
263+
useCustomActionSheet={useCustomActionSheet}
264+
setUseCustomActionSheet={setUseCustomActionSheet}
265+
/>
266+
</ActionSheetProvider>
267+
);
230268
}
231269

232270
const styles = StyleSheet.create({

0 commit comments

Comments
 (0)