Skip to content

Commit e9b6cf5

Browse files
authored
feat: Handle hardware back button on Android (#114)
Expose the `onRequestClose` prop in the `Containter` component to handle the hardware back button on Android and Apple TV. Under the hood, it uses [React-Native's modal `onRequestClose` API](https://reactnative.dev/docs/modal#onrequestclose).
1 parent 45bdc6a commit e9b6cf5

File tree

3 files changed

+16
-18
lines changed

3 files changed

+16
-18
lines changed

README.md

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -163,18 +163,19 @@ const styles = StyleSheet.create({
163163
164164
### Dialog.Container props
165165
166-
| Name | Type | Default | Description |
167-
| ---------------------- | ------ | ---------------------- | -------------------------------------------------- |
168-
| blurComponentIOS | node | A low-opacity <View /> | The blur component used in iOS |
169-
| visible | bool | **REQUIRED** | Show the dialog? |
170-
| children | node | **REQUIRED** | The dialog content |
171-
| contentStyle | any | undefined | Extra style applied to the dialog content |
172-
| headerStyle | any | undefined | Extra style applied to the dialog header |
173-
| footerStyle | any | undefined | Extra style applied to the dialog footer |
174-
| buttonSeparatorStyle | any | undefined | Extra style applied to the dialog button separator |
175-
| onBackdropPress | func | undefined | Callback invoked when the backdrop is pressed |
176-
| keyboardVerticalOffset | number | undefined | keyboardVerticalOffset for iOS |
177-
| verticalButtons | bool | false | Renders button vertically |
166+
| Name | Type | Default | Description |
167+
| ---------------------- | ------ | ------------- | --------------------------------------------------------------------------------------------------- |
168+
| blurComponentIOS | node | A low-opacity | The blur component used in iOS |
169+
| visible | bool | **REQUIRED** | Show the dialog? |
170+
| children | node | **REQUIRED** | The dialog content |
171+
| contentStyle | any | undefined | Extra style applied to the dialog content |
172+
| headerStyle | any | undefined | Extra style applied to the dialog header |
173+
| footerStyle | any | undefined | Extra style applied to the dialog footer |
174+
| buttonSeparatorStyle | any | undefined | Extra style applied to the dialog button separator |
175+
| onBackdropPress | func | undefined | Callback invoked when the backdrop is pressed |
176+
| onRequestClose | func | undefined | Callback invoked when the hardware back button on Android or the menu button on Apple TV is pressed |
177+
| keyboardVerticalOffset | number | undefined | keyboardVerticalOffset for iOS |
178+
| verticalButtons | bool | false | Renders button vertically |
178179
179180
### Dialog.Input props
180181

src/Container.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export interface DialogContainerProps {
2424
visible?: boolean;
2525
verticalButtons?: boolean;
2626
onBackdropPress?: () => void;
27+
onRequestClose?: () => void;
2728
keyboardVerticalOffset?: number;
2829
children: ReactElement<any, NamedExoticComponent>[];
2930
}

src/Modal.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -142,12 +142,8 @@ export class Modal extends Component<ModalProps, ModalState> {
142142
};
143143

144144
render() {
145-
const {
146-
children,
147-
onBackdropPress,
148-
contentStyle,
149-
...otherProps
150-
} = this.props;
145+
const { children, onBackdropPress, contentStyle, ...otherProps } =
146+
this.props;
151147
const { currentAnimation, visible } = this.state;
152148

153149
const backdropAnimatedStyle = {

0 commit comments

Comments
 (0)