For somewhat undertaking I’m taking part in round React Native Internet and I am operating into an odd situation that I am not likely certain the best way to clarify what’s going on. I’ve a easy type that has two TextInput members from react-native-paper.
Nevertheless, when I’m opening the undertaking in a cell browser on iOS (examined with Firefox, Chrome and Safari), the view will get shifted upwards to accommodate the keyboard, however it would not shift again when the keyboard is dismissed. On Android, it is fully advantageous.
Listed below are the steps I am doing.
- Opening the view (Which you’ll see right here)
- Clicking on the “Description Area” to get the keyboard to open.
- Dismissing the keyboard
- Scratching my head on the end result (proven right here)
I’ve seen a number of issues speaking about KeyboardAvoidingView, however it’s my interpretation that does not truly work on Internet?
Does anybody have any options or maybe an evidence as to what is going on on? Any assist can be appreciated for the reason that objective is to mess around with React Native Internet since I am simply taking part in round with the library.
Here is the undertaking variations:
- react-native: 0.76.5
- react-native-paper: 5.12.5
- react-native-web: 0.19.13
- expo: 52.0.23
Lastly right here is the demo code that reveals the issue for me.
import { Button, Textual content, TextInput, useTheme } from "react-native-paper";
import { Controller, useForm } from "react-hook-form";
import { DatePickerModal } from "react-native-paper-dates";
import HeaderBar from "../parts/header/HeaderBar";
import { View } from "react-native-web";
import { useState } from "react";
interface EventFormData null;
title: string;
description?: string;
date: Date;
const EventScreen = () => {
const theme = useTheme();
const {
management,
handleSubmit,
setValue,
watch,
formState: { errors },
} = useForm();
const [showDatePicker, setShowDatePicker] = useState(false);
const selectedDate = watch("date");
const validateDate = (worth: Date) => {
if (!worth) return "Date is required";
const immediately = new Date();
immediately.setHours(23, 59, 0, 0);
if (worth > immediately) return "Date can't be sooner or later";
return true;
};
const onFormSubmit = async (information: EventFormData) => {
console.log("Changing implementation to point out situation")
};
return (
Add Occasion
(
)}
/>
{errors.title && {errors.title.message} }
(
)}
/>
{errors.description && {errors.description.message} }
(
<>
{errors.date && {errors.date.message} }
>
)}
/>
setShowDatePicker(false)}
onConfirm={(params) => {
setShowDatePicker(false);
setValue("date", params.date);
}}
/>
)
}
export default EventScreen
I used to be anticipating that for the reason that view is shifted when the keyboard is opened, it will routinely shift again when the keyboard is closed. Particularly for the reason that similar code works on the cell browsers on Android.
