Why my React-Native-Safe-Area-Context library not working

I’m making mobile app with react-native I install react-native-safe-area-context library after installation my project behaves unexpected.

At first when i install this library my autolinking.json file get empty so i manually add code of autolinking.json file.

Now this issue resolve not properly when i install my project autolinking.json file get empty i manually add configruation same happpen when i uninstall this library.

To fix this issue I copy my entire autolinking.json file before installing this library and after installing this library and at the time of building project when my autolinking.json file get empty i pasted configuration which i was earlier copied.

but new issue arised and issue is that I’m facing this problem

ViewManagerResolver returned null for either RNCSafeAreaProvider or RCTRNCSafeAreaProvider, existing names are: [DebuggingOverlay, RCTSafeArea View, RCTModal HostView, RCTTextInlineImage, AndroidProgressBar, AndroidHorizontal ScrollView, RCTImageView, RCTText, Android Horizontal ScrollContentView, UnimplementedNativeView, RCTScrollView, RCTView, Android DrawerLayout, AndroidSwitch, RCTVirtualText, AndroidSwipeRefreshLayout, RCTRawText, Android TextInput]

code of filter.tsx file
importing useful imports

import {
    SafeAreaView,
} from "react-native-safe-area-context";
import { FlatList, StatusBar, StyleSheet, Text, View } from "react-native";

const DATA = [
    {
        id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
        title: 'All',
    },
    {
        id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
        title: 'Programming',
    },
    {
        id: '58694a0f-3da1-471f-bd96-145571e29d72',
        title: 'Sports & Fitness',
    }
];

type ItemProps = {title: string};

const Item = ({title}: ItemProps) => (
    <View style={styles.item}>
        <Text style={styles.title}>{ title }</Text>
    </View>
);

const Filter = () => (
        <SafeAreaView style={styles.container}>
            <FlatList
                data={DATA}
                renderItem={({item}) => <Item title="item.title" />}
                keyExtractor={item => item.id}
            />
        </SafeAreaView>
);

stylesheet

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: StatusBar.currentHeight || 0,
    },

    item: {
        backgroundColor: 'blueviolet',
        color: 'black',
        padding: 20,
        marginVertical: 8,
        marginHorizontal: 16,
    },

    title: {
        fontSize: 32,
    },
});

export default Filter;

code of App.tsx file

import React from "react";


import Filter from "./component/filter";
import { StyleSheet } from "react-native";
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";

function MainApp():React.JSX.Element {
  return (
    <SafeAreaProvider style={styles.container}>
      <SafeAreaView>
        <Filter />
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "white",
  }
});

export default MainApp;

when i uninstall this library my project runs fine.

I’m creating filter button my project is based on bloging app basically I’m making mobile app of blog app project.

Why this happen and how to fix this error.