TypeError: undefined is not an object (evaluating '_$$_REQUIRE(_dependencyMap[32], "react-native-safe-area-context").SafeAreaView')

Question

I am trying to implement chat app using react-native below is my dependencies

"dependencies": {
    "@react-native-async-storage/async-storage": "~1.17.3",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/bottom-tabs": "^6.3.3",
    "@react-navigation/native": "^6.0.11",
    "@react-navigation/stack": "^6.2.2",
    "@reduxjs/toolkit": "^1.8.5",
    "@types/react-redux": "^7.1.24",
    "@types/redux-logger": "^3.0.9",
    "expo": "~46.0.8",
    "expo-splash-screen": "^0.16.2",
    "expo-status-bar": "~1.4.0",
    "firebase": "^9.9.3",
    "native-base": "^3.4.13",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-hook-form": "^7.34.2",
    "react-native": "0.69.5",
    "react-native-gesture-handler": "^2.5.0",
    "react-native-gifted-chat": "^1.0.4",
    "react-native-reanimated": "~2.9.1",
    "react-native-safe-area": "^0.5.1",
    "react-native-safe-area-context": "4.3.1",
    "react-native-screens": "~3.15.0",
    "react-native-svg": "12.3.0",
    "react-native-vector-icons": "^9.2.0",
    "react-native-web": "~0.18.7",
    "react-redux": "^8.0.2",
    "redux": "^4.2.0",
    "redux-logger": "^3.0.6",
    "save-dev": "^0.0.1-security"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/react": "~18.0.14",
    "@types/react-native": "~0.69.1",
    "typescript": "~4.3.5"
  },

This is my chat screen

const ChatScreen = ({ navigation, route }: any) => {
    const { data } = route.params;
    const [messages, setMessages] = React.useState<any>([]);
    React.useLayoutEffect(() => {
        navigation.setOptions({
            headerTitle: () => (
                <HStack style={{ marginLeft: 0 }} justifyContent={'center'} fontWeight={'bold'} fontSize={'lg'} alignItems={'center'} space={3}>
                    <Avatar source={{ uri: data.avatar as any }}
                    />
                    <Text numberOfLines={1}>{`${data.lastName} ${data.firstName}`}</Text>
                </HStack>
            ),
        });
    }, [navigation]);
    React.useLayoutEffect(() => {
        setMessages([
            {
                _id: 1,
                text: 'Hello developer',
                createdAt: new Date(),
                user: {
                    _id: 2,
                    name: 'React Native',
                    avatar: 'https://placeimg.com/140/140/any',
                },
            },
        ])
    }, []);
    const onSend = React.useCallback((messages = []) => {
        setMessages((previousMessages: never[] | undefined) => GiftedChat.append(previousMessages, messages))
    }, []);
    return (
        <React.Fragment>
            <View style={{ flex: 1 }}>
                <GiftedChat
                    messages={messages}
                    showAvatarForEveryMessage={true}
                    onSend={messages => onSend(messages as any)}
                    user={{
                        _id: auth?.currentUser?.email as any,
                        name: auth?.currentUser?.displayName as any,
                        avatar: auth?.currentUser?.photoURL as any
                    }}
                />
            </View>
            {
                Platform.OS === 'android' && 
                <KeyboardAvoidingView behavior="padding" keyboardVerticalOffset ={50} />
            }
        </React.Fragment>
    )
}
export default memo(ChatScreen);

But after running my app the error below occurred Error log 1 Error Log 2 Error log 3 Error log 4 Error from log 1

TypeError: undefined is not an object (evaluating '_$$_REQUIRE(_dependencyMap[32], "react-native-safe-area-context").SafeAreaView') Error from log 2 Invariant Violation: Tried to register two views with the same name RNCSafeAreaView

Error From log 3

Error: Requiring module "node_modules\react-native-gifted-chat\node_modules\react-native-safe-area-context\src\index.tsx", which threw an exception: Invariant Violation: Tried to register two views with the same name RNCSafeAreaView

Error from log 4

TypeError: undefined is not an object (evaluating '_$$_REQUIRE(_dependencyMap[32], "react-native-safe-area-context").SafeAreaView')

At the moment I don't know what to do please I need help.

Answer 1

The react-native-safe-area-context requires the stuff to be wrapped (i think). It is important to note that providers should not be inside a View that is animated with Animated or inside a ScrollView since it can cause very frequent updates.