@haroldtran/react-native-modals 0.0.1

package/src/components/Backdrop.tsx

@@ -0,0 +1,53 @@
+// @flow
+
+import React, { Component } from "react";
+import { Animated, StyleSheet, TouchableOpacity } from "react-native";
+import { BackdropProps } from "../type";
+
+export default class Backdrop extends Component<BackdropProps> {
+  static defaultProps: Partial<BackdropProps> = {
+    backgroundColor: "#000",
+    opacity: 0.5,
+    animationDuration: 200,
+    visible: false,
+    useNativeDriver: true,
+    onPress: () => {},
+  };
+
+  opacity = new Animated.Value(0);
+
+  componentDidUpdate(prevProps: BackdropProps) {
+    const {
+      visible,
+      useNativeDriver = true,
+      opacity: toOpacity = 0.5,
+      animationDuration: duration = 200,
+    } = this.props;
+    if (prevProps.visible !== visible) {
+      const toValue = visible ? toOpacity : 0;
+      Animated.timing(this.opacity, {
+        toValue,
+        duration,
+        useNativeDriver,
+      }).start();
+    }
+  }
+
+  setOpacity = (value: number) => {
+    this.opacity.setValue(value);
+  };
+
+  render() {
+    const { onPress, pointerEvents, backgroundColor } = this.props;
+    const { opacity } = this;
+    const overlayStyle: any = [
+      StyleSheet.absoluteFill,
+      { backgroundColor, opacity },
+    ];
+    return (
+      <Animated.View pointerEvents={pointerEvents as any} style={overlayStyle}>
+        <TouchableOpacity onPress={onPress} style={StyleSheet.absoluteFill} />
+      </Animated.View>
+    );
+  }
+}

package/src/components/BaseModal.tsx

