13.1 C
London
Thursday, September 26, 2024

android – TextInput and KeyboardAvoidingView should not working appropriately


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

A quite simple incident took up a variety of my time. This TextInput and the keyboard should not suitable with one another. I simply cannot do the logic appropriately. What I need to do is that this: The person will be capable to write a message in a standard peak space or write in full display if they need.

Once I click on on TextInput and the keyboard opens, the keyboard enter goes up. It is true thus far.

When the person presses the pink button within the code under, I need the textInput to increase to the header. If I open the keyboard once I do that, a lot of the enter stays under the keyboard. How can I write logic appropriately?

import React, { useState } from "react";
import {
    View,
    TextInput,
    Platform,
    KeyboardAvoidingView,
    Dimensions,
    SafeAreaView,
    Textual content,
    TouchableOpacity,
} from "react-native";

perform Primary() {
    const [text, setText] = useState("");
    const [fullScreen, setFullScreen] = useState(false);

    const models = {
        width: Dimensions.get("window").width,
        peak: Dimensions.get("window").peak,
    };


    return (
        <SafeAreaView fashion={{ flex: 1, backgroundColor: "black" }}>
            <KeyboardAvoidingView
                conduct={Platform.OS == "android" ? "peak" : "padding"}
                fashion={{ flex: 1 }}
            >
                <View fashion={{ peak: 68, width: models.width, backgroundColor: "gray" }}>
                    <Textual content>Header</Textual content>
                </View>
                <View fashion={{ flex: 1, backgroundColor: "cyan" }}>
                    {/* chat messages will then be rendered right here */}
                </View>
                <View fashion={{ backgroundColor: "orange", paddingVertical: 10 }}>
                    <TextInput
                        placeholder="Kind right here"
                        worth={textual content}
                        onChangeText={setText}
                        placeholderTextColor={"black"}
                        fashion={{
                            maxHeight: models.peak / 6,
                            coloration: "white",
                            backgroundColor: "inexperienced",
                        }}
                        multiline
                    />
                    <TouchableOpacity
                        fashion={{
                            peak: 20,
                            width: 20,
                            backgroundColor: "pink",
                            place: "absolute",
                            backside: 10,
                            proper: 0
                        }}
                        onPress={() => setFullScreen(!fullScreen)}
                    />
                </View>
            </KeyboardAvoidingView>
        </SafeAreaView>
    );
}

export default Primary;
Latest news
Related news

LEAVE A REPLY

Please enter your comment!
Please enter your name here