toggle view when clicked on TextInput in react native

Question

I have a TextInput, in that I have a view which ,makes the text come in between of the top border of TextInput as shown in image below.

Below is my code:

import React from "react";
import { View, Text, StyleSheet, TextInput } from "react-native";

const AddAddressScreen = () => {
    return (
        <View style={styles.TextInputcontainer}>
            <View style={styles.TextInputlabelContainer}> // this should toggle when clicked in and out of TextInput
                <Text style={styles.labelText}>Search</Text>
            </View>
            <TextInput style={styles.textSearchInput} selectionColor={"black"} placeholder="Search" />
        </View>
    );
}
const styles = StyleSheet.create({
    TextInputcontainer: {
        height: 50, width: 200, marginTop: 50,
    },
    TextInputlabelContainer: {
        position: 'absolute',
        backgroundColor: '#fff',
        top: -10.5, left: 20, zIndex: 1,
    },
    labelText: {
        color: "black",
    },
    textSearchInput: {
        flex: 1,
        borderWidth: 1, borderColor: "#9E9E9E",
        color: "#9E9E9E"
    },
});
export default AddAddressScreen;

There is view with styles.TextInputlabelContainer, I have also written comment at that place. I want that view to only come when user clicks on the TextInput. I am still in the learning phase of react native so I am not able to think on how to do this.

question from:https://stackoverflow.com/questions/65641372/toggle-view-when-clicked-on-textinput-in-react-native

Answer 1

Try With onFocus & onBlur Method in TextInput:

You can also get Reference From Below Link Focus style for TextInput in react-native