@@ -0,0 +1,294 @@
+import React, { Component, Fragment } from "react";
+import {
+  Animated,
+  BackHandler,
+  Dimensions,
+  StyleSheet,
+  View,
+} from "react-native";
+
+import Animation from "../animations/Animation";
+import FadeAnimation from "../animations/FadeAnimation";
+import type { ModalProps } from "../type";
+import Backdrop from "./Backdrop";
+import DraggableView from "./DraggableView";
+import ModalContext from "./ModalContext";
+
+const HARDWARE_BACK_PRESS_EVENT = "hardwareBackPress" as const;
+
+// dialog states
+const MODAL_OPENING: string = "opening";
+const MODAL_OPENED: string = "opened";
+const MODAL_CLOSING: string = "closing";
+const MODAL_CLOSED: string = "closed";
+
+// default dialog config
+const DEFAULT_ANIMATION_DURATION: number = 150;
+
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  modal: {
+    overflow: "hidden",
+    backgroundColor: "#ffffff",
+  },
+  hidden: {
+    top: -10000,
+    left: 0,
+    height: 0,
+    width: 0,
+  },
+  round: {
+    borderRadius: 8,
+  },
+  draggableView: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});
+
+type ModalState =
+  | typeof MODAL_OPENING
+  | typeof MODAL_OPENED
+  | typeof MODAL_CLOSING
+  | typeof MODAL_CLOSED;
+
+type State = {
+  modalAnimation: Animation;
+  modalState: ModalState;
+};
+
+class BaseModal extends Component<ModalProps, State> {
+  // internal refs / stateful properties
+  backHandler: any;
+  lastSwipeEvent: any | null = null;
+  isSwipingOut: boolean = false;
+  backdrop: any;
+
+  static defaultProps = {
+    rounded: true,
+    modalTitle: null,
+    visible: false,
+    style: null,
+    animationDuration: DEFAULT_ANIMATION_DURATION,
+    modalStyle: null,
+    width: null,
+    height: null,
+    onTouchOutside: () => {},
+    onHardwareBackPress: () => false,
+    hasOverlay: true,
+    overlayOpacity: 0.5,
+    overlayPointerEvents: null,
+    overlayBackgroundColor: "#000",
+    onShow: () => {},
+    onDismiss: () => {},
+    footer: null,
+    onMove: () => {},
+    onSwiping: () => {},
+    onSwipeRelease: () => {},
+    onSwipingOut: () => {},
+    useNativeDriver: true,
+  };
+
+  constructor(props: ModalProps) {
+    super(props);
+
+    this.state = {
+      modalAnimation:
+        props.modalAnimation ||
+        new FadeAnimation({
+          animationDuration: props.animationDuration,
+        }),
+      modalState: MODAL_CLOSED,
+    };
+  }
+
+  componentDidMount() {
+    if (this.props.visible) {
+      this.show();
+    }
+    this.backHandler = BackHandler.addEventListener(
+      HARDWARE_BACK_PRESS_EVENT,
+      this.onHardwareBackPress,
+    );
+  }
+
+  componentDidUpdate(prevProps: ModalProps) {
+    if (this.props.visible !== prevProps.visible) {
+      if (this.props.visible) {
+        this.show();
+        return;
+      }
+      this.dismiss();
+    }
+  }
+
+  componentWillUnmount() {
+    this.backHandler?.remove();
+  }
+
+  onHardwareBackPress = (): boolean =>
+    this.props.onHardwareBackPress ? this.props.onHardwareBackPress() : false;
+
+  get pointerEvents(): "auto" | "none" {
+    const { overlayPointerEvents } = this.props;
+    const { modalState } = this.state;
+    if (overlayPointerEvents) {
+      return overlayPointerEvents;
+    }
+    return modalState === MODAL_OPENED ? "auto" : "none";
+  }
+
+  get modalSize(): any {
+    const { width: screenWidth, height: screenHeight } =
+      Dimensions.get("window");
+    let { width, height } = this.props;
+    if (width && width > 0.0 && width <= 1.0) {
+      width *= screenWidth;
+    }
+    if (height && height > 0.0 && height <= 1.0) {
+      height *= screenHeight;
+    }
+    return { width, height };
+  }
+
+  show(): void {
+    this.setState({ modalState: MODAL_OPENING }, () => {
+      this.state.modalAnimation.in(() => {
+        this.setState({ modalState: MODAL_OPENED }, this.props.onShow);
+      });
+    });
+  }
+
+  dismiss(): void {
+    this.setState({ modalState: MODAL_CLOSING }, () => {
+      if (this.isSwipingOut) {
+        this.setState({ modalState: MODAL_CLOSED }, this.props.onDismiss);
+        return;
+      }
+      this.state.modalAnimation.out(() => {
+        this.setState({ modalState: MODAL_CLOSED }, this.props.onDismiss);
+      });
+    });
+  }
+
+  handleMove = (event: any): void => {
+    // prevent flashing when modal is closing and onMove callback invoked
+    if (this.state.modalState === MODAL_CLOSING) {
+      return;
+    }
+    if (!this.lastSwipeEvent) {
+      this.lastSwipeEvent = event;
+    }
+    let newOpacity;
+    const opacity = this.props.overlayOpacity ?? 0;
+    if (Math.abs(event.axis.y)) {
+      const lastAxis = Math.abs(this.lastSwipeEvent.layout.y);
+      const currAxis = Math.abs(event.axis.y);
+      newOpacity =
+        opacity -
+        (opacity * currAxis) / (Dimensions.get("window").height - lastAxis);
+    } else {
+      const lastAxis = Math.abs(this.lastSwipeEvent.layout.x);
+      const currAxis = Math.abs(event.axis.x);
+      newOpacity =
+        opacity -
+        (opacity * currAxis) / (Dimensions.get("window").width - lastAxis);
+    }
+    this.backdrop?.setOpacity(newOpacity);
+  };
+
+  handleSwipingOut = (event: any) => {
+    this.isSwipingOut = true;
+    this.props.onSwipingOut?.(event);
+  };
+
+  render() {
+    const { modalState, modalAnimation } = this.state;
+    const {
+      rounded,
+      modalTitle,
+      children,
+      onTouchOutside,
+      hasOverlay,
+      modalStyle,
+      animationDuration,
+      overlayOpacity,
+      useNativeDriver,
+      overlayBackgroundColor,
+      style,
+      footer,
+      onSwiping,
+      onSwipeRelease,
+      onSwipeOut,
+      swipeDirection,
+      swipeThreshold,
+    } = this.props;
+
+    const overlayVisible =
+      hasOverlay && [MODAL_OPENING, MODAL_OPENED].includes(modalState);
+    const round = rounded ? styles.round : null;
+    const hidden = modalState === MODAL_CLOSED && styles.hidden;
+
+    return (
+      <ModalContext.Provider
+        value={{
+          hasTitle: Boolean(modalTitle),
+          hasFooter: Boolean(footer),
+        }}
+      >
+        <View
+          pointerEvents={this.isSwipingOut ? "none" : "auto"}
+          style={[styles.container, hidden]}
+        >
+          <DraggableView
+            style={StyleSheet.flatten([styles.draggableView, style])}
+            onMove={this.handleMove}
+            onSwiping={onSwiping}
+            onRelease={onSwipeRelease}
+            onSwipingOut={this.handleSwipingOut}
+            onSwipeOut={onSwipeOut}
+            swipeDirection={swipeDirection}
+            swipeThreshold={swipeThreshold}
+          >
+            {({ pan, onLayout }) => (
+              <Fragment>
+                <Backdrop
+                  ref={(ref) => {
+                    this.backdrop = ref;
+                  }}
+                  pointerEvents={this.pointerEvents}
+                  visible={overlayVisible}
+                  onPress={onTouchOutside}
+                  backgroundColor={overlayBackgroundColor}
+                  opacity={overlayOpacity}
+                  animationDuration={animationDuration}
+                  useNativeDriver={useNativeDriver}
+                />
+                <Animated.View style={pan.getLayout()} onLayout={onLayout}>
+                  <Animated.View
+                    style={[
+                      styles.modal,
+                      round,
+                      this.modalSize,
+                      modalStyle,
+                      modalAnimation.getAnimations(),
+                    ]}
+                  >
+                    {modalTitle}
+                    {children}
+                    {footer}
+                  </Animated.View>
+                </Animated.View>
+              </Fragment>
+            )}
+          </DraggableView>
+        </View>
+      </ModalContext.Provider>
+    );
+  }
+}
+
+export default BaseModal;

