0

In my React Native app, I want to embed a time picker inside of a bottom sheet. Currently the time picker displays when tapped using onPress={showTimepicker} .

enter image description here

TimePicker.js

import React, { useState, useRef } from "react";
import RBSheet from "react-native-raw-bottom-sheet";
import { Text, View, TouchableOpacity, Platform } from "react-native";

import NotificationOff from "../../../components/ImageComponents/NotificationIcons/NotificationOff";

import DateTimePicker from "@react-native-community/datetimepicker";
import Animated from "react-native-reanimated";

const DailyNotification = () => {
  const refRBSheet = useRef();

  let fall = new Animated.Value(1);
  const animatedShadowOpacity = Animated.interpolateNode(fall, {
    inputRange: [0, 1],
    outputRange: [0.5, 0],
  });

  const [isEnabled, setIsEnabled] = useState(false);
  const toggleSwitch = () => setIsEnabled((previousState) => !previousState);

  const [date, setDate] = useState(new Date(1598051730000));
  const [mode, setMode] = useState("date");
  const [show, setShow] = useState(false);

  const onChange = (event, selectedDate) => {
    const currentDate = selectedDate || date;
    setShow(Platform.OS === "ios");
    setDate(currentDate);
  };

  const showMode = (currentMode) => {
    setShow(true);
    setMode(currentMode);
  };

  return (
    <View style={styles.userAreaContainer}>
      <TouchableOpacity onPress={() => refRBSheet.current.open()}>
        <NotificationOff />
      </TouchableOpacity>
      <RBSheet
        ref={refRBSheet}
        animationType="fade"
        height={500}
        closeOnDragDown={true}
        closeOnPressMask={false}
        customStyles={{
          wrapper: {
            backgroundColor: "transparent",
            shadowColor: "#000",
            shadowOffset: {
              width: 0,
              height: 2,
            },
            shadowOpacity: 0.8,
            shadowRadius: 3.84,

            elevation: 5,
          },
          draggableIcon: {
            backgroundColor: "#000",
          },
        }}
      >
        <View style={styles.notifButtonWrapper}>
          <View style={{ width: "100%" }}>
            <TouchableOpacity onPress={showTimepicker}>
              <Text> Set Notification Time </Text>
            </TouchableOpacity>

            {show && (
              <DateTimePicker
                testID="dateTimePicker"
                value={date}
                mode="time"
                is24Hour={true}
                display="inline"
                onChange={onChange}
              />
            )}
          </View>

          <TouchableOpacity style={styles.saveButton}>
            <Text style={styles.link}>Save</Text>
          </TouchableOpacity>
          <TouchableOpacity>
            <Text>Cancel</Text>
          </TouchableOpacity>
        </View>
      </RBSheet>
    </View>
  );
};

export default DailyNotification;

This old S/O post describes how it is done in Android, but I haven't been able to find a React Native example.

I've seen this done in other apps (example below) but have not been able to figure out how to do this. Any ideas or libraries that already have this capability built in? Thanks in advance. enter image description here

Noble Polygon
  • 796
  • 11
  • 36

1 Answers1

1

You can use react-native-date-picker package. It has two different modes, modal and inlined. You can put the inlined version inside a view. As far as I understand, you don't want to see timepicker as a modal, you want to see it as inlined/embedded. Check the inlined usage of the package. This should solve your problem.

EkremAy
  • 139
  • 6