GiftedChat screen not visible when integrating with existing project

Question

I'm new to react native and I am working on adding a chat feature to my app. For learning, I followed a tutorial and made a standalone chat app and it was working perfectly. But when I tried to integrate it with the rest of my project - all I got was a blank screen I checked the gifted chat versions in both - its the same ^0.13.0 and I checked for the chat code in both - it's exactly the same. I don't understand why nothing is visible and how can I fix it ? Help will be really appreciated ! Putting the package.json as well, in case there is a version issue

Standalone chat

import React, {Component} from 'react';
import { GiftedChat } from 'react-native-gifted-chat';
import { db } from 'C:/Users/Suman Shaw/testCareApp/config';

let saveMessage = message => {
  db.ref('/messages').push({
    messageText: message
  });
};  

export default class giftedChat extends React.Component {
  state = {
    messages: [],
  }

  componentDidMount() {
    this.setState({
      messages: [
        {
          _id: 1,
          text: 'Hi There !',
          createdAt: new Date(),
          user: {
            _id: 2,
            name: 'suman@gmail.com',
            avatar: 'https://placeimg.com/640/480/nature',
          },
        },
      ],
    })
  }

  onSend(messages = []) {
    this.setState(previousState => ({
      messages: GiftedChat.append(previousState.messages, messages),
    }))
    db.ref('/messages').push({ messages });
  }

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

package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "~36.0.0",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
    "react-native-gifted-chat": "^0.13.0",
    "react-native-web": "~0.11.7"
  },
  "devDependencies": {
    "babel-preset-expo": "~8.0.0",
    "@babel/core": "^7.0.0"
  },
  "private": true
}

In my app:

class ChatPage extends React.Component {

  render() {
  return (
    <View style={styles.container}>
        <Button title="Chat room" color='#00bcd4' onPress={() => this.props.navigation.navigate('giftedChat')} /> //the same file copied from the standalone chat
    </View>
  );
}
const RootStack = createStackNavigator(
  {
    WelcomePage: WelcomePage,
    giftedChat : giftedChat, 

  }
);

export default createAppContainer(RootStack);

package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-community/masked-view": "0.1.5",
    "@react-native-firebase/auth": "^6.3.4",
    "@react-navigation/native": "^5.0.7",
    "@react-navigation/stack": "^5.0.8",
    "expo": "~36.0.0",
    "firebase": "^7.9.3",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
    "react-native-dotenv": "^0.2.0",
    "react-native-gesture-handler": "^1.6.0",
    "react-native-gifted-chat": "^0.13.0",
    "react-native-reanimated": "~1.4.0",
    "react-native-router-flux": "^4.2.0",
    "react-native-safe-area-context": "0.6.0",
    "react-native-screens": "2.0.0-alpha.12",
    "react-native-web": "~0.11.7"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "babel-preset-expo": "~8.0.0",
    "expo-cli": "^3.13.1"
  },
  "private": true
}