How to fix React Native code to show two different flatlist (Json Api) in one screen and can use search feature - json

Question

I want to create an application screen, in that screen it can show 2 flatlists from different api, I call it using a button.
For that process I was successful, but I want to add a search feature by reading every list that is called or active at that time, but this doesn't work. And if I take it also does not work. In this flatlist I also want to be able to move the detail pages.
This is for my college semester assignment.
import {
Box,
Text,
Image,
Heading,
Center,
ScrollView,
Spinner,
FlatList,
Pressable,
View,
HStack,
Button,
} from 'native-base';
import React, { Component } from 'react';
import { Dimensions, TouchableOpacity, StatusBar } from 'react-native';
import {LinearGradient} from 'expo-linear-gradient';
import { Ionicons, Entypo } from '#expo/vector-icons';
import { ListItem, SearchBar } from '#rneui/themed';
const windowWidth = Dimensions.get('window').width;
class Legal extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
isLoading: true,
categories: ['apps', 'products'],
contentSwitcher: false,
isFetching: false,
searchTxt: null,
error: null,
temp: [],
};
}
async getApps() {
try {
const response = await fetch(
'https://ojk-invest-api.vercel.app/api/apps'
);
const json = await response.json();
this.setState({ data: json.data.apps });
} catch (error) {
console.error(error);
} finally {
this.setState({ isLoading: false, contentSwitcher: false });
}
}
async getProducts() {
try {
const response = await fetch(
'https://ojk-invest-api.vercel.app/api/products'
);
const json = await response.json();
this.setState({ data: json.data.products, contentSwitcher: true });
} catch (error) {
console.error(error);
} finally {
this.setState({ isLoading: false });
}
}
setResult = (res) => {
this.setState ({
data: [...this.state.data, ...res.data.apps],
temp: [...this.state.temp, ...res.data.apps],
error: res.error || null,
isLoading: false,
});
};
renderHeader = () => {
return <SearchBar placeholder='Cari ...'
lightTheme round editable={true}
value={this.state.searchTxt}
onChangeText={this.updateSearch}
/>
};
updateSearch = searchTxt => {
this.setState({searchTxt}, () => {
if ('' == searchTxt) {
this.setState({
data: [...this.state.temp],
});
return;
}
this.state.data = this.state.temp.filter(function (item) {
return item.name.includes(searchTxt);
}).map(function({ id, name, type }) {
return {id, name, type};
});
});
};
componentDidMount() {
this.getApps();
}
onRefresh = () => {
this.setState({ isFetching: true }, () => {
this.getApps();
});
};
renderItem = ({ item }) => {
const { navigation } = this.props;
return (
<>
<Pressable
style={{ padding: 20, backgroundColor: 'white' }}
onPress={() => navigation.navigate('Detail Produk', { data: item })}>
<Center>
<View
style={{
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
}}>
<Text
style={{
fontSize: 16,
width: windowWidth - 40,
textAlign: 'justify',
marginTop: 6,
}}>
{item.name}
</Text>
<Text
style={{
color: '#808080',
fontSize: 14,
width: windowWidth - 40,
textAlign: 'justify',
marginTop: 6,
}}>
{this.state.contentSwitcher ? item.management : item.owner}
</Text>
</View>
</Center>
</Pressable>
<View style={{ borderWidth: 0.5, borderColor: '#cccccc' }}></View>
</>
);
};
render() {
const { data, isLoading, isFetching } = this.state;
return (
<View style={{ flex: 1, justifyContent: 'center'}}>
<HStack alignItems="center" bgColor="#fff" p="1" w={window.width}>
<Pressable m="2" rounded="8" p="2" flex={1} textAlign="center">
<Button onPress={() => this.getApps()}
leftIcon={<Ionicons name="folder" color="white" />}
colorScheme="green"
>
Aplikasi
</Button>
</Pressable>
<Pressable m="2" rounded="8" p="2" flex={1} textAlign="center">
<Button onPress={() => this.getProducts()}
leftIcon={<Entypo name="box" color="white" />}
colorScheme="green"
>
Produk
</Button>
</Pressable>
</HStack>
{isLoading ? (
<Spinner size="large" color="#AA0002" />
) : (
<FlatList
ListHeaderComponent={this.renderHeader}
data={data}
keyExtractor={({ link }, index) => link}
renderItem={this.renderItem}
onRefresh={this.onRefresh}
refreshing={isFetching}
/>
)}
</View>
);
}
}
export default Legal;