React Native paper search bar closes keyboard on key press

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}
    />
  );
}