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;