Skip to content

Commit feed1f7

Browse files
author
BradByte
authored
feat: adds support for disabledButtonIndicies (#246)
- Closes #224
1 parent a561f34 commit feed1f7

File tree

10 files changed

+2443
-2264
lines changed

10 files changed

+2443
-2264
lines changed

‎README.md‎

Lines changed: 48 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,23 @@
11
# react-native-action-sheet
2+
23
[![npm](https://img.shields.io/npm/v/@expo/react-native-action-sheet.svg?style=flat-square)](https://www.npmjs.com/package/@expo/react-native-action-sheet)
34
[![License: MIT](https://img.shields.io/github/license/nd-02110114/goofi-mobile.svg)](https://opensource.org/licenses/MIT)
45
[![Discord](https://img.shields.io/badge/discord-expo-green?style=flat-square&logo=discord)](https://discord.gg/4gtbPAdpaE)
56

67
ActionSheet is a cross-platform React Native component that uses the native UIActionSheet on iOS and a JS implementation on Android. Almost a drop in replacement for [ActionSheetIOS](https://facebook.github.io/react-native/docs/actionsheetios.html) except it cannot be called statically.
78

8-
9-
| iOS | Android | Web |
10-
|---------------------------|---------------------------|---------------------------|
9+
| iOS | Android | Web |
10+
| -------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
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-
1413
## Installation
1514

1615
```
1716
$ npm install @expo/react-native-action-sheet -S
1817
```
18+
1919
or
20+
2021
```
2122
$ yarn add @expo/react-native-action-sheet
2223
```
@@ -26,8 +27,7 @@ $ yarn add @expo/react-native-action-sheet
2627
### 1. Wrap your top-level component with `<ActionSheetProvider />`
2728

2829
```es6
29-
30-
import { ActionSheetProvider } from '@expo/react-native-action-sheet'
30+
import { ActionSheetProvider } from '@expo/react-native-action-sheet';
3131

3232
class AppContainer extends React.Component {
3333
render() {
@@ -41,16 +41,17 @@ class AppContainer extends React.Component {
4141
```
4242

4343
### 2. Connect your component which uses showActionSheetWithOptions.
44+
4445
```es6
45-
import { connectActionSheet } from '@expo/react-native-action-sheet'
46+
import { connectActionSheet } from '@expo/react-native-action-sheet';
4647

4748
class App extends React.Component {
4849
/* ... */
4950
}
5051

51-
const ConnectedApp = connectActionSheet(App)
52+
const ConnectedApp = connectActionSheet(App);
5253

53-
export default ConnectedApp
54+
export default ConnectedApp;
5455
```
5556

5657
`App` component can access the actionSheet method as `this.props.showActionSheetWithOptions`
@@ -68,19 +69,19 @@ _onOpenActionSheet = () => {
6869
cancelButtonIndex,
6970
destructiveButtonIndex,
7071
},
71-
buttonIndex => {
72+
(buttonIndex) => {
7273
// Do something here depending on the button index selected
73-
},
74+
}
7475
);
7576
};
7677
```
7778

7879
You can use a hook instead of the higher order component if you are on React 16.8 or newer.
7980

8081
```es6
81-
import { useActionSheet } from '@expo/react-native-action-sheet'
82+
import { useActionSheet } from '@expo/react-native-action-sheet';
8283

83-
export default function App () {
84+
export default function App() {
8485
const { showActionSheetWithOptions } = useActionSheet();
8586
/* ... */
8687
}
@@ -94,82 +95,93 @@ This library can also be used in the browser with Expo for web.
9495

9596
### Universal Props
9697

97-
The same options available on React Native's [ActionSheetIOS](https://facebook.github.io/react-native/docs/actionsheetios.html#showactionsheetwithoptions) component exist for both iOS and Android in this library.
98+
The same options available on React Native's [ActionSheetIOS](https://reactnative.dev/docs/0.64/actionsheetios#showactionsheetwithoptions) component exist for both iOS and Android in this library. Note: `disabledButtonIndicies` is only available for iOS in Expo 43+ or RN 0.64.0+.
9899

99100
### iOS Only Props
100101

101102
| Name | Type | Required | Default |
102-
| -------------------| -------| -------- | ------- |
103+
| ------------------ | ------ | -------- | ------- |
103104
| anchor | number | No | |
104105
| userInterfaceStyle | string | No | |
105106

106107
#### `anchor` (optional)
108+
107109
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.
108110

109111
#### `userInterfaceStyle` (optional)
112+
110113
The interface style used for the action sheet, can be set to `light` or `dark`, otherwise the default system style will be used.
111114

112115
### Android/Web-Only Props
113116

114117
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.
115118

116-
117-
| Name | Type | Required | Default |
118-
| -----------------| ----------------------------------| -------- | ------- |
119-
| icons | array of required images or icons | No | |
120-
| tintIcons | boolean | No | true |
121-
| textStyle | TextStyle | No | |
122-
| titleTextStyle | TextStyle | No | |
123-
| messageTextStyle | TextStyle | No | |
124-
| autoFocus | boolean | No | false |
125-
| showSeparators | boolean | No | false |
126-
| containerStyle | ViewStyle | No | |
127-
| separatorStyle | ViewStyle | No | |
128-
| useModal | boolean | No | false (true if autoFocus is true) |
129-
| destructiveColor | string | No | #d32f2f |
119+
| Name | Type | Required | Default |
120+
| ---------------- | --------------------------------- | -------- | --------------------------------- |
121+
| icons | array of required images or icons | No | |
122+
| tintIcons | boolean | No | true |
123+
| textStyle | TextStyle | No | |
124+
| titleTextStyle | TextStyle | No | |
125+
| messageTextStyle | TextStyle | No | |
126+
| autoFocus | boolean | No | false |
127+
| showSeparators | boolean | No | false |
128+
| containerStyle | ViewStyle | No | |
129+
| separatorStyle | ViewStyle | No | |
130+
| useModal | boolean | No | false (true if autoFocus is true) |
131+
| destructiveColor | string | No | #d32f2f |
130132

131133
#### `icons` (optional)
132134

133135
Show icons to go along with each option. If image source paths are provided via `require`, images will be rendered for you. Alternatively, you can provide an array of elements such as vector icons, pre-rendered Images, etc.
134136

135137
#### `tintIcons` (optional)
136-
Icons by default will be tinted to match the text color. When set to false, the icons will be the color of the source image. This is useful if you want to use multicolor icons. If you provide your own nodes/pre-rendered icons rather than required images in the `icons` array, you will need to tint them appropriately before providing them in the array of `icons`; `tintColor` will not be applied to icons unless they are images from a required source.
138+
139+
Icons by default will be tinted to match the text color. When set to false, the icons will be the color of the source image. This is useful if you want to use multicolor icons. If you provide your own nodes/pre-rendered icons rather than required images in the `icons` array, you will need to tint them appropriately before providing them in the array of `icons`; `tintColor` will not be applied to icons unless they are images from a required source.
137140

138141
#### `textStyle` (optional)
142+
139143
Apply any text style props to the options. If the `tintColor` option is provided, it takes precedence over a color text style prop.
140144

141145
#### `titleTextStyle` (optional)
146+
142147
Apply any text style props to the title if present.
143148

144149
#### `messageTextStyle` (optional)
150+
145151
Apply any text style props to the message if present.
146152

147153
#### `autoFocus`: (optional)
154+
148155
If true, will give the first option screen reader focus automatically when the action sheet becomes visible.
149156
On iOS, this is the default behavior of the native action sheet.
150157

151158
#### `showSeparators`: (optional)
159+
152160
Show separators between items. On iOS, separators always show so this prop has no effect.
153161

154162
#### `containerStyle`: (optional)
163+
155164
Apply any view style props to the container rather than use the default look (e.g. dark mode).
156165

157166
#### `separatorStyle`: (optional)
167+
158168
Modify the look of the separators rather than use the default look.
159169

160170
#### `useModal`: (optional)
171+
161172
Wrap the ActionSheet with a Modal, in order to show in front of other Modals that were already opened ([issue reference](https://github.com/expo/react-native-action-sheet/issues/164)).
162173

163174
#### `destructiveColor`: (optional)
175+
164176
Modify color for text of destructive option.
165177

166178
## ActionSheetProvider Props
167179

168180
The following props can be set directly on the `ActionSheetProvider`
169181

170182
#### `useNativeDriver` (optional)
171-
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.
172183

184+
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.
173185

174186
## Try it out
175187

@@ -180,6 +192,7 @@ Try it in Expo: https://expo.io/@community/react-native-action-sheet-example
180192
See the [example app](https://github.com/expo/react-native-action-sheet/tree/master/example).
181193

182194
### Usage
195+
183196
```
184197
$ cd example
185198
$ yarn
@@ -195,19 +208,23 @@ $ yarn web
195208
## Development
196209

197210
### Setup
211+
198212
```
199213
$ git clone [email protected]:expo/react-native-action-sheet.git
200214
$ cd react-native-action-sheet
201215
$ yarn
202216
```
203217

204218
### Build
219+
205220
We use [bob](https://github.com/react-native-community/bob).
221+
206222
```
207223
$ yarn build
208224
```
209225

210226
### Lint & Format
227+
211228
```
212229
// tsc
213230
$ yarn type-check

‎example/ShowActionSheetButton.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import { ActionSheetOptions } from '@expo/react-native-action-sheet';
22
import { MaterialIcons, Entypo } from '@expo/vector-icons';
33
import * as React from 'react';
4-
import { Text, View, TextStyle, ViewStyle, findNodeHandle, Button } from 'react-native';
4+
import { Text, View, TextStyle, ViewStyle, findNodeHandle } from 'react-native';
55

6-
const icon = (name: string) => <MaterialIcons key={name} name={name} size={24} />;
6+
const icon = (name: React.ComponentProps<typeof MaterialIcons>['name']) => (
7+
<MaterialIcons key={name} name={name} size={24} />
8+
);
79

810
interface Props {
911
title: string;
@@ -34,7 +36,7 @@ export default class ShowActionSheetButton extends React.PureComponent<Props> {
3436
useModal: false,
3537
};
3638

37-
_anchorRef = React.createRef<Button>();
39+
_anchorRef = React.createRef<any>();
3840

3941
_showActionSheet = () => {
4042
const {
@@ -50,7 +52,7 @@ export default class ShowActionSheetButton extends React.PureComponent<Props> {
5052
} = this.props;
5153

5254
// Same interface as https://facebook.github.io/react-native/docs/actionsheetios.html
53-
const options = ['Delete', 'Save', 'Share', 'Cancel'];
55+
const options = ['Delete', 'Disabled', 'Save', 'Share', 'Cancel'];
5456
const icons = withIcons
5557
? [icon('delete'), icon('save'), icon('share'), icon('cancel')]
5658
: undefined;
@@ -59,7 +61,8 @@ export default class ShowActionSheetButton extends React.PureComponent<Props> {
5961
? 'This library tries to mimic the native share sheets as close as possible.'
6062
: undefined;
6163
const destructiveButtonIndex = 0;
62-
const cancelButtonIndex = 3;
64+
const disabledButtonIndices = [1];
65+
const cancelButtonIndex = 4;
6366
const textStyle: TextStyle | undefined = withCustomStyles
6467
? {
6568
fontSize: 20,
@@ -96,6 +99,7 @@ export default class ShowActionSheetButton extends React.PureComponent<Props> {
9699
options,
97100
cancelButtonIndex,
98101
destructiveButtonIndex,
102+
disabledButtonIndices,
99103
title,
100104
message,
101105
icons,

‎example/package.json‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,18 @@
1313
},
1414
"dependencies": {
1515
"@expo/react-native-action-sheet": "../src",
16-
"@expo/vector-icons": "^10.0.0",
17-
"expo": "^39.0.0",
16+
"@expo/vector-icons": "^12.0.0",
17+
"expo": "^43.0.0-beta.3",
1818
"hoist-non-react-statics": "^3.3.0",
19-
"react": "16.13.1",
20-
"react-dom": "16.13.1",
21-
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz",
22-
"react-native-web": "~0.13.7"
19+
"react": "17.0.1",
20+
"react-dom": "17.0.1",
21+
"react-native": "0.64.2",
22+
"react-native-web": "0.17.1"
2323
},
2424
"devDependencies": {
25-
"@types/react": "~16.9.35",
26-
"@types/react-native": "~0.63.2",
27-
"babel-preset-expo": "^8.3.0",
28-
"typescript": "~3.9.2"
25+
"@types/react": "~17.0.21",
26+
"@types/react-native": "~0.64.12",
27+
"babel-preset-expo": "8.5.1",
28+
"typescript": "~4.3.5"
2929
}
3030
}

‎example/tsconfig.json‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,21 @@
22
"compilerOptions": {
33
"esModuleInterop": true,
44
"jsx": "react-native",
5-
"lib": ["esnext"],
5+
"lib": [
6+
"esnext"
7+
],
68
"moduleResolution": "node",
79
"noEmit": true,
810
"resolveJsonModule": true,
911
"skipLibCheck": true,
1012
"strict": true,
1113
"target": "esnext",
12-
"typeRoots": ["./node_modules/@types"],
14+
"typeRoots": [
15+
"./node_modules/@types"
16+
]
1317
},
14-
"include": ["./**.tsx"],
18+
"include": [
19+
"./**.tsx"
20+
],
21+
"extends": "expo/tsconfig.base"
1522
}

0 commit comments

Comments
 (0)