NSRangeException Error

[salisuabubakar]

Hi, please help with this error fron Sentry log of my app. When i logout of my app it automatically crash and closes the app. Am using sentry for errror reporting and it shows this error below: NSRangeException Cannot remove an observer <NVSearchBarComponentView 0x120dabd10> for the key path "hidden" from <RCTScrollViewComponentView 0x12188a140> because it is not registered as an observer.

This is my file:

const SearchResults = ({ text }) => {
  const { stateNavigator } = useContext(NavigationContext);

  const searchcountryList = [
    { "id": "1", "country": "Algeria" },
    { "id": "2", "country": "Angola" },
    { "id": "3", "country": "Benin" },
    { "id": "4", "country": "Botswana" },
  ];

  return (
    <ScrollView
      contentInsetAdjustmentBehavior="automatic"
    >
      {
        searchcountryList.filter(
          (item) =>
            item.country.toUpperCase().includes(text.toUpperCase())
        )
          .map((item, index) => (
            <View key={item.id} style={{ width: "90%", alignSelf: "center" }}>
              <>
                <Pressable
                  android_ripple={{ borderless: false }}
                  onPress={
                    () => {
                      item.country === "Algeria" ?
                        stateNavigator.navigate("algeriaScreen", { data: item.country })
                        :
                        null,

                        item.country === "Angola" ?
                          stateNavigator.navigate("angolaScreen", { data: item.country })
                          :
                          null

                      item.country === "Benin" ?
                        stateNavigator.navigate("beninScreen", { data: item.country })
                        :
                        null

                      item.country === "Botswana" ?
                        stateNavigator.navigate("botswanaScreen", { data: item.country })
                        :
                        null
                  }
                  style={styles.onPressWrapper}
                >
                  <Text allowFontScaling style={styles.onPressWrapperText}>
                    {item.country}
                  </Text>
                  <Ionicons name="chevron-forward-outline" size={24} color="gray" />
                </Pressable>
              </>
              <SpaceItemcontent />
            </View>
          ))
      }
    </ScrollView>
  )
}

function SearchScreen() {
  const [text, setText] = useState('');
  const { stateNavigator } = useContext(NavigationContext);

  const countryListFlatlist = [
    { "id": "1", "country": "Algeria" },
    { "id": "2", "country": "Angola" },
    { "id": "3", "country": "Benin" },
    { "id": "4", "country": "Botswana" },
  ];

  const searchSerivesRender = ({ item }) => {
    return (
      <>
        <Pressable
          android_ripple={{ borderless: false }}
          onPress={
            () => {
              item.country === "Algeria" ?
                stateNavigator.navigate("algeriaScreen", { data: item.country })
                :
                null,

                item.country === "Angola" ?
                  stateNavigator.navigate("angolaScreen", { data: item.country })
                  :
                  null

              item.country === "Benin" ?
                stateNavigator.navigate("beninScreen", { data: item.country })
                :
                null

              item.country === "Botswana" ?
                stateNavigator.navigate("botswanaScreen", { data: item.country })
                :
                null
            }
          }
          style={styles.onPressWrapper}
        >
          <Text allowFontScaling style={styles.onPressWrapperText}>
            {item.country}
          </Text>
          <Ionicons name="chevron-forward-outline" size={24} color="gray" />
        </Pressable>
      </>
    )
  }

  return (
    <CoordinatorLayout>
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
      >
        {
          Platform.OS == "ios" ?
            <NavigationBar
              onNavigationPress={() => stateNavigator.navigateBack(1)}
>
              <StatusBar tintStyle='light' barTintColor="black" />
              <SearchBar text={text} onChangeText={text => setText(text)}>
                <SearchResults text={text} />
              </SearchBar>
              <TabBar primary={false} />
            </NavigationBar>
            :
            null
        }

          <FlatList
            data={countryListFlatlist}
            contentInsetAdjustmentBehavior="automatic"
            renderItem={searchSerivesRender}
          />
        </View>
      </ScrollView>
    </CoordinatorLayout>

  );
};

[grahammendick]

I've just released a fix in navigation-react-native v.9.21.1 and thanked you in the release notes 🙏

[grahammendick]

By the way, did you know you can upgrade to the latest material search bar by adding the toolbar prop?

<SearchBar toolbar>

(You need to set a Material3 theme in styles.xml, for example, "Theme.Material3.Light.NoActionBar")

[salisuabubakar]

Hi, Thanks for the quick response. However am still getting the same crash report after upgrading to 9.21.1. Thanks

[salisuabubakar]

By the way, did you know you can upgrade to the latest material search bar by adding the toolbar prop?

<SearchBar toolbar>

(You need to set a Material3 theme in styles.xml, for example, "Theme.Material3.Light.NoActionBar")

Yes i know about that. Thanks

[salisuabubakar]

I've just released a fix in navigation-react-native v.9.21.1 and thanked you in the release notes 🙏

Still having the same error after upgrading to 9.21.1. Thanks

[grahammendick]

You can't be getting that error because I deleted the code from the fabric version completely. Please can you double check

[salisuabubakar]

Hi, i have double check and sentry keeps giving the same error report. Below is my sentry screenshot. It might be usefull. Thanks

[grahammendick]

But how do you know that's running v9.21.1?

[salisuabubakar]

i have downloaded a new project and used the same search component but its still the same error. Thanks

[grahammendick]

I've definitely removed the code. Can you push your new project to GitHub please and send me a link?

[salisuabubakar]

Hi, i can confirm its working now. After creating a new project i copied the ios folder and it was still using version 9.20.0. Very sorry for wasting your time. Sorry for any inconvinience this might have caused you. I really appreciate your time.

Am really enjoying using the library and most of my friends are also doing same. Am also planning to create a video tutorials on how to use the library.

Thanks once again.

[grahammendick]

No problem at all. I'm glad it's working and I'm always happy to help.

The Navigation router depends on people like you to spread the message. So thank you and I'm super excited about watching your tutorials. Please drop me a message when they're available 🙏