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;
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