package/src/components/BottomModal.tsx

@@ -0,0 +1,36 @@
+// @flow
+
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import type { ModalProps } from '../type';
+import SlideAnimation from '../animations/SlideAnimation';
+import BaseModal from './BaseModal';
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'flex-end',
+  },
+  modal: {
+    borderBottomRightRadius: 0,
+    borderBottomLeftRadius: 0,
+  },
+});
+
+const BottomModal = ({
+  style,
+  modalStyle,
+  ...restProps
+}: ModalProps) => (
+  <BaseModal
+    modalAnimation={new SlideAnimation({
+      slideFrom: 'bottom',
+    })}
+    {...restProps}
+    style={StyleSheet.flatten([styles.container, style])}
+    modalStyle={StyleSheet.flatten([styles.modal, modalStyle])}
+    width={1}
+    swipeDirection="down"
+  />
+);
+
+export default BottomModal;

package/src/components/DraggableView.tsx

@@ -0,0 +1,248 @@
+import React, { Component } from "react";
+import { Animated, Dimensions, PanResponder } from "react-native";
+import type { DragEvent, SwipeDirection } from "../type";
+
+type Props = {
+  style?: any;
+  onMove?: (event: DragEvent) => void;
+  onSwiping?: (event: DragEvent) => void;
+  onRelease?: (event: DragEvent) => void;
+  onSwipingOut?: (event: DragEvent) => void;
+  onSwipeOut?: (event: DragEvent) => void;
+  swipeThreshold?: number;
+  swipeDirection?: SwipeDirection | Array<SwipeDirection>;
+  children: ({
+    onLayout,
+    pan,
+  }: {
+    onLayout: (event: any) => void;
+    pan: Animated.ValueXY;
+  }) => React.ReactNode;
+};
+
+export default class DraggableView extends Component<Props> {
+  static defaultProps = {
+    style: null,
+    onMove: () => {},
+    onSwiping: () => {},
+    onSwipingOut: () => {},
+    onSwipeOut: null,
+    onRelease: () => {},
+    swipeThreshold: 100,
+    swipeDirection: [],
+  };
+
+  // instance properties
+  pan: Animated.ValueXY;
+  allowedDirections: SwipeDirection[];
+  layout: { x: number; y: number; width: number; height: number } | null;
+  panEventListenerId: string | number | null = null;
+  currentSwipeDirection: SwipeDirection | null = null;
+
+  constructor(props: Props) {
+    super(props);
+
+    this.pan = new Animated.ValueXY();
+    this.allowedDirections = ([] as SwipeDirection[]).concat(
+      props.swipeDirection || [],
+    );
+    this.layout = null;
+  }
+
+  componentDidMount() {
+    this.panEventListenerId = this.pan.addListener(
+      (axis: { x: number; y: number }) => {
+        this.props.onMove?.(this.createDragEvent(axis));
+      },
+    );
+  }
+
+  componentWillUnmount() {
+    if (this.panEventListenerId != null) {
+      this.pan.removeListener(this.panEventListenerId as string);
+    }
+  }
+
+  onLayout = (event: any) => {
+    this.layout = event.nativeEvent.layout;
+  };
+
+  getSwipeDirection(gestureState: any): SwipeDirection | null {
+    if (this.isValidHorizontalSwipe(gestureState)) {
+      return gestureState.dx > 0 ? "right" : "left";
+    } else if (this.isValidVerticalSwipe(gestureState)) {
+      return gestureState.dy > 0 ? "down" : "up";
+    }
+    return null;
+  }
+
+  getDisappearDirection() {
+    const { width, height } = Dimensions.get("window");
+    const vertical = height / 2 + (this.layout ? this.layout.height / 2 : 0);
+    const horizontal = width / 2 + (this.layout ? this.layout.width / 2 : 0);
+    let toValue;
+    if (this.currentSwipeDirection === "up") {
+      toValue = {
+        x: 0,
+        y: -vertical,
+      };
+    } else if (this.currentSwipeDirection === "down") {
+      toValue = {
+        x: 0,
+        y: vertical,
+      };
+    } else if (this.currentSwipeDirection === "left") {
+      toValue = {
+        x: -horizontal,
+        y: 0,
+      };
+    } else if (this.currentSwipeDirection === "right") {
+      toValue = {
+        x: horizontal,
+        y: 0,
+      };
+    }
+    return toValue;
+  }
+
+  isValidHorizontalSwipe({ vx, dy }: any) {
+    return this.isValidSwipe(vx, dy);
+  }
+
+  isValidVerticalSwipe({ vy, dx }: any) {
+    return this.isValidSwipe(vy, dx);
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  isValidSwipe(velocity: number, directionalOffset: number) {
+    const velocityThreshold = 0.3;
+    const directionalOffsetThreshold = 80;
+    // eslint-disable-next-line max-len
+    return (
+      Math.abs(velocity) > velocityThreshold &&
+      Math.abs(directionalOffset) < directionalOffsetThreshold
+    );
+  }
+
+  isAllowedDirection({ dy, dx }: any) {
+    const draggedDown = dy > 0;
+    const draggedUp = dy < 0;
+    const draggedLeft = dx < 0;
+    const draggedRight = dx > 0;
+    const isAllowedDirection = (d: SwipeDirection) =>
+      this.currentSwipeDirection === d && this.allowedDirections.includes(d);
+    if (draggedDown && isAllowedDirection("down")) {
+      return true;
+    } else if (draggedUp && isAllowedDirection("up")) {
+      return true;
+    } else if (draggedLeft && isAllowedDirection("left")) {
+      return true;
+    } else if (draggedRight && isAllowedDirection("right")) {
+      return true;
+    }
+    return false;
+  }
+
+  createDragEvent(axis: { x: number; y: number }): DragEvent {
+    return {
+      axis,
+      layout: this.layout,
+      swipeDirection: this.currentSwipeDirection,
+    };
+  }
+
+  panResponder = PanResponder.create({
+    onMoveShouldSetPanResponder: (evt, gestureState) =>
+      gestureState.dx !== 0 && gestureState.dy !== 0,
+    onStartShouldSetPanResponder: () => true,
+    onPanResponderMove: (event: any, gestureState: any) => {
+      const isVerticalSwipe = (d: SwipeDirection | null) =>
+        ["up", "down"].includes(d as string);
+      const isHorizontalSwipe = (d: SwipeDirection | null) =>
+        ["left", "right"].includes(d as string);
+
+      const newSwipeDirection = this.getSwipeDirection(gestureState);
+      const isSameDirection =
+        isVerticalSwipe(this.currentSwipeDirection) ===
+          isVerticalSwipe(newSwipeDirection) ||
+        isHorizontalSwipe(this.currentSwipeDirection) ===
+          isHorizontalSwipe(newSwipeDirection);
+      // newDirection & currentSwipeDirection must be same direction
+      if (newSwipeDirection && isSameDirection) {
+        this.currentSwipeDirection = newSwipeDirection;
+      }
+      if (this.isAllowedDirection(gestureState)) {
+        let animEvent: any;
+        if (isVerticalSwipe(this.currentSwipeDirection)) {
+          animEvent = { dy: this.pan.y };
+        } else if (isHorizontalSwipe(this.currentSwipeDirection)) {
+          animEvent = { dx: this.pan.x };
+        }
+        if (animEvent) {
+          Animated.event([null, animEvent], { useNativeDriver: false })(
+            event,
+            gestureState,
+          );
+        }
+        this.props.onSwiping?.(
+          this.createDragEvent({
+            x: (this.pan.x as any)._value,
+            y: (this.pan.y as any)._value,
+          }),
+        );
+      }
+    },
+    onPanResponderRelease: () => {
+      this.pan.flattenOffset();
+      const event = this.createDragEvent({
+        x: (this.pan.x as any)._value,
+        y: (this.pan.y as any)._value,
+      });
+      // on swipe out
+      const threshold = this.props.swipeThreshold ?? 0;
+      if (
+        (this.props.onSwipeOut &&
+          Math.abs((this.pan.y as any)._value) > threshold) ||
+        Math.abs((this.pan.x as any)._value) > threshold
+      ) {
+        const toValue = this.getDisappearDirection();
+        this.props.onSwipingOut?.(event);
+        if (!toValue) return;
+        Animated.spring(this.pan, {
+          toValue,
+          velocity: 0,
+          tension: 65,
+          friction: 11,
+          useNativeDriver: false,
+        }).start(() => {
+          this.props.onSwipeOut?.(event);
+        });
+        return;
+      }
+      // on release
+      this.currentSwipeDirection = null;
+      this.props.onRelease?.(event);
+      Animated.spring(this.pan, {
+        toValue: { x: 0, y: 0 },
+        velocity: 0,
+        tension: 65,
+        friction: 11,
+        useNativeDriver: false,
+      }).start();
+    },
+  });
+
+  render() {
+    const { style, children: renderContent } = this.props;
+    const content = renderContent({
+      pan: this.pan,
+      onLayout: this.onLayout,
+    });
+
+    return (
+      <Animated.View {...this.panResponder.panHandlers} style={style}>
+        {content}
+      </Animated.View>
+    );
+  }
+}

package/src/components/ModalButton.tsx

@@ -0,0 +1,67 @@
+// @flow
+
+import React from "react";
+import {
+  PixelRatio,
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+} from "react-native";
+import { Positions } from "../constants/Constants";
+import type { ModalButtonProps } from "../type";
+
+const isAndroid = Platform.OS === "android";
+
+const styles = StyleSheet.create({
+  button: {
+    flex: 1,
+    width: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+    paddingTop: 16,
+    paddingBottom: 16,
+  },
+  border: {
+    borderLeftColor: "#CCD0D5",
+    borderLeftWidth: 1 / PixelRatio.get(),
+  },
+  text: {
+    fontWeight: isAndroid ? "400" : "500",
+    fontFamily: isAndroid ? "sans-serif-medium" : "System",
+    fontSize: isAndroid ? 19 : 16,
+    color: "#044DE0",
+  },
+  disable: {
+    color: "#C5C6C5",
+  },
+});
+
+const ModalButton = ({
+  text,
+  onPress,
+  style,
+  textStyle,
+  activeOpacity = 0.6,
+  align = "center",
+  disabled = false,
+  bordered = false,
+}: ModalButtonProps) => {
+  const buttonAlign = { alignSelf: Positions[align as keyof typeof Positions] };
+  const disable = disabled ? styles.disable : null;
+  const border = bordered ? styles.border : null;
+
+  return (
+    <TouchableHighlight
+      underlayColor="#F1F2F2"
+      onPress={onPress}
+      disabled={disabled}
+      activeOpacity={activeOpacity}
+      style={[styles.button, buttonAlign, border, style]}
+    >
+      <Text style={[styles.text, disable, textStyle]}>{text}</Text>
+    </TouchableHighlight>
+  );
+};
+
+export default ModalButton;