Not work in navigation screen

[torretorich]

hello everyone i use gifted chat to implement chat option in project. it is clearly run in App.js file in react native without any issues or error but when i copy that code in navigation screen there is show an error and project will not run please solve my issue.

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

import React, { useState, useCallback, useEffect } from 'react'
import { GiftedChat } from 'react-native-gifted-chat'
import {View,Text,StyleSheet,SafeAreaView} from 'react-native';

const ChatScreen= () => {

    const [messages, setMessages] = useState([]);

    useEffect(() => {
      setMessages([
        {
          _id: 1,
          text: 'Hello developer',
          createdAt: new Date(),
          user: {
            _id: 2,
            name: 'React Native',
            avatar: 'https://placeimg.com/140/140/any',
          },
        },
      ])
    }, [])

    const onSend = useCallback((messages = []) => {
      setMessages(previousMessages => GiftedChat.append(previousMessages, messages))
    }, [])

  return (
    <GiftedChat
        messages={messages}
        onSend={messages => onSend(messages)}
        user={{
          _id: 1,
        }}
      />
  )
}

export default ChatScreen

const styles = StyleSheet.create({})

[UIT19521334]

Yeah i have similar poblem, maybe the GiftChat return nothing

[asRizvi888]

Same issue

[UIT19521334]

I fix the issue by using it in smaller screen Like:

<NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          options={{
            headerShown: false,
          }}
          name="MessNav"
          component={MessNav}
        />
      </Stack.Navigator>
</NavigationContainer>

in MessNav.js

<Stack.Navigator>
        <Stack.Screen
          options={{
            headerShown: false,
          }}
          name="Messenger"
          component={Messenger}
        />
</Stack.Navigator>

And it will working

[torretorich]

@UIT19521334 Thank you for help. but i try this and it's not working. please check :

import * as React from ‘react’; import {View, Text} from ‘react-native’; import {NavigationContainer} from ‘@react-navigation/native’; import {createNativeStackNavigator} from ‘@react-navigation/native-stack’; import ChattingScreen from ‘./ChattingScreen’; const Stack = createNativeStackNavigator(); export default function MessNav() { return ( <Stack.Navigator screenOptions={{ headerShown: false, }} initialRouteName=“ChattingScreen”> <Stack.Screen options={{ headerShown: false, }} name=“ChattingScreen” component={ChattingScreen} /> </Stack.Navigator> ); }

i pass this navigation stack in my main navigation stack.

import React, {useState, useCallback, useEffect} from 'react'; import {GiftedChat} from 'react-native-gifted-chat'; import {View, SafeAreaView, StyleSheet} from 'react-native'; const ChattingScreen = () => { const [messages, setMessages] = useState([]); useEffect(() => { setMessages([ { _id: 1, text: 'Hello developer', createdAt: new Date(), user: { _id: 2, name: 'React Native', avatar: 'https://placeimg.com/140/140/any', }, }, ]); }, []); const onSend = useCallback((messages = []) => { setMessages(previousMessages => GiftedChat.append(previousMessages, messages), ); }, []); return ( <GiftedChat messages={messages} onSend={messages => onSend(messages)} user={{ _id: 1, }} /> ); }; export default ChattingScreen; const styles = StyleSheet.create({});

and after that i pass the gifted chat screen in 2nd stack navigation but get same error.

[UIT19521334]

I don'tthow it work but try delete

import {NavigationContainer} from ‘@react-navigation/native’;

in your code

[Abdul-rehman0045]

@UIT19521334 Thank you for help. but i try this and it's not working. please check :

import * as React from ‘react’; import {View, Text} from ‘react-native’; import {NavigationContainer} from ‘@react-navigation/native’; import {createNativeStackNavigator} from ‘@react-navigation/native-stack’; import ChattingScreen from ‘./ChattingScreen’; const Stack = createNativeStackNavigator(); export default function MessNav() { return ( <Stack.Navigator screenOptions={{ headerShown: false, }} initialRouteName=“ChattingScreen”> <Stack.Screen options={{ headerShown: false, }} name=“ChattingScreen” component={ChattingScreen} /> </Stack.Navigator> ); }

i pass this navigation stack in my main navigation stack.

import React, {useState, useCallback, useEffect} from 'react'; import {GiftedChat} from 'react-native-gifted-chat'; import {View, SafeAreaView, StyleSheet} from 'react-native'; const ChattingScreen = () => { const [messages, setMessages] = useState([]); useEffect(() => { setMessages([ { _id: 1, text: 'Hello developer', createdAt: new Date(), user: { _id: 2, name: 'React Native', avatar: 'https://placeimg.com/140/140/any', }, }, ]); }, []); const onSend = useCallback((messages = []) => { setMessages(previousMessages => GiftedChat.append(previousMessages, messages), ); }, []); return ( <GiftedChat messages={messages} onSend={messages => onSend(messages)} user={{ _id: 1, }} /> ); }; export default ChattingScreen; const styles = StyleSheet.create({});

and after that i pass the gifted chat screen in 2nd stack navigation but get same error.

@UIT19521334 Thank you for help. but i try this and it's not working. please check :

import * as React from ‘react’; import {View, Text} from ‘react-native’; import {NavigationContainer} from ‘@react-navigation/native’; import {createNativeStackNavigator} from ‘@react-navigation/native-stack’; import ChattingScreen from ‘./ChattingScreen’; const Stack = createNativeStackNavigator(); export default function MessNav() { return ( <Stack.Navigator screenOptions={{ headerShown: false, }} initialRouteName=“ChattingScreen”> <Stack.Screen options={{ headerShown: false, }} name=“ChattingScreen” component={ChattingScreen} /> </Stack.Navigator> ); }

i pass this navigation stack in my main navigation stack.

import React, {useState, useCallback, useEffect} from 'react'; import {GiftedChat} from 'react-native-gifted-chat'; import {View, SafeAreaView, StyleSheet} from 'react-native'; const ChattingScreen = () => { const [messages, setMessages] = useState([]); useEffect(() => { setMessages([ { _id: 1, text: 'Hello developer', createdAt: new Date(), user: { _id: 2, name: 'React Native', avatar: 'https://placeimg.com/140/140/any', }, }, ]); }, []); const onSend = useCallback((messages = []) => { setMessages(previousMessages => GiftedChat.append(previousMessages, messages), ); }, []); return ( <GiftedChat messages={messages} onSend={messages => onSend(messages)} user={{ _id: 1, }} /> ); }; export default ChattingScreen; const styles = StyleSheet.create({});

and after that i pass the gifted chat screen in 2nd stack navigation but get same error.

I also got the same error I use (yarn add react-native-safe-area-context) to fix the error

[Abdul-rehman0045]

I also got the same error I use (yarn add react-native-safe-area-context) to fix the error

[Kamaluddin0302]

I also got the same error "react-native-gifted-chat": "^1.0.4" after add this version it fixed..