navigation: Unable to get Search Not working both android and ios

Hi, Thanks soo much for your time. Am really happy with the library and trust me its the best so far. Am having challenges using the search. I have tried everything i can but still cant get the search to filter to filter data when searching. I know am asking for too much but please help and i will be very grateful.

I checked the example you gave with zoom sample but still cant get it to work.

This has taken more than two weeks to get it working. I am able to get it working when i use the textinput but i want to use the native search with is much better.

Below is my code. Thanks in advance. Hopefully others will learn from this.

++++++++++++++++++++

import React, { useState, useEffect, useContext, useCallback } from 'react';
import {
  View,
  StyleSheet,
  Text,
  Platform,
  Pressable,
  Image,
  FlatList,
  ActivityIndicator,
  SafeAreaView,
  Alert,
} from 'react-native';
import { NavigationContext } from 'navigation-react';
import {
  NavigationBar,
  StatusBar,
  CoordinatorLayout,
  SearchBar,
  TabBar,
} from 'navigation-react-native';

function ServiceScreen({ item }) {
  const [text, setText] = useState('');
  const [isLoading, setisLoading] = useState(true);
  const [servicesSearchData, setservicesSearchData] = useState([]);

  const { stateNavigator } = useContext(NavigationContext);



  const spacepopularcontent = () => {
    return (
      <View
        style={{ width: '100%', height: 12, backgroundColor: 'transparent' }}
      />
    );
  };

  useEffect(() => {
    const fetchCategories = () => {
      fetch('https://example.com/services-api-page')
        .then(jsonData => jsonData.json())
        .then(data => {
          setisLoading(false);
          setservicesSearchData(data);
          setfilterservicesSearchData(data);
        })
        .catch(error => {
          Alert.alert('Error', error);
          setisLoading(false);
        });
    };
    fetchCategories();
  }, []);



  const SearchServices = (item) => {
    return (
      <Pressable
        key={item.nid}
        style={{
          backgroundColor: '#FFFFFF',
          flexDirection: 'row',
          width: '94%',
          flexDirection: 'row',
          marginHorizontal: 16,
          padding: 12,
          borderRadius: 6,
          backgroundColor: '#FFFFFF',
          alignSelf: 'center',
          shadowColor: '#3D3D3D',
          shadowOffset: {
            width: 0,
            height: 2,
          },
          shadowOpacity: 0.1,
          shadowRadius: 2.05,
          elevation: 2,
        }}
        android_ripple={{ color: '#121212', borderless: false }}
        onPress={() => {
          stateNavigator.navigate('servicesDetails', {
            dataitem: [item.field_services_image, item.title, item.view_node],
          });
        }}>
        <Image
          imageStyle={{ borderRadius: 10 }}
          style={styles.servicesimageStyle}
          source={{
            uri: `https://example.com${item.field_services_image}`,
          }}
        />
        <Text
          style={{
            color: '#3D3D3D',
            fontFamily: 'Heebo-Bold',
            fontWeight: '800',
            fontSize: 17,
            paddingVertical: 16,
          }}>
          {item.title}
        </Text>
      </Pressable>
    )
  }



  const renderServices = useCallback(({ item }) => {
    return (
      <Pressable
        key={item.nid}
        style={{
          backgroundColor: '#FFFFFF',
          flexDirection: 'row',
          width: '94%',
          flexDirection: 'row',
          marginHorizontal: 16,
          padding: 12,
          borderRadius: 6,
          backgroundColor: '#FFFFFF',
          alignSelf: 'center',
          shadowColor: '#3D3D3D',
          shadowOffset: {
            width: 0,
            height: 2,
          },
          shadowOpacity: 0.1,
          shadowRadius: 2.05,
          elevation: 2,
        }}
        android_ripple={{ color: '#121212', borderless: false }}
        onPress={() => {
          stateNavigator.navigate('servicesDetails', {
            dataitem: [item.field_services_image, item.title, item.view_node],
          });
        }}>
        <Image
          imageStyle={{ borderRadius: 10 }}
          style={styles.servicesimageStyle}
          source={{
            uri: `https://example.com${item.field_services_image}`,
          }}
        />
        <Text
          style={{
            color: '#3D3D3D',
            fontFamily: 'Heebo-Bold',
            fontWeight: '800',
            fontSize: 17,
            paddingVertical: 16,
          }}>
          {item.title}
        </Text>
      </Pressable>
    )
  });


  const ListEmptyComponent = () => {
    return (
      <View style={styles.loadingEmptyContainer}>
        <Text style={styles.loadingEmptyTxt}>No services found.</Text>
      </View>
    );
  };


  if (isLoading) {
    return (
      <View style={styles.loadingEmptyLoadingFetch}>
        <ActivityIndicator animating={true} size={'large'} color={'#05A550'} />
        <Text style={styles.loadingText}>Loading...</Text>
        <View />
      </View>
    );
  }

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <CoordinatorLayout>
        {Platform.OS == 'android' ? (
          <NavigationBar
            title="Services"
            titleFontSize={standard => (standard ? 18 : 28)}
            titleFontFamily={'Heebo-Bold'}
            titleFontWeight="800"
            titleColor={'#000000'}
            largeTitle={true}
            barTintColor={'red'}
            navigationAccessibilityLabel="Services"
            tintColor={'#ffffff'}
            onNavigationPress={() => stateNavigator.navigateBack(1)}>
            <StatusBar tintStyle="dark" barTintColor="white" />
            <TabBar primary={false} />
          </NavigationBar>
        ) : null}
        {Platform.OS == 'ios' ? (
          <NavigationBar
            title="Services"
            titleFontSize={standard => (standard ? 18 : 26)}
            titleFontFamily={'Heebo-Bold'}
            titleFontWeight="800"
            titleColor={'#000000'}
            largeTitle={true}
            barTintColor={'#ffffff'}
            navigationAccessibilityLabel="Services"
            tintColor={'#05A550'}
            onNavigationPress={() => stateNavigator.navigateBack(1)}

          >
            <StatusBar tintStyle="dark" barTintColor="white" />
            <SearchBar
              toolbar
              text={text}
              autoCapitalize="none"
              obscureBackground={false}
              barTintColor={Platform.OS === 'android' ? '#dcdcdc' : null}
              placeholder={(toolbar) => toolbar ? 'Search' : ''}
              onChangeText={text => setText(text)}>
              <SearchServices />
            </SearchBar>
          </NavigationBar>
        ) : null}

        <FlatList
          data={servicesSearchData}
          ItemSeparatorComponent={spacepopularcontent}
          ListEmptyComponent={<ListEmptyComponent />}
          contentContainerStyle={{
            flexGrow: 1,
            paddingVertical: 16,
          }}
          contentInsetAdjustmentBehavior="automatic"
          showsHorizontalScrollIndicator={false}
          showsVerticalScrollIndicator={false}
          nestedScrollEnabled={true}
          bounces={true}
          collapsable={false}
          endFillColor={'transparent'}
          keyboardDismissMode="on-drag"
          renderItem={renderServices}
        />
      </CoordinatorLayout>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  SafeAreaView: {
    flex: 1,
    backgroundColor: '#0A1C34',
  },
  Main: {
    flex: 1,
    backgroundColor: '#FAFAFA',
    position: 'relative',
  },
  btnclick: {
    flex: 1,
    alignItems: 'center',
    marginBottom: 12,
    backgroundColor: '#ffffff',
  },
  ActivityIndicatorView: {
    width: '100%',
    height: '100%',
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
  },
  ImageStyleWrapper: {
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    margin: 10,
  },
  ImageStyle: {
    width: '40%',
    height: 140,
  },
  Title: {
    color: '#3D3D3D',
    fontSize: 16,
    marginBottom: 4,
    fontFamily: 'Heebo-Bold',
  },
  catLoc1: {
    color: '#838B8B',
    fontSize: 14,
    fontFamily: 'Spartan-Bold',
    marginRight: 8,
    textDecorationLine: 'line-through',
  },
  catLoc2: {
    color: '#FF9907',
    fontSize: 14,
    fontFamily: 'Spartan-Bold',
  },
  locNTextBlock: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingBottom: 12,
  },
  categoryIcon: {
    width: 48,
    height: 48,
    backgroundColor: 'rgba(255,255,255,0.4)',
    borderRadius: 40,
  },
  AnimatedImageView: {
    backgroundColor: '#000000',
    flex: 1,
  },
  loaderView: {
    width: 74,
    height: 74,
  },
  deliveryEstime: {
    fontSize: 20,
    marginBottom: 12,
    fontWeight: 'bold',
    color: '#ffffff',
  },
  topBarBox: {
    width: '100%',
    height: 56,
    borderColor: 'transparent',
    borderWidth: 1,
    fontSize: 14,
    fontWeight: 'normal',
    fontFamily: 'Heebo-Medium',
    paddingHorizontal: 16,
    flexDirection: 'row',
    backgroundColor: '#F2F2F2',
    alignItems: 'center',
    alignSelf: 'center',
    borderRadius: 10,
  },
  searchInputBox: {
    flex: 1,
    height: 56,
    borderColor: 'transparent',
    fontSize: 18,
    fontFamily: 'Heebo-Medium',
    fontWeight: '600',
  },
  loadingEmptyContainer: {
    flex: 1,
    position: 'absolute',
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    backgroundColor: '#FFFFFF'
  },
  loadingEmptyContainer: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'center',
  },
  loadingEmptyTxt: {
    color: '#555555',
    fontSize: 17,
    marginBottom: 16,
    fontFamily: 'GoogleSans-Bold',
  },
  servicesimageStyle: {
    width: 165,
    height: 105,
    marginRight: 16,
    borderRadius: 6,
  },
  servicesheaderTxtWrapper: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  searchIcon: {
    width: '8%',
  },
});

export default ServiceScreen;

++++++++++++++