Мобильная версияimport { BottomSheetFlatList, BottomSheetView } from "@gorhom/bottom-sheet";
import React, { useState } from "react";
import { Text, TouchableOpacity } from "react-native";
import CustomInput from "./ReUsables/CustomInput";
import CustomBtn from "./CustomBtn";
import { Checkbox } from "react-native-paper";
import colors from "../constants/colors";
import DateTimePicker from "@react-native-community/datetimepicker";
export function ChooseTimings({
data,
// setShowTimePicker,
// IsLoading,
// ActiveDay,
// setActiveDay,
// ShowTimePicker,
// setIsOpeningTime,
setData,
}) {
const [checked, setChecked] = useState(false);
const [ActiveDay, setActiveDay] = useState("sunday");
const [ShowTimePicker, setShowTimePicker] = useState(false);
const [isOpeningTime, setIsOpeningTime] = useState(true);
const onChange = (event, selectedDate) => {
const selectedTime = selectedDate.toLocaleString().split(",")[1];
setData((prev) => ({
...prev,
timing: {
...prev.timing,
[ActiveDay]: {
...prev.timing[ActiveDay],
[isOpeningTime ? "opening" : "closing"]: selectedTime,
},
},
}));
setShowTimePicker(false);
};
return (
Choose Timigs
{/* {Object.keys(ClinicData.timing).map((day, index) => {
return (
);
})} */}
{
return (
{
setActiveDay(item);
}}
>
{item.toUpperCase()}
);
}} // estimatedItemSize={43.3}
/>
{/* */}
{ActiveDay.toUpperCase()}
{
console.log(ShowTimePicker);
setShowTimePicker(true);
setIsOpeningTime(true);
console.log(ShowTimePicker);
}}
showRightIconBordered={true}
/>
{
console.log(ShowTimePicker);
setShowTimePicker(true);
setIsOpeningTime(false);
console.log(ShowTimePicker);
}}
showRightIconBordered={true}
/>
{/* {
setShowTimePicker(true);
}}
/> */}
{
setData((prev) => ({
...prev,
timing: {
...prev.timing,
[ActiveDay]: {
...prev.timing[ActiveDay],
open24hrs: !prev.timing[ActiveDay].open24hrs,
opening: !prev.timing[ActiveDay].open24hrs
? "00:00"
: prev.timing[ActiveDay].opening,
closing: !prev.timing[ActiveDay].open24hrs
? "23:59"
: prev.timing[ActiveDay].closing,
isClosed: false,
},
},
}));
}}
/>
Open 24 Hours on {ActiveDay}
{
setData((prev) => ({
...prev,
timing: {
...prev.timing,
[ActiveDay]: {
...prev.timing[ActiveDay],
isClosed: !prev.timing[ActiveDay].isClosed,
opening: !prev.timing[ActiveDay].isClosed
? "00:00"
: prev.timing[ActiveDay].opening,
closing: !prev.timing[ActiveDay].isClosed
? "00:00"
: prev.timing[ActiveDay].closing,
open24hrs: false,
},
},
}));
}}
/>
Closed on {ActiveDay}
{
setChecked(!checked);
}}
/>
same timings for all days ?
{ShowTimePicker && (
)}
);
}
Но, когда я внедрил тот же код в моем регистрационном файле без @gorhom/нижний лист
он работает должным образом.
import React, { useCallback, useMemo, useRef, useState } from "react";
import {
View,
Text,
ScrollView,
TouchableOpacity,
Pressable,
TextInput,
Keyboard,
} from "react-native";
import axios from "axios";
import { router } from "expo-router";
import { StatusBar } from "expo-status-bar";
import { FlatList } from "react-native-gesture-handler";
import { Appbar, Viewider, Icon, Searchbar, Checkbox } from "react-native-paper";
import {
SafeAreaView,
useSafeAreaInsets,
} from "react-native-safe-area-context";
import { useUserDataState } from "../../atoms/store";
import CustomBtn from "../../components/CustomBtn";
import Repeatables from "../../components/Utility/Repeatables";
import CustomInput from "./../../components/ReUsables/CustomInput";
import useLoadingAndDialog from "../../components/Utility/useLoadingAndDialog";
import colors from "./../../constants/colors";
import { SearchBarWithSugg } from "../../components/SearchBarWithSugg";
import BottomSheet, {
BottomSheetBackdrop,
BottomSheetFlashList,
BottomSheetFlatList,
BottomSheetView,
} from "@gorhom/bottom-sheet";
import DateTimePicker from "@react-native-community/datetimepicker";
import RNDateTimePicker from "@react-native-community/datetimepicker";
import { ChooseTimings } from "../../components/ChooseTimings";
const RegisterClinic = () => {
const {
IsLoading,
Error,
setError,
setIsLoading,
visible,
showDialog,
hideDialog,
} = useLoadingAndDialog();
const { GoogleApi, GoogleApiKey } = Repeatables();
/* -------------------------------------------------------------------------- */
/* States */
/* -------------------------------------------------------------------------- */
const [UserData, setUserData] = useUserDataState();
const [ClinicData, setClinicData] = useState({
name: "",
address: "",
country: "",
state: "",
city: "",
location: {},
timing: {
sunday: {
open24hrs: false,
isClosed: false,
opening: "",
closing: "",
},
monday: { open24hrs: false, isClosed: false, opening: "", closing: "" },
tuesday: { open24hrs: false, isClosed: false, opening: "", closing: "" },
wednesday: {
open24hrs: false,
isClosed: false,
opening: "",
closing: "",
},
thursday: { open24hrs: false, isClosed: false, opening: "", closing: "" },
friday: { open24hrs: false, isClosed: false, opening: "", closing: "" },
saturday: { open24hrs: false, isClosed: false, opening: "", closing: "" },
},
});
const [searchQuery, setSearchQuery] = useState("");
const [Places, setPlaces] = useState([]);
const [ShowSuggestions, setShowSuggestions] = useState(false);
const [checked, setChecked] = useState(false);
const [ActiveDay, setActiveDay] = useState("sunday");
const [ShowTimePicker, setShowTimePicker] = useState(false);
const [isOpeningTime, setIsOpeningTime] = useState(true);
const bottomSheetRef = useRef(null);
// callbacks
const handleSheetChanges = useCallback((index) => {
console.log("handleSheetChanges", index);
}, []);
const snapPoints = useMemo(() => ["25%", "50%", "70%", "100%"], []);
const renderBackdrop = useCallback(
(props) => (
Keyboard.dismiss()}
{...props}
/>
),
[]
);
const onChange = (event, selectedDate) => {
const selectedTime = selectedDate.toLocaleString().split(",")[1];
setClinicData((prev) => ({
...prev,
timing: {
...prev.timing,
[ActiveDay]: {
...prev.timing[ActiveDay],
[isOpeningTime ? "opening" : "closing"]: selectedTime,
},
},
}));
setShowTimePicker(false);
};
/* -------------------------------------------------------------------------- */
/* Functions */
/* -------------------------------------------------------------------------- */
const changeQueryText = async (e) => {
setSearchQuery(e);
// console.log(UserData.location.latitude, GoogleApiKey);
setIsLoading(true);
const autoCompleteApi = `${GoogleApi}/places:autocomplete?includedPrimaryTypes=physiotherapist`;
const res = await axios.post(
autoCompleteApi,
{
input: searchQuery,
locationBias: {
circle: {
center: {
latitude: UserData.location.latitude || 22.295076,
longitude: UserData.location.longitude || 73.2468642,
},
radius: 500,
},
},
},
{
headers: {
"Content-Type": "application/json",
"X-Goog-Api-Key": GoogleApiKey,
"X-Goog-FieldMask":
"suggestions.placePrediction.placeId,suggestions.placePrediction.structuredFormat.mainText,suggestions.placePrediction.structuredFormat.secondaryText",
},
}
);
setPlaces(res.ClinicData.suggestions);
setIsLoading(false);
};
const extractLocationDetails = (addressComponents, textToFetch) => {
// const addressComponents = response.addressComponents;
const txt = textToFetch || "longText";
const country = addressComponents.find((component) =>
component.types.includes("country")
)?.[txt];
const state = addressComponents.find((component) =>
component.types.includes("administrative_area_level_1")
)?.[txt];
const city = addressComponents.find((component) =>
component.types.includes("locality")
)?.[txt];
return { country, state, city };
};
const getPlaceDetails = async (item) => {
const res = await axios.get(
`${GoogleApi}/places/${item.placePrediction.placeId}`,
{
headers: {
"Content-Type": "application/json",
"X-Goog-Api-Key": GoogleApiKey,
"X-Goog-FieldMask":
"id,displayName,location,formattedAddress,addressComponents,googleMapsUri",
},
}
);
const { country, state, city } = extractLocationDetails(
res.ClinicData.addressComponents
);
const address = res.ClinicData.formattedAddress.split(",").slice(0, -3).join(",");
// console.log();
setClinicData((prev) => ({
...prev,
name: item.placePrediction.structuredFormat.mainText.text,
// address: res.ClinicData.formattedAddress,
location: {
latitude: res.ClinicData.location.latitude,
longitude: res.ClinicData.location.longitude,
},
country: country,
state: state,
city: city,
address: address,
}));
setShowSuggestions(false);
};
const getClinicDataFromLocation = async (latitude, longitude) => {
setIsLoading(true);
// console.log(latitude, longitude);
const API = `https://maps.googleapis.com/maps/api/ge ... ogleApiKey}`;
const res = await axios.get(API);
const { country, state, city } = extractLocationDetails(
res.ClinicData.results[0].address_components,
"long_name"
);
const address = res.ClinicData.results[0].formatted_address
.split(",")
.slice(0, -3)
.join(",");
setClinicData((prev) => ({
...prev,
// name: item.placePrediction.structuredFormat.mainText.text,
// address: res.ClinicData.formattedAddress,
location: {
// latitude: res.ClinicData.results[0].geometry.location.latitude,
// longitude: res.ClinicData.results[0].geometry.location.longitude,
latitude: UserData.location.latitude,
longitude: UserData.location.longitude,
},
country: country,
state: state,
city: city,
address: address,
}));
setIsLoading(false);
};
// console.log(ClinicData.timing);
// console.log(ShowTimePicker);
return (
{
router.back();
}}
/>
{/* {}} />
{}} /> */}
{!ShowSuggestions && (
{
getClinicDataFromLocation(
UserData.location.latitude,
UserData.location.longitude
);
}}
/>
{
bottomSheetRef.current.snapToIndex(3);
}}
/>
)}
{
setShowTimePicker(true);
}}
/>
Choose Timigs
{
return (
{
setActiveDay(item);
}}
>
{item.toUpperCase()}
);
}} // estimatedItemSize={43.3}
/>
{/* */}
{ActiveDay.toUpperCase()}
{
console.log(ShowTimePicker);
setShowTimePicker(true);
setIsOpeningTime(true);
console.log(ShowTimePicker);
}}
showRightIconBordered={true}
/>
{
console.log(ShowTimePicker);
setShowTimePicker(true);
setIsOpeningTime(false);
console.log(ShowTimePicker);
}}
showRightIconBordered={true}
/>
{
setData((prev) => ({
...prev,
timing: {
...prev.timing,
[ActiveDay]: {
...prev.timing[ActiveDay],
open24hrs: !prev.timing[ActiveDay].open24hrs,
opening: !prev.timing[ActiveDay].open24hrs
? "00:00"
: prev.timing[ActiveDay].opening,
closing: !prev.timing[ActiveDay].open24hrs
? "23:59"
: prev.timing[ActiveDay].closing,
isClosed: false,
},
},
}));
}}
/>
Open 24 Hours on {ActiveDay}
{
setData((prev) => ({
...prev,
timing: {
...prev.timing,
[ActiveDay]: {
...prev.timing[ActiveDay],
isClosed: !prev.timing[ActiveDay].isClosed,
opening: !prev.timing[ActiveDay].isClosed
? "00:00"
: prev.timing[ActiveDay].opening,
closing: !prev.timing[ActiveDay].isClosed
? "00:00"
: prev.timing[ActiveDay].closing,
open24hrs: false,
},
},
}));
}}
/>
Closed on {ActiveDay}
{
setChecked(!checked);
}}
/>
same timings for all days ?
{ShowTimePicker && (
)}
);
};
export default RegisterClinic;
Подробнее здесь: https://stackoverflow.com/questions/793 ... ttom-sheet
