### Start Example App Packager Source: https://github.com/saigontechnology/rn-firebase-chat/blob/master/CONTRIBUTING.md Starts the Metro server for the example application. Changes to JavaScript code will be reflected without a rebuild, while native code changes require a rebuild. ```shell yarn example start ``` -------------------------------- ### Run Example App on Web Source: https://github.com/saigontechnology/rn-firebase-chat/blob/master/CONTRIBUTING.md Builds and runs the example application on a web browser. ```shell yarn example web ``` -------------------------------- ### Run Example App on iOS Source: https://github.com/saigontechnology/rn-firebase-chat/blob/master/CONTRIBUTING.md Builds and runs the example application on an iOS simulator or device. ```shell yarn example ios ``` -------------------------------- ### Install rn-firebase-chat using npm Source: https://github.com/saigontechnology/rn-firebase-chat/blob/master/README.md Installs the core rn-firebase-chat package using npm. This is the basic installation command. ```sh npm install rn-firebase-chat ``` -------------------------------- ### Run Example App on Android Source: https://github.com/saigontechnology/rn-firebase-chat/blob/master/CONTRIBUTING.md Builds and runs the example application on an Android device or emulator. ```shell yarn example android ``` -------------------------------- ### Install rn-firebase-chat Dependencies with npm Source: https://github.com/saigontechnology/rn-firebase-chat/blob/master/README.expo.md Installs the `rn-firebase-chat` library and its peer dependencies, along with `expo-build-properties`, using npm. This command ensures all necessary packages are present for the Firebase integration. ```sh 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 react-native-keyboard-controller react-native-video react-native-vision-camera react-native-image-picker expo-build-properties --save ``` -------------------------------- ### Install rn-firebase-chat Dependencies with Yarn Source: https://github.com/saigontechnology/rn-firebase-chat/blob/master/README.expo.md Installs the `rn-firebase-chat` library and its peer dependencies, along with `expo-build-properties`, using Yarn. This command ensures all necessary packages are present for the Firebase integration. ```sh 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 react-native-keyboard-controller react-native-video react-native-vision-camera react-native-image-picker expo-build-properties ``` -------------------------------- ### Install chat addons dependencies using Yarn Source: https://github.com/saigontechnology/rn-firebase-chat/blob/master/README.md Installs additional libraries for chat addons like image/video picker and camera using Yarn. Ensure these are installed before enabling addon features. ```sh yarn add react-native-video react-native-vision-camera react-native-image-picker ``` -------------------------------- ### Build Package Source: https://github.com/saigontechnology/rn-firebase-chat/blob/master/RELEASE.md Builds the package for distribution using yarn. This command is typically used before publishing. ```bash yarn prepack ``` -------------------------------- ### Install rn-firebase-chat with dependencies using Yarn Source: https://github.com/saigontechnology/rn-firebase-chat/blob/master/README.md Installs rn-firebase-chat and its required dependencies using Yarn. This command ensures all necessary packages are added to your project. ```sh 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 react-native-keyboard-controller ``` -------------------------------- ### Install Project Dependencies with Yarn Source: https://github.com/saigontechnology/rn-firebase-chat/blob/master/CONTRIBUTING.md Installs all the necessary dependencies for the project. It is recommended to use Yarn for development as the tooling is built around it. ```shell yarn ``` -------------------------------- ### Publish to npm Source: https://github.com/saigontechnology/rn-firebase-chat/blob/master/RELEASE.md Publishes the built package to the npm registry. Ensure you have logged in and the package is built. ```bash npm publish ``` -------------------------------- ### Bootstrap Project Dependencies and Pods Source: https://github.com/saigontechnology/rn-firebase-chat/blob/master/CONTRIBUTING.md Installs all project dependencies and initializes CocoaPods for the iOS project, setting up the development environment. ```shell yarn bootstrap ``` -------------------------------- ### Install rn-firebase-chat with dependencies using npm Source: https://github.com/saigontechnology/rn-firebase-chat/blob/master/README.md Installs rn-firebase-chat along with its essential React Native Firebase and other utility dependencies using npm. Ensure these dependencies are installed for full functionality. ```sh 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 react-native-keyboard-controller --save ``` -------------------------------- ### Install chat addons dependencies using npm Source: https://github.com/saigontechnology/rn-firebase-chat/blob/master/README.md Installs additional libraries required for the image/video picker and camera features within the chat addon. Use this command with npm. ```sh npm install react-native-video react-native-vision-camera react-native-image-picker --save ``` -------------------------------- ### Run Tests and Linting Source: https://github.com/saigontechnology/rn-firebase-chat/blob/master/RELEASE.md Executes the test suite, runs linters, and performs TypeScript type checking for the project. ```bash yarn test yarn lint yarn typecheck ``` -------------------------------- ### Check npm Login Status Source: https://github.com/saigontechnology/rn-firebase-chat/blob/master/RELEASE.md Verifies if you are currently logged into your npm account. If not, it prompts you to log in. ```bash npm whoami # If not logged in, use: npm login ``` -------------------------------- ### Check npm Package Version Source: https://github.com/saigontechnology/rn-firebase-chat/blob/master/RELEASE.md Retrieves the latest published version of the 'rn-firebase-chat' package from the npm registry. Useful for troubleshooting version conflicts. ```bash npm view rn-firebase-chat version ``` -------------------------------- ### Automated Minor Release with release-it Source: https://github.com/saigontechnology/rn-firebase-chat/blob/master/RELEASE.md Initiates an automated minor release for new features using the `release-it` tool. This command is used for backward-compatible feature additions. ```bash yarn release minor ``` -------------------------------- ### Dry Run of Automated Release Source: https://github.com/saigontechnology/rn-firebase-chat/blob/master/RELEASE.md Performs a dry run of the automated release process using `release-it`. This allows you to test the release steps without actually publishing to npm or creating tags. ```bash yarn release:dry ``` -------------------------------- ### Automated Major Release with release-it Source: https://github.com/saigontechnology/rn-firebase-chat/blob/master/RELEASE.md Initiates an automated major release for breaking changes using the `release-it` tool. This command should be used when introducing non-backward-compatible API changes. ```bash yarn release major ``` -------------------------------- ### Check Git Status Source: https://github.com/saigontechnology/rn-firebase-chat/blob/master/RELEASE.md Displays the current status of the working directory and staging area. Used to ensure a clean working tree before a release. ```bash git status ``` -------------------------------- ### Implement ChatScreen in React Native Source: https://github.com/saigontechnology/rn-firebase-chat/blob/master/README.md Provides an example of how to render the base ChatScreen component. It takes member IDs and partner information as props to display the chat interface. ```javascript import React from 'react'; import { ChatScreen as BaseChatScreen } from 'rn-firebase-chat'; const partnerInfo = { id: 'ayz123', name: 'Tony', avatar: 'https://example.com/tony.jpg', }; export const ChatScreen: React.FC = () => { return ( ); }; ``` -------------------------------- ### Push Git Changes and Tags Source: https://github.com/saigontechnology/rn-firebase-chat/blob/master/RELEASE.md Pushes the committed changes and tags to the 'master' branch on the remote origin. This is typically done after a successful publish. ```bash git push origin master --tags ``` -------------------------------- ### Setup Chat Navigator in React Navigation Source: https://github.com/saigontechnology/rn-firebase-chat/blob/master/README.md Configures the navigation stack for chat screens using React Navigation. This includes screens for listing conversations and the chat interface itself. ```javascript export const ChatNavigator = () => ( ); ``` -------------------------------- ### Check Git Remote URL Source: https://github.com/saigontechnology/rn-firebase-chat/blob/master/RELEASE.md Displays the remote repository URLs configured for the local Git repository. Useful for troubleshooting push failures. ```bash git remote -v ``` -------------------------------- ### Manual Version Update Source: https://github.com/saigontechnology/rn-firebase-chat/blob/master/RELEASE.md Manually updates the package version using npm. This command can be used for 'patch', 'minor', or 'major' version bumps. ```bash npm version patch # or minor, major ``` -------------------------------- ### Prebuild Expo Project for Native Configuration Source: https://github.com/saigontechnology/rn-firebase-chat/blob/master/README.expo.md Executes the `expo prebuild --clean` command to generate or update the native Android and iOS projects. This command is crucial for applying the configured plugins and native settings defined in `app.config.ts` when using the Expo managed workflow. ```sh expo prebuild --clean ``` -------------------------------- ### Expo App Configuration with Firebase Plugins Source: https://github.com/saigontechnology/rn-firebase-chat/blob/master/README.expo.md Configures the `app.config.ts` file for Expo to include necessary plugins for Firebase integration and other libraries. It specifies configurations for `expo-build-properties`, `react-native-video`, and `react-native-vision-camera`, which are essential for native module compatibility and functionality within Expo. ```typescript // app.config.ts import { ExpoConfig } from 'expo'; const config: ExpoConfig = { name: 'YourAppName', slug: 'your-app-slug', plugins: [ // ...remaining config // <-- Adding these values --> '@react-native-firebase/app', [ 'expo-build-properties', { ios: { useFrameworks: 'static', }, }, ], [ 'react-native-video', { enableNotificationControls: true, androidExtensions: { useExoplayerRtsp: false, useExoplayerSmoothStreaming: false, useExoplayerHls: false, useExoplayerDash: false, }, }, ], [ 'react-native-vision-camera', { cameraPermissionText: '$(PRODUCT_NAME) needs access to your Camera.', // optionally, if you want to record audio: enableMicrophonePermission: true, microphonePermissionText: '$(PRODUCT_NAME) needs access to your Microphone.', }, ], // <-- Adding these values --> ], }; export default config; ``` -------------------------------- ### Firebase Configuration File Path in Expo Config Source: https://github.com/saigontechnology/rn-firebase-chat/blob/master/README.expo.md Specifies the paths to the Firebase configuration files (`google-services.json` for Android and `GoogleService-Info.plist` for iOS) within the `app.config.ts` file. This allows EAS Build or local builds to correctly locate and use these files for Firebase initialization. ```typescript // inside the same app.config.ts ios: { googleServicesFile: './ios/GoogleService-Info.plist', }, android: { googleServicesFile: './android/app/google-services.json', }, ``` -------------------------------- ### Publish New Versions with Release-it Source: https://github.com/saigontechnology/rn-firebase-chat/blob/master/CONTRIBUTING.md Publishes new versions of the package to npm. release-it automates tasks like version bumping, tagging, and release creation. ```shell yarn release ``` -------------------------------- ### Integrate Camera and Gallery addons in ChatScreen Source: https://github.com/saigontechnology/rn-firebase-chat/blob/master/README.md Shows how to integrate camera and gallery functionalities into the ChatScreen component using the provided addons. This involves using the `useCamera` hook and configuring `inputToolbarProps`. ```javascript import React from 'react' import {ChatScreen as BaseChatScreen} from 'rn-firebase-chat' import {CameraView, useCamera} from 'rn-firebase-chat/src/addons/camera' ... export const ChatScreen: React.FC = () => { const {onPressCamera, onPressGallery} = useCamera() return ( {({onSend}) => ( )} ) } ``` -------------------------------- ### Verify Code with TypeScript and ESLint Source: https://github.com/saigontechnology/rn-firebase-chat/blob/master/CONTRIBUTING.md Runs TypeScript for type checking and ESLint for linting the codebase to ensure code quality and consistency. ```shell yarn typecheck yarn lint ``` -------------------------------- ### Run Unit Tests Source: https://github.com/saigontechnology/rn-firebase-chat/blob/master/CONTRIBUTING.md Executes all unit tests defined for the project using Jest, ensuring the correctness of individual code components. ```shell yarn test ``` -------------------------------- ### Wrap App with ChatProvider in React Native Source: https://github.com/saigontechnology/rn-firebase-chat/blob/master/README.md Demonstrates how to wrap your React Native application with the ChatProvider component. This component is essential for initializing chat functionalities and requires user information. ```javascript import { ChatProvider } from 'rn-firebase-chat'; const userInfo = { id: 'abc123', name: 'John Doe', avatar: 'https://example.com/avatar.jpg', }; function App() { return ( ); } ``` -------------------------------- ### ChatScreen with Camera and Gallery Integration (JavaScript) Source: https://context7.com/saigontechnology/rn-firebase-chat/llms.txt Extends the ChatScreen component to include camera and gallery functionalities for sending media. It utilizes the 'useCamera' hook from 'rn-firebase-chat/src/addons/camera' to manage media picker interactions. The input toolbar is configured with 'hasCamera' and 'hasGallery' props. ```javascript import React from 'react'; import { ChatScreen } from 'rn-firebase-chat'; import { CameraView, useCamera } from 'rn-firebase-chat/src/addons/camera'; export const ChatWithMediaScreen = () => { const { onPressCamera, onPressGallery } = useCamera(); const partnerInfo = { id: 'user_99999', name: 'Michael Brown', avatar: 'https://example.com/avatars/michael.jpg', }; return ( {({ onSend }) => ( )} ); }; // Custom input toolbar styling export const CustomStyledChatScreen = () => { const { onPressCamera, onPressGallery } = useCamera(); const partnerInfo = { id: 'user_88888', name: 'Sarah Wilson', avatar: 'https://example.com/avatars/sarah.jpg', }; return ( {({ onSend }) => } ); }; ``` -------------------------------- ### Integrate Camera and Gallery with useCamera Hook (React Native) Source: https://context7.com/saigontechnology/rn-firebase-chat/llms.txt The `useCamera` hook facilitates integration with the device's camera and gallery for capturing and selecting media to be sent in chats. It returns functions to open these interfaces. Dependencies include 'react' and 'rn-firebase-chat/src/addons/camera'. ```javascript import React from 'react'; import { View, Button } from 'react-native'; import { useCamera } from 'rn-firebase-chat/src/addons/camera'; export const MediaPickerButtons = ({ onMediaSelected }) => { const { onPressCamera, onPressGallery } = useCamera(); const handleGalleryPress = async () => { const result = await onPressGallery(); if (result) { console.log('Selected media:', result); // result = { type: 'image' | 'video', path: string, extension: string } onMediaSelected?.(result); } }; return (