i am try searchbar my detail page. How can i filter this data with search bar? i want just filter with title Is it possible to filter the data with the title inside the card?how can i set how to resolve my problem please resolve my issue. i have attached the my code given below.

Who can help me? I added a searchbar using react native paper and wrote its function, but unfortunately it doesn't work

import {
  Text,
  View,
  ScrollView,
  Image,
  TouchableOpacity,
  Animated,
  StyleSheet,
} from 'react-native';
import React, {Component, useEffect, usenav, useState} from 'react';
import {
  Appbar,
  Button,
  Card,
  Paragraph,
  Title,
  IconButton,
  Colors,
  List,
  Avatar,
  Chip,
  Searchbar,
} from 'react-native-paper';
import axios from 'axios';
import {
  Home,
  Archive,
  Cast,
  Users,
  Calendar,
  Eye,
  FileText,
} from 'react-native-feather';

export default function Uzmanlar({navigation}) {
  const [isLoading, setIsLoading] = useState(false);
  const [profs, setProfs] = useState([]);
  const [searchQuery, setSearchQuery] = useState(null);
  useEffect(() => {
    dataCek();
  }, []);
  const onChangeSearch = query => setSearchQuery(query);
  const dataCek = async () => {
    const response = await fetch(
      'https://628ddf77368687f3e70af605.mockapi.io/profs',
    );
    const data = await response.json();
    setProfs(data);
    setIsLoading(true);
  };
  return (
    <View>
      <View style={{marginBottom: 100}}>
        <Appbar.Header style={{backgroundColor: '#FFC904'}} color="#FFC904">
          <Appbar.Content
            color="#0A0A0A"
            title="Uzmanlar"
            subtitle={'Tüm Uzmanlar'}
          />
        </Appbar.Header>
        <ScrollView>
          <Searchbar placeholder="Uzman Ara"
          onChangeText={onChangeSearch}
          value={searchQuery} />

          {profs.map((r, id) => (
            <Card
              key={id}
              style={{
                margin: 10,
                borderRadius: 20,
                flex: 1,
                flexDirection: 'row',
                ...styles.shadow,
              }}>
              <View style={{flex: 1, flexDirection: 'row'}}>
                <Avatar.Image
                  size={80}
                  style={{margin: 10}}
                  source={{uri: r.thumbnail}}
                />

                <Card.Content>
                  <Title>{r.unvan   r.title}</Title>
                  <Paragraph>{r.job}</Paragraph>
                  <Card.Actions
                    style={{
                      paddingLeft: 1,
                      flex: 1,
                      justifyContent: 'space-between',
                    }}>
                    <Button
                      icon="account"
                      style={{margin: 5}}
                      mode="contained"
                      onPress={() =>
                        navigation.navigate('UzmanDetay', {
                          title: r.title,
                          job: r.job,
                          thumbnail: r.thumbnail,
                          about: r.about,
                          unvan: r.unvan,
                        })
                      }>
                      Özgeçmiş
                    </Button>
                    <Button icon="camera" mode="contained">
                      Videolar
                    </Button>
                  </Card.Actions>
                </Card.Content>
              </View>
            </Card>
          ))}
        </ScrollView>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  shadow: {
    shadowColor: 'black',
    shadowOffset: {
      width: 15,
      height: 15,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.5,
    elevation: 8,
  },
});

CodePudding user response：

The best way to filter out data in a simple manner and not hindering performance is by using a FlatList in conjunction with a search bar. I suggest you read this article: https://www.geeksforgeeks.org/how-to-add-searchbar-in-react-native/ , it achieves what you want and doesn't hinder performance. To use a FlatList check this: https://reactnative.dev/docs/flatlist