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

@@ -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
 

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,
 };
 

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(() => {