rn-firebase-chat

RN Firebase Chat

Installation

npm install rn-firebase-chat

Installation

• Using npm:

npm install rn-firebase-chat @react-native-firebase/app @react-native-firebase/firestore @react-native-firebase/storage randomcolor react-native-aes-crypto react-native-gifted-chat --save

• Using Yarn:

yarn add rn-firebase-chat @react-native-firebase/app @react-native-firebase/firestore @react-native-firebase/storage randomcolor react-native-aes-crypto react-native-gifted-chat

Usage

• Wrap your app with ChatProvider

import {ChatProvider} from 'rn-firebase-chat';

const userInfo = {
  id: 'abc123',
  name: 'John Doe',
  avatar: 'https://example.com/avatar.jpg'
}

function App() {

  return (
    <ChatProvider userInfo={userInfo}>
      <AppNavigation/>
    </ChatProvider>
  );
}

• Setup navigation for ListConversationScreen and ChatScreen

export const ChatNavigator = () => (
  <Stack.Navigator>
    <Stack.Screen
      name={RouteKey.ListChatScreen}
      component={ListChatScreen}
    />
    <Stack.Screen
      name={RouteKey.ChatScreen}
      component={ChatScreen}
    />
  </Stack.Navigator>
)

import React, {useCallback} from 'react';
import {ListConversationScreen} from 'rn-firebase-chat';
import {navigate} from '../../navigation/NavigationService';
import RouteKey from '../../navigation/RouteKey';

export const ListChatScreen: React.FC = () => {
  const handleItemPress = useCallback((data) => {
    navigate(RouteKey.ChatScreen, data);
  }, []);

  return (
      <ListConversationScreen onPress={handleItemPress} />
  );
};

import React from 'react'
import {ChatScreen as BaseChatScreen} from 'rn-firebase-chat'

const partnerInfo = {
  id: 'ayz123',
  name: 'Tony',
  image: 'https://example.com/tony.jpg'
}

export const ChatScreen: React.FC = () => {
  return (
    <BaseChatScreen
      memberIds={[partnerInfo.id]}
      partners={[partnerInfo]}
    />
  )
}

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library