Type Alias ModalTimePickerProps

Type declaration

• visible: boolean

  Defines if modal should currently be shown or not

• setVisible: (b: boolean) => void

  Function to change modal visibility. Called to hide the modal when someone taps on the backdrop.

• OptionalshowTitle?: boolean

  Display a title in the modal.

  Default Value

  true
  Copy

• Optionaltitle?: string

  Title to display.

  Default Value

  Select time
  Copy

• OptionalshowConfirm?: boolean

  If enabled, the confirm button is shown.

  Default Value

  true
  Copy

• onConfirm: (duration: Duration) => void

  Function to call when the confirm button is pressed or the user taps out with onTapOut set to "confirm".

  Example

  const [duration, setDuration] = useState({hours: 0, minutes: 15, seconds: 30});
  
  return (
   <ModalTimePicker
     onConfirm={setDuration}
     //...
   />
  );
  Copy

• OptionalshowCancel?: boolean

  If enabled, the cancel button is shown.

  Default Value

  true
  Copy

• OptionalonCancel?: (duration: Duration) => void

  Function to call when the cancel button is pressed or the user taps out with onTapOut set to "cancel".

  Example

  const [duration, setDuration] = useState({hours: 0, minutes: 15, seconds: 30});
  const [cachedDuration, setCachedDuration] = useState(cloneDuration(duration));
  
  useEffect(() => {
   setCachedDuration(cloneDuration(duration));
  }, [duration]);
  
  return (
   <ModalTimePicker
     duration={cachedDuration} // when user cancels and reopens the time picker modal, show previously selected values
  
     onConfirm={setDuration}
     onCancel={setCachedDuration}
     //...
   />
  );
  Copy

  Default Value

  () => {}
  Copy

• OptionalallowTapOut?: boolean

  If enabled, user can close the modal by tapping on the backdrop.

  Default Value

  true
  Copy

• OptionalonTapOut?: "cancel" | "confirm"

  Defines if tapping out should be considered cancelling or confirming. The corresponding function will be called on tap out.

  Default Value

  cancel
  Copy

• OptionalbackdropStyle?: ViewStyle

  Styling for the backdrop.

  Default Value

    {
      backgroundColor: "black"
    }
  Copy

• OptionaltitleStyle?: TextStyle

  Styling for the title text.

  Default Value

    {
      fontSize: 24,
      color: "white"
    }
  Copy

• OptionaltitlePickerSeparatorStyle?: ViewStyle

  Styling for the separator between the title and time picker.

  Default Value

    {
      height: 15
    }
  Copy

• OptionalpickerButtonsSeparatorStyle?: ViewStyle

  Styling for the separator between the time picker and buttons.

  Default Value

    {
      height: 15
    }
  Copy

• OptionalbuttonContainerStyle?: ViewStyle

  Styling for the button container.

  Default Value

    {
      flexDirection: "row",
      justifyContent: "flex-end"
    }
  Copy

• OptionalbuttonSeparatorStyle?: ViewStyle

  Styling for the separator between the buttons.

  Default Value

    {
      height: 15
    }
  Copy

• OptionalconfirmButtonStyle?: TextStyle

  Styling for the confirm button.

  Default Value

    {
      fontSize: 24,
      padding: 5,
      color: "white"
    }
  Copy

• OptionalcancelButtonStyle?: TextStyle

  Styling for the cancel button.

  Default Value

    {
      fontSize: 24,
      padding: 5,
      color: "white"
    }
  Copy