action sheet

action_sheet.re

open BsReactNative;

type state = {
  isOpen: bool,
  animation: Animated.Value.t,
};

type action =
  | ChangeVisibility(bool);

let component = ReasonReact.reducerComponent("SuccessRegisterModal");

let screenWidth = float_of_int(Dimensions.get(`window)##width);
let screenHeight = float_of_int(Dimensions.get(`window)##height);
let modalContentRatio = screenHeight *. 0.65;

module Styles = {
  open Style;

  let backdrop =
    style([
      backgroundColor(String("rgba(0, 0, 0, 0.3)")),
      flex(1.),
      justifyContent(FlexEnd),
    ]);

  let touchableBackdrop =
    style([width(Pt(screenWidth)), height(Pct(35.))]);

  let modalContent = state =>
    style([
      height(Pct(65.)),
      backgroundColor(String(AppTheme.Colors.white)),
      borderTopLeftRadius(15.),
      borderTopRightRadius(15.),
      width(Pct(100.)),
      alignItems(Center),
      justifyContent(Center),
      Transform.makeAnimated(~translateY=state, ()),
    ]);
};

let make = (~renderButton, children_) => {
  ...component,
  initialState: () => {isOpen: false, animation: Animated.Value.create(0.)},
  reducer: (action, state) =>
    switch (action) {
    | ChangeVisibility(isOpen) => ReasonReact.Update({...state, isOpen})
    },
  render: self => {
    let handleClose = () =>
      Animated.start(
        Animated.timing(
          ~value=self.state.animation,
          ~toValue=`raw(modalContentRatio),
          ~duration=500.,
          (),
        ),
        ~callback=_evt => self.send(ChangeVisibility(false)),
        (),
      );

    <View>
      <Modal
        visible={self.state.isOpen}
        onRequestClose=handleClose
        animationType=`none
        transparent=true>
        <View style=Styles.backdrop>
          <TouchableWithoutFeedback onPress=handleClose>
            <View style=Styles.touchableBackdrop />
          </TouchableWithoutFeedback>
          <Animated.View style={Styles.modalContent(self.state.animation)}>
            ...children
           </Animated.View>
        </View>
      </Modal>
      {
        renderButton(() => {
          Animated.Value.setValue(self.state.animation, modalContentRatio);
          Animated.start(
            Animated.timing(
              ~value=self.state.animation,
              ~toValue=`raw(0.),
              ~duration=500.,
              (),
            ),
            (),
          );
          self.send(ChangeVisibility(true));
        })
      }
    </View>;
  },
};