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} .

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

CodePudding user response：

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.