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

export default Most important;

Leave a Reply

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