From dd6d979279b22ad869d95ba530a1e9cd1fc1601b Mon Sep 17 00:00:00 2001
From: SimpleCreations <befv@mail.ru>
Date: Wed, 8 Sep 2021 19:55:38 +0300
Subject: [PATCH] feat: Expose `useNativeDriver` as `Container` prop (#122)

New prop: `useNativeDriver`, defaults to `false`.
This prop allows turning on [the native driver](https://reactnative.dev/blog/2017/02/14/using-native-driver-for-animated) to animate the Modal component. Please be aware that the native driver may make the modal flash on Android (which is why we're defaulting it to `false`).
---
 README.md         | 1 +
 src/Container.tsx | 2 ++
 src/Modal.tsx     | 9 +++++----
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 06b4eb0..2f3ccd1 100644
--- a/README.md
+++ b/README.md
@@ -176,6 +176,7 @@ const styles = StyleSheet.create({
 | onRequestClose         | func   | undefined     | Callback invoked when the hardware back button on Android or the menu button on Apple TV is pressed |
 | keyboardVerticalOffset | number | undefined     | keyboardVerticalOffset for iOS                                                                      |
 | verticalButtons        | bool   | false         | Renders button vertically                                                                           |
+| useNativeDriver        | bool   | false         | Defines if animations should use native driver                                                      |
 
 ### Dialog.Input props
 
diff --git a/src/Container.tsx b/src/Container.tsx
index 5f26ebf..8abdad7 100644
--- a/src/Container.tsx
+++ b/src/Container.tsx
@@ -38,6 +38,7 @@ export type DialogContainerProps = PropsWithChildren<{
   onBackdropPress?: () => void;
   onRequestClose?: () => void;
   keyboardVerticalOffset?: number;
+  useNativeDriver?: boolean;
 }>;
 
 const DialogContainer: React.FC<DialogContainerProps> = (props) => {
@@ -146,6 +147,7 @@ DialogContainer.propTypes = {
   verticalButtons: PropTypes.bool,
   onBackdropPress: PropTypes.func,
   keyboardVerticalOffset: PropTypes.number,
+  useNativeDriver: PropTypes.bool,
   children: PropTypes.node.isRequired,
 };
 
diff --git a/src/Modal.tsx b/src/Modal.tsx
index 81e5326..7a4108b 100644
--- a/src/Modal.tsx
+++ b/src/Modal.tsx
@@ -64,6 +64,7 @@ export interface ModalProps extends ReactNativeModalProps {
   onHide?: () => void;
   visible?: boolean;
   contentStyle?: StyleProp<ViewStyle>;
+  useNativeDriver?: boolean;
 }
 
 interface ModalState {
@@ -77,12 +78,14 @@ export class Modal extends Component<ModalProps, ModalState> {
     onHide: PropTypes.func,
     visible: PropTypes.bool,
     contentStyle: ViewPropTypes.style,
+    useNativeDriver: PropTypes.bool,
   };
 
   static defaultProps: Partial<ModalProps> = {
     onBackdropPress: () => null,
     onHide: () => null,
     visible: false,
+    useNativeDriver: false,
   };
 
   state: ModalState = {
@@ -116,8 +119,7 @@ export class Modal extends Component<ModalProps, ModalState> {
     this.setState({ visible: true, currentAnimation: "in" }, () => {
       Animated.timing(this.animVal, {
         easing: Easing.inOut(Easing.quad),
-        // Using native driver in the modal makes the content flash
-        useNativeDriver: false,
+        useNativeDriver: Boolean(this.props.useNativeDriver),
         duration: MODAL_ANIM_DURATION,
         toValue: 1,
       }).start(() => {
@@ -130,8 +132,7 @@ export class Modal extends Component<ModalProps, ModalState> {
     this.setState({ currentAnimation: "out" }, () => {
       Animated.timing(this.animVal, {
         easing: Easing.inOut(Easing.quad),
-        // Using native driver in the modal makes the content flash
-        useNativeDriver: false,
+        useNativeDriver: Boolean(this.props.useNativeDriver),
         duration: MODAL_ANIM_DURATION,
         toValue: 0,
       }).start(() => {