React Native paper search bar closes keyboard on key press - reactjs

Question

As the title says. Every time I enter a letter into my SearchBar component it closes the keyboard and I'm forced to reopen it by pressing the search bar again. As you can imagine that's quite annoying.
Here's the code for the function component
import React, { useState, useEffect } from "react";
import { View, Text, FlatList } from "react-native";
import { Button, Searchbar } from "react-native-paper";
import { useSelector } from "react-redux";
import {
useFonts,
Poppins_100Thin,
Poppins_100Thin_Italic,
Poppins_200ExtraLight,
Poppins_200ExtraLight_Italic,
Poppins_300Light,
Poppins_300Light_Italic,
Poppins_400Regular,
Poppins_400Regular_Italic,
Poppins_500Medium,
Poppins_500Medium_Italic,
Poppins_600SemiBold,
Poppins_600SemiBold_Italic,
Poppins_700Bold,
Poppins_700Bold_Italic,
Poppins_800ExtraBold,
Poppins_800ExtraBold_Italic,
Poppins_900Black,
Poppins_900Black_Italic,
} from "#expo-google-fonts/poppins";
import Header from "../navigation/Header";
export default function AktSelect({...props}) {
const [data, setData] = useState([]);
const [value, setValue] = useState("");
const [akt, setAkt] = useState([]);
const [ime, setIme] = useState("");
const [opis, setOpis] = useState("");
const [mjesto, setMjesto] = useState("");
const [tip, setTip] = useState("");
const users = useSelector((state) => state.users);
useEffect(() => {
fetch("http://192.168.1.5:8000/fetchActivities", {
method: "POST",
headers: {
Accept: "application/json",
"Content-type": "application/json charset=utf-8",
},
body: JSON.stringify({
team: 'team'
}),
})
.then((res) => res.json())
.then((res) => setAkt(res));
}, []);
fetchData = async () => {
fetch("http://192.168.1.5:8000/fetchActivity", {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify({
data: item_id,
}),
})
.then((res) => res.json())
.then((res) => {
setIme(res[0].title);
setOpis(res[0].description);
setMjesto(res[0].location);
setTip(res[0].activity_type_id);
});
};
searchItems = (text) => {
const newData = akt.filter((item) => {
const itemData = `${item.title.toUpperCase()}`;
const textData = text.toUpperCase();
return itemData.indexOf(textData) > -1;
});
setData(newData);
setValue(text);
};
Item = ({ item }) => {
return (
<View>
<Text
style={{
padding: 10,
fontSize: 18,
fontFamily: "Poppins_600SemiBold",
}}
>
{item.title}{" "}
</Text>
<View
style={{
flexDirection: "row",
alignItems: "flex-end",
justifyContent: "flex-end",
}}
>
<Text style={{ padding: 10, fontFamily: "Poppins_400Regular" }}>
{item.start_time}{" "}
</Text>
<Button
mode="outlined"
onPress={() =>
props.navigation.navigate("Izmjena", {
name: item.title,
desc: item.description,
loc: item.location,
type: item.activity_type_id,
item_id: item.id,
})
}
style={{ marginRight: "3%", marginBottom: "1%", color: "#C5272F" }}
color="#C5272F"
>
Dalje
</Button>
</View>
</View>
);
};
renderHeader = () => {
return (
<Searchbar
placeholder="Type here..."
onChangeText={(text) => searchItems(text)}
value={value}
/>
);
};
renderSeparator = () => {
return (
<View
style={{
height: 1,
width: "100%",
backgroundColor: "#CED0CE"
}}
/>
);
};
const { navigation } = props;
return (
<View
style={{
flex: 1,
width: "98%",
alignSelf: "center",
justifyContent: "center",
}}
>
<Header title="Pretraživanje aktivnosti" navigation={navigation} />
<FlatList
data={data}
renderItem={({ item }) => <Item item={item} />}
keyExtractor={(item) => item.id.toString()}
ItemSeparatorComponent={renderSeparator}
ListHeaderComponent={renderHeader}
/>
</View>
);
}
I've converted it from a class component into a function component. Here's the old code
https://hatebin.com/inkmlddkpz

Answer 1

Oddly enough I found an answer not 3 minutes after this post
The issue was I had these 2 functions
renderHeader = () => {
return (
<Searchbar
placeholder="Type here..."
onChangeText={(text) => searchItems(text)}
value={value}
/>
);
};
renderSeparator = () => {
return (
<View
style={{
height: 1,
width: "100%",
backgroundColor: "#CED0CE"
}}
/>
);
};
Which caused a re-render on each keypress of the keyboard (hence the keyboard closing).
The fix was to move them outside the exported function.
function renderSeparator(){
return (
<View
style={{
height: 1,
width: "100%",
backgroundColor: "#CED0CE"
}}
/>
);
}
function renderHeader({value}) {
return (
<Searchbar
placeholder="Type here..."
onChangeText={(text) => searchItems(text)}
value={value}
/>
);
}