iOS Development

android – TextInput and KeyboardAvoidingView will not be working accurately

Spread the love

There’s a chat utility that I developed with React native. I’ve written a easy model of the primary display of the appliance under.

A quite simple incident took up lots of my time. This TextInput and the keyboard will not be suitable with one another. I simply can’t do the logic accurately. What I wish to do is that this: The consumer will be capable of write a message in a traditional top space or write in full display if they want.

After I click on on TextInput and the keyboard opens, the keyboard enter goes up. It is true up to now.

When the consumer presses the crimson button within the code under, I would like the textInput to increase to the header. If I open the keyboard once I do that, many of the enter stays under the keyboard. How can I write logic accurately?

import React, { useState } from "react";
import {
    Textual content,
} from "react-native";

operate Most important() {
    const [text, setText] = useState("");
    const [fullScreen, setFullScreen] = useState(false);

    const models = {
        width: Dimensions.get("window").width,
        top: Dimensions.get("window").top,

    return (
        <SafeAreaView model={{ flex: 1, backgroundColor: "black" }}>
                habits={Platform.OS == "android" ? "top" : "padding"}
                model={{ flex: 1 }}
                <View model={{ top: 68, width: models.width, backgroundColor: "gray" }}>
                    <Textual content>Header</Textual content>
                <View model={{ flex: 1, backgroundColor: "cyan" }}>
                    {/* chat messages will then be rendered right here */}
                <View model={{ backgroundColor: "orange", paddingVertical: 10 }}>
                        placeholder="Sort right here"
                        worth={textual content}
                            maxHeight: / 6,
                            coloration: "white",
                            backgroundColor: "inexperienced",
                            top: 20,
                            width: 20,
                            backgroundColor: "crimson",
                            place: "absolute",
                            backside: 10,
                            proper: 0
                        onPress={() => setFullScreen(!fullScreen)}

export default Most important;

Leave a Reply

Your email address will not be published. Required fields are marked *