TextInput goes Missing, but Keyboard Stays After Every KeyStroke?

Question

Trying to figure out an issue with the TextInput component I have which is acting weird. Basically, after every keystroke, the textinput seems to be losing its focus, but the keyboard seems to stay..

Im implementing it as a search bar that is triggered / animated when a search icon is touched by the user:

                <TouchableHighlight 
                    activeOpacity={1}
                    underlayColor={"#ccd0d5"}
                    onPress={onFocus}
                    style={styles.search_icon_box}
                >

onFocus method:

const onFocus = () => {
    setIsFocused(true);

    const input_box_translate_x_config = {
        duration: 200,
        toValue: 0,
        easing: EasingNode.inOut(EasingNode.ease)
    }

    const back_button_opacity_config = {
        duration: 200,
        toValue: 1,
        easing: EasingNode.inOut(EasingNode.ease)
    }

    // RUN ANIMATION
    timing(input_box_translate_x, input_box_translate_x_config).start();
    timing(back_button_opacity, back_button_opacity_config).start();

    ref_input.current.focus();
}

just a simple animation where when triggered the search bar will slide from the right side of the screen

                <Animated.View
                    style={[ styles.input_box, {transform: [{translateX: input_box_translate_x}] } ]}
                >
                    <Animated.View style={{opacity: back_button_opacity}}>
                        <TouchableHighlight
                            activeOpacity={1}
                            underlayColor={"#ccd0d5"}
                            onPress={onBlur}
                            style={styles.back_icon_box}
                        >
                            <MaterialIcons name="arrow-back-ios" size={30} color="white" />
                        </TouchableHighlight>
                    </Animated.View>
                    <SearchBar 
                        placeholder='Search'
                        keyboardType='decimal-pad'
                        returnKeyType='done' 
                        ref={ref_input}
                        value={searchText}
                        onChangeText={search}
                        onClear={onBlur}
                        onSubmitEditing={onBlur}
                        onFocus={() =>console.log("focus received" ) }
                        onBlur={() => console.log("focus lost") }
                    />
                </Animated.View>

Search

const search = (searchText) => {
    setSearchText(searchText);

    let filteredData = AnimalList.filter(function (item) {
        return item.tag_number.toString().includes(searchText);
    });

    setFilteredData(filteredData);
}

So, when I clicked on the search icon, the search bar will present itself through animated view and the keyboard will automatically be focused. However, after entering a single character on the keyboard the searchbar just vanishes with keyboard still showing.

I tried to debug using onFocus={() =>console.log("focus received" ) } and it looks like the searchBar is still focused on, its just not showing

EDIT: Issue Video Here https://github.com/renwid/test/issues/1

Answer 1

You can show the full version of SearchBar to get more help
[Updated]

The initial step, Animated.Value must be

const input_box_translate_x = useRef(new Value(width)).current;
const back_button_opacity = useRef(new Value(0)).current;

instead of

const input_box_translate_x = new Value(width);
const back_button_opacity = new Value(0);

Because you using the function component and re-render might be re-create the component and the Animated.Value will be re-create too. So the Animated.Value can not keep the state and cause you issue