show/hide a component onFocus and onBlur in react native

Question

I am developing a small app where i have a file contain medicines "name, thumbnail and image address" called medicines.js file. This file and related images are stored in local folders.

I am placing a textinput(search) box at the top in homepage to search(filter medicines) medicines by typing its name. followed by the image of company and a pressable component to show all thumbnails of images on other screen. (company image and pressable are in HomeContent component). bydefault HomeContent will be shown.

The problem i am facing is: I am not able to focus on Textinput. No error ocurs. No msg.

Touchable(All medicines) in HomeContent working properly

HomeScreen code:

import {
  View,
  SafeAreaView,
  StatusBar,
  TextInput,
  Pressable,
  Image,
  Keyboard,
  Text,
  TouchableOpacity,
  FlatList,
} from "react-native";
import React, { useState, useEffect, useRef } from "react";
import SearchList from "../components/SearchList";
import HomeContent from "../components/HomeContent";
import { medicines } from "../files/allMedicines";

const HomeScreen = ({ navigation }) => {
  const [typeData, setTypeData] = useState("");
  const [allMedicines, setAllMedicines] = useState([]);
  const [showMainContent, setShowMainContent] = useState("");

  useEffect(() => {
    setAllMedicines(medicines);
    setShowMainContent(true);
  }, []);

  const typingData = (value) => {
    setShowMainContent(false);
    setTypeData(value);

    if (value.length > 1) {
      return setAllMedicines(
        medicines.filter((medi) =>
          medi.name.toLowerCase().includes(value.toLowerCase())
        )
      );
    } else if (value.length == 1) {
      setAllMedicines("Type medicine name");
    } else {
      setAllMedicines(medicines);
    }
  };

  

  const closeSearchList = () => {
    Keyboard.dismiss();
    console.log("close pressed");
    setShowMainContent(true);
    setTypeData("");
    setAllMedicines("");
  };

  return (
    <SafeAreaView style={{ flex: 1, marginTop: 0, backgroundColor: "#6ab187" }}>
      <StatusBar backgroundColor="#6ab187" />
      <View
        style={{
          width: "100%",
          height: 60,
          backgroundColor: "#098",
          flexDirection: "row",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <TextInput
          placeholder="search"
          onFocus={() => setShowMainContent(false)}
          onBlur={() => setShowMainContent(true)}
          onChangeText={(data) => typingData(data)}
          value={typeData}
          style={{
            width: 280,
            height: 50,
            backgroundColor: "#fff",
            fontSize: 25,
            textTransform: "uppercase",
            borderTopLeftRadius: 15,
            borderBottomLeftRadius: 15,
            paddingLeft: 10,
            color: "#098", //#eb5757",
          }}
        />
        <Pressable onPress={() => closeSearchList()}>
          <Image
            source={require("../assets/icons/close.png")}
            style={{
              width: 50,
              height: 50,
              backgroundColor: "#fff",
              borderTopRightRadius: 20,
              borderBottomRightRadius: 20,
            }}
          />
        </Pressable>
      </View>
      <View style={{ flex: 1 }}>
        {showMainContent ? (
          <HomeContent navigation={navigation} />
        ) : (
          <SearchList navigation={navigation} allMedicines={allMedicines} />
        )}
      </View>
    </SafeAreaView>
  );
};
export default HomeScreen;

homeContent code:

import React from "react";
import { View, Text, Image, TouchableOpacity } from "react-native";

const HomeContent = ({ navigation }) => {
  return (
    <View style={{ flex: 1}}>
      <View
        style={{
          flex: 2,
          alignSelf: "center",
          justifyContent: "center",
          alignitems: "center",
          paddingHorizontal: 5,
        }}
      >
        <Image
          source={require("../assets/images/1.png")}
          style={{
            width: "96%",
            aspectRatio: 0.8,
            resizeMode: "contain",
          }}
        />
      </View>
      <View
        style={{
          flex: 1,
          alignItems: "center",
          justifyContent: "flex-start",
        }}
      >
        <TouchableOpacity
          style={{
            width: 200,
            height: 50,
            padding: 5,
            backgroundColor: "#098",//#eb5757",
            alignItems: "center",
            justifyContent: "center",
            borderRadius: 20,
          }}
          onPress={() => navigation.navigate("AllMedicines")}
        >
          <Text style={{ color: "#fff", fontSize: 25, fontWeight: 500 }}>
            All Medicines
          </Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

export default HomeContent;

SearchList code:

import { View, Text, FlatList, TouchableOpacity, Image } from "react-native";
import React from "react";

const SearchList = ({ navigation, allMedicines }) => {
  return (
    <View style={{ flex: 1 }}>
      <FlatList
        style={{ flex: 1, width: "100%" }}
        data={allMedicines}
        renderItem={({ item }) => {
          return (
            <View
              style={{
                flex: 1,
                justifyContent: "center",
                alignItems: "center",
              }}
            >
              <TouchableOpacity
                style={{
                  width: "90%",
                }}
                onPress={() =>
                  navigation.navigate("MedicineDetail", {
                    imagePath: item.image,
                  })
                }
              >
                <View
                  style={{
                    width: "100%",
                    flexDirection: "row",
                    marginVertical: 5,
                    backgroundColor: "#263",
                    borderRadius: 10,
                    padding: 10,
                    alignItems: "center",
                    justifyContent: "space-between",
                    shadowColor: "#171717",
                    shadowOffset: { width: -2, height: 4 },
                    shadowOpacity: 0.9,
                    shadowRadius: 3,
                  }}
                >
                  <Text
                    style={{
                      fontSize: 25,
                      //fontWeight: "500",
                      color: "#fff",
                    }}
                  >
                    {item.name}
                  </Text>
                  <View>
                    <Image
                      source={item.thumb}
                      style={{ width: 40, height: 40, resizeMode: "contain" }}
                    />
                  </View>
                </View>
              </TouchableOpacity>
            </View>
          );
        }}
      />
    </View>
  );
};

export default SearchList;

Code preview:

Answer 1

Hmm, I think the problem is when it's got focus, you force change state -> re-render screen -> lost focus.

So just hide this method onFocus to see the difference