[ { "path": ".expo-shared/assets.json", "content": "{\n \"5c6d215cbde93d15ae63d2ea43dfe8bf8a79a53146382cf7f3f0089bec2fc5d6\": true,\n \"d0e86e9f72936ac85597d9cd6415cf22a3c208505d5586ac04de09d4dd305707\": true,\n \"b884dbf3daca9d0a4de2f6552aa4dbdda9cbff26e2677bd76a514d71af2e7e2c\": true,\n \"30bf2d1edfc90d2841794660cf30a94bb134b89d4808bd4b05cac2304cf6fad7\": true,\n \"01d8b00b4e3d1dfab70e1ef3354b373f13bdcc3ad29122b3afacf34afd043960\": true,\n \"36cb6cfb9a281169f9ba1eb7c345fba1d56a0c7115fbf8c4b3753427aad8edaa\": true,\n \"3232d6cbd4824ece99982787e431ff1425df1d22288961602506b046c50bc516\": true,\n \"5c8d230c038116f9327c1a38157e7b5d25e1d6bbfbb0ba4e86310f097c3d0f9f\": true,\n \"250d0d32ab3051aee4b8f9d26a3299e6b3d8e6ee137dffe8a7e183e5478a2040\": true\n}\n" }, { "path": ".github/FUNDING.yml", "content": "# These are supported funding model platforms\n\ngithub: [faridsafi, kesha-antonov, xcarpentier, johan-dutoit]\npatreon: # Replace with a single Patreon username\nopen_collective: # Replace with a single Open Collective username\nko_fi: # Replace with a single Ko-fi username\ntidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel\ncommunity_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry\nliberapay: # Replace with a single Liberapay username\nissuehunt: # Replace with a single IssueHunt username\notechie: # Replace with a single Otechie username\ncustom: # Replace with a custom sponsorship URL\n" }, { "path": ".github/copilot-instructions.md", "content": "# React Native Gifted Chat\n\nThe most complete chat UI for React Native & Web. This is a TypeScript React Native component library with example applications demonstrating usage across React Native, React Native Web, and Expo platforms.\n\nAlways reference these instructions first and fallback to search or bash commands only when you encounter unexpected information that does not match the info here.\n\n## Working Effectively\n\n### Bootstrap and build the repository:\n- `yarn install` -- NEVER CANCEL: takes 58 seconds. Set timeout to 120+ seconds.\n- `yarn build` -- builds TypeScript library, takes 3 seconds. Set timeout to 30+ seconds.\n- `yarn lint` -- lints source code, takes 3 seconds. Currently has warnings but no errors. Set timeout to 30+ seconds.\n- `yarn test` -- NEVER CANCEL: runs Jest test suite, takes 9 seconds. Set timeout to 60+ seconds.\n\n### Full validation before publishing:\n- `yarn prepublishOnly` -- NEVER CANCEL: runs lint + build + test, takes 11 seconds total. Set timeout to 60+ seconds.\n\n### Known Issues:\n- If tests fail due to snapshot mismatches after fresh dependency install, run `yarn test -u` to update snapshots\n- Snapshot tests may need updates when React Native or dependency versions change\n\n### Example app development:\n- `cd example && yarn install` -- NEVER CANCEL: takes 38 seconds. Set timeout to 90+ seconds.\n- Install Expo CLI globally: `npm install -g @expo/cli` or use `npx expo` commands\n- Native development: `cd example && npx expo start`\n- Web development: `cd example && npx expo start --web` (requires additional dependencies)\n- The example app starts Metro bundler on http://localhost:8081\n- Expect dependency version warnings in offline/CI mode - these are normal\n\n### Type checking and development:\n- `yarn tsc:watch` -- runs TypeScript compiler in watch mode for development\n- `yarn tsc:write` -- compiles TypeScript and writes output to /lib directory\n\n## Requirements and Setup\n\n### System Requirements:\n- Node.js >= 18 (tested with 20.19.4)\n- Yarn package manager 1.22.22+ (do NOT use npm for this project)\n- TypeScript compiler (included in devDependencies)\n\n### Dependencies are already installed if yarn.lock exists\nThe repository includes both package-lock.json and yarn.lock but ALWAYS use yarn commands, never npm commands.\n\n## Validation\n\n### Always run full validation before completing changes:\n1. `yarn lint` -- check for code style issues (warnings are acceptable, errors are not)\n2. `yarn build` -- verify TypeScript compilation succeeds\n3. `yarn test` -- NEVER CANCEL: ensure all 19 test suites and 29 tests pass. Takes 31 seconds.\n\n### Manual validation scenarios:\nAfter making code changes, you should test basic functionality by:\n1. Building the library: `yarn build` \n2. Running the test suite: `yarn test`\n3. For UI changes: Start the example app with `cd example && npx expo start --web` (if web dependencies are installed) or `npx expo start` for native development\n4. ALWAYS test that the TypeScript declarations in /lib are correctly generated\n\n### Testing approach:\n- All tests are located in `src/__tests__/` directory\n- Tests use Jest with React Test Renderer\n- Test coverage can be viewed with `yarn test:coverage`\n- Snapshot tests are used extensively (27 snapshots)\n\n## Project Structure\n\n### Key directories:\n- `/src` -- main library source code (TypeScript)\n- `/lib` -- compiled JavaScript output (generated by `yarn build`, do not edit manually) \n- `/example` -- example React Native app demonstrating library usage\n- `/src/__tests__` -- Jest test files\n- `/.github/workflows/main.yml` -- CI/CD pipeline (tests Node 18 and 20)\n\n### Important files:\n- `package.json` -- main project configuration and scripts\n- `tsconfig.json` -- TypeScript compiler configuration\n- `jest.config.cjs` -- Jest test configuration\n- `.eslintrc.cjs` -- ESLint linting rules\n- `babel.config.cjs` -- Babel transformation configuration\n- `example/package.json` -- example app dependencies\n\n### Build output:\nThe `yarn build` command generates JavaScript files and TypeScript declaration files in the `/lib` directory. This directory should not be edited manually and is ignored by git but included in npm package.\n\n## Common Tasks\n\n### Making code changes:\n1. Edit source files in `/src` directory\n2. Run `yarn lint` to check style\n3. Run `yarn build` to compile TypeScript\n4. Run `yarn test` to verify tests pass\n5. Test manually with example app if UI changes\n\n### Adding or modifying tests:\n- Tests are in `src/__tests__/` directory\n- Follow existing test patterns using React Test Renderer\n- Update snapshots if needed with `yarn test -u`\n- Ensure all tests pass with `yarn test`\n\n### Working with the example app:\n- Example app uses Expo and demonstrates library functionality\n- Install dependencies: `cd example && yarn install`\n- Start development server: `npx expo start`\n- For web: `npx expo start --web` (requires react-native-web and @expo/metro-runtime)\n\n## CI/CD Integration\n\nThe repository uses GitHub Actions (`.github/workflows/main.yml`) that:\n- Tests on Node.js versions 18 and 20 \n- Runs `yarn install` and `yarn build`\n- Build typically takes 1-2 minutes on CI\n\nAlways ensure your changes pass the full validation pipeline locally before pushing.\n\n## Common Command Reference\n\n### Root directory (library development):\n```bash\nyarn install # Install dependencies (58 seconds)\nyarn build # Build TypeScript library (3 seconds) \nyarn lint # Lint source code (3 seconds)\nyarn test # Run test suite (9 seconds)\nyarn prepublishOnly # Full validation pipeline (11 seconds)\nyarn tsc:watch # TypeScript watch mode\n```\n\n### Example directory (app development):\n```bash\ncd example\nyarn install # Install example dependencies (38 seconds)\nnpx expo start # Start native development server\nnpx expo start --web # Start web development server\n```\n\n### Time expectations (NEVER CANCEL these operations):\n- yarn install: 58 seconds (root), 41 seconds (example)\n- yarn build: 3 seconds\n- yarn lint: 3 seconds \n- yarn test: 9 seconds (after fresh install and snapshot updates)\n- yarn prepublishOnly: 11 seconds total\n\nAlways set timeouts to at least double these times to account for system variations." }, { "path": ".github/stale.yml", "content": "# Number of days of inactivity before an issue becomes stale\ndaysUntilStale: 60\n# Number of days of inactivity before a stale issue is closed\ndaysUntilClose: 15\n# Issues with these labels will never be considered stale\nexemptLabels:\n - pinned\n - security\n# Label to use when marking an issue as stale\nstaleLabel: wontfix\n# Comment to post when marking an issue as stale. Set to `false` to disable\nmarkComment: >\n Sorry, but this issue has been automatically marked as stale because it has not had\n recent activity. It will be closed if no further activity occurs. BTW Thank you\n for your contributions ๐Ÿ˜€ !!!\n# Comment to post when closing a stale issue. Set to `false` to disable\ncloseComment: false\n" }, { "path": ".github/workflows/main.yml", "content": "name: Main CI\n\non:\n pull_request:\n branches:\n - master\n\njobs:\n checks:\n runs-on: ubuntu-latest\n\n strategy:\n matrix:\n node-version: [20, 22]\n\n steps:\n - uses: actions/checkout@v4\n\n - name: Use Node.js ${{ matrix.node-version }}\n uses: actions/setup-node@v4\n with:\n node-version: ${{ matrix.node-version }}\n\n - name: Node modules\n run: |\n yarn install\n\n - name: Lint\n run: |\n yarn lint\n\n - name: Type Check\n run: |\n yarn tsc --noEmit\n\n - name: Build\n run: |\n yarn build\n\n - name: Test\n run: |\n yarn test\n" }, { "path": ".github/workflows/stale.yml", "content": "name: Close stale issues\n\non:\n schedule:\n - cron: '0 0 * * *' # runs daily\n\njobs:\n stale:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/stale@v9\n with:\n repo-token: ${{ secrets.GITHUB_TOKEN }}\n days-before-issue-stale: 365\n days-before-issue-close: 0\n stale-issue-message: 'This issue has been automatically marked as stale because it has not had recent activity. It will be closed now.'\n close-issue-message: 'Closing due to inactivity for over a year.'\n only-issue-labels: ''\n" }, { "path": ".gitignore", "content": ".DS_Store\nnode_modules/\n.expo/\nnpm-debug.log\nlib/\nTODO.md\n.idea\n.vscode\nExponent-*.app\n*.log\ncoverage/\nweb-build/\n.eslintcache\n\n# Yarn\n.yarn/*\n!.yarn/patches\n!.yarn/plugins\n!.yarn/releases\n!.yarn/sdks\n!.yarn/versions\nyarn-error.log\n\nexample_bare/vendor\nexample_bare/**/build\nexample_bare/ios/Pods\nexample_bare/android/.gradle\n" }, { "path": ".husky/pre-commit", "content": "yarn lint-staged\n" }, { "path": ".npmignore", "content": ".expo/\n.expo-shared/\n.circleci/\n.github/\n.vscode/\nexample/\nexample-expo/\nexample-slack-message/\nexample-gifted-chat/\nscreenshots/\nbabel.config.js\ntests/\nREADME.md\nISSUE_TEMPLATE.md\ncodecov.yml\nmedia/\nApp.tsx\napp.json\nmetro.config.js\nsrc/\ntsconfig.json\ntslint.json\nyarn.lock\nflow-typedefs/\n.flowconfig\nyarn-error.log\nweb-build/\ntypes.d.ts\n" }, { "path": "CHANGELOG.md", "content": "# Changelog\n\n## [3.3.2] - 2026-01-22\n\n### ๐Ÿ› Bug Fixes\n- Fixed `React.memo` and `React.forwardRef` components not rendering correctly when passed as render props\n - `renderComponentOrElement` now properly handles components with `$$typeof` property\n- Fixed layout jump on initial render - content now renders with `opacity: 0` until initialized\n- Fixed keyboard vertical offset documentation and examples\n\n### ๐Ÿ”ง Improvements\n- Updated `keyboardVerticalOffset` documentation in README with clearer explanation\n- Added `hidden` style for smoother initial render transitions\n\n### ๐Ÿ“ Documentation\n- Improved `keyboardVerticalOffset` section explaining that it equals distance from screen top to container top\n- Added recommendation to use `useHeaderHeight()` from `@react-navigation/elements`\n\n## [3.3.0] - 2026-01-21\n\n### โœจ Features\n- **Swipe to Reply**: New swipe-to-reply functionality using `ReanimatedSwipeable` (based on #2692)\n - Replaced deprecated `Swipeable` with `ReanimatedSwipeable` from react-native-gesture-handler\n - Added `reply` prop to `GiftedChat` with grouped configuration options\n - Swipe direction support: `'left'` (swipe left, icon on right) or `'right'` (swipe right, icon on left)\n - Custom swipe action rendering via `renderAction`\n - Built-in animated `ReplyIcon` component\n - `ReplyPreview` component with smooth enter/exit animations\n - Reply message display in `Bubble` component via `messageReply` prop\n- **New Props**:\n - `scrollToBottomContentStyle` - style for scroll to bottom button content\n\n### ๐Ÿ› Bug Fixes\n- Fixed #2702 - typing issues\n- Fixed #2708 - component issues\n- Fixed #2607 - edge case handling\n- Fixed #2701 - rendering issues\n- Fixed #2691 - prop handling\n- Fixed #2688 - style issues\n- Fixed #2687 - component behavior\n- Fixed #2618 - scroll issues\n- Fixed #2677, #2682, #2602 - multiple fixes\n- Fixed #2684, #2686 - component issues\n- Fixed `onScroll` type definition\n- Fixed messages padding\n- Fixed SystemMessage styles\n- Added missing worklets for animations\n- Removed `ts-expect-error` for `requestAnimationFrame` (now properly typed for React Native)\n- Fixed two typing issues (#2698)\n\n### ๐Ÿ”ง Improvements\n- Grouped reply-related props into `ReplyProps` interface for cleaner API\n- Added `SwipeToReplyProps` for Message-level swipe configuration\n- Added `BubbleReplyProps` for Bubble-level reply message styling\n- Added example app to lint command with proper path alias support\n- Improved reply animations (enter/exit transitions)\n- Changes from #2705\n\n### ๐Ÿ“ Documentation\n- Updated README with swipe-to-reply feature documentation and examples\n- Updated license link\n- Added reply message implementation example (#2690)\n\n### ๐Ÿงช Testing\n- Updated test snapshots\n- Added tests for `MessageReply` component\n- Added tests for `ReplyPreview` component\n\n## [3.2.3] - 2025-12-XX\n\n### ๐Ÿ› Bug Fixes\n- Fixed `onScroll` type definition\n\n## [3.2.0] - 2025-11-25\n\n### โœจ Features\n- **Custom Link Parser**: Replaced `react-native-autolink` dependency with custom link parser implementation for better control and performance\n - Removed external dependency on `react-native-autolink`\n - Improved link parsing with custom implementation in `linkParser.tsx`\n - Updated `MessageText` component to use new parser\n - Enhanced links example in example app\n\n### ๐Ÿ› Bug Fixes\n- Adjusted message bubble styles for better rendering\n- Updated test snapshots to reflect parser changes\n\n## [3.1.5] - 2025-11-25\n\n### โœจ Features\n- **Color Scheme Support**: Added `colorScheme` prop to `GiftedChat` component\n - New `useColorScheme` hook for consistent color scheme handling\n - Automatically adapts UI elements (Composer, InputToolbar, Send) based on color scheme\n - Added comprehensive tests for color scheme functionality\n\n### ๐Ÿ“ Documentation\n- Updated README with `colorScheme` prop documentation\n\n## [3.1.4] - 2025-11-25\n\n### ๐Ÿ› Bug Fixes\n- Added left padding to `TextInput` when no accessory is present for better visual alignment\n- Adjusted input toolbar styles for improved layout\n\n## [3.1.3] - 2025-11-25\n\n### ๐Ÿ”ง Improvements\n- Removed unused imports for cleaner codebase\n\n## [3.1.2] - 2025-11-24\n\n### ๐Ÿ› Bug Fixes\n- Fixed message bubble styles for small messages\n- Improved rendering of compact message content\n\n### ๐Ÿงช Testing\n- Updated test snapshots\n\n## [3.1.1] - 2025-11-24\n\n### ๐Ÿ› Bug Fixes\n- Fixed Bubble component styles for better message rendering\n- Corrected style inconsistencies in message bubbles\n\n### ๐Ÿงช Testing\n- Updated test snapshots to reflect style fixes\n\n## [3.1.0] - 2025-11-24\n\n### ๐Ÿ”ง Improvements\n- Refactored component styles for better maintainability\n- Updated Expo Snack example with latest changes\n\n### ๐Ÿงช Testing\n- Updated test snapshots\n\n## [3.0.1] - 2025-11-24\n\n### ๐Ÿ› Bug Fixes\n- Fixed Composer auto-resize height behavior on web platform\n\n### ๐Ÿงช Testing\n- Updated test snapshots\n\n## [3.0.0] - 2025-11-23\n\nThis is a major release with significant breaking changes, new features, and improvements. The library has been completely rewritten in TypeScript with improved type safety, better keyboard handling, and enhanced customization options.\n\n### ๐Ÿšจ Breaking Changes\n\n#### Renamed Props (GiftedChat)\n- `onInputTextChanged` โ†’ moved to `textInputProps.onChangeText` (follows React Native naming pattern)\n- `alwaysShowSend` โ†’ `isSendButtonAlwaysVisible` (consistent boolean naming convention)\n- `onPress` โ†’ `onPressMessage` (more specific naming)\n- `onLongPress` โ†’ `onLongPressMessage` (more specific naming)\n- `options` โ†’ `actions` (better semantic naming, different type signature)\n- `optionTintColor` โ†’ `actionSheetOptionTintColor` (clearer naming)\n- `renderUsernameOnMessage` โ†’ `isUsernameVisible` (consistent boolean naming)\n- `showUserAvatar` โ†’ `isUserAvatarVisible` (consistent boolean naming)\n- `showAvatarForEveryMessage` โ†’ `isAvatarVisibleForEveryMessage` (consistent boolean naming)\n- `renderAvatarOnTop` โ†’ `isAvatarOnTop` (consistent boolean naming)\n- `focusOnInputWhenOpeningKeyboard` โ†’ `shouldFocusInputOnKeyboardOpen` (consistent boolean naming)\n- `messageContainerRef` โ†’ `messagesContainerRef` (typo fix)\n- `alignTop` โ†’ `isAlignedTop` (consistent boolean naming)\n- `inverted` โ†’ `isInverted` (consistent boolean naming)\n\n#### Removed Props (GiftedChat)\n- `bottomOffset` - use `keyboardAvoidingViewProps.keyboardVerticalOffset` instead\n- `disableKeyboardController` - removed keyboard controller configuration\n- `isKeyboardInternallyHandled` - keyboard handling now always uses react-native-keyboard-controller\n- `lightboxProps` - custom Modal implementation replaced react-native-lightbox-v2\n- `placeholder` - moved to `textInputProps.placeholder`\n- `disableComposer` - moved to `textInputProps.editable={false}`\n- `keyboardShouldPersistTaps` - moved to `listProps.keyboardShouldPersistTaps`\n- `maxInputLength` - moved to `textInputProps.maxLength`\n- `extraData` - moved to `listProps.extraData`\n- `infiniteScroll` - use `loadEarlierMessagesProps.isInfiniteScrollEnabled` instead\n- `parsePatterns` - removed, automatic link parsing improved\n\n#### Props Moved to MessagesContainer (via spreading)\nThese props moved from `GiftedChatProps` to `MessagesContainerProps` but are still accessible on `GiftedChat` via prop spreading:\n- `messages` - now in MessagesContainerProps\n- `isTyping` - now in MessagesContainerProps (via TypingIndicatorProps)\n- `loadEarlier` โ†’ `loadEarlierMessagesProps.isAvailable`\n- `isLoadingEarlier` โ†’ `loadEarlierMessagesProps.isLoading`\n- `onLoadEarlier` โ†’ `loadEarlierMessagesProps.onPress`\n- `renderLoadEarlier` - now in MessagesContainerProps\n- `renderDay` - now in MessagesContainerProps\n- `renderMessage` - now in MessagesContainerProps\n- `renderFooter` - now in MessagesContainerProps\n- `renderChatEmpty` - now in MessagesContainerProps\n- `scrollToBottomStyle` - now in MessagesContainerProps\n- `isScrollToBottomEnabled` - now in MessagesContainerProps\n- `scrollToBottomComponent` - now in MessagesContainerProps\n- `onQuickReply` - now in MessagesContainerProps\n- `listViewProps` โ†’ `listProps` (renamed in MessagesContainerProps)\n\n#### Type Signature Changes\n- `options`: changed from `{ [key: string]: () => void }` to `Array<{ title: string, action: () => void }>`\n- `textInputProps`: changed from `object` to `Partial>`\n- `renderInputToolbar`: now accepts `React.ComponentType | React.ReactElement | function | null` (can be component, element, function, or null)\n- All callback props now use arrow function syntax instead of function syntax for better type inference\n\n#### Dependency Changes\n- Removed `react-native-lightbox-v2` (replaced with custom Modal implementation)\n- Removed `react-native-iphone-x-helper` (deprecated)\n- Removed `react-native-keyboard-controller` as direct dependency\n- Added `react-native-keyboard-controller` as peer dependency (>=1.0.0)\n- Added `react-native-gesture-handler` as peer dependency (>=2.0.0)\n- Added `react-native-reanimated` support for v3 & v4\n- Added `react-native-safe-area-context` as peer dependency (>=5.0.0)\n\n### โœจ New Features\n\n#### TypeScript Migration\n- Complete conversion from JavaScript to TypeScript/TSX\n- Improved type safety and IntelliSense support\n- Better type definitions for all components and props\n- Refactored types to arrow functions for better readability\n\n#### Keyboard Handling\n- New `keyboardTopToolbarHeight` prop for better keyboard customization\n- New `keyboardAvoidingViewProps` to pass props to KeyboardAvoidingView from react-native-keyboard-controller\n- Improved keyboard behavior and offset handling\n- Consolidated keyboard configuration (removed individual keyboard props in favor of `keyboardAvoidingViewProps`)\n- Fixed auto-grow text input behavior\n- Better keyboard open/close transitions\n- New `OverKeyboardView` component for MessageImage to keep keyboard open\n\n#### Message Rendering\n- `isDayAnimationEnabled` prop to control day separator animations\n- Support for passing custom components in render functions\n- Improved message parsing with better link detection\n- Parse links in system messages (fixes #2105)\n- Better phone number parsing with custom matchers support\n- Improved URL parsing (email, phone, URL detection)\n\n#### UI & Styling\n- Dark theme support in example app\n- Safe area provider included in library\n- Improved LoadEarlier messages logic\n- Better themed styles implementation\n- Fixed press animation for TouchableOpacity\n- Replaced deprecated `TouchableWithoutFeedback` with `Pressable`\n- Better scroll to bottom button behavior on Android\n\n#### Image Viewing\n- Custom Modal implementation replacing react-native-lightbox-v2\n- Better image viewing experience with proper insets handling\n- Improved MessageImage component\n\n#### Accessibility & UX\n- `renderTicks` prop for message status indicators\n- Better scroll to bottom wrapper visibility handling\n- `useCallbackThrottled` for improved scroll performance\n- Allow passing children to SystemMessage\n- Improved load earlier messages functionality\n\n### ๐Ÿ› Bug Fixes\n\n- Fixed duplicate paragraph tags in README\n- Fixed scroll to bottom when `isScrollToBottomEnabled=false` (#2652)\n- Fixed TypeScript type inconsistencies and ESLint errors (#2653)\n- Fixed automatic scroll to bottom issues (#2630, #2621, #2644)\n- Fixed DayAnimated test import and added proper test coverage for renderDay prop\n- Fixed not passed `isDayAnimationEnabled` prop\n- Fixed MessageContainer scroll to bottom press on Android\n- Fixed safer change ScrollToBottomWrapper visibility\n- Fixed dependency cycles in imports\n- Fixed MessageText container style\n- Fixed reanimated issue in MessageContainer\n- Fixed construct messages on send in example\n- Fixed web support in example\n- Fixed #2659 (memoization issues)\n- Fixed #2640 (various bug fixes)\n- Fixed show location in example\n- Fixed errors in keyboard handling\n- Fixed load earlier messages functionality\n- Fixed Bubble type parameter to re-enable generics on message prop (#2639)\n- Fixed listViewProps typing with Partial (#2628)\n- Fixed MessageContainer to add renderDay prop and insert DayAnimated Component (#2632)\n- Fixed dateFormatCalendar default value in README\n\n### ๐Ÿ”ง Improvements\n\n#### Performance\n- Memoized values & functions for better performance\n- Better scroll performance with throttled callbacks\n- Optimized re-renders\n\n#### Code Quality\n- Added ESLint with import sorting\n- Fixed all examples with ESLint\n- Improved code structure and organization\n- Better error handling\n- Cleaner prop passing and component structure\n\n#### Testing\n- All tests converted to TypeScript\n- Updated snapshots for new components\n- Run tests in correct timezone (Europe/Paris)\n- Improved test coverage\n- Added comprehensive copilot instructions with validated commands\n\n#### Documentation\n- Improved README structure and formatting\n- Better prop documentation and grouping\n- Added matchers example\n- Added working Expo Snack link\n- Better feature documentation\n- Added maintainer section\n- Improved previews and images\n- Added export documentation\n- Fixed formatting issues and typos\n- Better keyboard props documentation\n\n#### Example App\n- Updated to latest React Native and Expo\n- Added tabs with different chat examples\n- Added working link to Expo Snack\n- Better example organization\n- Added dark theme support\n- Removed padding from bottom of toolbar\n- Added custom phone matcher example\n- Switch to dev build in README\n- Android: transparent navigation & status bars by default\n- Better project structure with multiple example types\n\n#### Build & Development\n- Better dependency management\n- Updated to Node.js >= 20\n- Yarn 1.22.22+ as package manager\n- Added stale workflow for issue management\n- Script to rebuild native dependencies\n- Improved local development setup\n\n### ๐Ÿ“ฆ Dependencies\n\n#### Added\n- `@expo/react-native-action-sheet`: ^4.1.1\n- `@types/lodash.isequal`: ^4.5.8\n- `dayjs`: ^1.11.19\n- `lodash.isequal`: ^4.5.0\n- `react-native-zoom-reanimated`: ^1.4.10\n\n#### Peer Dependencies (now required)\n- `react`: >=18.0.0\n- `react-native`: *\n- `react-native-gesture-handler`: >=2.0.0\n- `react-native-keyboard-controller`: >=1.0.0\n- `react-native-reanimated`: >=3.0.0 || ^4.0.0\n- `react-native-safe-area-context`: >=5.0.0\n\n### ๐Ÿ”„ Migration Guide\n\n#### Update Prop Names\n```javascript\n// Before (v2.8.1)\n\n\n// After (v3.0.0)\n\n```\n\n#### Install Peer Dependencies\n```bash\nnpm install react-native-gesture-handler react-native-keyboard-controller react-native-reanimated react-native-safe-area-context\n# or\nyarn add react-native-gesture-handler react-native-keyboard-controller react-native-reanimated react-native-safe-area-context\n```\n\n#### Update Image Lightbox\nThe library now uses a custom Modal implementation instead of react-native-lightbox-v2. If you were customizing the lightbox, you'll need to update your customization approach.\n\n### ๐Ÿ“ Notes\n\n- This version includes 170+ commits since v2.8.1\n- Full TypeScript support with improved type definitions\n- Better React Native compatibility (tested with RN 0.81.5)\n- Improved React 19 support\n- Better Expo integration\n\n### ๐Ÿ‘ฅ Contributors\n\nSpecial thanks to all contributors who made this release possible, including fixes and improvements from the community.\n\n---\n\nFor detailed commit history, see: https://github.com/FaridSafi/react-native-gifted-chat/compare/2.8.1...3.0.0\n" }, { "path": "ISSUE_TEMPLATE.md", "content": "#### Issue Description\n\n[FILL THIS OUT]\n\n#### Steps to Reproduce / Code Snippets\n\n[FILL THIS OUT]\n\n#### Expected Results\n\n[FILL THIS OUT]\n\n#### Additional Information\n\n* Nodejs version: [FILL THIS OUT]\n* React version: [FILL THIS OUT]\n* React Native version: [FILL THIS OUT]\n* react-native-gifted-chat version: [FILL THIS OUT]\n* Platform(s) (iOS, Android, or both?): [FILL THIS OUT]\n* TypeScript version: [FILL THIS OUT]\n" }, { "path": "LICENSE", "content": "The MIT License (MIT)\n\nCopyright (c) 2019 Farid from Safi\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "

\n \"npm\n \"npm\n \"build\"\n \"platforms\"\n \"TypeScript\"\n \"Expo\n

\n\n

React Native Gifted Chat

\n\n

\n The most complete chat UI for React Native & Web\n

\n\n

\n \n \"Try\n \n

\n\n---\n\n## โœจ Features\n\n- ๐ŸŽจ **Fully Customizable** - Override any component with your own implementation\n- ๐Ÿ“Ž **Composer Actions** - Attach photos, files, or trigger custom actions\n- โ†ฉ๏ธ **Reply to Messages** - Swipe-to-reply with reply preview and message threading\n- โฎ๏ธ **Load Earlier Messages** - Infinite scroll with pagination support\n- ๐Ÿ“‹ **Copy to Clipboard** - Long-press messages to copy text\n- ๐Ÿ”— **Smart Link Parsing** - Auto-detect URLs, emails, phone numbers, hashtags, mentions\n- ๐Ÿ‘ค **Avatars** - User initials or custom avatar images\n- ๐ŸŒ **Localized Dates** - Full i18n support via Day.js\n- โŒจ๏ธ **Keyboard Handling** - Smart keyboard avoidance for all platforms\n- ๐Ÿ’ฌ **System Messages** - Display system notifications in chat\n- โšก **Quick Replies** - Bot-style quick reply buttons\n- โœ๏ธ **Typing Indicator** - Show when users are typing\n- โœ… **Message Status** - Tick indicators for sent/delivered/read states\n- โฌ‡๏ธ **Scroll to Bottom** - Quick navigation button\n- ๐ŸŒ **Web Support** - Works with react-native-web\n- ๐Ÿ“ฑ **Expo Support** - Easy integration with Expo projects\n- ๐Ÿ“ **TypeScript** - Complete TypeScript definitions included\n\n

\n \n     \n \n     \n \n

\n\n---\n\n

Sponsors

\n\n\n \n \n \n \n \n
\n \n \n \n \n \n
\n\n

\n Le Reacteur - Coding Bootcamp in Paris co-founded by Farid Safi\n
\n Stream - Scalable chat API/Server written in Go (API Tour | Tutorial)\n
\n Ethora - A complete app engine featuring GiftedChat (GitHub)\n

\n ๐Ÿ“š React Key Concepts (2nd ed.)\n

\n\n---\n\n## ๐Ÿ“– Table of Contents\n\n- [Features](#-features)\n- [Requirements](#-requirements)\n- [Installation](#-installation)\n- [Usage](#-usage)\n- [Props Reference](#-props-reference)\n- [Data Structure](#-data-structure)\n- [Platform Notes](#-platform-notes)\n- [Example App](#-example-app)\n- [Troubleshooting](#-troubleshooting)\n- [Contributing](#-contributing)\n- [Authors](#-authors)\n- [License](#-license)\n\n---\n\n## ๐Ÿ“‹ Requirements\n\n| Requirement | Version |\n|-------------|---------|\n| React Native | >= 0.70.0 |\n| iOS | >= 13.4 |\n| Android | API 21+ (Android 5.0) |\n| Expo | SDK 50+ |\n| TypeScript | >= 5.0 (optional) |\n\n---\n\n## ๐Ÿ“ฆ Installation\n\n### Expo Projects\n\n```bash\nnpx expo install react-native-gifted-chat react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-keyboard-controller\n```\n\n### Bare React Native Projects\n\n**Step 1:** Install the packages\n\nUsing yarn:\n```bash\nyarn add react-native-gifted-chat react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-keyboard-controller\n```\n\nUsing npm:\n```bash\nnpm install --save react-native-gifted-chat react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-keyboard-controller\n```\n\n**Step 2:** Install iOS pods\n\n```bash\nnpx pod-install\n```\n\n**Step 3:** Configure react-native-reanimated\n\nFollow the [react-native-reanimated installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/#step-2-add-reanimateds-babel-plugin) to add the Babel plugin.\n\n---\n\n## ๐Ÿš€ Usage\n\n### Basic Example\n\n```jsx\nimport React, { useState, useCallback, useEffect } from 'react'\nimport { GiftedChat } from 'react-native-gifted-chat'\nimport { useHeaderHeight } from '@react-navigation/elements'\n\nexport function Example() {\n const [messages, setMessages] = useState([])\n\n // keyboardVerticalOffset = distance from screen top to GiftedChat container\n // useHeaderHeight() returns status bar + navigation header height\n const headerHeight = useHeaderHeight()\n\n useEffect(() => {\n setMessages([\n {\n _id: 1,\n text: 'Hello developer',\n createdAt: new Date(),\n user: {\n _id: 2,\n name: 'John Doe',\n avatar: 'https://placeimg.com/140/140/any',\n },\n },\n ])\n }, [])\n\n const onSend = useCallback((messages = []) => {\n setMessages(previousMessages =>\n GiftedChat.append(previousMessages, messages),\n )\n }, [])\n\n return (\n onSend(messages)}\n user={{\n _id: 1,\n }}\n keyboardAvoidingViewProps={{ keyboardVerticalOffset: headerHeight }}\n />\n )\n}\n```\n\n> **๐Ÿ’ก Tip:** Check out more examples in the [`example`](example) directory including Slack-style messages, quick replies, and custom components.\n\n---\n\n## ๐Ÿ“Š Data Structure\n\nMessages, system messages, and quick replies follow the structure defined in [Models.ts](src/Models.ts).\n\n
\nMessage Object Structure\n\n```typescript\ninterface IMessage {\n _id: string | number\n text: string\n createdAt: Date | number\n user: User\n image?: string\n video?: string\n audio?: string\n system?: boolean\n sent?: boolean\n received?: boolean\n pending?: boolean\n quickReplies?: QuickReplies\n}\n\ninterface User {\n _id: string | number\n name?: string\n avatar?: string | number | (() => React.ReactNode)\n}\n```\n\n
\n\n---\n\n## ๐Ÿ“– Props Reference\n\n### Core Configuration\n\n- **`messages`** _(Array)_ - Messages to display\n- **`user`** _(Object)_ - User sending the messages: `{ _id, name, avatar }`\n- **`onSend`** _(Function)_ - Callback when sending a message\n- **`messageIdGenerator`** _(Function)_ - Generate an id for new messages. Defaults to a simple random string generator.\n- **`locale`** _(String)_ - Locale to localize the dates. You need first to import the locale you need (ie. `require('dayjs/locale/de')` or `import 'dayjs/locale/fr'`)\n- **`colorScheme`** _('light' | 'dark')_ - Force color scheme (light/dark mode). When set to `'light'` or `'dark'`, it overrides the system color scheme. When `undefined`, it uses the system color scheme. Default is `undefined`.\n\n### Refs\n\n- **`messagesContainerRef`** _(FlatList ref)_ - Ref to the flatlist\n- **`textInputRef`** _(TextInput ref)_ - Ref to the text input\n\n### Keyboard & Layout\n\n- **`keyboardProviderProps`** _(Object)_ - Props to be passed to the [`KeyboardProvider`](https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-provider) for keyboard handling. Default values:\n - `statusBarTranslucent: true` - Required on Android for correct keyboard height calculation when status bar is translucent (edge-to-edge mode)\n - `navigationBarTranslucent: true` - Required on Android for correct keyboard height calculation when navigation bar is translucent (edge-to-edge mode)\n- **`keyboardAvoidingViewProps`** _(Object)_ - Props to be passed to the [`KeyboardAvoidingView`](https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/components/keyboard-avoiding-view). See **keyboardVerticalOffset** below for proper keyboard handling.\n- **`isAlignedTop`** _(Boolean)_ Controls whether or not the message bubbles appear at the top of the chat (Default is false - bubbles align to bottom)\n- **`isInverted`** _(Bool)_ - Reverses display order of `messages`; default is `true`\n\n#### Understanding `keyboardVerticalOffset`\n\nThe [`keyboardVerticalOffset`](https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/components/keyboard-avoiding-view#keyboardverticaloffset) tells the KeyboardAvoidingView where its container starts relative to the top of the screen. This is essential when GiftedChat is not positioned at the very top of the screen (e.g., when you have a navigation header).\n\n**Default value:** `insets.top` (status bar height from `useSafeAreaInsets()`). This works correctly only when GiftedChat fills the entire screen without a navigation header. If you have a navigation header, you need to pass the correct offset via `keyboardAvoidingViewProps`.\n\n**What the value means:** The offset equals the distance (in points) from the top of the screen to the top of your GiftedChat container. This typically includes:\n- Status bar height\n- Navigation header height (on iOS, `useHeaderHeight()` already includes status bar)\n\n**How to use:**\n\n```jsx\nimport { useHeaderHeight } from '@react-navigation/elements'\n\nfunction ChatScreen() {\n // useHeaderHeight() returns status bar + navigation header height on iOS\n const headerHeight = useHeaderHeight()\n\n return (\n \n )\n}\n```\n\n> **Note:** `useHeaderHeight()` requires your chat component to be rendered inside a proper navigation screen (not conditional rendering). If it returns `0`, ensure your chat screen is a real navigation screen with a visible header.\n\n**Why this matters:** Without the correct offset, the keyboard may overlap the input field or leave extra space. The KeyboardAvoidingView uses this value to calculate how much to shift the content when the keyboard appears.\n\n### Text Input & Composer\n\n- **`text`** _(String)_ - Input text; default is `undefined`, but if specified, it will override GiftedChat's internal state. Useful for managing text state outside of GiftedChat (e.g. with Redux). Don't forget to implement `textInputProps.onChangeText` to update the text state.\n- **`initialText`** _(String)_ - Initial text to display in the input field\n- **`isSendButtonAlwaysVisible`** _(Bool)_ - Always show send button in input text composer; default `false`, show only when text input is not empty\n- **`isTextOptional`** _(Bool)_ - Allow sending messages without text (useful for media-only messages); default `false`. Use with `isSendButtonAlwaysVisible` for media attachments.\n- **`minComposerHeight`** _(Object)_ - Custom min-height of the composer.\n- **`maxComposerHeight`** _(Object)_ - Custom max height of the composer.\n- **`minInputToolbarHeight`** _(Integer)_ - Minimum height of the input toolbar; default is `44`\n- **`renderInputToolbar`** _(Component | Function)_ - Custom message composer container\n- **`renderComposer`** _(Component | Function)_ - Custom text input message composer\n- **`renderSend`** _(Component | Function)_ - Custom send button; you can pass children to the original `Send` component quite easily, for example, to use a custom icon ([example](https://github.com/FaridSafi/react-native-gifted-chat/pull/487))\n- **`renderActions`** _(Component | Function)_ - Custom action button on the left of the message composer\n- **`renderAccessory`** _(Component | Function)_ - Custom second line of actions below the message composer\n- **`textInputProps`** _(Object)_ - props to be passed to the [``](https://reactnative.dev/docs/textinput).\n\n### Actions & Action Sheet\n\n- **`onPressActionButton`** _(Function)_ - Callback when the Action button is pressed (if set, the default `actionSheet` will not be used)\n- **`actionSheet`** _(Function)_ - Custom action sheet interface for showing action options\n- **`actions`** _(Array)_ - Custom action options for the input toolbar action button; array of objects with `title` (string) and `action` (function) properties\n- **`actionSheetOptionTintColor`** _(String)_ - Tint color for action sheet options\n\n### Messages & Message Container\n\n- **`messagesContainerStyle`** _(Object)_ - Custom style for the messages container\n- **`renderMessage`** _(Component | Function)_ - Custom message container\n- **`renderLoading`** _(Component | Function)_ - Render a loading view when initializing\n- **`renderChatEmpty`** _(Component | Function)_ - Custom component to render in the ListView when messages are empty\n- **`renderChatFooter`** _(Component | Function)_ - Custom component to render below the MessagesContainer (separate from the ListView)\n- **`listProps`** _(Object)_ - Extra props to be passed to the messages [``](https://reactnative.dev/docs/flatlist). Supports all FlatList props including `maintainVisibleContentPosition` for keeping scroll position when new messages arrive (useful for AI chatbots).\n\n### Message Bubbles & Content\n\n- **`renderBubble`** _(Component | Function(`props: BubbleProps`))_ - Custom message bubble. Receives [BubbleProps](src/Bubble/types.ts) as parameter.\n- **`renderMessageText`** _(Component | Function)_ - Custom message text\n- **`renderMessageImage`** _(Component | Function)_ - Custom message image\n- **`renderMessageVideo`** _(Component | Function)_ - Custom message video\n- **`renderMessageAudio`** _(Component | Function)_ - Custom message audio\n- **`renderCustomView`** _(Component | Function)_ - Custom view inside the bubble\n- **`isCustomViewBottom`** _(Bool)_ - Determine whether renderCustomView is displayed before or after the text, image and video views; default is `false`\n- **`onPressMessage`** _(Function(`context`, `message`))_ - Callback when a message bubble is pressed\n- **`onLongPressMessage`** _(Function(`context`, `message`))_ - Callback when a message bubble is long-pressed; you can use this to show action sheets (e.g., copy, delete, reply)\n- **`imageProps`** _(Object)_ - Extra props to be passed to the [``](https://reactnative.dev/docs/image) component created by the default `renderMessageImage`\n- **`imageStyle`** _(Object)_ - Custom style for message images\n- **`videoProps`** _(Object)_ - Extra props to be passed to the video component created by the required `renderMessageVideo`\n- **`messageTextProps`** _(Object)_ - Extra props to be passed to the MessageText component. Useful for customizing link parsing behavior, text styles, and matchers. Supports the following props:\n - `matchers` - Custom matchers for linking message content (like URLs, phone numbers, hashtags, mentions)\n - `linkStyle` - Custom style for links\n - `email` - Enable/disable email parsing (default: true)\n - `phone` - Enable/disable phone number parsing (default: true)\n - `url` - Enable/disable URL parsing (default: true)\n - `hashtag` - Enable/disable hashtag parsing (default: false)\n - `mention` - Enable/disable mention parsing (default: false)\n - `hashtagUrl` - Base URL for hashtags (e.g., 'https://x.com/hashtag')\n - `mentionUrl` - Base URL for mentions (e.g., 'https://x.com')\n - `stripPrefix` - Strip 'http://' or 'https://' from URL display (default: false)\n - `TextComponent` - Custom Text component to use (e.g., from react-native-gesture-handler)\n\nExample:\n\n```tsx\n {\n return replacerArgs[0].replace(/[\\-\\(\\) ]/g, '')\n },\n getLinkText: (replacerArgs: ReplacerArgs): string => {\n return replacerArgs[0]\n },\n style: styles.linkStyle,\n onPress: (match: CustomMatch) => {\n const url = match.getAnchorHref()\n\n const options: {\n title: string\n action?: () => void\n }[] = [\n { title: 'Copy', action: () => setStringAsync(url) },\n { title: 'Call', action: () => Linking.openURL(`tel:${url}`) },\n { title: 'Send SMS', action: () => Linking.openURL(`sms:${url}`) },\n { title: 'Cancel' },\n ]\n\n showActionSheetWithOptions({\n options: options.map(o => o.title),\n cancelButtonIndex: options.length - 1,\n }, (buttonIndex?: number) => {\n if (buttonIndex === undefined)\n return\n\n const option = options[buttonIndex]\n option.action?.()\n })\n },\n },\n ],\n linkStyle: { left: { color: 'blue' }, right: { color: 'lightblue' } },\n }}\n/>\n```\n\nSee full example in [LinksExample](example/components/chat-examples/LinksExample.tsx)\n\n### Avatars\n\n- **`renderAvatar`** _(Component | Function)_ - Custom message avatar; set to `null` to not render any avatar for the message\n- **`isUserAvatarVisible`** _(Bool)_ - Whether to render an avatar for the current user; default is `false`, only show avatars for other users\n- **`isAvatarVisibleForEveryMessage`** _(Bool)_ - When false, avatars will only be displayed when a consecutive message is from the same user on the same day; default is `false`\n- **`onPressAvatar`** _(Function(`user`))_ - Callback when a message avatar is tapped\n- **`onLongPressAvatar`** _(Function(`user`))_ - Callback when a message avatar is long-pressed\n- **`isAvatarOnTop`** _(Bool)_ - Render the message avatar at the top of consecutive messages, rather than the bottom; default is `false`\n\n### Username\n\n- **`isUsernameVisible`** _(Bool)_ - Indicate whether to show the user's username inside the message bubble; default is `false`\n- **`renderUsername`** _(Component | Function)_ - Custom Username container\n\n### Date & Time\n\n- **`timeFormat`** _(String)_ - Format to use for rendering times; default is `'LT'` (see [Day.js Format](https://day.js.org/docs/en/display/format))\n- **`dateFormat`** _(String)_ - Format to use for rendering dates; default is `'D MMMM'` (see [Day.js Format](https://day.js.org/docs/en/display/format))\n- **`dateFormatCalendar`** _(Object)_ - Format to use for rendering relative times; default is `{ sameDay: '[Today]' }` (see [Day.js Calendar](https://day.js.org/docs/en/plugin/calendar))\n- **`renderDay`** _(Component | Function)_ - Custom day above a message\n- **`dayProps`** _(Object)_ - Props to pass to the Day component:\n - `containerStyle` - Custom style for the day container\n - `wrapperStyle` - Custom style for the day wrapper\n - `textProps` - Props to pass to the Text component (e.g., `style`, `allowFontScaling`, `numberOfLines`)\n- **`renderTime`** _(Component | Function)_ - Custom time inside a message\n- **`timeTextStyle`** _(Object)_ - Custom text style for time inside messages (supports left/right styles)\n- **`isDayAnimationEnabled`** _(Bool)_ - Enable animated day label that appears on scroll; default is `true`\n\n### System Messages\n\n- **`renderSystemMessage`** _(Component | Function)_ - Custom system message\n\n### Load Earlier Messages\n\n- **`loadEarlierMessagesProps`** _(Object)_ - Props to pass to the LoadEarlierMessages component. The button is only visible when `isAvailable` is `true`. Supports the following props:\n - `isAvailable` - Controls button visibility (default: false)\n - `onPress` - Callback when button is pressed\n - `isLoading` - Display loading indicator (default: false)\n - `isInfiniteScrollEnabled` - Enable infinite scroll up when reaching the top of messages container, automatically calls `onPress` (not yet supported for web)\n - `label` - Override the default \"Load earlier messages\" text\n - `containerStyle` - Custom style for the button container\n - `wrapperStyle` - Custom style for the button wrapper\n - `textStyle` - Custom style for the button text\n - `activityIndicatorStyle` - Custom style for the loading indicator\n - `activityIndicatorColor` - Color of the loading indicator (default: 'white')\n - `activityIndicatorSize` - Size of the loading indicator (default: 'small')\n- **`renderLoadEarlier`** _(Component | Function)_ - Custom \"Load earlier messages\" button\n\n### Typing Indicator\n\n- **`isTyping`** _(Bool)_ - Typing Indicator state; default `false`. If you use`renderFooter` it will override this.\n- **`renderTypingIndicator`** _(Component | Function)_ - Custom typing indicator component\n- **`typingIndicatorStyle`** _(StyleProp)_ - Custom style for the TypingIndicator component.\n- **`renderFooter`** _(Component | Function)_ - Custom footer component on the ListView, e.g. `'User is typing...'`; see [CustomizedFeaturesExample.tsx](example/components/chat-examples/CustomizedFeaturesExample.tsx) for an example. Overrides default typing indicator that triggers when `isTyping` is true.\n\n### Quick Replies\n\nSee [Quick Replies example in messages.ts](example/example-expo/data/messages.ts)\n\n- **`onQuickReply`** _(Function)_ - Callback when sending a quick reply (to backend server)\n- **`renderQuickReplies`** _(Function)_ - Custom all quick reply view\n- **`quickReplyStyle`** _(StyleProp)_ - Custom quick reply view style\n- **`quickReplyTextStyle`** _(StyleProp)_ - Custom text style for quick reply buttons\n- **`quickReplyContainerStyle`** _(StyleProp)_ - Custom container style for quick replies\n- **`renderQuickReplySend`** _(Function)_ - Custom quick reply **send** view\n\n### Reply to Messages\n\nGifted Chat supports swipe-to-reply functionality out of the box. When enabled, users can swipe on a message to reply to it, displaying a reply preview in the input toolbar and the replied message above the new message bubble.\n\n> **Note:** This feature uses `ReanimatedSwipeable` from `react-native-gesture-handler` and `react-native-reanimated` for smooth, performant animations.\n\n#### Basic Usage\n\n```tsx\n\n```\n\n#### Reply Props (Grouped)\n\nThe `reply` prop accepts an object with the following structure:\n\n```typescript\ninterface ReplyProps {\n // Swipe gesture configuration\n swipe?: {\n isEnabled?: boolean // Enable swipe-to-reply; default false\n direction?: 'left' | 'right' // Swipe direction; default 'left'\n onSwipe?: (message: TMessage) => void // Callback when swiped\n renderAction?: ( // Custom swipe action component\n progress: SharedValue,\n translation: SharedValue,\n position: 'left' | 'right'\n ) => React.ReactNode\n actionContainerStyle?: StyleProp\n }\n\n // Reply preview styling (above input toolbar)\n previewStyle?: {\n containerStyle?: StyleProp\n textStyle?: StyleProp\n imageStyle?: StyleProp\n }\n\n // In-bubble reply styling\n messageStyle?: {\n containerStyle?: StyleProp\n containerStyleLeft?: StyleProp\n containerStyleRight?: StyleProp\n textStyle?: StyleProp\n textStyleLeft?: StyleProp\n textStyleRight?: StyleProp\n imageStyle?: StyleProp\n }\n\n // Callbacks and state\n message?: ReplyMessage // Controlled reply state\n onClear?: () => void // Called when reply cleared\n onPress?: (message: TMessage) => void // Called when reply preview tapped\n\n // Custom renderers\n renderPreview?: (props: ReplyPreviewProps) => React.ReactNode\n renderMessageReply?: (props: MessageReplyProps) => React.ReactNode\n}\n```\n\n#### ReplyMessage Structure\n\nWhen a message has a reply, it includes a `replyMessage` property:\n\n```typescript\ninterface ReplyMessage {\n _id: string | number\n text: string\n user: User\n image?: string\n audio?: string\n}\n```\n\n#### Advanced Example with External State\n\n```tsx\nconst [replyMessage, setReplyMessage] = useState(null)\n\n {\n const newMessages = messages.map(msg => ({\n ...msg,\n replyMessage: replyMessage || undefined,\n }))\n setMessages(prev => GiftedChat.append(prev, newMessages))\n setReplyMessage(null)\n }}\n user={{ _id: 1 }}\n reply={{\n swipe: {\n isEnabled: true,\n direction: 'right',\n onSwipe: setReplyMessage,\n },\n message: replyMessage,\n onClear: () => setReplyMessage(null),\n onPress: (msg) => scrollToMessage(msg._id),\n }}\n/>\n```\n\n#### Smooth Animations\n\nThe reply preview automatically animates when:\n- **Appearing**: Smoothly expands from zero height with fade-in effect\n- **Disappearing**: Smoothly collapses with fade-out effect\n- **Content changes**: Smoothly transitions when replying to a different message\n\nThese animations use `react-native-reanimated` for 60fps performance.\n\n### Scroll to Bottom\n\n- **`isScrollToBottomEnabled`** _(Bool)_ - Enables the scroll to bottom Component (Default is false)\n- **`scrollToBottomComponent`** _(Function)_ - Custom Scroll To Bottom Component container\n- **`scrollToBottomOffset`** _(Integer)_ - Custom Height Offset upon which to begin showing Scroll To Bottom Component (Default is 200)\n- **`scrollToBottomStyle`** _(Object)_ - Custom style for Scroll To Bottom wrapper (position, bottom, right, etc.)\n- **`scrollToBottomContentStyle`** _(Object)_ - Custom style for Scroll To Bottom content (size, background, shadow, etc.)\n\n### Maintaining Scroll Position (AI Chatbots)\n\nFor AI chat interfaces where long responses arrive and you don't want to disrupt the user's reading position, use [`maintainVisibleContentPosition`](https://reactnative.dev/docs/scrollview#maintainvisiblecontentposition) via `listProps`:\n\n```tsx\n// Basic usage - always maintain scroll position\n\n\n// With auto-scroll threshold - auto-scroll if within 10 pixels of newest content\n\n\n// Conditionally enable based on scroll state (recommended for chatbots)\nconst [isScrolledUp, setIsScrolledUp] = useState(false)\n\n {\n setIsScrolledUp(event.contentOffset.y > 50)\n },\n maintainVisibleContentPosition: isScrolledUp\n ? { minIndexForVisible: 0, autoscrollToTopThreshold: 10 }\n : undefined,\n }}\n/>\n```\n\n---\n\n## ๐Ÿ“ฑ Platform Notes\n\n### Android\n\n
\nKeyboard configuration\n\nIf you are using Create React Native App / Expo, no Android specific installation steps are required. Otherwise, we recommend modifying your project configuration:\n\nMake sure you have `android:windowSoftInputMode=\"adjustResize\"` in your `AndroidManifest.xml`:\n\n```xml\n\n```\n\nFor **Expo**, you can append `KeyboardAvoidingView` after GiftedChat (Android only):\n\n```jsx\n\n \n {Platform.OS === 'android' && }\n\n```\n\n
\n\n### Web (react-native-web)\n\n
\nWith create-react-app\n\n1. Install react-app-rewired: `yarn add -D react-app-rewired`\n2. Create `config-overrides.js`:\n\n```js\nmodule.exports = function override(config, env) {\n config.module.rules.push({\n test: /\\.js$/,\n exclude: /node_modules[/\\\\](?!react-native-gifted-chat)/,\n use: {\n loader: 'babel-loader',\n options: {\n babelrc: false,\n configFile: false,\n presets: [\n ['@babel/preset-env', { useBuiltIns: 'usage' }],\n '@babel/preset-react',\n ],\n plugins: ['@babel/plugin-proposal-class-properties'],\n },\n },\n })\n return config\n}\n```\n\n> **Examples:**\n> - [xcarpentier/gifted-chat-web-demo](https://github.com/xcarpentier/gifted-chat-web-demo)\n> - [Gatsby example](https://github.com/xcarpentier/clean-archi-boilerplate/tree/develop/apps/web)\n\n
\n\n---\n\n## ๐Ÿงช Testing\n\n
\nTriggering layout events in tests\n\n`TEST_ID` is exported as constants that can be used in your testing library of choice.\n\nGifted Chat uses `onLayout` to determine the height of the chat container. To trigger `onLayout` during your tests:\n\n```typescript\nconst WIDTH = 200\nconst HEIGHT = 2000\n\nconst loadingWrapper = getByTestId(TEST_ID.LOADING_WRAPPER)\nfireEvent(loadingWrapper, 'layout', {\n nativeEvent: {\n layout: {\n width: WIDTH,\n height: HEIGHT,\n },\n },\n})\n```\n\n
\n\n---\n\n## ๐Ÿ“ฆ Example App\n\nThe repository includes a comprehensive example app demonstrating all features:\n\n```bash\n# Clone and install\ngit clone https://github.com/FaridSafi/react-native-gifted-chat.git\ncd react-native-gifted-chat/example\nyarn install\n\n# Run on iOS\nnpx expo run:ios\n\n# Run on Android\nnpx expo run:android\n\n# Run on Web\nnpx expo start --web\n```\n\nThe example app showcases:\n- ๐Ÿ’ฌ Basic chat functionality\n- ๐ŸŽจ Custom message bubbles and avatars\n- โ†ฉ๏ธ Reply to messages with swipe gesture\n- โšก Quick replies (bot-style)\n- โœ๏ธ Typing indicators\n- ๐Ÿ“Ž Attachment actions\n- ๐Ÿ”— Link parsing and custom matchers\n- ๐ŸŒ Web compatibility\n\n---\n\n## โ“ Troubleshooting\n\n
\nTextInput is hidden on Android\n\nMake sure you have `android:windowSoftInputMode=\"adjustResize\"` in your `AndroidManifest.xml`. See [Android configuration](#android) above.\n\n
\n\n
\nHow to set Bubble color for each user?\n\nSee [this issue](https://github.com/FaridSafi/react-native-gifted-chat/issues/672) for examples.\n\n
\n\n
\nHow to customize InputToolbar styles?\n\nSee [this issue](https://github.com/FaridSafi/react-native-gifted-chat/issues/662) for examples.\n\n
\n\n
\nHow to manually dismiss the keyboard?\n\nSee [this issue](https://github.com/FaridSafi/react-native-gifted-chat/issues/647) for examples.\n\n
\n\n
\nHow to use renderLoading?\n\nSee [this issue](https://github.com/FaridSafi/react-native-gifted-chat/issues/298) for examples.\n\n
\n\n---\n\n## ๐Ÿค” Have a Question?\n\n1. Check this README first\n2. Search [existing issues](https://github.com/FaridSafi/react-native-gifted-chat/issues)\n3. Ask on [StackOverflow](https://stackoverflow.com/questions/tagged/react-native-gifted-chat)\n4. Open a new issue if needed\n\n---\n\n## ๐Ÿค Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Install dependencies (`yarn install`)\n4. Make your changes\n5. Run tests (`yarn test`)\n6. Run linting (`yarn lint`)\n7. Build the library (`yarn build`)\n8. Commit your changes (`git commit -m 'Add amazing feature'`)\n9. Push to the branch (`git push origin feature/amazing-feature`)\n10. Open a Pull Request\n\n### Development Setup\n\n```bash\n# Install dependencies\nyarn install\n\n# Build the library\nyarn build\n\n# Run tests\nyarn test\n\n# Run linting\nyarn lint\n\n# Full validation\nyarn prepublishOnly\n```\n\n---\n\n## ๐Ÿ‘ฅ Authors\n\n**Original Author:** [Farid Safi](https://www.x.com/FaridSafi)\n\n**Co-author:** [Xavier Carpentier](https://www.x.com/xcapetir) - [Hire Xavier](https://xaviercarpentier.com)\n\n**Maintainer:** [Kesha Antonov](https://github.com/kesha-antonov)\n\n> I've been maintaining this project for 2 years, completely in my free time and without any compensation. If you find it helpful, please consider [becoming a sponsor](https://github.com/sponsors/kesha-antonov) to support continued development. ๐Ÿ’–\n\n---\n\n## ๐Ÿ“„ License\n\n[MIT](LICENSE)\n\n---\n\n

\n Built with โค๏ธ by the React Native community\n

\n" }, { "path": "babel.config.cjs", "content": "module.exports = function (api) {\n api.cache(true)\n\n return {\n presets: [\n '@babel/preset-env',\n 'module:@react-native/babel-preset',\n '@babel/preset-typescript',\n ],\n plugins: [\n '@babel/plugin-transform-unicode-property-regex',\n '@babel/plugin-transform-react-jsx',\n 'react-native-reanimated/plugin',\n ],\n }\n}\n" }, { "path": "codecov.yml", "content": "coverage:\n status:\n patch:\n default: off\n" }, { "path": "eslint.config.js", "content": "import stylistic from '@stylistic/eslint-plugin'\nimport typescriptEslint from '@typescript-eslint/eslint-plugin'\nimport typescriptParser from '@typescript-eslint/parser'\nimport importPlugin from 'eslint-plugin-import'\nimport jestPlugin from 'eslint-plugin-jest'\nimport perfectionistPlugin from 'eslint-plugin-perfectionist'\nimport react from 'eslint-plugin-react'\nimport reactHooks from 'eslint-plugin-react-hooks'\n\nexport default [\n {\n ignores: [\n '**/node_modules/**',\n '**/lib/**',\n '**/build/**',\n '**/.expo/**',\n '**/android/**',\n '**/ios/**',\n // Config files\n 'example/*.js',\n 'example/*.config.js',\n 'example/scripts/**',\n ],\n },\n {\n files: ['src/**/*.{js,jsx,ts,tsx}', 'tests/**/*.{js,jsx,ts,tsx}'],\n languageOptions: {\n ecmaVersion: 'latest',\n sourceType: 'module',\n parser: typescriptParser,\n parserOptions: {\n ecmaFeatures: {\n jsx: true,\n },\n },\n globals: {\n fetch: 'readonly',\n navigator: 'readonly',\n __DEV__: 'readonly',\n XMLHttpRequest: 'readonly',\n FormData: 'readonly',\n React$Element: 'readonly',\n requestAnimationFrame: 'readonly',\n\n // Node.js globals for build scripts and configuration files\n require: 'readonly',\n module: 'readonly',\n process: 'readonly',\n global: 'readonly',\n console: 'readonly',\n setTimeout: 'readonly',\n clearTimeout: 'readonly',\n setInterval: 'readonly',\n clearInterval: 'readonly',\n\n // Jest globals\n describe: 'readonly',\n test: 'readonly',\n it: 'readonly',\n jest: 'readonly',\n expect: 'readonly',\n beforeAll: 'readonly',\n beforeEach: 'readonly',\n afterAll: 'readonly',\n afterEach: 'readonly',\n },\n },\n plugins: {\n '@stylistic': stylistic,\n '@typescript-eslint': typescriptEslint,\n 'import': importPlugin,\n 'perfectionist': perfectionistPlugin,\n 'react': react,\n 'react-hooks': reactHooks,\n },\n settings: {\n react: {\n version: 'detect',\n },\n 'import/parsers': {\n '@typescript-eslint/parser': ['.ts', '.tsx'],\n },\n 'import/resolver': {\n typescript: {\n alwaysTryTypes: true,\n project: './tsconfig.json',\n },\n node: {\n extensions: ['.js', '.jsx', '.ts', '.tsx'],\n },\n },\n 'import/core-modules': ['react', 'react-native'],\n },\n rules: {\n // Import rules\n 'import/no-unresolved': 'error',\n 'import/named': 'error',\n 'import/default': 'error',\n 'import/namespace': 'error',\n 'import/export': 'error',\n 'import/no-absolute-path': 'error',\n 'import/no-self-import': 'error',\n 'import/no-cycle': 'warn',\n 'import/no-useless-path-segments': 'error',\n 'import/no-duplicates': 'error',\n 'import/first': 'error',\n 'import/newline-after-import': 'warn',\n 'import/extensions': [\n 'error',\n 'ignorePackages',\n {\n js: 'never',\n jsx: 'never',\n ts: 'never',\n tsx: 'never',\n },\n ],\n\n // React rules\n 'react/react-in-jsx-scope': 'off',\n 'react/no-unknown-property': 'off',\n 'react/display-name': 'off',\n 'react/prop-types': 'off',\n\n // React Hooks\n 'react-hooks/rules-of-hooks': 'error',\n 'react-hooks/exhaustive-deps': [\n 'warn',\n {\n additionalHooks:\n '(useAnimatedStyle|useSharedValue|useAnimatedGestureHandler|useAnimatedScrollHandler|useAnimatedProps|useDerivedValue|useAnimatedRef|useAnimatedReact|useAnimatedReaction|useCallbackDebounced|useCallbackThrottled)',\n },\n ],\n\n // TypeScript rules\n '@typescript-eslint/no-explicit-any': 'off',\n '@typescript-eslint/no-unused-vars': ['error'],\n\n // Stylistic rules\n '@stylistic/semi': ['error', 'never'],\n '@stylistic/member-delimiter-style': [\n 'error',\n {\n multiline: {\n delimiter: 'none',\n requireLast: true,\n },\n singleline: {\n delimiter: 'comma',\n requireLast: false,\n },\n },\n ],\n '@stylistic/indent': [\n 'error',\n 2,\n {\n SwitchCase: 1,\n VariableDeclarator: 'first',\n ignoredNodes: ['TemplateLiteral'],\n },\n ],\n '@stylistic/quotes': ['error', 'single'],\n '@stylistic/jsx-quotes': ['error', 'prefer-single'],\n '@stylistic/comma-dangle': [\n 'error',\n {\n arrays: 'always-multiline',\n objects: 'always-multiline',\n imports: 'always-multiline',\n exports: 'never',\n functions: 'never',\n },\n ],\n '@stylistic/arrow-parens': ['error', 'as-needed'],\n '@stylistic/template-curly-spacing': 'off',\n '@stylistic/linebreak-style': ['off', 'unix'],\n '@stylistic/brace-style': ['error', '1tbs', { allowSingleLine: false }],\n '@stylistic/jsx-closing-bracket-location': ['error', 'line-aligned'],\n\n // General rules\n 'no-func-assign': 'off',\n 'no-class-assign': 'off',\n 'no-useless-escape': 'off',\n 'no-unused-vars': 'off', // Use @typescript-eslint/no-unused-vars instead\n 'no-unreachable': 'error',\n 'curly': [2, 'multi', 'consistent'],\n 'nonblock-statement-body-position': ['error', 'below'],\n\n // Perfectionist rules\n 'perfectionist/sort-imports': [\n 'error',\n {\n groups: [\n 'react',\n 'external',\n 'internal',\n ['parent', 'sibling'],\n 'index',\n ],\n customGroups: {\n value: {\n react: ['^react$', '^react-native$'],\n },\n },\n newlinesBetween: 'ignore',\n },\n ],\n 'perfectionist/sort-interfaces': 'off',\n },\n },\n // Example app configuration with path aliases\n {\n files: ['example/**/*.{js,jsx,ts,tsx}'],\n languageOptions: {\n ecmaVersion: 'latest',\n sourceType: 'module',\n parser: typescriptParser,\n parserOptions: {\n ecmaFeatures: {\n jsx: true,\n },\n project: './example/tsconfig.json',\n },\n globals: {\n fetch: 'readonly',\n navigator: 'readonly',\n __DEV__: 'readonly',\n XMLHttpRequest: 'readonly',\n FormData: 'readonly',\n React$Element: 'readonly',\n requestAnimationFrame: 'readonly',\n require: 'readonly',\n module: 'readonly',\n process: 'readonly',\n global: 'readonly',\n console: 'readonly',\n setTimeout: 'readonly',\n clearTimeout: 'readonly',\n setInterval: 'readonly',\n clearInterval: 'readonly',\n },\n },\n plugins: {\n '@stylistic': stylistic,\n '@typescript-eslint': typescriptEslint,\n 'import': importPlugin,\n 'perfectionist': perfectionistPlugin,\n 'react': react,\n 'react-hooks': reactHooks,\n },\n settings: {\n react: {\n version: 'detect',\n },\n 'import/parsers': {\n '@typescript-eslint/parser': ['.ts', '.tsx'],\n },\n 'import/resolver': {\n typescript: {\n alwaysTryTypes: true,\n project: './example/tsconfig.json',\n },\n node: {\n extensions: ['.js', '.jsx', '.ts', '.tsx'],\n },\n },\n 'import/core-modules': ['react', 'react-native', 'expo-router', 'expo-blur', 'expo-haptics', 'expo-symbols', 'expo-system-ui', 'expo-web-browser', 'expo-font', 'expo-splash-screen', 'expo-status-bar', 'react-native-gifted-chat'],\n },\n rules: {\n // Import rules\n 'import/no-unresolved': 'error',\n 'import/named': 'error',\n 'import/default': 'error',\n 'import/namespace': 'error',\n 'import/export': 'error',\n 'import/no-absolute-path': 'error',\n 'import/no-self-import': 'error',\n 'import/no-cycle': 'warn',\n 'import/no-useless-path-segments': 'error',\n 'import/no-duplicates': 'error',\n 'import/first': 'error',\n 'import/newline-after-import': 'warn',\n 'import/extensions': [\n 'error',\n 'ignorePackages',\n {\n js: 'never',\n jsx: 'never',\n ts: 'never',\n tsx: 'never',\n },\n ],\n\n // React rules\n 'react/react-in-jsx-scope': 'off',\n 'react/no-unknown-property': 'off',\n 'react/display-name': 'off',\n 'react/prop-types': 'off',\n\n // React Hooks\n 'react-hooks/rules-of-hooks': 'error',\n 'react-hooks/exhaustive-deps': [\n 'warn',\n {\n additionalHooks:\n '(useAnimatedStyle|useSharedValue|useAnimatedGestureHandler|useAnimatedScrollHandler|useAnimatedProps|useDerivedValue|useAnimatedRef|useAnimatedReact|useAnimatedReaction|useCallbackDebounced|useCallbackThrottled)',\n },\n ],\n\n // TypeScript rules\n '@typescript-eslint/no-explicit-any': 'off',\n '@typescript-eslint/no-unused-vars': ['error'],\n\n // Stylistic rules\n '@stylistic/semi': ['error', 'never'],\n '@stylistic/member-delimiter-style': [\n 'error',\n {\n multiline: {\n delimiter: 'none',\n requireLast: true,\n },\n singleline: {\n delimiter: 'comma',\n requireLast: false,\n },\n },\n ],\n '@stylistic/indent': [\n 'error',\n 2,\n {\n SwitchCase: 1,\n VariableDeclarator: 'first',\n ignoredNodes: ['TemplateLiteral'],\n },\n ],\n '@stylistic/quotes': ['error', 'single'],\n '@stylistic/jsx-quotes': ['error', 'prefer-single'],\n '@stylistic/comma-dangle': [\n 'error',\n {\n arrays: 'always-multiline',\n objects: 'always-multiline',\n imports: 'always-multiline',\n exports: 'never',\n functions: 'never',\n },\n ],\n '@stylistic/arrow-parens': ['error', 'as-needed'],\n '@stylistic/template-curly-spacing': 'off',\n '@stylistic/linebreak-style': ['off', 'unix'],\n '@stylistic/brace-style': ['error', '1tbs', { allowSingleLine: false }],\n '@stylistic/jsx-closing-bracket-location': ['error', 'line-aligned'],\n\n // General rules\n 'no-func-assign': 'off',\n 'no-class-assign': 'off',\n 'no-useless-escape': 'off',\n 'no-unused-vars': 'off',\n 'no-unreachable': 'error',\n 'curly': [2, 'multi', 'consistent'],\n 'nonblock-statement-body-position': ['error', 'below'],\n\n // Perfectionist rules\n 'perfectionist/sort-imports': [\n 'error',\n {\n groups: [\n 'react',\n 'external',\n 'internal',\n ['parent', 'sibling'],\n 'index',\n ],\n customGroups: {\n value: {\n react: ['^react$', '^react-native$'],\n },\n },\n newlinesBetween: 'ignore',\n },\n ],\n 'perfectionist/sort-interfaces': 'off',\n },\n },\n {\n files: ['tests/**/*', 'src/__tests__/**/*'],\n plugins: {\n jest: jestPlugin,\n },\n rules: {\n ...jestPlugin.configs.recommended.rules,\n },\n },\n]\n" }, { "path": "example/.gitignore", "content": "# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files\n\n# dependencies\nnode_modules/\n\n# Expo\n.expo/\ndist/\nweb-build/\nexpo-env.d.ts\n\n# Native\n.kotlin/\n*.orig.*\n*.jks\n*.p8\n*.p12\n*.key\n*.mobileprovision\n\n# Metro\n.metro-health-check*\n\n# debug\nnpm-debug.*\nyarn-debug.*\nyarn-error.*\n\n# macOS\n.DS_Store\n*.pem\n\n# local env files\n.env*.local\n\n# typescript\n*.tsbuildinfo\n\napp-example\n\n# generated native folders\n/ios\n/android\n" }, { "path": "example/README.md", "content": "# How to use\n\n1. Install dependencies:\n\n ```bash\n yarn install\n cd example\n yarn install\n ```\n\n2. Install iOS dev build (only needed once or after rebuilding native dependencies):\n ```bash\n yarn installDevBuild:ios\n ```\n\n or\n\n ```bash\n yarn installDevBuild:android\n ```\n\n3. Start the example app on iOS simulator:\n\n ```bash\n yarn start:ios\n ```\n\n# Dark Theme Support\n\nTo switch theme press `Cmd + Shift + A` in iOS simulator.\n" }, { "path": "example/app/(tabs)/_layout.tsx", "content": "import React from 'react'\nimport { Tabs } from 'expo-router'\n\nimport { HapticTab } from '@/components/haptic-tab'\nimport { IconSymbol } from '@/components/ui/icon-symbol'\nimport { Colors } from '@/constants/theme'\nimport { useColorScheme } from '@/hooks/use-color-scheme'\n\nexport default function TabLayout () {\n const colorScheme = useColorScheme()\n\n return (\n \n ,\n }}\n />\n ,\n }}\n />\n \n )\n}\n" }, { "path": "example/app/(tabs)/explore.tsx", "content": "import React from 'react'\nimport { ScrollView, StyleSheet, View } from 'react-native'\nimport { useRouter } from 'expo-router'\nimport { RectButton } from 'react-native-gesture-handler'\nimport { SafeAreaView } from 'react-native-safe-area-context'\n\nimport { ThemedText } from '@/components/themed-text'\nimport { ThemedView } from '@/components/themed-view'\nimport { useThemeColor } from '@/hooks/use-theme-color'\n\ntype ChatExample = 'basic' | 'customized-rendering' | 'slack' | 'links' | 'reply'\n\nconst examples: Array<{ id: ChatExample, title: string, description: string }> = [\n { id: 'basic', title: 'Basic Example', description: 'Basic chat with keyboard logging for testing' },\n { id: 'links', title: 'Links & Patterns', description: 'Phone numbers, emails, URLs, hashtags, and mentions' },\n { id: 'customized-rendering', title: 'Customized Rendering', description: 'Customized chat with all rendering options' },\n { id: 'slack', title: 'Slack Style', description: 'Slack-like message styling' },\n { id: 'reply', title: 'Reply Example', description: 'Example demonstrating reply functionality' },\n]\n\nexport default function ExploreScreen () {\n const router = useRouter()\n const backgroundColor = useThemeColor({}, 'background')\n const borderColor = useThemeColor({ light: '#e0e0e0', dark: '#444' }, 'icon')\n\n return (\n \n \n \n Explore Chat Examples\n \n \n \n Choose from different chat implementations to see various features and styling options.\n \n \n \n {examples.map(example => (\n router.push(`/chat/${example.id}`)}\n >\n \n {example.title}\n \n \n {example.description}\n \n \n Try it โ†’\n \n \n ))}\n \n \n \n )\n}\n\nconst styles = StyleSheet.create({\n fill: {\n flex: 1,\n },\n titleContainer: {\n padding: 20,\n paddingBottom: 10,\n },\n description: {\n paddingHorizontal: 20,\n paddingBottom: 20,\n },\n examplesContainer: {\n padding: 20,\n gap: 15,\n },\n exampleCard: {\n padding: 20,\n borderRadius: 12,\n borderWidth: 1,\n gap: 8,\n },\n exampleTitle: {\n marginBottom: 4,\n },\n exampleDescription: {\n opacity: 0.7,\n marginBottom: 8,\n },\n tryButton: {\n alignSelf: 'flex-start',\n },\n})\n" }, { "path": "example/app/(tabs)/index.tsx", "content": "import { StyleSheet } from 'react-native'\nimport { Image } from 'expo-image'\n\nimport { ExternalLink } from '@/components/external-link'\nimport { HelloWave } from '@/components/hello-wave'\nimport ParallaxScrollView from '@/components/parallax-scroll-view'\nimport { ThemedText } from '@/components/themed-text'\nimport { ThemedView } from '@/components/themed-view'\n\nexport default function HomeScreen () {\n return (\n \n }\n >\n \n Welcome!\n \n \n \n React Native Gifted Chat\n \n The most complete chat UI for React Native\n \n \n View on GitHub\n \n \n \n \n Tap the Explore tab to try different chat examples.\n \n \n \n )\n}\n\nconst styles = StyleSheet.create({\n titleContainer: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 8,\n },\n stepContainer: {\n gap: 8,\n marginBottom: 8,\n },\n reactLogo: {\n height: 178,\n width: 290,\n bottom: 0,\n left: 0,\n position: 'absolute',\n },\n})\n" }, { "path": "example/app/_layout.tsx", "content": "import { LogBox, StyleSheet } from 'react-native'\nimport { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'\nimport { Stack } from 'expo-router'\nimport { StatusBar } from 'expo-status-bar'\nimport { GestureHandlerRootView } from 'react-native-gesture-handler'\nimport 'react-native-reanimated'\n\nimport { useColorScheme } from '@/hooks/use-color-scheme'\n\nLogBox.ignoreLogs(['Open debugger to view warnings'])\n\nexport const unstable_settings = {\n anchor: '(tabs)',\n}\n\nexport default function RootLayout () {\n const colorScheme = useColorScheme()\n\n return (\n \n \n \n \n \n \n \n \n \n \n )\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n },\n})\n" }, { "path": "example/app/chat/_layout.tsx", "content": "import { TouchableOpacity, Text, StyleSheet } from 'react-native'\nimport { Ionicons } from '@expo/vector-icons'\nimport { Stack, useRouter } from 'expo-router'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\n\nexport default function ChatLayout () {\n const insets = useSafeAreaInsets()\n const router = useRouter()\n\n return (\n (\n router.back()} style={styles.backButton}>\n \n Back\n \n ),\n }}\n >\n \n \n \n \n \n \n )\n}\n\nconst styles = StyleSheet.create({\n backButton: {\n flexDirection: 'row',\n alignItems: 'center',\n marginLeft: -8,\n },\n backText: {\n color: '#007AFF',\n fontSize: 17,\n },\n})\n" }, { "path": "example/app/chat/basic.tsx", "content": "import BasicExample from '@/components/chat-examples/BasicExample'\n\nexport default BasicExample\n" }, { "path": "example/app/chat/customized-rendering.tsx", "content": "import CustomizedRenderingExample from '@/components/chat-examples/CustomizedRenderingExample'\n\nexport default CustomizedRenderingExample\n" }, { "path": "example/app/chat/links.tsx", "content": "import LinksExample from '@/components/chat-examples/LinksExample'\n\nexport default LinksExample\n" }, { "path": "example/app/chat/reply.tsx", "content": "import ReplyExample from '@/components/chat-examples/ReplyExample'\n\nexport default ReplyExample\n" }, { "path": "example/app/chat/slack.tsx", "content": "import SlackExample from '@/components/chat-examples/SlackExample'\n\nexport default SlackExample\n" }, { "path": "example/app/modal.tsx", "content": "import { StyleSheet } from 'react-native'\nimport { Link } from 'expo-router'\n\nimport { ThemedText } from '@/components/themed-text'\nimport { ThemedView } from '@/components/themed-view'\n\nexport default function ModalScreen () {\n return (\n \n This is a modal\n \n Go to home screen\n \n \n )\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n alignItems: 'center',\n justifyContent: 'center',\n padding: 20,\n },\n link: {\n marginTop: 15,\n paddingVertical: 15,\n },\n})\n" }, { "path": "example/app.json", "content": "{\n \"expo\": {\n \"name\": \"example\",\n \"slug\": \"example\",\n \"version\": \"1.0.0\",\n \"orientation\": \"portrait\",\n \"icon\": \"./assets/images/icon.png\",\n \"scheme\": \"example\",\n \"userInterfaceStyle\": \"automatic\",\n \"newArchEnabled\": true,\n \"ios\": {\n \"supportsTablet\": true,\n \"bundleIdentifier\": \"com.anonymous.example\",\n \"config\": {\n \"googleMapsApiKey\": \"YOUR_GOOGLE_MAPS_API_KEY\"\n }\n },\n \"android\": {\n \"adaptiveIcon\": {\n \"backgroundColor\": \"#E6F4FE\",\n \"foregroundImage\": \"./assets/images/android-icon-foreground.png\",\n \"backgroundImage\": \"./assets/images/android-icon-background.png\",\n \"monochromeImage\": \"./assets/images/android-icon-monochrome.png\"\n },\n \"edgeToEdgeEnabled\": true,\n \"predictiveBackGestureEnabled\": false,\n \"package\": \"com.anonymous.example\",\n \"config\": {\n \"googleMaps\": {\n \"apiKey\": \"YOUR_GOOGLE_MAPS_API_KEY\"\n }\n }\n },\n \"web\": {\n \"output\": \"static\",\n \"favicon\": \"./assets/images/favicon.png\"\n },\n \"plugins\": [\n \"expo-router\",\n [\n \"expo-splash-screen\",\n {\n \"image\": \"./assets/images/splash-icon.png\",\n \"imageWidth\": 200,\n \"resizeMode\": \"contain\",\n \"backgroundColor\": \"#ffffff\",\n \"dark\": {\n \"backgroundColor\": \"#000000\"\n }\n }\n ]\n ],\n \"experiments\": {\n \"typedRoutes\": true,\n \"reactCompiler\": true\n }\n }\n}\n" }, { "path": "example/babel.config.js", "content": "const fs = require('fs')\nconst path = require('path')\n\nconst root = path.resolve(__dirname, '..')\nconst rootPak = JSON.parse(fs.readFileSync(path.join(root, 'package.json'), 'utf8'))\n\nmodule.exports = function (api) {\n api.cache(true)\n\n return {\n presets: ['babel-preset-expo'],\n plugins: [\n [\n 'module-resolver',\n {\n extensions: ['.tsx', '.ts', '.js', '.json'],\n alias: {\n // For development, we want to alias the library to the source\n [rootPak.name]: path.join(root, rootPak.main),\n },\n },\n ],\n 'react-native-worklets/plugin',\n ],\n }\n}\n" }, { "path": "example/components/chat-examples/BasicExample.tsx", "content": "import React, { useCallback, useMemo, useState } from 'react'\nimport { StyleSheet, View, useColorScheme } from 'react-native'\nimport { GiftedChat, IMessage } from 'react-native-gifted-chat'\nimport AccessoryBar from '../../example-expo/AccessoryBar'\nimport CustomActions from '../../example-expo/CustomActions'\nimport CustomView from '../../example-expo/CustomView'\nimport earlierMessages from '../../example-expo/data/earlierMessages'\nimport messagesData from '../../example-expo/data/messages'\nimport { useKeyboardVerticalOffset } from '../../hooks/useKeyboardVerticalOffset'\nimport { getColorSchemeStyle } from '../../utils/styleUtils'\n\nexport default function BasicExample () {\n const [messages, setMessages] = useState(messagesData)\n const [isLoadingEarlier, setIsLoadingEarlier] = useState(false)\n const [isTyping, setIsTyping] = useState(false)\n const colorScheme = useColorScheme()\n\n const keyboardVerticalOffset = useKeyboardVerticalOffset()\n\n const user = useMemo(() => ({\n _id: 1,\n name: 'Developer',\n }), [])\n\n const onSend = useCallback((newMessages: IMessage[] = []) => {\n const messagesWithIds = newMessages.map(msg => ({\n ...msg,\n _id: msg._id || Math.random().toString(36).substring(7),\n user: msg.user || user,\n }))\n setMessages(previousMessages =>\n GiftedChat.append(previousMessages, messagesWithIds)\n )\n }, [user])\n\n const onPressLoadEarlierMessages = useCallback(() => {\n setIsLoadingEarlier(true)\n setTimeout(() => {\n setMessages(previousMessages =>\n GiftedChat.prepend(previousMessages, earlierMessages())\n )\n setIsLoadingEarlier(false)\n }, 1500)\n }, [])\n\n const renderAccessory = useCallback(\n () => setIsTyping(isTyping => !isTyping)} user={user} />,\n [onSend, user]\n )\n\n const renderCustomView = useCallback((props: any) => , [])\n\n const renderActions = useCallback(\n (props: any) => ,\n [onSend, user]\n )\n\n return (\n \n \n \n )\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n backgroundColor: '#fff',\n },\n container_dark: {\n backgroundColor: '#000',\n },\n messagesContainer_dark: {\n backgroundColor: '#000',\n },\n composer_dark: {\n backgroundColor: '#1a1a1a',\n color: '#fff',\n },\n})\n" }, { "path": "example/components/chat-examples/CustomizedRenderingExample.tsx", "content": "import React from 'react'\nimport { StyleSheet, View, useColorScheme } from 'react-native'\nimport Chats from '../../example-gifted-chat/src/Chats'\nimport { getColorSchemeStyle } from '../../utils/styleUtils'\n\nexport default function CustomizedRenderingExample () {\n const colorScheme = useColorScheme()\n\n return (\n \n \n \n )\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n backgroundColor: '#fff',\n },\n container_dark: {\n backgroundColor: '#000',\n },\n})\n" }, { "path": "example/components/chat-examples/LinksExample.tsx", "content": "import React, { useCallback, useMemo, useState } from 'react'\nimport { Linking, StyleSheet, Text, View } from 'react-native'\nimport { ActionSheetProvider, useActionSheet } from '@expo/react-native-action-sheet'\nimport { setStringAsync } from 'expo-clipboard'\nimport { isValidPhoneNumber, parsePhoneNumberWithError } from 'libphonenumber-js'\nimport { GiftedChat, IMessage, LinkMatcher } from 'react-native-gifted-chat'\nimport { useKeyboardVerticalOffset } from '../../hooks/useKeyboardVerticalOffset'\n\nconst LinksExample: React.FC = () => {\n const { showActionSheetWithOptions } = useActionSheet()\n const keyboardVerticalOffset = useKeyboardVerticalOffset()\n\n const initialMessages: IMessage[] = useMemo(() => [\n {\n text: 'Welcome! ๐Ÿ‘‹',\n createdAt: new Date(),\n user: {\n _id: 2,\n name: 'John Doe',\n },\n },\n {\n text: 'This example shows how GiftedChat handles different types of links in messages. Try tapping on any link!',\n createdAt: new Date(Date.now() - 1 * 60000),\n user: {\n _id: 2,\n name: 'John Doe',\n },\n },\n {\n text: 'Phone numbers are also parsed:\\n\\nโ€ข +79931234567\\n\\nโ€ข 89931234567\\n\\nโ€ข +1-215-456-7890.\\n\\nIt shouldn\\'t parse phone numbers in file names like IMG_20220101_123456.jpg, 89201234567_today.pdf, or in addresses like 1234 React St., JS City, 56789.',\n createdAt: new Date(Date.now() - 2 * 60000),\n user: {\n _id: 2,\n name: 'John Doe',\n },\n },\n {\n text: 'Email addresses are clickable: cool.guy@example.com or contact@reactnative.dev',\n createdAt: new Date(Date.now() - 3 * 60000),\n user: {\n _id: 2,\n name: 'John Doe',\n },\n },\n {\n text: 'Different link formats work:\\nโ€ข www.google.com\\nโ€ข google.com\\nโ€ข https://google.com',\n createdAt: new Date(Date.now() - 4 * 60000),\n user: {\n _id: 2,\n name: 'John Doe',\n },\n },\n {\n text: 'Use hashtags to categorize: #giftedchat #reactnative #opensource',\n createdAt: new Date(Date.now() - 5 * 60000),\n user: {\n _id: 2,\n name: 'John Doe',\n },\n },\n {\n text: 'You can mention people like @kesha-antonov or @john-doe',\n createdAt: new Date(Date.now() - 6 * 60000),\n user: {\n _id: 2,\n name: 'John Doe',\n },\n },\n {\n text: 'System message with link: Check out our documentation at https://github.com/FaridSafi/react-native-gifted-chat',\n createdAt: new Date(Date.now() - 7 * 60000),\n user: {\n _id: 2,\n name: 'John Doe',\n },\n system: true,\n },\n {\n text: 'System message with data and phone numbers: Contact support at +79931234567 or +1-215-456-7890. We have holidays on 2025-12-25 and until 2026-01-01 12:00.',\n createdAt: new Date(Date.now() - 7 * 60000),\n user: {\n _id: 2,\n name: 'John Doe',\n },\n system: true,\n },\n ].map((message, index) => ({\n ...message,\n _id: index + 1,\n })).reverse(), [])\n\n const [messages, setMessages] = useState(initialMessages)\n\n const user = useMemo(() => ({\n _id: 1,\n name: 'Developer',\n }), [])\n\n const onSend = useCallback((newMessages: IMessage[] = []) => {\n const messagesWithIds = newMessages.map(msg => ({\n ...msg,\n _id: msg._id || Math.random().toString(36).substring(7),\n user: msg.user || user,\n }))\n setMessages(previousMessages =>\n GiftedChat.append(previousMessages, messagesWithIds)\n )\n }, [user])\n\n const getValidPhoneNumber = useCallback((text: string): string | undefined => {\n const cleaned = text.replace(/[\\-\\(\\)\\s\\.]/g, '')\n\n // Validate with libphonenumber-js\n try {\n // Try direct validation first\n if (isValidPhoneNumber(cleaned))\n return cleaned\n\n // Try with RU region for local numbers\n if (isValidPhoneNumber(cleaned, 'RU'))\n return cleaned\n\n // Try parsing to check validity\n const phoneNumber = parsePhoneNumberWithError(cleaned, 'RU')\n if (phoneNumber && phoneNumber.isValid())\n return cleaned\n\n } catch (error) {\n console.warn('Invalid phone number:', error)\n }\n\n return undefined\n }, [])\n\n const handlePressPhoneNumber = useCallback((url: string) => {\n if (!url)\n return // Skip if validation failed\n\n const options: {\n title: string\n action?: () => void\n }[] = [\n { title: 'Call', action: () => Linking.openURL(`tel:${url}`) },\n { title: 'Send SMS', action: () => Linking.openURL(`sms:${url}`) },\n { title: 'Copy Phone Number', action: () => setStringAsync(url) },\n { title: 'Cancel' },\n ]\n\n showActionSheetWithOptions({\n options: options.map(o => o.title),\n cancelButtonIndex: options.length - 1,\n }, (buttonIndex?: number) => {\n if (buttonIndex === undefined)\n return\n\n const option = options[buttonIndex]\n option.action?.()\n })\n }, [showActionSheetWithOptions])\n\n const matchers = useMemo(() => [\n {\n type: 'phone',\n // Pattern that excludes numbers adjacent to underscores or part of filenames\n pattern: /(? {\n return getValidPhoneNumber(matchedText) || ''\n },\n getLinkText: (text: string): string => {\n return text\n },\n renderLink: (text: string, url: string, index: number) => {\n const validPhoneNumber = getValidPhoneNumber(text)\n const isDisabled = !validPhoneNumber || !url\n\n return (\n !isDisabled && handlePressPhoneNumber(url)}\n >\n {text}\n \n )\n },\n },\n ], [getValidPhoneNumber, handlePressPhoneNumber])\n\n return (\n \n \n \n \n \n )\n}\n\nconst ExampleContainer = () => (\n \n \n \n)\n\nexport default ExampleContainer\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n },\n link: {\n textDecorationLine: 'underline',\n },\n linkDisabled: {\n textDecorationLine: 'none',\n },\n})\n" }, { "path": "example/components/chat-examples/ReplyExample.tsx", "content": "import React, { useCallback, useMemo, useState } from 'react'\nimport { StyleSheet, View, useColorScheme } from 'react-native'\nimport { GiftedChat, IMessage, ReplyMessage } from 'react-native-gifted-chat'\n\nimport messagesData from '../../example-expo/data/messages'\nimport { useKeyboardVerticalOffset } from '../../hooks/useKeyboardVerticalOffset'\nimport { getColorSchemeStyle } from '../../utils/styleUtils'\n\nexport interface IChatMessage extends IMessage {\n replyMessage?: ReplyMessage\n}\n\nexport default function ReplyExample () {\n const [messages, setMessages] = useState(messagesData)\n const colorScheme = useColorScheme()\n const keyboardVerticalOffset = useKeyboardVerticalOffset()\n\n const user = useMemo(() => ({\n _id: 1,\n name: 'Developer',\n }), [])\n\n const onSend = useCallback((newMessages: IChatMessage[] = []) => {\n const messagesWithIds = newMessages.map(msg => ({\n ...msg,\n _id: msg._id || Math.random().toString(36).substring(7),\n user: msg.user || user,\n }))\n setMessages(previousMessages =>\n GiftedChat.append(previousMessages, messagesWithIds)\n )\n }, [user])\n\n const handlePressReply = useCallback((reply: ReplyMessage) => {\n console.log('Pressed reply:', reply)\n // Could scroll to the original message here\n }, [])\n\n return (\n \n \n messages={messages}\n onSend={onSend}\n user={user}\n messagesContainerStyle={getColorSchemeStyle(styles, 'messagesContainer', colorScheme)}\n textInputProps={{\n style: getColorSchemeStyle(styles, 'composer', colorScheme),\n }}\n // New grouped reply props\n reply={{\n swipe: {\n isEnabled: true,\n direction: 'left', // swipe left to reply\n },\n onPress: handlePressReply,\n }}\n keyboardAvoidingViewProps={{ keyboardVerticalOffset }}\n />\n \n )\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n backgroundColor: '#fff',\n },\n container_dark: {\n backgroundColor: '#000',\n },\n messagesContainer_dark: {\n backgroundColor: '#000',\n },\n composer_dark: {\n backgroundColor: '#1a1a1a',\n color: '#fff',\n },\n})\n" }, { "path": "example/components/chat-examples/SlackExample.tsx", "content": "import React, { useCallback, useMemo, useState } from 'react'\nimport { StyleSheet, View, useColorScheme } from 'react-native'\nimport { GiftedChat, IMessage } from 'react-native-gifted-chat'\nimport messagesData from '../../example-expo/data/messages'\nimport SlackMessage from '../../example-slack-message/src/SlackMessage'\nimport { useKeyboardVerticalOffset } from '../../hooks/useKeyboardVerticalOffset'\nimport { getColorSchemeStyle } from '../../utils/styleUtils'\n\nexport default function SlackExample () {\n const [messages, setMessages] = useState(messagesData)\n const colorScheme = useColorScheme()\n const keyboardVerticalOffset = useKeyboardVerticalOffset()\n\n const user = useMemo(() => ({\n _id: 1,\n name: 'Developer',\n }), [])\n\n const onSend = useCallback((newMessages: IMessage[] = []) => {\n const messagesWithIds = newMessages.map(msg => ({\n ...msg,\n _id: msg._id || Math.random().toString(36).substring(7),\n user: msg.user || user,\n }))\n setMessages(previousMessages =>\n GiftedChat.append(previousMessages, messagesWithIds)\n )\n }, [user])\n\n return (\n \n }\n messagesContainerStyle={getColorSchemeStyle(styles, 'messagesContainer', colorScheme)}\n textInputProps={{\n style: getColorSchemeStyle(styles, 'composer', colorScheme),\n }}\n keyboardAvoidingViewProps={{ keyboardVerticalOffset }}\n />\n \n )\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n backgroundColor: '#fff',\n },\n container_dark: {\n backgroundColor: '#000',\n },\n messagesContainer_dark: {\n backgroundColor: '#000',\n },\n composer_dark: {\n backgroundColor: '#1a1a1a',\n color: '#fff',\n },\n})\n" }, { "path": "example/components/external-link.tsx", "content": "import { type ComponentProps } from 'react'\nimport { Href, Link } from 'expo-router'\nimport { openBrowserAsync, WebBrowserPresentationStyle } from 'expo-web-browser'\n\ntype Props = Omit, 'href'> & { href: Href & string }\n\nexport function ExternalLink ({ href, ...rest }: Props) {\n return (\n {\n console.log('ExternalLink pressed:', href)\n if (process.env.EXPO_OS !== 'web') {\n // Prevent the default behavior of linking to the default browser on native.\n event.preventDefault()\n // Open the link in an in-app browser.\n await openBrowserAsync(href, {\n presentationStyle: WebBrowserPresentationStyle.AUTOMATIC,\n })\n }\n }}\n />\n )\n}\n" }, { "path": "example/components/haptic-tab.tsx", "content": "import { BottomTabBarButtonProps } from '@react-navigation/bottom-tabs'\nimport { PlatformPressable } from '@react-navigation/elements'\nimport * as Haptics from 'expo-haptics'\n\nexport function HapticTab (props: BottomTabBarButtonProps) {\n return (\n {\n if (process.env.EXPO_OS === 'ios')\n // Add a soft haptic feedback when pressing down on the tabs.\n Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)\n\n props.onPressIn?.(ev)\n }}\n />\n )\n}\n" }, { "path": "example/components/hello-wave.tsx", "content": "import Animated from 'react-native-reanimated'\n\nexport function HelloWave () {\n return (\n \n ๐Ÿ‘‹\n \n )\n}\n" }, { "path": "example/components/parallax-scroll-view.tsx", "content": "import type { PropsWithChildren, ReactElement } from 'react'\nimport { StyleSheet } from 'react-native'\nimport Animated, {\n interpolate,\n useAnimatedRef,\n useAnimatedStyle,\n useScrollOffset,\n} from 'react-native-reanimated'\n\nimport { ThemedView } from '@/components/themed-view'\nimport { useColorScheme } from '@/hooks/use-color-scheme'\nimport { useThemeColor } from '@/hooks/use-theme-color'\n\nconst HEADER_HEIGHT = 250\n\ntype Props = PropsWithChildren<{\n headerImage: ReactElement\n headerBackgroundColor: { dark: string, light: string }\n}>\n\nexport default function ParallaxScrollView ({\n children,\n headerImage,\n headerBackgroundColor,\n}: Props) {\n const backgroundColor = useThemeColor({}, 'background')\n const colorScheme = useColorScheme() ?? 'light'\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const scrollRef = useAnimatedRef()\n const scrollOffset = useScrollOffset(scrollRef)\n const headerAnimatedStyle = useAnimatedStyle(() => {\n return {\n transform: [\n {\n translateY: interpolate(\n scrollOffset.value,\n [-HEADER_HEIGHT, 0, HEADER_HEIGHT],\n [-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75]\n ),\n },\n {\n scale: interpolate(scrollOffset.value, [-HEADER_HEIGHT, 0, HEADER_HEIGHT], [2, 1, 1]),\n },\n ],\n }\n })\n\n return (\n \n \n {headerImage}\n \n {children}\n \n )\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n },\n header: {\n height: HEADER_HEIGHT,\n overflow: 'hidden',\n },\n content: {\n flex: 1,\n padding: 32,\n gap: 16,\n overflow: 'hidden',\n },\n})\n" }, { "path": "example/components/themed-text.tsx", "content": "import { StyleSheet, Text, type TextProps } from 'react-native'\n\nimport { useThemeColor } from '@/hooks/use-theme-color'\n\nexport type ThemedTextProps = TextProps & {\n lightColor?: string\n darkColor?: string\n type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link'\n}\n\nexport function ThemedText ({\n style,\n lightColor,\n darkColor,\n type = 'default',\n ...rest\n}: ThemedTextProps) {\n const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text')\n\n return (\n \n )\n}\n\nconst styles = StyleSheet.create({\n default: {\n fontSize: 16,\n lineHeight: 24,\n },\n defaultSemiBold: {\n fontSize: 16,\n lineHeight: 24,\n fontWeight: '600',\n },\n title: {\n fontSize: 32,\n fontWeight: 'bold',\n lineHeight: 32,\n },\n subtitle: {\n fontSize: 20,\n fontWeight: 'bold',\n },\n link: {\n lineHeight: 30,\n fontSize: 16,\n color: '#0a7ea4',\n },\n})\n" }, { "path": "example/components/themed-view.tsx", "content": "import { View, type ViewProps } from 'react-native'\n\nimport { useThemeColor } from '@/hooks/use-theme-color'\n\nexport type ThemedViewProps = ViewProps & {\n lightColor?: string\n darkColor?: string\n}\n\nexport function ThemedView ({ style, lightColor, darkColor, ...otherProps }: ThemedViewProps) {\n const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background')\n\n return \n}\n" }, { "path": "example/components/ui/collapsible.tsx", "content": "import { PropsWithChildren, useState } from 'react'\nimport { StyleSheet } from 'react-native'\nimport { RectButton } from 'react-native-gesture-handler'\n\nimport { ThemedText } from '@/components/themed-text'\nimport { ThemedView } from '@/components/themed-view'\nimport { IconSymbol } from '@/components/ui/icon-symbol'\nimport { Colors } from '@/constants/theme'\nimport { useColorScheme } from '@/hooks/use-color-scheme'\n\nexport function Collapsible ({ children, title }: PropsWithChildren & { title: string }) {\n const [isOpen, setIsOpen] = useState(false)\n const theme = useColorScheme() ?? 'light'\n\n return (\n \n setIsOpen(value => !value)}\n >\n \n\n {title}\n \n {isOpen && {children}}\n \n )\n}\n\nconst styles = StyleSheet.create({\n heading: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 6,\n },\n content: {\n marginTop: 6,\n marginLeft: 24,\n },\n})\n" }, { "path": "example/components/ui/icon-symbol.ios.tsx", "content": "import { StyleProp, ViewStyle } from 'react-native'\nimport { SymbolView, SymbolViewProps, SymbolWeight } from 'expo-symbols'\n\nexport function IconSymbol ({\n name,\n size = 24,\n color,\n style,\n weight = 'regular',\n}: {\n name: SymbolViewProps['name']\n size?: number\n color: string\n style?: StyleProp\n weight?: SymbolWeight\n}) {\n return (\n \n )\n}\n" }, { "path": "example/components/ui/icon-symbol.tsx", "content": "// Fallback for using MaterialIcons on Android and web.\n\nimport { ComponentProps } from 'react'\nimport { OpaqueColorValue, type StyleProp, type TextStyle } from 'react-native'\nimport MaterialIcons from '@expo/vector-icons/MaterialIcons'\nimport { SymbolWeight, SymbolViewProps } from 'expo-symbols'\n\ntype IconMapping = Record['name']>\ntype IconSymbolName = keyof typeof MAPPING\n\n/**\n * Add your SF Symbols to Material Icons mappings here.\n * - see Material Icons in the [Icons Directory](https://icons.expo.fyi).\n * - see SF Symbols in the [SF Symbols](https://developer.apple.com/sf-symbols/) app.\n */\nconst MAPPING = {\n 'house.fill': 'home',\n 'paperplane.fill': 'send',\n 'chevron.left.forwardslash.chevron.right': 'code',\n 'chevron.right': 'chevron-right',\n} as IconMapping\n\n/**\n * An icon component that uses native SF Symbols on iOS, and Material Icons on Android and web.\n * This ensures a consistent look across platforms, and optimal resource usage.\n * Icon `name`s are based on SF Symbols and require manual mapping to Material Icons.\n */\nexport function IconSymbol ({\n name,\n size = 24,\n color,\n style,\n}: {\n name: IconSymbolName\n size?: number\n color: string | OpaqueColorValue\n style?: StyleProp\n weight?: SymbolWeight\n}) {\n return \n}\n" }, { "path": "example/constants/theme.ts", "content": "/**\n * Below are the colors that are used in the app. The colors are defined in the light and dark mode.\n * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.\n */\n\nimport { Platform } from 'react-native'\n\nconst tintColorLight = '#0a7ea4'\nconst tintColorDark = '#fff'\n\nexport const Colors = {\n light: {\n text: '#11181C',\n background: '#fff',\n tint: tintColorLight,\n icon: '#687076',\n tabIconDefault: '#687076',\n tabIconSelected: tintColorLight,\n },\n dark: {\n text: '#ECEDEE',\n background: '#151718',\n tint: tintColorDark,\n icon: '#9BA1A6',\n tabIconDefault: '#9BA1A6',\n tabIconSelected: tintColorDark,\n },\n}\n\nexport const Fonts = Platform.select({\n ios: {\n /** iOS `UIFontDescriptorSystemDesignDefault` */\n sans: 'system-ui',\n /** iOS `UIFontDescriptorSystemDesignSerif` */\n serif: 'ui-serif',\n /** iOS `UIFontDescriptorSystemDesignRounded` */\n rounded: 'ui-rounded',\n /** iOS `UIFontDescriptorSystemDesignMonospaced` */\n mono: 'ui-monospace',\n },\n default: {\n sans: 'normal',\n serif: 'serif',\n rounded: 'normal',\n mono: 'monospace',\n },\n web: {\n sans: 'system-ui, -apple-system, BlinkMacSystemFont, \\'Segoe UI\\', Roboto, Helvetica, Arial, sans-serif',\n serif: 'Georgia, \\'Times New Roman\\', serif',\n rounded: '\\'SF Pro Rounded\\', \\'Hiragino Maru Gothic ProN\\', Meiryo, \\'MS PGothic\\', sans-serif',\n mono: 'SFMono-Regular, Menlo, Monaco, Consolas, \\'Liberation Mono\\', \\'Courier New\\', monospace',\n },\n})\n" }, { "path": "example/eslint.config.js", "content": "import stylistic from '@stylistic/eslint-plugin'\nimport typescriptEslint from '@typescript-eslint/eslint-plugin'\nimport typescriptParser from '@typescript-eslint/parser'\nimport importPlugin from 'eslint-plugin-import'\nimport jestPlugin from 'eslint-plugin-jest'\nimport perfectionistPlugin from 'eslint-plugin-perfectionist'\nimport react from 'eslint-plugin-react'\nimport reactHooks from 'eslint-plugin-react-hooks'\n\nexport default [\n {\n ignores: ['**/node_modules/**', '**/lib/**', '**/build/**', '**/.expo/**', '**/android/**', '**/ios/**'],\n },\n {\n files: ['**/*.{js,jsx,ts,tsx}'],\n languageOptions: {\n ecmaVersion: 'latest',\n sourceType: 'module',\n parser: typescriptParser,\n parserOptions: {\n ecmaFeatures: {\n jsx: true,\n },\n },\n globals: {\n fetch: 'readonly',\n navigator: 'readonly',\n __DEV__: 'readonly',\n XMLHttpRequest: 'readonly',\n FormData: 'readonly',\n React$Element: 'readonly',\n requestAnimationFrame: 'readonly',\n\n // Node.js globals for build scripts and configuration files\n require: 'readonly',\n module: 'readonly',\n process: 'readonly',\n global: 'readonly',\n console: 'readonly',\n setTimeout: 'readonly',\n clearTimeout: 'readonly',\n setInterval: 'readonly',\n clearInterval: 'readonly',\n\n // Jest globals\n describe: 'readonly',\n test: 'readonly',\n it: 'readonly',\n jest: 'readonly',\n expect: 'readonly',\n beforeAll: 'readonly',\n beforeEach: 'readonly',\n afterAll: 'readonly',\n afterEach: 'readonly',\n },\n },\n plugins: {\n '@stylistic': stylistic,\n '@typescript-eslint': typescriptEslint,\n 'import': importPlugin,\n 'perfectionist': perfectionistPlugin,\n 'react': react,\n 'react-hooks': reactHooks,\n },\n settings: {\n react: {\n version: 'detect',\n },\n },\n rules: {\n // React rules\n 'react/react-in-jsx-scope': 'off',\n 'react/no-unknown-property': 'off',\n 'react/display-name': 'off',\n 'react/prop-types': 'off',\n\n // React Hooks\n 'react-hooks/rules-of-hooks': 'error',\n 'react-hooks/exhaustive-deps': [\n 'warn',\n {\n additionalHooks:\n '(useAnimatedStyle|useSharedValue|useAnimatedGestureHandler|useAnimatedScrollHandler|useAnimatedProps|useDerivedValue|useAnimatedRef|useAnimatedReact|useAnimatedReaction|useCallbackDebounced|useCallbackThrottled)',\n },\n ],\n\n // TypeScript rules\n '@typescript-eslint/no-explicit-any': 'off',\n '@typescript-eslint/no-unused-vars': ['error'],\n\n // Stylistic rules\n '@stylistic/semi': ['error', 'never'],\n '@stylistic/member-delimiter-style': [\n 'error',\n {\n multiline: {\n delimiter: 'none',\n requireLast: true,\n },\n singleline: {\n delimiter: 'comma',\n requireLast: false,\n },\n },\n ],\n '@stylistic/indent': [\n 'error',\n 2,\n {\n SwitchCase: 1,\n VariableDeclarator: 'first',\n ignoredNodes: ['TemplateLiteral'],\n },\n ],\n '@stylistic/quotes': ['error', 'single'],\n '@stylistic/jsx-quotes': ['error', 'prefer-single'],\n '@stylistic/comma-dangle': [\n 'error',\n {\n arrays: 'always-multiline',\n objects: 'always-multiline',\n imports: 'always-multiline',\n exports: 'never',\n functions: 'never',\n },\n ],\n '@stylistic/arrow-parens': ['error', 'as-needed'],\n '@stylistic/template-curly-spacing': 'off',\n '@stylistic/linebreak-style': ['off', 'unix'],\n '@stylistic/brace-style': ['error', '1tbs', { allowSingleLine: false }],\n '@stylistic/jsx-closing-bracket-location': ['error', 'line-aligned'],\n\n // General rules\n 'no-func-assign': 'off',\n 'no-class-assign': 'off',\n 'no-useless-escape': 'off',\n 'no-unused-vars': 'off', // Use @typescript-eslint/no-unused-vars instead\n 'no-unreachable': 'error',\n 'curly': [2, 'multi', 'consistent'],\n 'nonblock-statement-body-position': ['error', 'below'],\n\n // Perfectionist rules\n 'perfectionist/sort-imports': [\n 'error',\n {\n groups: [\n 'react',\n 'external',\n 'internal',\n ['parent', 'sibling'],\n 'index',\n ],\n customGroups: {\n value: {\n react: ['^react$', '^react-native$'],\n },\n },\n newlinesBetween: 'ignore',\n },\n ],\n 'perfectionist/sort-interfaces': 'off',\n },\n },\n {\n files: ['tests/**/*', 'src/__tests__/**/*'],\n plugins: {\n jest: jestPlugin,\n },\n rules: {\n ...jestPlugin.configs.recommended.rules,\n },\n },\n]\n" }, { "path": "example/example-expo/AccessoryBar.tsx", "content": "import React from 'react'\nimport { StyleSheet, View, useColorScheme } from 'react-native'\nimport { MaterialIcons } from '@expo/vector-icons'\nimport { RectButton } from 'react-native-gesture-handler'\n\nimport { IMessage, User } from '../../src'\nimport {\n getLocationAsync,\n pickImageAsync,\n takePictureAsync,\n} from './mediaUtils'\n\nexport default function AccessoryBar ({ onSend, isTyping, user }: { onSend: (messages: IMessage[]) => void, isTyping: () => void, user: User }) {\n const colorScheme = useColorScheme()\n const isDark = colorScheme === 'dark'\n\n const handlePickImage = async () => {\n const images = await pickImageAsync()\n if (!images)\n return\n\n const messages: IMessage[] = images.map(image => ({\n _id: Math.random().toString(36).substring(7),\n image,\n text: '',\n createdAt: new Date(),\n user,\n }))\n onSend(messages)\n }\n\n const handleTakePicture = async () => {\n const images = await takePictureAsync()\n if (!images)\n return\n\n const messages: IMessage[] = images.map(image => ({\n _id: Math.random().toString(36).substring(7),\n image,\n text: '',\n createdAt: new Date(),\n user,\n }))\n onSend(messages)\n }\n\n const handleSendLocation = async () => {\n const location = await getLocationAsync()\n if (!location)\n return\n\n const message: IMessage = {\n _id: Math.random().toString(36).substring(7),\n location,\n text: '',\n createdAt: new Date(),\n user,\n }\n onSend([message])\n }\n\n const containerColorStyle = colorScheme === 'dark' ? styles.container_dark : {}\n\n return (\n \n \n \n \n {\n isTyping()\n }}\n name='chat'\n color={isDark ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.5)'}\n />\n \n )\n}\n\nconst Button = ({\n onPress,\n size = 30,\n color = 'rgba(0,0,0,0.5)',\n name,\n}: {\n onPress: () => void\n size?: number\n color?: string\n name: React.ComponentProps['name']\n}) => (\n \n \n \n)\n\nconst styles = StyleSheet.create({\n container: {\n backgroundColor: 'white',\n flexDirection: 'row',\n justifyContent: 'space-around',\n alignItems: 'center',\n borderTopWidth: StyleSheet.hairlineWidth,\n borderTopColor: 'rgba(0,0,0,0.3)',\n paddingVertical: 5,\n },\n container_dark: {\n backgroundColor: '#1a1a1a',\n borderTopColor: 'rgba(255,255,255,0.2)',\n },\n})\n" }, { "path": "example/example-expo/CustomActions.tsx", "content": "import React, { useCallback } from 'react'\nimport {\n StyleProp,\n ViewStyle,\n TextStyle,\n StyleSheet,\n Text,\n View,\n useColorScheme,\n} from 'react-native'\nimport { useActionSheet } from '@expo/react-native-action-sheet'\nimport { RectButton } from 'react-native-gesture-handler'\nimport { IMessage, User } from '../../src'\nimport {\n getLocationAsync,\n pickImageAsync,\n takePictureAsync,\n} from './mediaUtils'\n\ninterface Props {\n renderIcon?: () => React.ReactNode\n wrapperStyle?: StyleProp\n containerStyle?: StyleProp\n iconTextStyle?: StyleProp\n onSend: (messages: IMessage[]) => void\n user: User\n}\n\nconst CustomActions = ({\n renderIcon,\n iconTextStyle,\n containerStyle,\n wrapperStyle,\n onSend,\n user,\n}: Props) => {\n const { showActionSheetWithOptions } = useActionSheet()\n const colorScheme = useColorScheme()\n\n const handlePickImage = useCallback(async () => {\n const images = await pickImageAsync()\n if (!images)\n return\n\n const messages: IMessage[] = images.map(image => ({\n _id: Math.random().toString(36).substring(7),\n image,\n text: '',\n createdAt: new Date(),\n user,\n }))\n onSend(messages)\n }, [onSend, user])\n\n const handleTakePicture = useCallback(async () => {\n const images = await takePictureAsync()\n if (!images)\n return\n\n const messages: IMessage[] = images.map(image => ({\n _id: Math.random().toString(36).substring(7),\n image,\n text: '',\n createdAt: new Date(),\n user,\n }))\n onSend(messages)\n }, [onSend, user])\n\n const handleSendLocation = useCallback(async () => {\n const location = await getLocationAsync()\n if (!location)\n return\n\n const message: IMessage = {\n _id: Math.random().toString(36).substring(7),\n location,\n text: '',\n createdAt: new Date(),\n user,\n }\n onSend([message])\n }, [onSend, user])\n\n const onActionsPress = useCallback(() => {\n const options: { title: string, action?: () => Promise }[] = [\n { title: 'Choose From Library', action: handlePickImage },\n { title: 'Take Picture', action: handleTakePicture },\n { title: 'Send Location', action: handleSendLocation },\n { title: 'Cancel' },\n ]\n const cancelButtonIndex = options.length - 1\n\n showActionSheetWithOptions(\n {\n options: options.map(o => o.title),\n cancelButtonIndex,\n },\n async buttonIndex => {\n if (buttonIndex !== undefined) {\n const selectedOption = options[buttonIndex]\n selectedOption?.action?.()\n }\n }\n )\n }, [showActionSheetWithOptions, handlePickImage, handleTakePicture, handleSendLocation])\n\n const renderIconComponent = useCallback(() => {\n if (renderIcon)\n return renderIcon()\n\n const wrapperColorStyle = colorScheme === 'dark' ? styles.wrapper_dark : {}\n const iconTextColorStyle = colorScheme === 'dark' ? styles.iconText_dark : {}\n\n return (\n \n +\n \n )\n }, [renderIcon, wrapperStyle, iconTextStyle, colorScheme])\n\n return (\n \n {renderIconComponent()}\n \n )\n}\n\nexport default CustomActions\n\nconst styles = StyleSheet.create({\n container: {\n paddingLeft: 8,\n paddingRight: 4,\n paddingVertical: 7,\n },\n wrapper: {\n width: 26,\n height: 26,\n borderRadius: 13,\n borderColor: '#b2b2b2',\n borderWidth: 2,\n alignItems: 'center',\n justifyContent: 'center',\n },\n wrapper_dark: {\n borderColor: '#666',\n },\n iconText: {\n color: '#b2b2b2',\n fontWeight: 'bold',\n fontSize: 16,\n lineHeight: 16,\n backgroundColor: 'transparent',\n textAlign: 'center',\n },\n iconText_dark: {\n color: '#999',\n },\n})\n" }, { "path": "example/example-expo/CustomView/index.tsx", "content": "import React, { useCallback } from 'react'\nimport { Platform, View, Text } from 'react-native'\nimport Constants from 'expo-constants'\nimport * as Linking from 'expo-linking'\nimport { RectButton } from 'react-native-gesture-handler'\nimport MapView from 'react-native-maps'\nimport commonStyles from '../../styles'\nimport styles from './styles'\nimport type { CustomViewProps } from './types'\n\nconst CustomView = ({\n currentMessage,\n containerStyle,\n mapViewStyle,\n}: CustomViewProps) => {\n const openMapAsync = useCallback(async () => {\n if (Platform.OS === 'web') {\n alert('Opening the map is not supported.')\n return\n }\n\n const { location } = currentMessage\n\n const url = Platform.select({\n ios: `http://maps.apple.com/?ll=${location.latitude},${location.longitude}`,\n default: `http://maps.google.com/?q=${location.latitude},${location.longitude}`,\n })\n\n try {\n const supported = await Linking.canOpenURL(url)\n if (supported)\n return Linking.openURL(url)\n\n alert('Opening the map is not supported.')\n } catch (e) {\n alert(e.message)\n }\n }, [currentMessage])\n\n if (currentMessage.location) {\n // Check if Google Maps API key is configured for Android\n const androidApiKey = Constants.expoConfig?.android?.config?.googleMaps?.apiKey\n const hasAndroidApiKey = androidApiKey && androidApiKey !== 'YOUR_GOOGLE_MAPS_API_KEY'\n const shouldShowPlaceholder = Platform.OS === 'android' && !hasAndroidApiKey\n\n // Use native MapView for iOS or Android with API key\n return (\n \n {\n shouldShowPlaceholder\n ? (\n \n Google Maps API key is not configured.\n \n ) : (\n \n )\n }\n \n )\n }\n\n return null\n}\n\nexport default CustomView\n" }, { "path": "example/example-expo/CustomView/index.web.tsx", "content": "import React, { useCallback } from 'react'\nimport {\n View,\n Text,\n} from 'react-native'\nimport { RectButton } from 'react-native-gesture-handler'\nimport styles from './styles'\nimport type { CustomViewProps } from './types'\n\nconst CustomView = ({\n currentMessage,\n containerStyle,\n}: CustomViewProps) => {\n const openMapAsync = useCallback(async () => {\n alert('Opening the map is not supported.')\n }, [])\n\n if (currentMessage.location)\n return (\n \n \n \n Maps are not supported on web, sorry!\n \n \n \n )\n\n return null\n}\n\nexport default CustomView\n" }, { "path": "example/example-expo/CustomView/styles.ts", "content": "import { StyleSheet } from 'react-native'\n\nexport default StyleSheet.create({\n mapView: {\n width: 150,\n height: 100,\n borderRadius: 13,\n alignItems: 'center',\n justifyContent: 'center',\n margin: 3,\n },\n\n text: {\n color: 'tomato',\n fontWeight: 'bold',\n },\n})\n" }, { "path": "example/example-expo/CustomView/types.ts", "content": "import { StyleProp, ViewStyle } from 'react-native'\nimport { IMessage } from '../../../src'\n\nexport interface CustomViewProps {\n currentMessage: IMessage\n containerStyle?: StyleProp\n mapViewStyle?: StyleProp\n}\n" }, { "path": "example/example-expo/data/earlierMessages.ts", "content": "import dayjs from 'dayjs'\nimport { IMessage } from 'react-native-gifted-chat'\n\nconst date = dayjs().subtract(1, 'year')\n\nexport default (): IMessage[] => [\n {\n _id: Math.round(Math.random() * 1000000),\n text:\n 'It uses the same design as React, letting you compose a rich mobile UI from declarative components https://facebook.github.io/react-native/',\n createdAt: date.toDate(),\n user: {\n _id: 1,\n name: 'Developer',\n },\n },\n {\n _id: Math.round(Math.random() * 1000000),\n text:\n 'It uses the same design as React, letting you compose a rich mobile UI from declarative components https://facebook.github.io/react-native/',\n createdAt: date.toDate(),\n user: {\n _id: 1,\n name: 'Developer',\n },\n },\n {\n _id: Math.round(Math.random() * 1000000),\n text:\n 'It uses the same design as React, letting you compose a rich mobile UI from declarative components https://facebook.github.io/react-native/',\n createdAt: date.toDate(),\n user: {\n _id: 1,\n name: 'Developer',\n },\n },\n {\n _id: Math.round(Math.random() * 1000000),\n text:\n 'It uses the same design as React, letting you compose a rich mobile UI from declarative components https://facebook.github.io/react-native/',\n createdAt: date.toDate(),\n user: {\n _id: 1,\n name: 'Developer',\n },\n },\n {\n _id: Math.round(Math.random() * 1000000),\n text: 'React Native lets you build mobile apps using only JavaScript',\n createdAt: date.toDate(),\n user: {\n _id: 1,\n name: 'Developer',\n },\n },\n {\n _id: Math.round(Math.random() * 1000000),\n text: 'React Native lets you build mobile apps using only JavaScript',\n createdAt: date.toDate(),\n user: {\n _id: 1,\n name: 'Developer',\n },\n },\n {\n _id: Math.round(Math.random() * 1000000),\n text: 'React Native lets you build mobile apps using only JavaScript',\n createdAt: date.toDate(),\n user: {\n _id: 1,\n name: 'Developer',\n },\n },\n {\n _id: Math.round(Math.random() * 1000000),\n text: 'React Native lets you build mobile apps using only JavaScript',\n createdAt: date.toDate(),\n user: {\n _id: 1,\n name: 'Developer',\n },\n },\n {\n _id: Math.round(Math.random() * 1000000),\n text: 'React Native lets you build mobile apps using only JavaScript',\n createdAt: date.toDate(),\n user: {\n _id: 1,\n name: 'Developer',\n },\n },\n {\n _id: Math.round(Math.random() * 1000000),\n text: 'React Native lets you build mobile apps using only JavaScript',\n createdAt: date.toDate(),\n user: {\n _id: 1,\n name: 'Developer',\n },\n },\n {\n _id: Math.round(Math.random() * 1000000),\n text: 'React Native lets you build mobile apps using only JavaScript',\n createdAt: date.toDate(),\n user: {\n _id: 1,\n name: 'Developer',\n },\n },\n {\n _id: Math.round(Math.random() * 1000000),\n text: 'React Native lets you build mobile apps using only JavaScript',\n createdAt: date.toDate(),\n user: {\n _id: 1,\n name: 'Developer',\n },\n },\n {\n _id: Math.round(Math.random() * 1000000),\n text: 'React Native lets you build mobile apps using only JavaScript',\n createdAt: date.toDate(),\n user: {\n _id: 1,\n name: 'Developer',\n },\n },\n {\n _id: Math.round(Math.random() * 1000000),\n text: 'This is a system message.',\n createdAt: date.toDate(),\n system: true,\n user: {\n _id: 0,\n },\n },\n]\n" }, { "path": "example/example-expo/data/messages.ts", "content": "import dayjs from 'dayjs'\nimport { IMessage } from 'react-native-gifted-chat'\n\nconst date1 = dayjs()\nconst date2 = date1.clone().subtract(1, 'day')\nconst date3 = date2.clone().subtract(1, 'week')\n\nconst messages: IMessage[] = [\n {\n text: '',\n createdAt: date3.toDate(),\n audio:\n 'https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3',\n user: {\n _id: 2,\n name: 'John Doe',\n },\n },\n {\n text: '',\n createdAt: date3.toDate(),\n video: 'https://media.giphy.com/media/3o6ZthZjk09Xx4ktZ6/giphy.mp4',\n user: {\n _id: 2,\n name: 'John Doe',\n },\n },\n {\n text: 'This is a quick reply. Do you love Gifted Chat? (checkbox)',\n createdAt: date3.toDate(),\n quickReplies: {\n type: 'checkbox', // or 'checkbox',\n values: [\n {\n title: 'Yes',\n value: 'yes',\n },\n {\n title: 'Yes, let me show you with a picture!',\n value: 'yes_picture',\n },\n {\n title: 'Nope. What?',\n value: 'no',\n },\n ],\n },\n user: {\n _id: 2,\n name: 'John Doe',\n },\n },\n {\n text: 'This is a quick reply. Do you love Gifted Chat? (radio) KEEP IT',\n createdAt: date3.toDate(),\n quickReplies: {\n type: 'radio', // or 'checkbox',\n keepIt: true,\n values: [\n {\n title: '๐Ÿ˜‹ Yes',\n value: 'yes',\n },\n {\n title:\n '๐Ÿ“ท Yes, let me show you with a picture!',\n value: 'yes_picture',\n },\n {\n title: '๐Ÿ˜ž Nope. What?',\n value: 'no',\n },\n ],\n },\n user: {\n _id: 2,\n name: 'John Doe',\n },\n },\n {\n text: 'Are you building a chat app?',\n createdAt: date3.toDate(),\n user: {\n _id: 1,\n name: 'Developer',\n },\n },\n {\n text: 'Yes, and I use #GiftedChat!',\n createdAt: date3.toDate(),\n user: {\n _id: 2,\n name: 'John Doe',\n },\n sent: true,\n received: true,\n },\n {\n text: 'Where are you?',\n createdAt: date3.toDate(),\n user: {\n _id: 1,\n name: 'Developer',\n },\n },\n {\n text: '',\n createdAt: date2.toDate(),\n user: {\n _id: 2,\n name: 'John Doe',\n },\n sent: true,\n received: true,\n location: {\n latitude: 48.864601,\n longitude: 2.398704,\n },\n },\n {\n text: 'Send me a picture!',\n createdAt: date2.toDate(),\n user: {\n _id: 1,\n name: 'Developer',\n },\n },\n {\n text: 'Paris',\n createdAt: date2.toDate(),\n user: {\n _id: 2,\n name: 'John Doe',\n },\n image:\n 'https://static.vecteezy.com/system/resources/thumbnails/003/407/768/small/eiffel-tower-at-paris-france-free-photo.jpg',\n sent: true,\n received: true,\n },\n {\n text: '#awesome',\n createdAt: date1.toDate(),\n user: {\n _id: 1,\n name: 'Developer',\n },\n },\n {\n text: '#awesome 2',\n createdAt: date1.toDate(),\n user: {\n _id: 1,\n name: 'Developer',\n },\n sent: true,\n received: true,\n },\n {\n text: '#awesome 3',\n createdAt: date1.toDate(),\n user: {\n _id: 1,\n name: 'Developer',\n },\n sent: true,\n received: true,\n },\n {\n text: 'Hi',\n createdAt: date1.toDate(),\n user: {\n _id: 1,\n name: 'Developer',\n },\n sent: true,\n received: true,\n },\n {\n text: '๐Ÿ‘‹',\n createdAt: date1.toDate(),\n user: {\n _id: 1,\n name: 'Developer',\n },\n sent: true,\n received: true,\n },\n].map((message, index) => ({\n ...message,\n _id: index + 1,\n})).reverse()\n\nexport default messages\n" }, { "path": "example/example-expo/mediaUtils.ts", "content": "import * as ImagePicker from 'expo-image-picker'\n\nimport { getCurrentPositionAsync, LocationObjectCoords, requestForegroundPermissionsAsync } from 'expo-location'\n\nexport async function getLocationAsync (): Promise {\n const response = await requestForegroundPermissionsAsync()\n if (!response.granted)\n return\n\n const location = await getCurrentPositionAsync()\n if (!location)\n return\n\n return location.coords\n}\n\nexport async function pickImageAsync (): Promise {\n const response = await ImagePicker.requestMediaLibraryPermissionsAsync()\n if (!response.granted)\n return\n\n const result = await ImagePicker.launchImageLibraryAsync({\n allowsEditing: true,\n aspect: [4, 3],\n })\n\n if (result.canceled)\n return\n\n return result.assets.map(({ uri }) => uri)\n}\n\nexport async function takePictureAsync (): Promise {\n const response = await ImagePicker.requestCameraPermissionsAsync()\n if (!response.granted)\n return\n\n const result = await ImagePicker.launchCameraAsync({\n allowsEditing: true,\n aspect: [4, 3],\n })\n\n if (result.canceled)\n return\n\n return result.assets.map(({ uri }) => uri)\n}\n" }, { "path": "example/example-gifted-chat/README.md", "content": "# example-gifted-chat\n\nLots of people using `react-native-gifted-chat` might want to know that...\n\n1. There are so many render props could use, but what should I pass?\n2. How could I customize each component, but leaving its functionality.\n\n> For example, said that you want to customize the `send button`, when you pass your own component to `renderSend`, after that you will lose the functionality of clean up text when a message has been sent.\n\n---\n\nI made this for anyone who wants to know how to use the render Props properly.\n\n##### Such as:\n\n- renderInputToolbar\n- renderActions\n- renderComposer\n- renderSend\n- renderAvatar\n- renderBubble\n- renderSystemMessage\n- renderMessage\n- renderMessageText\n- renderCustomView\n\n\"Example" }, { "path": "example/example-gifted-chat/src/Chats.tsx", "content": "import React, { useState, useEffect } from 'react'\nimport { useColorScheme } from 'react-native'\nimport { GiftedChat, IMessage } from 'react-native-gifted-chat'\nimport { useKeyboardVerticalOffset } from '../../hooks/useKeyboardVerticalOffset'\nimport {\n renderAvatar,\n renderBubble,\n renderSystemMessage,\n renderMessage,\n renderMessageText,\n renderCustomView,\n} from './customComponents'\nimport { RenderInputToolbar, RenderActions, RenderComposer, RenderSend } from './InputToolbar'\nimport initialMessages from './messages'\n\nconst Chats = () => {\n const [text, setText] = useState('')\n const [messages, setMessages] = useState([])\n const colorScheme = useColorScheme()\n const isDark = colorScheme === 'dark'\n const keyboardVerticalOffset = useKeyboardVerticalOffset()\n\n useEffect(() => {\n setMessages(initialMessages.reverse())\n }, [])\n\n const onSend = (newMessages: IMessage[] = []) => {\n setMessages(prevMessages => GiftedChat.append(prevMessages, newMessages))\n }\n\n return (\n \n )\n}\n\nexport default Chats\n" }, { "path": "example/example-gifted-chat/src/InputToolbar.tsx", "content": "import React from 'react'\nimport { Image, useColorScheme } from 'react-native'\nimport {\n InputToolbar,\n Actions,\n Composer,\n Send,\n IMessage,\n InputToolbarProps,\n ActionsProps,\n ComposerProps,\n SendProps,\n} from 'react-native-gifted-chat'\n\n// These are React components (not render functions) so they can use hooks\nexport const RenderInputToolbar = React.memo((props: InputToolbarProps) => {\n const colorScheme = useColorScheme()\n const isDark = colorScheme === 'dark'\n\n return (\n \n )\n})\n\nexport const RenderActions = React.memo((props: ActionsProps) => {\n const colorScheme = useColorScheme()\n const isDark = colorScheme === 'dark'\n\n return (\n (\n \n )}\n options={{\n 'Choose From Library': () => {\n console.log('Choose From Library')\n },\n Cancel: () => {\n console.log('Cancel')\n },\n }}\n optionTintColor={isDark ? '#ffffff' : '#222B45'}\n />\n )\n})\n\nexport const RenderComposer = React.memo((props: ComposerProps) => {\n const colorScheme = useColorScheme()\n const isDark = colorScheme === 'dark'\n\n return (\n \n )\n})\n\nexport const RenderSend = React.memo((props: SendProps) => (\n \n \n \n))\n" }, { "path": "example/example-gifted-chat/src/customComponents.tsx", "content": "import React from 'react'\nimport { View, Text } from 'react-native'\nimport {\n Avatar,\n Bubble,\n SystemMessage,\n Message,\n MessageText,\n IMessage,\n User,\n AvatarProps,\n BubbleProps,\n SystemMessageProps,\n MessageProps,\n MessageTextProps,\n} from 'react-native-gifted-chat'\n\nexport const renderAvatar = (props: AvatarProps) => (\n \n)\n\nexport const renderBubble = (props: BubbleProps) => (\n Time}\n // renderTicks={() => Ticks}\n containerStyle={{\n left: { borderColor: 'teal', borderWidth: 8 },\n }}\n wrapperStyle={{\n left: { borderColor: 'tomato', borderWidth: 4 },\n }}\n bottomContainerStyle={{\n left: { borderColor: 'purple', borderWidth: 4 },\n }}\n usernameStyle={{ color: 'tomato', fontWeight: '100' }}\n containerToNextStyle={{\n left: { borderColor: 'navy', borderWidth: 4 },\n }}\n containerToPreviousStyle={{\n left: { borderColor: 'mediumorchid', borderWidth: 4 },\n }}\n />\n)\n\nexport const renderSystemMessage = (props: SystemMessageProps) => (\n \n)\n\nexport const renderMessage = (props: MessageProps) => (\n Date}\n containerStyle={{\n left: { backgroundColor: 'lime' },\n right: { backgroundColor: 'gold' },\n }}\n />\n)\n\nexport const renderMessageText = (props: MessageTextProps) => (\n \n)\n\ninterface CustomViewProps {\n user: User\n}\n\nexport const renderCustomView = ({ user }: CustomViewProps) => (\n \n \n Current user:\n {user.name}\n \n From CustomView\n \n)\n" }, { "path": "example/example-gifted-chat/src/messages.ts", "content": "import { IMessage } from 'react-native-gifted-chat'\n\nconst messages: IMessage[] = [\n {\n text: `Hello this is an example of the ParsedText, links like http://www.google.com or http://www.facebook.com are clickable and phone number 444-555-6666 can call too.\n But you can also do more with this package, for example Bob will change style and David too. foo@gmail.com\n And the magic number is 42!\n #react #react-native`,\n createdAt: new Date(Date.UTC(2016, 5, 13, 17, 20, 0)),\n user: {\n _id: 1,\n name: 'John Doe',\n avatar: 'https://placeimg.com/140/140/any',\n },\n },\n {\n text: 'Come on!',\n createdAt: new Date(Date.UTC(2016, 5, 15, 18, 20, 0)),\n user: {\n _id: 2,\n name: 'John Doe',\n avatar: 'https://placeimg.com/140/140/any',\n },\n },\n {\n text: 'This is a quick reply. Do you love Gifted Chat? (checkbox)',\n createdAt: new Date(Date.UTC(2016, 5, 15, 17, 20, 0)),\n user: {\n _id: 2,\n name: 'John Doe',\n avatar: 'https://placeimg.com/140/140/any',\n },\n quickReplies: {\n type: 'checkbox', // or 'radio',\n values: [\n {\n title: 'Yes',\n value: 'yes',\n },\n {\n title: 'Yes, let me show you with a picture!',\n value: 'yes_picture',\n },\n {\n title: 'Nope. What?',\n value: 'no',\n },\n ],\n },\n },\n {\n text: 'This is a quick reply. Do you love Gifted Chat? (radio) KEEP IT',\n createdAt: new Date(Date.UTC(2016, 5, 14, 17, 20, 0)),\n user: {\n _id: 2,\n name: 'John Doe',\n avatar: 'https://placeimg.com/140/140/any',\n },\n quickReplies: {\n type: 'radio', // or 'checkbox',\n keepIt: true,\n values: [\n {\n title: '๐Ÿ˜‹ Yes',\n value: 'yes',\n },\n {\n title: '๐Ÿ“ท Yes, let me show you with a picture!',\n value: 'yes_picture',\n },\n {\n title: '๐Ÿ˜ž Nope. What?',\n value: 'no',\n },\n ],\n },\n },\n {\n text: 'Hi! I work from home today!',\n createdAt: new Date(Date.UTC(2016, 5, 13, 17, 20, 0)),\n user: {\n _id: 1,\n name: 'John Doe',\n avatar: 'https://placeimg.com/140/140/any',\n },\n image: 'https://placeimg.com/960/540/any',\n },\n {\n text: 'Hello developer',\n createdAt: new Date(Date.UTC(2016, 5, 12, 17, 20, 0)),\n user: {\n _id: 2,\n name: 'John Doe',\n avatar: 'https://placeimg.com/140/140/any',\n },\n },\n {\n text: 'This is a system message',\n createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),\n system: true,\n user: {\n _id: 0,\n },\n },\n].map((message, index) => ({\n ...message,\n _id: index + 1,\n})).reverse()\n\nexport default messages\n" }, { "path": "example/example-slack-message/README.md", "content": "# \"Slack\" style UI example\n\nCredit and inspiration comes from [Slack](https://slack.com/).\n\nScreenshots to compare:\n\n| Default style | \"Slack\" style |\n|:-------------:|:-------------:|\n| \"Example | \"Example |\n" }, { "path": "example/example-slack-message/src/SlackBubble.tsx", "content": "import React, { useCallback, useMemo } from 'react'\nimport {\n Text,\n StyleSheet,\n View,\n Platform,\n StyleProp,\n ViewStyle,\n TextStyle,\n} from 'react-native'\nimport * as Clipboard from 'expo-clipboard'\nimport { RectButton } from 'react-native-gesture-handler'\nimport {\n MessageText,\n MessageImage,\n Time,\n utils,\n useChatContext,\n IMessage,\n User,\n} from 'react-native-gifted-chat'\n\nconst { isSameUser, isSameDay } = utils\n\ninterface Props {\n touchableProps: object\n onLongPress?: (context: unknown, currentMessage: object) => void\n renderMessageImage?: (props: Props) => React.ReactNode\n renderMessageText?: (props: Props) => React.ReactNode\n renderCustomView?: (props: Props) => React.ReactNode\n renderUsername?: (props: Props) => React.ReactNode\n renderTime?: (props: Props) => React.ReactNode\n renderTicks?: (currentMessage: IMessage) => React.ReactNode\n currentMessage: IMessage\n nextMessage: IMessage\n previousMessage: IMessage\n user: User\n containerStyle?: {\n left?: StyleProp\n right?: StyleProp\n }\n wrapperStyle?: {\n left?: StyleProp\n right?: StyleProp\n }\n messageTextStyle: StyleProp\n usernameStyle: StyleProp\n tickStyle: StyleProp\n containerToNextStyle: {\n left: StyleProp\n right: StyleProp\n }\n containerToPreviousStyle: {\n left: StyleProp\n right: StyleProp\n }\n imageStyle?: StyleProp\n textStyle?: StyleProp\n position: 'left' | 'right'\n}\n\nconst Bubble = (props: Props) => {\n const {\n touchableProps,\n onLongPress,\n renderCustomView,\n currentMessage,\n previousMessage,\n user,\n containerStyle,\n wrapperStyle,\n usernameStyle,\n tickStyle,\n position,\n } = props\n\n const context = useChatContext()\n\n const handleLongPress = useCallback(() => {\n if (onLongPress) {\n onLongPress(context, currentMessage)\n return\n }\n\n if (!currentMessage.text)\n return\n\n const options = ['Copy Text', 'Cancel']\n const cancelButtonIndex = options.length - 1\n context.actionSheet().showActionSheetWithOptions(\n {\n options,\n cancelButtonIndex,\n },\n (buttonIndex?: number) => {\n switch (buttonIndex) {\n case 0:\n Clipboard.setStringAsync(currentMessage.text)\n break\n }\n }\n )\n }, [context, currentMessage, onLongPress])\n\n const renderMessageText = useCallback(() => {\n if (currentMessage.text) {\n if (props.renderMessageText)\n return props.renderMessageText(props)\n\n return (\n \n )\n }\n\n return null\n }, [currentMessage.text, props])\n\n const renderMessageImage = useCallback(() => {\n if (currentMessage.image) {\n if (props.renderMessageImage)\n return props.renderMessageImage(props)\n\n return (\n \n )\n }\n\n return null\n }, [currentMessage.image, props])\n\n const renderTicks = useCallback(() => {\n const { currentMessage } = props\n\n if (props.renderTicks)\n return props.renderTicks(currentMessage)\n\n if (currentMessage.user._id !== user._id)\n return null\n\n if (currentMessage.sent || currentMessage.received)\n return (\n \n {currentMessage.sent && (\n \n โœ“\n \n )}\n {currentMessage.received && (\n \n โœ“\n \n )}\n \n )\n\n return null\n }, [props, tickStyle, user._id])\n\n const renderUsername = useCallback(() => {\n const username = currentMessage.user.name\n if (username) {\n if (props.renderUsername)\n return props.renderUsername(props)\n\n return (\n \n {username}\n \n )\n }\n return null\n }, [currentMessage.user.name, props, usernameStyle])\n\n const renderTime = useCallback(() => {\n if (currentMessage.createdAt) {\n if (props.renderTime)\n return props.renderTime(props)\n\n return (\n \n )\n }\n\n return null\n }, [currentMessage.createdAt, props])\n\n const isSameThread = useMemo(() =>\n isSameUser(currentMessage, previousMessage) &&\n isSameDay(currentMessage, previousMessage)\n , [currentMessage, previousMessage])\n\n const messageHeader = useMemo(() => {\n if (isSameThread)\n return null\n\n return (\n \n {renderUsername()}\n {renderTime()}\n {renderTicks()}\n \n )\n }, [isSameThread, renderUsername, renderTime, renderTicks])\n\n return (\n \n \n \n \n {renderCustomView?.(props)}\n {messageHeader}\n {renderMessageImage()}\n {renderMessageText()}\n \n \n \n \n )\n}\n\n// Note: Everything is forced to be \"left\" positioned with this component.\n// The \"right\" position is only used in the default Bubble.\nconst styles = StyleSheet.create({\n standardFont: {\n fontSize: 15,\n },\n slackMessageText: {\n marginLeft: 0,\n marginRight: 0,\n },\n container: {\n flex: 1,\n alignItems: 'flex-start',\n },\n wrapper: {\n marginRight: 60,\n minHeight: 20,\n justifyContent: 'flex-end',\n },\n username: {\n fontWeight: 'bold',\n },\n time: {\n textAlign: 'left',\n fontSize: 12,\n },\n timeContainer: {\n marginLeft: 0,\n marginRight: 0,\n marginBottom: 0,\n },\n headerItem: {\n marginRight: 10,\n },\n headerView: {\n // Try to align it better with the avatar on Android.\n marginTop: Platform.OS === 'android' ? -2 : 0,\n flexDirection: 'row',\n alignItems: 'baseline',\n },\n tick: {\n backgroundColor: 'transparent',\n color: 'white',\n },\n tickView: {\n flexDirection: 'row',\n },\n slackImage: {\n borderRadius: 3,\n marginLeft: 0,\n marginRight: 0,\n },\n})\n\nexport default Bubble\n" }, { "path": "example/example-slack-message/src/SlackMessage.tsx", "content": "import React, { useCallback, useMemo } from 'react'\nimport {\n View,\n StyleSheet,\n StyleProp,\n ViewStyle,\n} from 'react-native'\n\nimport { Avatar, Day, utils } from 'react-native-gifted-chat'\nimport type { DayProps, BubbleProps, AvatarProps, IMessage } from 'react-native-gifted-chat'\nimport Bubble from './SlackBubble'\n\nconst { isSameUser, isSameDay } = utils\n\ninterface Props {\n renderAvatar?: (props: AvatarProps) => void\n renderBubble?: (props: BubbleProps) => void\n renderDay?: (props: DayProps) => void\n currentMessage: any\n nextMessage?: any\n previousMessage?: any\n containerStyle?: {\n left: StyleProp\n right: StyleProp\n }\n}\n\nconst Message = (props: Props) => {\n const {\n currentMessage,\n nextMessage,\n previousMessage,\n containerStyle,\n } = props\n\n const getInnerComponentProps = useCallback(() => {\n return {\n ...props,\n position: 'left',\n isSameUser,\n isSameDay,\n containerStyle: props.containerStyle?.left,\n }\n }, [props])\n\n const renderDay = useCallback(() => {\n if (currentMessage.createdAt) {\n const dayProps = getInnerComponentProps()\n\n if (props.renderDay)\n return props.renderDay(dayProps)\n\n return \n }\n\n return null\n }, [currentMessage.createdAt, getInnerComponentProps, props])\n\n const renderBubble = useCallback(() => {\n const bubbleProps = getInnerComponentProps()\n\n if (props.renderBubble)\n return props.renderBubble(bubbleProps)\n\n return \n }, [getInnerComponentProps, props])\n\n const renderAvatar = useCallback(() => {\n let extraStyle\n if (\n isSameUser(currentMessage, previousMessage) &&\n isSameDay(currentMessage, previousMessage)\n )\n // Set the invisible avatar height to 0, but keep the width, padding, etc.\n extraStyle = { height: 0 }\n\n const avatarProps = getInnerComponentProps()\n\n if (props.renderAvatar)\n return props.renderAvatar(avatarProps)\n\n return (\n \n )\n }, [currentMessage, previousMessage, getInnerComponentProps, props])\n\n const marginBottom = useMemo(() =>\n isSameUser(\n currentMessage,\n nextMessage\n )\n ? 2\n : 10\n , [currentMessage, nextMessage])\n\n return (\n \n {renderDay()}\n \n {renderAvatar()}\n {renderBubble()}\n \n \n )\n}\n\nexport default Message\n\nconst styles = StyleSheet.create({\n container: {\n flexDirection: 'row',\n alignItems: 'flex-end',\n justifyContent: 'flex-start',\n marginLeft: 8,\n marginRight: 0,\n },\n slackAvatar: {\n // The bottom should roughly line up with the first line of message text.\n height: 40,\n width: 40,\n borderRadius: 3,\n },\n})\n" }, { "path": "example/hooks/use-color-scheme.ts", "content": "export { useColorScheme } from 'react-native'\n" }, { "path": "example/hooks/use-color-scheme.web.ts", "content": "import { useEffect, useState } from 'react'\nimport { useColorScheme as useRNColorScheme } from 'react-native'\n\n/**\n * To support static rendering, this value needs to be re-calculated on the client side for web\n */\nexport function useColorScheme () {\n const [hasHydrated, setHasHydrated] = useState(false)\n\n useEffect(() => {\n setHasHydrated(true)\n }, [])\n\n const colorScheme = useRNColorScheme()\n\n if (hasHydrated)\n return colorScheme\n\n return 'light'\n}\n" }, { "path": "example/hooks/use-theme-color.ts", "content": "/**\n * Learn more about light and dark modes:\n * https://docs.expo.dev/guides/color-schemes/\n */\n\nimport { Colors } from '@/constants/theme'\nimport { useColorScheme } from '@/hooks/use-color-scheme'\n\nexport function useThemeColor (\n props: { light?: string, dark?: string },\n colorName: keyof typeof Colors.light & keyof typeof Colors.dark\n) {\n const theme = useColorScheme() ?? 'light'\n const colorFromProps = props[theme]\n\n if (colorFromProps)\n return colorFromProps\n else\n return Colors[theme][colorName]\n}\n" }, { "path": "example/hooks/useKeyboardVerticalOffset.ts", "content": "import { useHeaderHeight } from '@react-navigation/elements'\n\n/**\n * Hook to get the correct keyboardVerticalOffset for GiftedChat.\n *\n * The offset equals the distance from the screen top to the GiftedChat container top.\n * Uses useHeaderHeight() which includes status bar + navigation header height on iOS.\n *\n * Note: This hook requires the component to be rendered inside a proper navigation screen\n * (not conditional rendering). If useHeaderHeight returns 0, ensure your chat screen\n * is a real navigation screen with a visible header.\n *\n * @returns {number} keyboardVerticalOffset to pass to keyboardAvoidingViewProps\n */\nexport function useKeyboardVerticalOffset () {\n // useHeaderHeight() returns status bar + navigation header height on iOS\n return useHeaderHeight()\n}\n" }, { "path": "example/ios/.gitignore", "content": "# OSX\n#\n.DS_Store\n\n# Xcode\n#\nbuild/\n*.pbxuser\n!default.pbxuser\n*.mode1v3\n!default.mode1v3\n*.mode2v3\n!default.mode2v3\n*.perspectivev3\n!default.perspectivev3\nxcuserdata\n*.xccheckout\n*.moved-aside\nDerivedData\n*.hmap\n*.ipa\n*.xcuserstate\nproject.xcworkspace\n.xcode.env.local\n\n# Bundle artifacts\n*.jsbundle\n\n# CocoaPods\n/Pods/\n" }, { "path": "example/ios/.xcode.env", "content": "# This `.xcode.env` file is versioned and is used to source the environment\n# used when running script phases inside Xcode.\n# To customize your local environment, you can create an `.xcode.env.local`\n# file that is not versioned.\n\n# NODE_BINARY variable contains the PATH to the node executable.\n#\n# Customize the NODE_BINARY variable here.\n# For example, to use nvm with brew, add the following line\n# . \"$(brew --prefix nvm)/nvm.sh\" --no-use\nexport NODE_BINARY=$(command -v node)\n" }, { "path": "example/ios/Podfile", "content": "require File.join(File.dirname(`node --print \"require.resolve('expo/package.json')\"`), \"scripts/autolinking\")\nrequire File.join(File.dirname(`node --print \"require.resolve('react-native/package.json')\"`), \"scripts/react_native_pods\")\n\nrequire 'json'\npodfile_properties = JSON.parse(File.read(File.join(__dir__, 'Podfile.properties.json'))) rescue {}\n\ndef ccache_enabled?(podfile_properties)\n # Environment variable takes precedence\n return ENV['USE_CCACHE'] == '1' if ENV['USE_CCACHE']\n \n # Fall back to Podfile properties\n podfile_properties['apple.ccacheEnabled'] == 'true'\nend\n\nENV['RCT_NEW_ARCH_ENABLED'] ||= '0' if podfile_properties['newArchEnabled'] == 'false'\nENV['EX_DEV_CLIENT_NETWORK_INSPECTOR'] ||= podfile_properties['EX_DEV_CLIENT_NETWORK_INSPECTOR']\nENV['RCT_USE_RN_DEP'] ||= '1' if podfile_properties['ios.buildReactNativeFromSource'] != 'true' && podfile_properties['newArchEnabled'] != 'false'\nENV['RCT_USE_PREBUILT_RNCORE'] ||= '1' if podfile_properties['ios.buildReactNativeFromSource'] != 'true' && podfile_properties['newArchEnabled'] != 'false'\nplatform :ios, podfile_properties['ios.deploymentTarget'] || '15.1'\n\nprepare_react_native_project!\n\ntarget 'example' do\n use_expo_modules!\n\n if ENV['EXPO_USE_COMMUNITY_AUTOLINKING'] == '1'\n config_command = ['node', '-e', \"process.argv=['', '', 'config'];require('@react-native-community/cli').run()\"];\n else\n config_command = [\n 'node',\n '--no-warnings',\n '--eval',\n 'require(\\'expo/bin/autolinking\\')',\n 'expo-modules-autolinking',\n 'react-native-config',\n '--json',\n '--platform',\n 'ios'\n ]\n end\n\n# @generated begin react-native-maps - expo prebuild (DO NOT MODIFY) sync-e9cc66c360abe50bc66d89fffb3c55b034d7d369\n pod 'react-native-google-maps', path: File.dirname(`node --print \"require.resolve('react-native-maps/package.json')\"`)\n# @generated end react-native-maps\n config = use_native_modules!(config_command)\n\n use_frameworks! :linkage => podfile_properties['ios.useFrameworks'].to_sym if podfile_properties['ios.useFrameworks']\n use_frameworks! :linkage => ENV['USE_FRAMEWORKS'].to_sym if ENV['USE_FRAMEWORKS']\n\n use_react_native!(\n :path => config[:reactNativePath],\n :hermes_enabled => podfile_properties['expo.jsEngine'] == nil || podfile_properties['expo.jsEngine'] == 'hermes',\n # An absolute path to your application root.\n :app_path => \"#{Pod::Config.instance.installation_root}/..\",\n :privacy_file_aggregation_enabled => podfile_properties['apple.privacyManifestAggregationEnabled'] != 'false',\n )\n\n post_install do |installer|\n react_native_post_install(\n installer,\n config[:reactNativePath],\n :mac_catalyst_enabled => false,\n :ccache_enabled => ccache_enabled?(podfile_properties),\n )\n end\nend\n" }, { "path": "example/ios/Podfile.properties.json", "content": "{\n \"expo.jsEngine\": \"hermes\",\n \"EX_DEV_CLIENT_NETWORK_INSPECTOR\": \"true\",\n \"newArchEnabled\": \"true\"\n}\n" }, { "path": "example/ios/example/Images.xcassets/AppIcon.appiconset/Contents.json", "content": "{\n \"images\": [\n {\n \"filename\": \"App-Icon-1024x1024@1x.png\",\n \"idiom\": \"universal\",\n \"platform\": \"ios\",\n \"size\": \"1024x1024\"\n }\n ],\n \"info\": {\n \"version\": 1,\n \"author\": \"expo\"\n }\n}" }, { "path": "example/ios/example/Images.xcassets/Contents.json", "content": "{\n \"info\" : {\n \"version\" : 1,\n \"author\" : \"expo\"\n }\n}\n" }, { "path": "example/ios/example/Info.plist", "content": "\n\n\n \n CADisableMinimumFrameDurationOnPhone\n \n CFBundleDevelopmentRegion\n $(DEVELOPMENT_LANGUAGE)\n CFBundleDisplayName\n example\n CFBundleExecutable\n $(EXECUTABLE_NAME)\n CFBundleIdentifier\n $(PRODUCT_BUNDLE_IDENTIFIER)\n CFBundleInfoDictionaryVersion\n 6.0\n CFBundleName\n $(PRODUCT_NAME)\n CFBundlePackageType\n $(PRODUCT_BUNDLE_PACKAGE_TYPE)\n CFBundleShortVersionString\n 1.0.0\n CFBundleSignature\n ????\n CFBundleURLTypes\n \n \n CFBundleURLSchemes\n \n example\n com.anonymous.example\n \n \n \n CFBundleVersion\n 1\n GMSApiKey\n YOUR_GOOGLE_MAPS_API_KEY\n LSMinimumSystemVersion\n 12.0\n LSRequiresIPhoneOS\n \n NSAppTransportSecurity\n \n NSAllowsArbitraryLoads\n \n NSAllowsLocalNetworking\n \n \n NSCameraUsageDescription\n Allow $(PRODUCT_NAME) to access your camera\n NSLocationAlwaysAndWhenInUseUsageDescription\n Allow $(PRODUCT_NAME) to access your location\n NSLocationAlwaysUsageDescription\n Allow $(PRODUCT_NAME) to access your location\n NSLocationWhenInUseUsageDescription\n Allow $(PRODUCT_NAME) to access your location\n NSMicrophoneUsageDescription\n Allow $(PRODUCT_NAME) to access your microphone\n NSPhotoLibraryUsageDescription\n Allow $(PRODUCT_NAME) to access your photos\n NSUserActivityTypes\n \n $(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route\n \n RCTNewArchEnabled\n \n UILaunchStoryboardName\n SplashScreen\n UIRequiredDeviceCapabilities\n \n arm64\n \n UIRequiresFullScreen\n \n UIStatusBarStyle\n UIStatusBarStyleDefault\n UISupportedInterfaceOrientations\n \n UIInterfaceOrientationPortrait\n UIInterfaceOrientationPortraitUpsideDown\n \n UISupportedInterfaceOrientations~ipad\n \n UIInterfaceOrientationPortrait\n UIInterfaceOrientationPortraitUpsideDown\n UIInterfaceOrientationLandscapeLeft\n UIInterfaceOrientationLandscapeRight\n \n UIUserInterfaceStyle\n Automatic\n UIViewControllerBasedStatusBarAppearance\n \n \n" }, { "path": "example/ios/example/PrivacyInfo.xcprivacy", "content": "\n\n\n\n\tNSPrivacyAccessedAPITypes\n\t\n\t\t\n\t\t\tNSPrivacyAccessedAPIType\n\t\t\tNSPrivacyAccessedAPICategoryUserDefaults\n\t\t\tNSPrivacyAccessedAPITypeReasons\n\t\t\t\n\t\t\t\tCA92.1\n\t\t\t\n\t\t\n\t\t\n\t\t\tNSPrivacyAccessedAPIType\n\t\t\tNSPrivacyAccessedAPICategoryFileTimestamp\n\t\t\tNSPrivacyAccessedAPITypeReasons\n\t\t\t\n\t\t\t\t0A2A.1\n\t\t\t\t3B52.1\n\t\t\t\tC617.1\n\t\t\t\n\t\t\n\t\t\n\t\t\tNSPrivacyAccessedAPIType\n\t\t\tNSPrivacyAccessedAPICategoryDiskSpace\n\t\t\tNSPrivacyAccessedAPITypeReasons\n\t\t\t\n\t\t\t\tE174.1\n\t\t\t\t85F4.1\n\t\t\t\n\t\t\n\t\t\n\t\t\tNSPrivacyAccessedAPIType\n\t\t\tNSPrivacyAccessedAPICategorySystemBootTime\n\t\t\tNSPrivacyAccessedAPITypeReasons\n\t\t\t\n\t\t\t\t35F9.1\n\t\t\t\n\t\t\n\t\n\tNSPrivacyCollectedDataTypes\n\t\n\tNSPrivacyTracking\n\t\n\n\n" }, { "path": "example/ios/example/SplashScreen.storyboard", "content": "\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n" }, { "path": "example/ios/example/Supporting/Expo.plist", "content": "\n\n\n \n EXUpdatesCheckOnLaunch\n ALWAYS\n EXUpdatesEnabled\n \n EXUpdatesLaunchWaitMs\n 0\n \n" }, { "path": "example/ios/example.xcodeproj/project.pbxproj", "content": "// !$*UTF8*$!\n{\n\tarchiveVersion = 1;\n\tclasses = {\n\t};\n\tobjectVersion = 54;\n\tobjects = {\n\n/* Begin PBXBuildFile section */\n\t\t0EB4AC0857AAFB0D77472CBD /* libPods-example.a in Frameworks */ = {isa = PBXBuildFile; fileRef = B945C814238A5FEBE89E96F5 /* libPods-example.a */; };\n\t\t13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };\n\t\t3E461D99554A48A4959DE609 /* SplashScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = AA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */; };\n\t\t95774C49D12665FBD013B7B6 /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = 1F72D30C6AB981B0917D041F /* PrivacyInfo.xcprivacy */; };\n\t\tBB2F792D24A3F905000567C9 /* Expo.plist in Resources */ = {isa = PBXBuildFile; fileRef = BB2F792C24A3F905000567C9 /* Expo.plist */; };\n\t\tD2455EE1B33CDCC769A93446 /* ExpoModulesProvider.swift in Sources */ = {isa = PBXBuildFile; fileRef = A9A038F507BB039A5B209DF9 /* ExpoModulesProvider.swift */; };\n\t\tF11748422D0307B40044C1D9 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = F11748412D0307B40044C1D9 /* AppDelegate.swift */; };\n/* End PBXBuildFile section */\n\n/* Begin PBXFileReference section */\n\t\t13B07F961A680F5B00A75B9A /* example.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = example.app; sourceTree = BUILT_PRODUCTS_DIR; };\n\t\t13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = example/Images.xcassets; sourceTree = \"\"; };\n\t\t13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = example/Info.plist; sourceTree = \"\"; };\n\t\t1F72D30C6AB981B0917D041F /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; includeInIndex = 1; name = PrivacyInfo.xcprivacy; path = example/PrivacyInfo.xcprivacy; sourceTree = \"\"; };\n\t\t2C6A65C7C222B5FD1DFFEB3D /* Pods-example.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = \"Pods-example.debug.xcconfig\"; path = \"Target Support Files/Pods-example/Pods-example.debug.xcconfig\"; sourceTree = \"\"; };\n\t\t5ACC43DD9EC8D36FFB24F025 /* Pods-example.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = \"Pods-example.release.xcconfig\"; path = \"Target Support Files/Pods-example/Pods-example.release.xcconfig\"; sourceTree = \"\"; };\n\t\tA9A038F507BB039A5B209DF9 /* ExpoModulesProvider.swift */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = sourcecode.swift; name = ExpoModulesProvider.swift; path = \"Pods/Target Support Files/Pods-example/ExpoModulesProvider.swift\"; sourceTree = \"\"; };\n\t\tAA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = SplashScreen.storyboard; path = example/SplashScreen.storyboard; sourceTree = \"\"; };\n\t\tB945C814238A5FEBE89E96F5 /* libPods-example.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = \"libPods-example.a\"; sourceTree = BUILT_PRODUCTS_DIR; };\n\t\tBB2F792C24A3F905000567C9 /* Expo.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = Expo.plist; sourceTree = \"\"; };\n\t\tED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };\n\t\tF11748412D0307B40044C1D9 /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = AppDelegate.swift; path = example/AppDelegate.swift; sourceTree = \"\"; };\n\t\tF11748442D0722820044C1D9 /* example-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; name = \"example-Bridging-Header.h\"; path = \"example/example-Bridging-Header.h\"; sourceTree = \"\"; };\n/* End PBXFileReference section */\n\n/* Begin PBXFrameworksBuildPhase section */\n\t\t13B07F8C1A680F5B00A75B9A /* Frameworks */ = {\n\t\t\tisa = PBXFrameworksBuildPhase;\n\t\t\tbuildActionMask = 2147483647;\n\t\t\tfiles = (\n\t\t\t\t0EB4AC0857AAFB0D77472CBD /* libPods-example.a in Frameworks */,\n\t\t\t);\n\t\t\trunOnlyForDeploymentPostprocessing = 0;\n\t\t};\n/* End PBXFrameworksBuildPhase section */\n\n/* Begin PBXGroup section */\n\t\t13B07FAE1A68108700A75B9A /* example */ = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\n\t\t\t\tF11748412D0307B40044C1D9 /* AppDelegate.swift */,\n\t\t\t\tF11748442D0722820044C1D9 /* example-Bridging-Header.h */,\n\t\t\t\tBB2F792B24A3F905000567C9 /* Supporting */,\n\t\t\t\t13B07FB51A68108700A75B9A /* Images.xcassets */,\n\t\t\t\t13B07FB61A68108700A75B9A /* Info.plist */,\n\t\t\t\tAA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */,\n\t\t\t\t1F72D30C6AB981B0917D041F /* PrivacyInfo.xcprivacy */,\n\t\t\t);\n\t\t\tname = example;\n\t\t\tsourceTree = \"\";\n\t\t};\n\t\t2D16E6871FA4F8E400B85C8A /* Frameworks */ = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\n\t\t\t\tED297162215061F000B7C4FE /* JavaScriptCore.framework */,\n\t\t\t\tB945C814238A5FEBE89E96F5 /* libPods-example.a */,\n\t\t\t);\n\t\t\tname = Frameworks;\n\t\t\tsourceTree = \"\";\n\t\t};\n\t\t73C3B28C69CD6BB9738FA204 /* example */ = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\n\t\t\t\tA9A038F507BB039A5B209DF9 /* ExpoModulesProvider.swift */,\n\t\t\t);\n\t\t\tname = example;\n\t\t\tsourceTree = \"\";\n\t\t};\n\t\t832341AE1AAA6A7D00B99B32 /* Libraries */ = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\n\t\t\t);\n\t\t\tname = Libraries;\n\t\t\tsourceTree = \"\";\n\t\t};\n\t\t83CBB9F61A601CBA00E9B192 = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\n\t\t\t\t13B07FAE1A68108700A75B9A /* example */,\n\t\t\t\t832341AE1AAA6A7D00B99B32 /* Libraries */,\n\t\t\t\t83CBBA001A601CBA00E9B192 /* Products */,\n\t\t\t\t2D16E6871FA4F8E400B85C8A /* Frameworks */,\n\t\t\t\tD52C4A25CB8634558A3AF68D /* Pods */,\n\t\t\t\tC493ADA3EAB4EF422CF3A61E /* ExpoModulesProviders */,\n\t\t\t);\n\t\t\tindentWidth = 2;\n\t\t\tsourceTree = \"\";\n\t\t\ttabWidth = 2;\n\t\t\tusesTabs = 0;\n\t\t};\n\t\t83CBBA001A601CBA00E9B192 /* Products */ = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\n\t\t\t\t13B07F961A680F5B00A75B9A /* example.app */,\n\t\t\t);\n\t\t\tname = Products;\n\t\t\tsourceTree = \"\";\n\t\t};\n\t\tBB2F792B24A3F905000567C9 /* Supporting */ = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\n\t\t\t\tBB2F792C24A3F905000567C9 /* Expo.plist */,\n\t\t\t);\n\t\t\tname = Supporting;\n\t\t\tpath = example/Supporting;\n\t\t\tsourceTree = \"\";\n\t\t};\n\t\tC493ADA3EAB4EF422CF3A61E /* ExpoModulesProviders */ = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\n\t\t\t\t73C3B28C69CD6BB9738FA204 /* example */,\n\t\t\t);\n\t\t\tname = ExpoModulesProviders;\n\t\t\tsourceTree = \"\";\n\t\t};\n\t\tD52C4A25CB8634558A3AF68D /* Pods */ = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\n\t\t\t\t2C6A65C7C222B5FD1DFFEB3D /* Pods-example.debug.xcconfig */,\n\t\t\t\t5ACC43DD9EC8D36FFB24F025 /* Pods-example.release.xcconfig */,\n\t\t\t);\n\t\t\tname = Pods;\n\t\t\tpath = Pods;\n\t\t\tsourceTree = \"\";\n\t\t};\n/* End PBXGroup section */\n\n/* Begin PBXNativeTarget section */\n\t\t13B07F861A680F5B00A75B9A /* example */ = {\n\t\t\tisa = PBXNativeTarget;\n\t\t\tbuildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget \"example\" */;\n\t\t\tbuildPhases = (\n\t\t\t\t08A4A3CD28434E44B6B9DE2E /* [CP] Check Pods Manifest.lock */,\n\t\t\t\tE3A154A212F22893CC38D97B /* [Expo] Configure project */,\n\t\t\t\t13B07F871A680F5B00A75B9A /* Sources */,\n\t\t\t\t13B07F8C1A680F5B00A75B9A /* Frameworks */,\n\t\t\t\t13B07F8E1A680F5B00A75B9A /* Resources */,\n\t\t\t\t00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,\n\t\t\t\t800E24972A6A228C8D4807E9 /* [CP] Copy Pods Resources */,\n\t\t\t\t55CE56BF3547841532F83FD6 /* [CP] Embed Pods Frameworks */,\n\t\t\t);\n\t\t\tbuildRules = (\n\t\t\t);\n\t\t\tdependencies = (\n\t\t\t);\n\t\t\tname = example;\n\t\t\tproductName = example;\n\t\t\tproductReference = 13B07F961A680F5B00A75B9A /* example.app */;\n\t\t\tproductType = \"com.apple.product-type.application\";\n\t\t};\n/* End PBXNativeTarget section */\n\n/* Begin PBXProject section */\n\t\t83CBB9F71A601CBA00E9B192 /* Project object */ = {\n\t\t\tisa = PBXProject;\n\t\t\tattributes = {\n\t\t\t\tLastUpgradeCheck = 1130;\n\t\t\t\tTargetAttributes = {\n\t\t\t\t\t13B07F861A680F5B00A75B9A = {\n\t\t\t\t\t\tLastSwiftMigration = 1250;\n\t\t\t\t\t};\n\t\t\t\t};\n\t\t\t};\n\t\t\tbuildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject \"example\" */;\n\t\t\tcompatibilityVersion = \"Xcode 3.2\";\n\t\t\tdevelopmentRegion = en;\n\t\t\thasScannedForEncodings = 0;\n\t\t\tknownRegions = (\n\t\t\t\ten,\n\t\t\t\tBase,\n\t\t\t);\n\t\t\tmainGroup = 83CBB9F61A601CBA00E9B192;\n\t\t\tproductRefGroup = 83CBBA001A601CBA00E9B192 /* Products */;\n\t\t\tprojectDirPath = \"\";\n\t\t\tprojectRoot = \"\";\n\t\t\ttargets = (\n\t\t\t\t13B07F861A680F5B00A75B9A /* example */,\n\t\t\t);\n\t\t};\n/* End PBXProject section */\n\n/* Begin PBXResourcesBuildPhase section */\n\t\t13B07F8E1A680F5B00A75B9A /* Resources */ = {\n\t\t\tisa = PBXResourcesBuildPhase;\n\t\t\tbuildActionMask = 2147483647;\n\t\t\tfiles = (\n\t\t\t\tBB2F792D24A3F905000567C9 /* Expo.plist in Resources */,\n\t\t\t\t13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,\n\t\t\t\t3E461D99554A48A4959DE609 /* SplashScreen.storyboard in Resources */,\n\t\t\t\t95774C49D12665FBD013B7B6 /* PrivacyInfo.xcprivacy in Resources */,\n\t\t\t);\n\t\t\trunOnlyForDeploymentPostprocessing = 0;\n\t\t};\n/* End PBXResourcesBuildPhase section */\n\n/* Begin PBXShellScriptBuildPhase section */\n\t\t00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */ = {\n\t\t\tisa = PBXShellScriptBuildPhase;\n\t\t\talwaysOutOfDate = 1;\n\t\t\tbuildActionMask = 2147483647;\n\t\t\tfiles = (\n\t\t\t);\n\t\t\tinputPaths = (\n\t\t\t\t\"$(SRCROOT)/.xcode.env\",\n\t\t\t\t\"$(SRCROOT)/.xcode.env.local\",\n\t\t\t);\n\t\t\tname = \"Bundle React Native code and images\";\n\t\t\toutputPaths = (\n\t\t\t);\n\t\t\trunOnlyForDeploymentPostprocessing = 0;\n\t\t\tshellPath = /bin/sh;\n\t\t\tshellScript = \"if [[ -f \\\"$PODS_ROOT/../.xcode.env\\\" ]]; then\\n source \\\"$PODS_ROOT/../.xcode.env\\\"\\nfi\\nif [[ -f \\\"$PODS_ROOT/../.xcode.env.local\\\" ]]; then\\n source \\\"$PODS_ROOT/../.xcode.env.local\\\"\\nfi\\n\\n# The project root by default is one level up from the ios directory\\nexport PROJECT_ROOT=\\\"$PROJECT_DIR\\\"/..\\n\\nif [[ \\\"$CONFIGURATION\\\" = *Debug* ]]; then\\n export SKIP_BUNDLING=1\\nfi\\nif [[ -z \\\"$ENTRY_FILE\\\" ]]; then\\n # Set the entry JS file using the bundler's entry resolution.\\n export ENTRY_FILE=\\\"$(\\\"$NODE_BINARY\\\" -e \\\"require('expo/scripts/resolveAppEntry')\\\" \\\"$PROJECT_ROOT\\\" ios absolute | tail -n 1)\\\"\\nfi\\n\\nif [[ -z \\\"$CLI_PATH\\\" ]]; then\\n # Use Expo CLI\\n export CLI_PATH=\\\"$(\\\"$NODE_BINARY\\\" --print \\\"require.resolve('@expo/cli', { paths: [require.resolve('expo/package.json')] })\\\")\\\"\\nfi\\nif [[ -z \\\"$BUNDLE_COMMAND\\\" ]]; then\\n # Default Expo CLI command for bundling\\n export BUNDLE_COMMAND=\\\"export:embed\\\"\\nfi\\n\\n# Source .xcode.env.updates if it exists to allow\\n# SKIP_BUNDLING to be unset if needed\\nif [[ -f \\\"$PODS_ROOT/../.xcode.env.updates\\\" ]]; then\\n source \\\"$PODS_ROOT/../.xcode.env.updates\\\"\\nfi\\n# Source local changes to allow overrides\\n# if needed\\nif [[ -f \\\"$PODS_ROOT/../.xcode.env.local\\\" ]]; then\\n source \\\"$PODS_ROOT/../.xcode.env.local\\\"\\nfi\\n\\n`\\\"$NODE_BINARY\\\" --print \\\"require('path').dirname(require.resolve('react-native/package.json')) + '/scripts/react-native-xcode.sh'\\\"`\\n\\n\";\n\t\t};\n\t\t08A4A3CD28434E44B6B9DE2E /* [CP] Check Pods Manifest.lock */ = {\n\t\t\tisa = PBXShellScriptBuildPhase;\n\t\t\tbuildActionMask = 2147483647;\n\t\t\tfiles = (\n\t\t\t);\n\t\t\tinputFileListPaths = (\n\t\t\t);\n\t\t\tinputPaths = (\n\t\t\t\t\"${PODS_PODFILE_DIR_PATH}/Podfile.lock\",\n\t\t\t\t\"${PODS_ROOT}/Manifest.lock\",\n\t\t\t);\n\t\t\tname = \"[CP] Check Pods Manifest.lock\";\n\t\t\toutputFileListPaths = (\n\t\t\t);\n\t\t\toutputPaths = (\n\t\t\t\t\"$(DERIVED_FILE_DIR)/Pods-example-checkManifestLockResult.txt\",\n\t\t\t);\n\t\t\trunOnlyForDeploymentPostprocessing = 0;\n\t\t\tshellPath = /bin/sh;\n\t\t\tshellScript = \"diff \\\"${PODS_PODFILE_DIR_PATH}/Podfile.lock\\\" \\\"${PODS_ROOT}/Manifest.lock\\\" > /dev/null\\nif [ $? != 0 ] ; then\\n # print error to STDERR\\n echo \\\"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\\\" >&2\\n exit 1\\nfi\\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\\necho \\\"SUCCESS\\\" > \\\"${SCRIPT_OUTPUT_FILE_0}\\\"\\n\";\n\t\t\tshowEnvVarsInLog = 0;\n\t\t};\n\t\t55CE56BF3547841532F83FD6 /* [CP] Embed Pods Frameworks */ = {\n\t\t\tisa = PBXShellScriptBuildPhase;\n\t\t\tbuildActionMask = 2147483647;\n\t\t\tfiles = (\n\t\t\t);\n\t\t\tinputPaths = (\n\t\t\t\t\"${PODS_ROOT}/Target Support Files/Pods-example/Pods-example-frameworks.sh\",\n\t\t\t\t\"${PODS_XCFRAMEWORKS_BUILD_DIR}/React-Core-prebuilt/React.framework/React\",\n\t\t\t\t\"${PODS_XCFRAMEWORKS_BUILD_DIR}/ReactNativeDependencies/ReactNativeDependencies.framework/ReactNativeDependencies\",\n\t\t\t\t\"${PODS_XCFRAMEWORKS_BUILD_DIR}/hermes-engine/Pre-built/hermes.framework/hermes\",\n\t\t\t);\n\t\t\tname = \"[CP] Embed Pods Frameworks\";\n\t\t\toutputPaths = (\n\t\t\t\t\"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/React.framework\",\n\t\t\t\t\"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/ReactNativeDependencies.framework\",\n\t\t\t\t\"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/hermes.framework\",\n\t\t\t);\n\t\t\trunOnlyForDeploymentPostprocessing = 0;\n\t\t\tshellPath = /bin/sh;\n\t\t\tshellScript = \"\\\"${PODS_ROOT}/Target Support Files/Pods-example/Pods-example-frameworks.sh\\\"\\n\";\n\t\t\tshowEnvVarsInLog = 0;\n\t\t};\n\t\t800E24972A6A228C8D4807E9 /* [CP] Copy Pods Resources */ = {\n\t\t\tisa = PBXShellScriptBuildPhase;\n\t\t\tbuildActionMask = 2147483647;\n\t\t\tfiles = (\n\t\t\t);\n\t\t\tinputPaths = (\n\t\t\t\t\"${PODS_ROOT}/Target Support Files/Pods-example/Pods-example-resources.sh\",\n\t\t\t\t\"${PODS_CONFIGURATION_BUILD_DIR}/EXConstants/EXConstants.bundle\",\n\t\t\t\t\"${PODS_CONFIGURATION_BUILD_DIR}/EXConstants/ExpoConstants_privacy.bundle\",\n\t\t\t\t\"${PODS_CONFIGURATION_BUILD_DIR}/ExpoFileSystem/ExpoFileSystem_privacy.bundle\",\n\t\t\t\t\"${PODS_CONFIGURATION_BUILD_DIR}/ExpoSystemUI/ExpoSystemUI_privacy.bundle\",\n\t\t\t\t\"${PODS_CONFIGURATION_BUILD_DIR}/GoogleMaps/GoogleMapsResources.bundle\",\n\t\t\t\t\"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/React-Core_privacy.bundle\",\n\t\t\t\t\"${PODS_CONFIGURATION_BUILD_DIR}/React-cxxreact/React-cxxreact_privacy.bundle\",\n\t\t\t\t\"${PODS_CONFIGURATION_BUILD_DIR}/SDWebImage/SDWebImage.bundle\",\n\t\t\t\t\"${PODS_CONFIGURATION_BUILD_DIR}/react-native-google-maps/GoogleMapsPrivacy.bundle\",\n\t\t\t\t\"${PODS_CONFIGURATION_BUILD_DIR}/react-native-maps/ReactNativeMapsPrivacy.bundle\",\n\t\t\t);\n\t\t\tname = \"[CP] Copy Pods Resources\";\n\t\t\toutputPaths = (\n\t\t\t\t\"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EXConstants.bundle\",\n\t\t\t\t\"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ExpoConstants_privacy.bundle\",\n\t\t\t\t\"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ExpoFileSystem_privacy.bundle\",\n\t\t\t\t\"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ExpoSystemUI_privacy.bundle\",\n\t\t\t\t\"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/GoogleMapsResources.bundle\",\n\t\t\t\t\"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/React-Core_privacy.bundle\",\n\t\t\t\t\"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/React-cxxreact_privacy.bundle\",\n\t\t\t\t\"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/SDWebImage.bundle\",\n\t\t\t\t\"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/GoogleMapsPrivacy.bundle\",\n\t\t\t\t\"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ReactNativeMapsPrivacy.bundle\",\n\t\t\t);\n\t\t\trunOnlyForDeploymentPostprocessing = 0;\n\t\t\tshellPath = /bin/sh;\n\t\t\tshellScript = \"\\\"${PODS_ROOT}/Target Support Files/Pods-example/Pods-example-resources.sh\\\"\\n\";\n\t\t\tshowEnvVarsInLog = 0;\n\t\t};\n\t\tE3A154A212F22893CC38D97B /* [Expo] Configure project */ = {\n\t\t\tisa = PBXShellScriptBuildPhase;\n\t\t\talwaysOutOfDate = 1;\n\t\t\tbuildActionMask = 2147483647;\n\t\t\tfiles = (\n\t\t\t);\n\t\t\tinputFileListPaths = (\n\t\t\t);\n\t\t\tinputPaths = (\n\t\t\t\t\"$(SRCROOT)/.xcode.env\",\n\t\t\t\t\"$(SRCROOT)/.xcode.env.local\",\n\t\t\t\t\"$(SRCROOT)/example/example.entitlements\",\n\t\t\t\t\"$(SRCROOT)/Pods/Target Support Files/Pods-example/expo-configure-project.sh\",\n\t\t\t);\n\t\t\tname = \"[Expo] Configure project\";\n\t\t\toutputFileListPaths = (\n\t\t\t);\n\t\t\toutputPaths = (\n\t\t\t\t\"$(SRCROOT)/Pods/Target Support Files/Pods-example/ExpoModulesProvider.swift\",\n\t\t\t);\n\t\t\trunOnlyForDeploymentPostprocessing = 0;\n\t\t\tshellPath = /bin/sh;\n\t\t\tshellScript = \"# This script configures Expo modules and generates the modules provider file.\\nbash -l -c \\\"./Pods/Target\\\\ Support\\\\ Files/Pods-example/expo-configure-project.sh\\\"\\n\";\n\t\t};\n/* End PBXShellScriptBuildPhase section */\n\n/* Begin PBXSourcesBuildPhase section */\n\t\t13B07F871A680F5B00A75B9A /* Sources */ = {\n\t\t\tisa = PBXSourcesBuildPhase;\n\t\t\tbuildActionMask = 2147483647;\n\t\t\tfiles = (\n\t\t\t\tF11748422D0307B40044C1D9 /* AppDelegate.swift in Sources */,\n\t\t\t\tD2455EE1B33CDCC769A93446 /* ExpoModulesProvider.swift in Sources */,\n\t\t\t);\n\t\t\trunOnlyForDeploymentPostprocessing = 0;\n\t\t};\n/* End PBXSourcesBuildPhase section */\n\n/* Begin XCBuildConfiguration section */\n\t\t13B07F941A680F5B00A75B9A /* Debug */ = {\n\t\t\tisa = XCBuildConfiguration;\n\t\t\tbaseConfigurationReference = 2C6A65C7C222B5FD1DFFEB3D /* Pods-example.debug.xcconfig */;\n\t\t\tbuildSettings = {\n\t\t\t\tASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;\n\t\t\t\tCLANG_ENABLE_MODULES = YES;\n\t\t\t\tCODE_SIGN_ENTITLEMENTS = example/example.entitlements;\n\t\t\t\tCURRENT_PROJECT_VERSION = 1;\n\t\t\t\tENABLE_BITCODE = NO;\n\t\t\t\tGCC_PREPROCESSOR_DEFINITIONS = (\n\t\t\t\t\t\"$(inherited)\",\n\t\t\t\t\t\"FB_SONARKIT_ENABLED=1\",\n\t\t\t\t);\n\t\t\t\tINFOPLIST_FILE = example/Info.plist;\n\t\t\t\tIPHONEOS_DEPLOYMENT_TARGET = 15.1;\n\t\t\t\tLD_RUNPATH_SEARCH_PATHS = (\n\t\t\t\t\t\"$(inherited)\",\n\t\t\t\t\t\"@executable_path/Frameworks\",\n\t\t\t\t);\n\t\t\t\tMARKETING_VERSION = 1.0;\n\t\t\t\tOTHER_LDFLAGS = (\n\t\t\t\t\t\"$(inherited)\",\n\t\t\t\t\t\"-ObjC\",\n\t\t\t\t\t\"-lc++\",\n\t\t\t\t);\n\t\t\t\tOTHER_SWIFT_FLAGS = \"$(inherited) -D EXPO_CONFIGURATION_DEBUG\";\n\t\t\t\tPRODUCT_BUNDLE_IDENTIFIER = com.anonymous.example;\n\t\t\t\tPRODUCT_NAME = example;\n\t\t\t\tSWIFT_OBJC_BRIDGING_HEADER = \"example/example-Bridging-Header.h\";\n\t\t\t\tSWIFT_OPTIMIZATION_LEVEL = \"-Onone\";\n\t\t\t\tSWIFT_VERSION = 5.0;\n\t\t\t\tTARGETED_DEVICE_FAMILY = \"1,2\";\n\t\t\t\tVERSIONING_SYSTEM = \"apple-generic\";\n\t\t\t};\n\t\t\tname = Debug;\n\t\t};\n\t\t13B07F951A680F5B00A75B9A /* Release */ = {\n\t\t\tisa = XCBuildConfiguration;\n\t\t\tbaseConfigurationReference = 5ACC43DD9EC8D36FFB24F025 /* Pods-example.release.xcconfig */;\n\t\t\tbuildSettings = {\n\t\t\t\tASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;\n\t\t\t\tCLANG_ENABLE_MODULES = YES;\n\t\t\t\tCODE_SIGN_ENTITLEMENTS = example/example.entitlements;\n\t\t\t\tCURRENT_PROJECT_VERSION = 1;\n\t\t\t\tINFOPLIST_FILE = example/Info.plist;\n\t\t\t\tIPHONEOS_DEPLOYMENT_TARGET = 15.1;\n\t\t\t\tLD_RUNPATH_SEARCH_PATHS = (\n\t\t\t\t\t\"$(inherited)\",\n\t\t\t\t\t\"@executable_path/Frameworks\",\n\t\t\t\t);\n\t\t\t\tMARKETING_VERSION = 1.0;\n\t\t\t\tOTHER_LDFLAGS = (\n\t\t\t\t\t\"$(inherited)\",\n\t\t\t\t\t\"-ObjC\",\n\t\t\t\t\t\"-lc++\",\n\t\t\t\t);\n\t\t\t\tOTHER_SWIFT_FLAGS = \"$(inherited) -D EXPO_CONFIGURATION_RELEASE\";\n\t\t\t\tPRODUCT_BUNDLE_IDENTIFIER = com.anonymous.example;\n\t\t\t\tPRODUCT_NAME = example;\n\t\t\t\tSWIFT_OBJC_BRIDGING_HEADER = \"example/example-Bridging-Header.h\";\n\t\t\t\tSWIFT_VERSION = 5.0;\n\t\t\t\tTARGETED_DEVICE_FAMILY = \"1,2\";\n\t\t\t\tVERSIONING_SYSTEM = \"apple-generic\";\n\t\t\t};\n\t\t\tname = Release;\n\t\t};\n\t\t83CBBA201A601CBA00E9B192 /* Debug */ = {\n\t\t\tisa = XCBuildConfiguration;\n\t\t\tbuildSettings = {\n\t\t\t\tALWAYS_SEARCH_USER_PATHS = NO;\n\t\t\t\tCLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES;\n\t\t\t\tCLANG_CXX_LANGUAGE_STANDARD = \"c++20\";\n\t\t\t\tCLANG_CXX_LIBRARY = \"libc++\";\n\t\t\t\tCLANG_ENABLE_MODULES = YES;\n\t\t\t\tCLANG_ENABLE_OBJC_ARC = YES;\n\t\t\t\tCLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;\n\t\t\t\tCLANG_WARN_BOOL_CONVERSION = YES;\n\t\t\t\tCLANG_WARN_COMMA = YES;\n\t\t\t\tCLANG_WARN_CONSTANT_CONVERSION = YES;\n\t\t\t\tCLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES;\n\t\t\t\tCLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;\n\t\t\t\tCLANG_WARN_EMPTY_BODY = YES;\n\t\t\t\tCLANG_WARN_ENUM_CONVERSION = YES;\n\t\t\t\tCLANG_WARN_INFINITE_RECURSION = YES;\n\t\t\t\tCLANG_WARN_INT_CONVERSION = YES;\n\t\t\t\tCLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;\n\t\t\t\tCLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES;\n\t\t\t\tCLANG_WARN_OBJC_LITERAL_CONVERSION = YES;\n\t\t\t\tCLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;\n\t\t\t\tCLANG_WARN_RANGE_LOOP_ANALYSIS = YES;\n\t\t\t\tCLANG_WARN_STRICT_PROTOTYPES = YES;\n\t\t\t\tCLANG_WARN_SUSPICIOUS_MOVE = YES;\n\t\t\t\tCLANG_WARN_UNREACHABLE_CODE = YES;\n\t\t\t\tCLANG_WARN__DUPLICATE_METHOD_MATCH = YES;\n\t\t\t\t\"CODE_SIGN_IDENTITY[sdk=iphoneos*]\" = \"iPhone Developer\";\n\t\t\t\tCOPY_PHASE_STRIP = NO;\n\t\t\t\tENABLE_STRICT_OBJC_MSGSEND = YES;\n\t\t\t\tENABLE_TESTABILITY = YES;\n\t\t\t\tGCC_C_LANGUAGE_STANDARD = gnu99;\n\t\t\t\tGCC_DYNAMIC_NO_PIC = NO;\n\t\t\t\tGCC_NO_COMMON_BLOCKS = YES;\n\t\t\t\tGCC_OPTIMIZATION_LEVEL = 0;\n\t\t\t\tGCC_PREPROCESSOR_DEFINITIONS = (\n\t\t\t\t\t\"DEBUG=1\",\n\t\t\t\t\t\"$(inherited)\",\n\t\t\t\t);\n\t\t\t\tGCC_SYMBOLS_PRIVATE_EXTERN = NO;\n\t\t\t\tGCC_WARN_64_TO_32_BIT_CONVERSION = YES;\n\t\t\t\tGCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;\n\t\t\t\tGCC_WARN_UNDECLARED_SELECTOR = YES;\n\t\t\t\tGCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;\n\t\t\t\tGCC_WARN_UNUSED_FUNCTION = YES;\n\t\t\t\tGCC_WARN_UNUSED_VARIABLE = YES;\n\t\t\t\tIPHONEOS_DEPLOYMENT_TARGET = 15.1;\n\t\t\t\tLD_RUNPATH_SEARCH_PATHS = (\n\t\t\t\t\t/usr/lib/swift,\n\t\t\t\t\t\"$(inherited)\",\n\t\t\t\t);\n\t\t\t\tLIBRARY_SEARCH_PATHS = \"$(SDKROOT)/usr/lib/swift\\\"$(inherited)\\\"\";\n\t\t\t\tMTL_ENABLE_DEBUG_INFO = YES;\n\t\t\t\tONLY_ACTIVE_ARCH = YES;\n\t\t\t\tREACT_NATIVE_PATH = \"${PODS_ROOT}/../../node_modules/react-native\";\n\t\t\t\tSDKROOT = iphoneos;\n\t\t\t\tSWIFT_ACTIVE_COMPILATION_CONDITIONS = \"$(inherited) DEBUG\";\n\t\t\t\tSWIFT_ENABLE_EXPLICIT_MODULES = NO;\n\t\t\t\tUSE_HERMES = true;\n\t\t\t};\n\t\t\tname = Debug;\n\t\t};\n\t\t83CBBA211A601CBA00E9B192 /* Release */ = {\n\t\t\tisa = XCBuildConfiguration;\n\t\t\tbuildSettings = {\n\t\t\t\tALWAYS_SEARCH_USER_PATHS = NO;\n\t\t\t\tCLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES;\n\t\t\t\tCLANG_CXX_LANGUAGE_STANDARD = \"c++20\";\n\t\t\t\tCLANG_CXX_LIBRARY = \"libc++\";\n\t\t\t\tCLANG_ENABLE_MODULES = YES;\n\t\t\t\tCLANG_ENABLE_OBJC_ARC = YES;\n\t\t\t\tCLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;\n\t\t\t\tCLANG_WARN_BOOL_CONVERSION = YES;\n\t\t\t\tCLANG_WARN_COMMA = YES;\n\t\t\t\tCLANG_WARN_CONSTANT_CONVERSION = YES;\n\t\t\t\tCLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES;\n\t\t\t\tCLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;\n\t\t\t\tCLANG_WARN_EMPTY_BODY = YES;\n\t\t\t\tCLANG_WARN_ENUM_CONVERSION = YES;\n\t\t\t\tCLANG_WARN_INFINITE_RECURSION = YES;\n\t\t\t\tCLANG_WARN_INT_CONVERSION = YES;\n\t\t\t\tCLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;\n\t\t\t\tCLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES;\n\t\t\t\tCLANG_WARN_OBJC_LITERAL_CONVERSION = YES;\n\t\t\t\tCLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;\n\t\t\t\tCLANG_WARN_RANGE_LOOP_ANALYSIS = YES;\n\t\t\t\tCLANG_WARN_STRICT_PROTOTYPES = YES;\n\t\t\t\tCLANG_WARN_SUSPICIOUS_MOVE = YES;\n\t\t\t\tCLANG_WARN_UNREACHABLE_CODE = YES;\n\t\t\t\tCLANG_WARN__DUPLICATE_METHOD_MATCH = YES;\n\t\t\t\t\"CODE_SIGN_IDENTITY[sdk=iphoneos*]\" = \"iPhone Developer\";\n\t\t\t\tCOPY_PHASE_STRIP = YES;\n\t\t\t\tENABLE_NS_ASSERTIONS = NO;\n\t\t\t\tENABLE_STRICT_OBJC_MSGSEND = YES;\n\t\t\t\tGCC_C_LANGUAGE_STANDARD = gnu99;\n\t\t\t\tGCC_NO_COMMON_BLOCKS = YES;\n\t\t\t\tGCC_WARN_64_TO_32_BIT_CONVERSION = YES;\n\t\t\t\tGCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;\n\t\t\t\tGCC_WARN_UNDECLARED_SELECTOR = YES;\n\t\t\t\tGCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;\n\t\t\t\tGCC_WARN_UNUSED_FUNCTION = YES;\n\t\t\t\tGCC_WARN_UNUSED_VARIABLE = YES;\n\t\t\t\tIPHONEOS_DEPLOYMENT_TARGET = 15.1;\n\t\t\t\tLD_RUNPATH_SEARCH_PATHS = (\n\t\t\t\t\t/usr/lib/swift,\n\t\t\t\t\t\"$(inherited)\",\n\t\t\t\t);\n\t\t\t\tLIBRARY_SEARCH_PATHS = \"$(SDKROOT)/usr/lib/swift\\\"$(inherited)\\\"\";\n\t\t\t\tMTL_ENABLE_DEBUG_INFO = NO;\n\t\t\t\tREACT_NATIVE_PATH = \"${PODS_ROOT}/../../node_modules/react-native\";\n\t\t\t\tSDKROOT = iphoneos;\n\t\t\t\tSWIFT_ENABLE_EXPLICIT_MODULES = NO;\n\t\t\t\tUSE_HERMES = true;\n\t\t\t\tVALIDATE_PRODUCT = YES;\n\t\t\t};\n\t\t\tname = Release;\n\t\t};\n/* End XCBuildConfiguration section */\n\n/* Begin XCConfigurationList section */\n\t\t13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget \"example\" */ = {\n\t\t\tisa = XCConfigurationList;\n\t\t\tbuildConfigurations = (\n\t\t\t\t13B07F941A680F5B00A75B9A /* Debug */,\n\t\t\t\t13B07F951A680F5B00A75B9A /* Release */,\n\t\t\t);\n\t\t\tdefaultConfigurationIsVisible = 0;\n\t\t\tdefaultConfigurationName = Release;\n\t\t};\n\t\t83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject \"example\" */ = {\n\t\t\tisa = XCConfigurationList;\n\t\t\tbuildConfigurations = (\n\t\t\t\t83CBBA201A601CBA00E9B192 /* Debug */,\n\t\t\t\t83CBBA211A601CBA00E9B192 /* Release */,\n\t\t\t);\n\t\t\tdefaultConfigurationIsVisible = 0;\n\t\t\tdefaultConfigurationName = Release;\n\t\t};\n/* End XCConfigurationList section */\n\t};\n\trootObject = 83CBB9F71A601CBA00E9B192 /* Project object */;\n}\n" }, { "path": "example/ios/example.xcodeproj/xcshareddata/xcschemes/example.xcscheme", "content": "\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n" }, { "path": "example/ios/example.xcworkspace/contents.xcworkspacedata", "content": "\n\n \n \n \n \n\n" }, { "path": "example/metro.config.js", "content": "const escape = require('escape-string-regexp')\nconst { getDefaultConfig } = require('expo/metro-config')\nconst fs = require('fs')\nconst path = require('path')\n\nconst config = getDefaultConfig(__dirname)\nconst { transformer, resolver } = config\nconst defaultWatchFolders = config.watchFolders ?? []\n\nconst root = path.resolve(__dirname, '..')\nconst rootPak = JSON.parse(fs.readFileSync(path.join(root, 'package.json'), 'utf8'))\n\nconst modules = [\n '@babel/runtime',\n 'metro-runtime',\n 'react-native-web',\n ...Object.keys({\n ...rootPak.dependencies,\n ...rootPak.peerDependencies,\n }),\n]\n\nmodule.exports = {\n ...config,\n\n projectRoot: __dirname,\n watchFolders: [...defaultWatchFolders, root],\n\n // We need to make sure that only one version is loaded for peerDependencies\n // So we blocklist them at the root, and alias them to the versions in example's node_modules\n resolver: {\n ...resolver,\n blockList: [new RegExp(`^${escape(path.join(root, 'node_modules'))}\\\\/.*$`)],\n extraNodeModules: modules.reduce((acc, name) => {\n acc[name] = path.join(__dirname, 'node_modules', name)\n return acc\n }, {}),\n unstable_enablePackageExports: false,\n },\n\n transformer: {\n ...transformer,\n getTransformOptions: async () => ({\n transform: {\n experimentalImportSupport: false,\n inlineRequires: true,\n },\n }),\n },\n}\n" }, { "path": "example/package.json", "content": "{\n \"name\": \"example\",\n \"main\": \"expo-router/entry\",\n \"version\": \"1.0.0\",\n \"scripts\": {\n \"reset-project\": \"node ./scripts/reset-project.js\",\n \"start\": \"npx expo start --dev-client --clear\",\n \"start:android\": \"npx expo start --android --dev-client --clear\",\n \"start:ios\": \"npx expo start --ios --dev-client --clear\",\n \"start:web\": \"npx expo start --web --clear\",\n \"lint\": \"expo lint\",\n \"fresh\": \"yarn start --reset-cache\",\n \"installDevBuild:ios\": \"expo run:ios\",\n \"installDevBuild:android\": \"expo run:android\",\n \"rebuildNativeDeps\": \"yarn expo prebuild\",\n \"rebuildNativeDeps:clean\": \"yarn expo prebuild --clean\",\n \"android\": \"expo run:android\",\n \"ios\": \"expo run:ios\"\n },\n \"dependencies\": {\n \"@expo/react-native-action-sheet\": \"^4.1.1\",\n \"@expo/vector-icons\": \"^15.0.3\",\n \"@react-navigation/bottom-tabs\": \"^7.4.0\",\n \"@react-navigation/elements\": \"^2.9.5\",\n \"@react-navigation/native\": \"^7.1.8\",\n \"expo\": \"~54.0.31\",\n \"expo-build-properties\": \"~1.0.10\",\n \"expo-clipboard\": \"~8.0.8\",\n \"expo-constants\": \"~18.0.13\",\n \"expo-font\": \"~14.0.10\",\n \"expo-haptics\": \"~15.0.8\",\n \"expo-image\": \"~3.0.11\",\n \"expo-image-picker\": \"~17.0.10\",\n \"expo-linking\": \"~8.0.11\",\n \"expo-location\": \"~19.0.8\",\n \"expo-router\": \"~6.0.21\",\n \"expo-splash-screen\": \"~31.0.13\",\n \"expo-status-bar\": \"~3.0.9\",\n \"expo-symbols\": \"~1.0.8\",\n \"expo-system-ui\": \"~6.0.9\",\n \"expo-web-browser\": \"~15.0.10\",\n \"libphonenumber-js\": \"^1.12.34\",\n \"react\": \"19.1.0\",\n \"react-dom\": \"19.1.0\",\n \"react-native\": \"0.81.5\",\n \"react-native-gesture-handler\": \"~2.30.0\",\n \"react-native-gifted-chat\": \"link:..\",\n \"react-native-keyboard-controller\": \"1.20.6\",\n \"react-native-maps\": \"1.20.1\",\n \"react-native-paper\": \"^5.14.5\",\n \"react-native-reanimated\": \"~4.1.1\",\n \"react-native-safe-area-context\": \"~5.6.2\",\n \"react-native-screens\": \"~4.16.0\",\n \"react-native-web\": \"~0.21.2\",\n \"react-native-worklets\": \"0.5.1\"\n },\n \"devDependencies\": {\n \"@babel/core\": \"^7.28.6\",\n \"@react-native/metro-config\": \"0.81.5\",\n \"@react-native/typescript-config\": \"0.81.5\",\n \"@types/react\": \"~19.1.10\",\n \"@types/react-test-renderer\": \"^19.1.0\",\n \"babel-plugin-module-resolver\": \"^5.0.2\",\n \"eslint\": \"^9.39.2\",\n \"eslint-config-expo\": \"~10.0.0\",\n \"jest\": \"^29.7.0\",\n \"react-test-renderer\": \"19.2.3\",\n \"typescript\": \"~5.9.3\"\n },\n \"private\": true\n}\n" }, { "path": "example/scripts/reset-project.js", "content": "#!/usr/bin/env node\n\n/**\n * This script is used to reset the project to a blank state.\n * It deletes or moves the /app, /components, /hooks, /scripts, and /constants directories to /app-example based on user input and creates a new /app directory with an index.tsx and _layout.tsx file.\n * You can remove the `reset-project` script from package.json and safely delete this file after running it.\n */\n\nconst fs = require('fs')\nconst path = require('path')\nconst readline = require('readline')\n\nconst root = process.cwd()\nconst oldDirs = ['app', 'components', 'hooks', 'constants', 'scripts']\nconst exampleDir = 'app-example'\nconst newAppDir = 'app'\nconst exampleDirPath = path.join(root, exampleDir)\n\nconst indexContent = `import { Text, View } from \"react-native\";\n\nexport default function Index() {\n return (\n \n Edit app/index.tsx to edit this screen.\n \n );\n}\n`\n\nconst layoutContent = `import { Stack } from \"expo-router\";\n\nexport default function RootLayout() {\n return ;\n}\n`\n\nconst rl = readline.createInterface({\n input: process.stdin,\n output: process.stdout,\n})\n\nconst moveDirectories = async userInput => {\n try {\n if (userInput === 'y') {\n // Create the app-example directory\n await fs.promises.mkdir(exampleDirPath, { recursive: true })\n console.log(`๐Ÿ“ /${exampleDir} directory created.`)\n }\n\n // Move old directories to new app-example directory or delete them\n for (const dir of oldDirs) {\n const oldDirPath = path.join(root, dir)\n if (fs.existsSync(oldDirPath))\n if (userInput === 'y') {\n const newDirPath = path.join(root, exampleDir, dir)\n await fs.promises.rename(oldDirPath, newDirPath)\n console.log(`โžก๏ธ /${dir} moved to /${exampleDir}/${dir}.`)\n } else {\n await fs.promises.rm(oldDirPath, { recursive: true, force: true })\n console.log(`โŒ /${dir} deleted.`)\n }\n else\n console.log(`โžก๏ธ /${dir} does not exist, skipping.`)\n }\n\n // Create new /app directory\n const newAppDirPath = path.join(root, newAppDir)\n await fs.promises.mkdir(newAppDirPath, { recursive: true })\n console.log('\\n๐Ÿ“ New /app directory created.')\n\n // Create index.tsx\n const indexPath = path.join(newAppDirPath, 'index.tsx')\n await fs.promises.writeFile(indexPath, indexContent)\n console.log('๐Ÿ“„ app/index.tsx created.')\n\n // Create _layout.tsx\n const layoutPath = path.join(newAppDirPath, '_layout.tsx')\n await fs.promises.writeFile(layoutPath, layoutContent)\n console.log('๐Ÿ“„ app/_layout.tsx created.')\n\n console.log('\\nโœ… Project reset complete. Next steps:')\n console.log(\n `1. Run \\`npx expo start\\` to start a development server.\\n2. Edit app/index.tsx to edit the main screen.${\n userInput === 'y'\n ? `\\n3. Delete the /${exampleDir} directory when you're done referencing it.`\n : ''\n }`\n )\n } catch (error) {\n console.error(`โŒ Error during script execution: ${error.message}`)\n }\n}\n\nrl.question(\n 'Do you want to move existing files to /app-example instead of deleting them? (Y/n): ',\n answer => {\n const userInput = answer.trim().toLowerCase() || 'y'\n if (userInput === 'y' || userInput === 'n') {\n moveDirectories(userInput).finally(() => rl.close())\n } else {\n console.log('โŒ Invalid input. Please enter \\'Y\\' or \\'N\\'.')\n rl.close()\n }\n }\n)\n" }, { "path": "example/styles/index.ts", "content": "import { StyleSheet } from 'react-native'\n\nexport default StyleSheet.create({\n center: {\n justifyContent: 'center',\n alignItems: 'center',\n },\n textCenter: {\n textAlign: 'center',\n },\n})\n" }, { "path": "example/tsconfig.json", "content": "{\n \"extends\": \"expo/tsconfig.base\",\n \"compilerOptions\": {\n \"strict\": true,\n \"paths\": {\n \"@/*\": [\n \"./*\"\n ]\n }\n },\n \"include\": [\n \"**/*.ts\",\n \"**/*.tsx\",\n \".expo/types/**/*.ts\",\n \"expo-env.d.ts\"\n ]\n}\n" }, { "path": "example/utils/styleUtils.ts", "content": "export function getColorSchemeStyle(styles: T, baseName: string, colorScheme: string | null | undefined) {\n const key = `${baseName}_${colorScheme}` as keyof T\n return styles[key]\n}\n" }, { "path": "expoSnack/ExpoSnack.tsx", "content": "import React, { useCallback, useMemo, useState } from 'react'\nimport {\n StyleSheet,\n Text,\n View,\n useColorScheme,\n} from 'react-native'\nimport { ActionSheetProvider, useActionSheet } from '@expo/react-native-action-sheet'\nimport { MaterialIcons } from '@expo/vector-icons'\nimport dayjs from 'dayjs'\nimport * as ImagePicker from 'expo-image-picker'\nimport { getCurrentPositionAsync, requestForegroundPermissionsAsync } from 'expo-location'\nimport { RectButton } from 'react-native-gesture-handler'\nimport { GiftedChat } from 'react-native-gifted-chat'\nimport type { IMessage, User } from 'react-native-gifted-chat'\n\n// ============================================================================\n// Helper Functions\n// ============================================================================\n\nfunction getColorSchemeStyle(styles: T, baseName: string, colorScheme: string | null | undefined) {\n const key = `${baseName}_${colorScheme}` as keyof T\n return styles[key]\n}\n\n// ============================================================================\n// Data\n// ============================================================================\n\nconst date1 = dayjs()\nconst date2 = date1.clone().subtract(1, 'day')\nconst date3 = date2.clone().subtract(1, 'week')\n\nconst initialMessages: IMessage[] = [\n {\n text: '',\n createdAt: date3.toDate(),\n audio:\n 'https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3',\n user: {\n _id: 2,\n name: 'John Doe',\n },\n },\n {\n text: '',\n createdAt: date3.toDate(),\n video: 'https://media.giphy.com/media/3o6ZthZjk09Xx4ktZ6/giphy.mp4',\n user: {\n _id: 2,\n name: 'John Doe',\n },\n },\n {\n text: 'This is a quick reply. Do you love Gifted Chat? (checkbox)',\n createdAt: date3.toDate(),\n quickReplies: {\n type: 'checkbox',\n values: [\n {\n title: 'Yes',\n value: 'yes',\n },\n {\n title: 'Yes, let me show you with a picture!',\n value: 'yes_picture',\n },\n {\n title: 'Nope. What?',\n value: 'no',\n },\n ],\n },\n user: {\n _id: 2,\n name: 'John Doe',\n },\n },\n {\n text: 'This is a quick reply. Do you love Gifted Chat? (radio) KEEP IT',\n createdAt: date3.toDate(),\n quickReplies: {\n type: 'radio',\n keepIt: true,\n values: [\n {\n title: '๐Ÿ˜‹ Yes',\n value: 'yes',\n },\n {\n title: '๐Ÿ“ท Yes, let me show you with a picture!',\n value: 'yes_picture',\n },\n {\n title: '๐Ÿ˜ž Nope. What?',\n value: 'no',\n },\n ],\n },\n user: {\n _id: 2,\n name: 'John Doe',\n },\n },\n {\n text: 'Are you building a chat app?',\n createdAt: date3.toDate(),\n user: {\n _id: 1,\n name: 'Developer',\n },\n },\n {\n text: 'Yes, and I use #GiftedChat!',\n createdAt: date3.toDate(),\n user: {\n _id: 2,\n name: 'John Doe',\n },\n sent: true,\n received: true,\n },\n {\n text: 'Where are you?',\n createdAt: date3.toDate(),\n user: {\n _id: 1,\n name: 'Developer',\n },\n },\n {\n text: '',\n createdAt: date2.toDate(),\n user: {\n _id: 2,\n name: 'John Doe',\n },\n sent: true,\n received: true,\n location: {\n latitude: 48.864601,\n longitude: 2.398704,\n },\n },\n {\n text: 'Send me a picture!',\n createdAt: date2.toDate(),\n user: {\n _id: 1,\n name: 'Developer',\n },\n },\n {\n text: 'Paris',\n createdAt: date2.toDate(),\n user: {\n _id: 2,\n name: 'John Doe',\n },\n image:\n 'https://static.vecteezy.com/system/resources/thumbnails/003/407/768/small/eiffel-tower-at-paris-france-free-photo.jpg',\n sent: true,\n received: true,\n },\n {\n text: '#awesome',\n createdAt: date1.toDate(),\n user: {\n _id: 1,\n name: 'Developer',\n },\n },\n {\n text: '#awesome 2',\n createdAt: date1.toDate(),\n user: {\n _id: 1,\n name: 'Developer',\n },\n },\n {\n text: '#awesome 3',\n createdAt: date1.toDate(),\n user: {\n _id: 1,\n name: 'Developer',\n },\n },\n].map((message, index) => ({\n ...message,\n _id: index + 1,\n})).reverse()\n\n// Earlier messages for \"Load Earlier\" functionality\nconst getEarlierMessages = (): IMessage[] => {\n const date = dayjs().subtract(1, 'year')\n return [\n {\n _id: Math.round(Math.random() * 1000000),\n text: 'It uses the same design as React, letting you compose a rich mobile UI from declarative components https://facebook.github.io/react-native/',\n createdAt: date.toDate(),\n user: {\n _id: 1,\n name: 'Developer',\n },\n },\n {\n _id: Math.round(Math.random() * 1000000),\n text: 'React Native lets you build mobile apps using only JavaScript',\n createdAt: date.toDate(),\n user: {\n _id: 1,\n name: 'Developer',\n },\n },\n {\n _id: Math.round(Math.random() * 1000000),\n text: 'This is a system message.',\n createdAt: date.toDate(),\n system: true,\n user: {\n _id: 0,\n },\n },\n ]\n}\n\n// ============================================================================\n// Media Utilities\n// ============================================================================\n\nasync function getLocationAsync() {\n const response = await requestForegroundPermissionsAsync()\n if (!response.granted)\n return\n\n const location = await getCurrentPositionAsync()\n if (!location)\n return\n\n return location.coords\n}\n\nasync function pickImageAsync() {\n const response = await ImagePicker.requestMediaLibraryPermissionsAsync()\n if (!response.granted)\n return\n\n const result = await ImagePicker.launchImageLibraryAsync({\n allowsEditing: true,\n aspect: [4, 3],\n })\n\n if (result.canceled)\n return\n\n return result.assets.map(({ uri }) => uri)\n}\n\nasync function takePictureAsync() {\n const response = await ImagePicker.requestCameraPermissionsAsync()\n if (!response.granted)\n return\n\n const result = await ImagePicker.launchCameraAsync({\n allowsEditing: true,\n aspect: [4, 3],\n })\n\n if (result.canceled)\n return\n\n return result.assets.map(({ uri }) => uri)\n}\n\n// ============================================================================\n// Custom Actions Component\n// ============================================================================\n\ninterface CustomActionsProps {\n renderIcon?: () => React.ReactNode\n wrapperStyle?: any\n containerStyle?: any\n iconTextStyle?: any\n onSend: (messages: IMessage[]) => void\n user: User\n}\n\nconst CustomActions = ({\n renderIcon,\n iconTextStyle,\n containerStyle,\n wrapperStyle,\n onSend,\n user,\n}: CustomActionsProps) => {\n const { showActionSheetWithOptions } = useActionSheet()\n const colorScheme = useColorScheme()\n\n const handlePickImage = useCallback(async () => {\n const images = await pickImageAsync()\n if (!images)\n return\n\n const messages: IMessage[] = images.map(image => ({\n _id: Math.random().toString(36).substring(7),\n image,\n text: '',\n createdAt: new Date(),\n user,\n }))\n onSend(messages)\n }, [onSend, user])\n\n const handleTakePicture = useCallback(async () => {\n const images = await takePictureAsync()\n if (!images)\n return\n\n const messages: IMessage[] = images.map(image => ({\n _id: Math.random().toString(36).substring(7),\n image,\n text: '',\n createdAt: new Date(),\n user,\n }))\n onSend(messages)\n }, [onSend, user])\n\n const handleSendLocation = useCallback(async () => {\n const location = await getLocationAsync()\n if (!location)\n return\n\n const message: IMessage = {\n _id: Math.random().toString(36).substring(7),\n location,\n text: '',\n createdAt: new Date(),\n user,\n }\n onSend([message])\n }, [onSend, user])\n\n const onActionsPress = useCallback(() => {\n const options: { title: string, action?: () => Promise }[] = [\n { title: 'Choose From Library', action: handlePickImage },\n { title: 'Take Picture', action: handleTakePicture },\n { title: 'Send Location', action: handleSendLocation },\n { title: 'Cancel' },\n ]\n const cancelButtonIndex = options.length - 1\n\n showActionSheetWithOptions(\n {\n options: options.map(o => o.title),\n cancelButtonIndex,\n },\n async buttonIndex => {\n if (buttonIndex !== undefined) {\n const selectedOption = options[buttonIndex]\n selectedOption?.action?.()\n }\n }\n )\n }, [showActionSheetWithOptions, handlePickImage, handleTakePicture, handleSendLocation])\n\n const renderIconComponent = useCallback(() => {\n if (renderIcon)\n return renderIcon()\n\n const wrapperColorStyle = colorScheme === 'dark' ? customActionsStyles.wrapper_dark : {}\n const iconTextColorStyle = colorScheme === 'dark' ? customActionsStyles.iconText_dark : {}\n\n return (\n \n +\n \n )\n }, [renderIcon, wrapperStyle, iconTextStyle, colorScheme])\n\n return (\n \n {renderIconComponent()}\n \n )\n}\n\nconst customActionsStyles = StyleSheet.create({\n container: {\n paddingHorizontal: 8,\n paddingVertical: 7,\n },\n wrapper: {\n width: 26,\n height: 26,\n borderRadius: 13,\n borderColor: '#b2b2b2',\n borderWidth: 2,\n alignItems: 'center',\n justifyContent: 'center',\n },\n wrapper_dark: {\n borderColor: '#666',\n },\n iconText: {\n color: '#b2b2b2',\n fontWeight: 'bold',\n fontSize: 16,\n lineHeight: 16,\n backgroundColor: 'transparent',\n textAlign: 'center',\n },\n iconText_dark: {\n color: '#999',\n },\n})\n\n// ============================================================================\n// Accessory Bar Component\n// ============================================================================\n\ninterface AccessoryBarProps {\n onSend: (messages: IMessage[]) => void\n isTyping: () => void\n user: User\n}\n\nconst AccessoryBar = ({ onSend, isTyping, user }: AccessoryBarProps) => {\n const colorScheme = useColorScheme()\n const isDark = colorScheme === 'dark'\n\n const handlePickImage = async () => {\n const images = await pickImageAsync()\n if (!images)\n return\n\n const messages: IMessage[] = images.map(image => ({\n _id: Math.random().toString(36).substring(7),\n image,\n text: '',\n createdAt: new Date(),\n user,\n }))\n onSend(messages)\n }\n\n const handleTakePicture = async () => {\n const images = await takePictureAsync()\n if (!images)\n return\n\n const messages: IMessage[] = images.map(image => ({\n _id: Math.random().toString(36).substring(7),\n image,\n text: '',\n createdAt: new Date(),\n user,\n }))\n onSend(messages)\n }\n\n const handleSendLocation = async () => {\n const location = await getLocationAsync()\n if (!location)\n return\n\n const message: IMessage = {\n _id: Math.random().toString(36).substring(7),\n location,\n text: '',\n createdAt: new Date(),\n user,\n }\n onSend([message])\n }\n\n const containerColorStyle = colorScheme === 'dark' ? accessoryBarStyles.container_dark : {}\n\n return (\n \n \n \n \n {\n isTyping()\n }}\n name='chat'\n color={isDark ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.5)'}\n />\n \n )\n}\n\nconst Button = ({\n onPress,\n size = 30,\n color = 'rgba(0,0,0,0.5)',\n name,\n}: {\n onPress: () => void\n size?: number\n color?: string\n name: React.ComponentProps['name']\n}) => (\n \n \n \n)\n\nconst accessoryBarStyles = StyleSheet.create({\n container: {\n height: 44,\n backgroundColor: 'white',\n flexDirection: 'row',\n justifyContent: 'space-around',\n alignItems: 'center',\n borderTopWidth: StyleSheet.hairlineWidth,\n borderTopColor: 'rgba(0,0,0,0.3)',\n paddingVertical: 5,\n },\n container_dark: {\n backgroundColor: '#1a1a1a',\n borderTopColor: 'rgba(255,255,255,0.2)',\n },\n})\n\n// ============================================================================\n// Custom View Component (for location messages)\n// ============================================================================\n\ninterface CustomViewProps {\n currentMessage: IMessage\n containerStyle?: any\n}\n\nconst CustomView = ({ currentMessage, containerStyle }: CustomViewProps) => {\n const handlePress = useCallback(() => {\n alert('Opening the map is not supported in this demo.')\n }, [])\n\n if (currentMessage.location)\n return (\n \n \n \n \n Location: {currentMessage.location.latitude.toFixed(4)}, {currentMessage.location.longitude.toFixed(4)}\n \n \n \n )\n\n return null\n}\n\nconst customViewStyles = StyleSheet.create({\n container: {\n width: 150,\n height: 100,\n borderRadius: 13,\n margin: 3,\n backgroundColor: '#f0f0f0',\n padding: 10,\n alignItems: 'center',\n justifyContent: 'center',\n },\n text: {\n color: 'tomato',\n fontWeight: 'bold',\n fontSize: 12,\n marginTop: 5,\n textAlign: 'center',\n },\n})\n\n// ============================================================================\n// Main Chat Component\n// ============================================================================\n\nfunction ChatExample() {\n const [messages, setMessages] = useState(initialMessages)\n const [isLoadingEarlier, setIsLoadingEarlier] = useState(false)\n const [isTyping, setIsTyping] = useState(false)\n const colorScheme = useColorScheme()\n\n const user = useMemo(\n () => ({\n _id: 1,\n name: 'Developer',\n }),\n []\n )\n\n const onSend = useCallback(\n (newMessages: IMessage[] = []) => {\n const messagesWithIds = newMessages.map(msg => ({\n ...msg,\n _id: msg._id || Math.random().toString(36).substring(7),\n user: msg.user || user,\n }))\n setMessages(previousMessages => GiftedChat.append(previousMessages, messagesWithIds))\n },\n [user]\n )\n\n const onPressLoadEarlierMessages = useCallback(() => {\n setIsLoadingEarlier(true)\n setTimeout(() => {\n setMessages(previousMessages => GiftedChat.prepend(previousMessages, getEarlierMessages()))\n setIsLoadingEarlier(false)\n }, 1500)\n }, [])\n\n const renderAccessory = useCallback(\n () => setIsTyping(isTyping => !isTyping)} user={user} />,\n [onSend, user]\n )\n\n const renderActions = useCallback(\n (props: any) => ,\n [onSend, user]\n )\n\n const renderCustomView = useCallback(\n (props: any) => ,\n []\n )\n\n return (\n \n \n \n )\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n backgroundColor: '#fff',\n },\n container_dark: {\n backgroundColor: '#000',\n },\n messagesContainer_dark: {\n backgroundColor: '#000',\n },\n composer_dark: {\n backgroundColor: '#1a1a1a',\n color: '#fff',\n },\n})\n\n// ============================================================================\n// App Export (wrapped with ActionSheetProvider)\n// ============================================================================\n\nexport default function App() {\n return (\n \n \n \n )\n}\n" }, { "path": "expoSnack/README.md", "content": "# React Native Gifted Chat - Expo Snack\n\nThis directory contains a self-contained Expo Snack example that demonstrates the full capabilities of React Native Gifted Chat.\n\n## ๐Ÿš€ Quick Start\n\n### Option 1: Use Expo Snack (Recommended)\n\n1. Go to [https://snack.expo.dev](https://snack.expo.dev)\n2. Click \"Create a new Snack\"\n3. Copy the entire contents of `ExpoSnack.tsx` from this repository\n4. Replace the default `App.tsx` content with the copied code\n5. Install dependencies (see below)\n6. Run on your device or simulator\n\n### Option 2: Use in Your Project\n\nSimply copy `ExpoSnack.tsx` into your Expo project and ensure all dependencies are installed.\n\n## ๐Ÿ“ฆ Required Dependencies\n\nAdd these dependencies to your Expo Snack or project:\n\n```json\n{\n \"dependencies\": {\n \"react-native-gifted-chat\": \"*\",\n \"react-native-gesture-handler\": \"*\",\n \"react-native-safe-area-context\": \"*\",\n \"react-native-reanimated\": \"*\",\n \"@expo/react-native-action-sheet\": \"*\",\n \"@expo/vector-icons\": \"*\",\n \"expo-image-picker\": \"*\",\n \"expo-location\": \"*\",\n \"expo-linking\": \"*\",\n \"react-native-maps\": \"*\",\n \"dayjs\": \"*\"\n }\n}\n```\n\n### In Expo Snack:\n\n1. Click on the \"Dependencies\" tab in the left sidebar\n2. Search for and add each dependency listed above\n3. Wait for the dependencies to install\n\n## โœจ Features Demonstrated\n\nThis example showcases all major features of React Native Gifted Chat:\n\n### Core Features\n- โœ… Text messaging with bubbles\n- โœ… User avatars and names\n- โœ… Message timestamps\n- โœ… Typing indicator\n- โœ… Load earlier messages\n- โœ… Dark mode support\n\n### Rich Media\n- ๐Ÿ“ท Image messages\n- ๐Ÿ“น Video messages\n- ๐ŸŽต Audio messages\n- ๐Ÿ“ Location/map messages\n\n### Interactive Elements\n- โšก Quick replies (radio and checkbox)\n- โž• Custom actions (via action sheet)\n- ๐ŸŽฏ Custom accessory bar with quick actions\n\n### Custom Components\n- **CustomActions**: Action button with action sheet menu\n- **AccessoryBar**: Bottom toolbar with photo, camera, location, and typing buttons\n- **CustomView**: Map view for location messages\n\n## ๐ŸŽฎ How to Use\n\n### Sending Messages\n1. Type in the text input at the bottom\n2. Press the send button to send a message\n\n### Adding Images\n1. Tap the **+** button or the **photo icon** in the accessory bar\n2. Choose \"Choose From Library\" or \"Take Picture\"\n3. Select or capture an image\n\n### Sending Location\n1. Tap the **location icon** in the accessory bar\n2. Grant location permissions when prompted\n3. Location will be sent and displayed as a map\n\n### Loading Earlier Messages\n1. Scroll to the top of the chat\n2. Tap \"Load earlier messages\"\n3. Wait for earlier messages to load (simulated with 1.5s delay)\n\n### Quick Replies\n1. Scroll to find the quick reply messages\n2. Tap on any quick reply option\n3. Watch it get added to your chat\n\n### Toggle Typing Indicator\n1. Tap the **chat icon** in the accessory bar\n2. See the typing indicator appear/disappear\n\n## ๐ŸŽจ Customization\n\nThe example includes several customizable components that you can modify:\n\n### Colors & Theming\nThe app automatically adapts to your device's color scheme (light/dark mode). You can customize the colors in the `styles` object:\n\n```typescript\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n backgroundColor: '#fff', // Light mode background\n },\n containerDark: {\n backgroundColor: '#000', // Dark mode background\n },\n // ... more styles\n})\n```\n\n### Message Data\nInitial messages are defined in the `initialMessages` array. You can modify or add more messages:\n\n```typescript\nconst initialMessages: IMessage[] = [\n {\n _id: 1,\n text: 'Your message here',\n createdAt: new Date(),\n user: {\n _id: 2,\n name: 'Bot Name',\n },\n },\n // ... more messages\n]\n```\n\n### User Configuration\nThe current user is defined in the `user` object:\n\n```typescript\nconst user = useMemo(() => ({\n _id: 1,\n name: 'Developer',\n}), [])\n```\n\n## ๐Ÿ“ฑ Platform Support\n\nThis example works on:\n- โœ… iOS (simulator and device)\n- โœ… Android (emulator and device)\n- โš ๏ธ Web (limited - maps and some media features may not work)\n\n## ๐Ÿ”ง Troubleshooting\n\n### Permissions Issues\nIf image picker or location features don't work:\n1. Make sure you've granted the necessary permissions in your device settings\n2. On iOS simulator, you may need to set a custom location\n3. On Android emulator, enable location services\n\n### Dependencies Not Installing\nIf dependencies fail to install in Expo Snack:\n1. Try refreshing the page\n2. Clear your browser cache\n3. Try using a different browser\n4. Check Expo Snack status at [status.expo.dev](https://status.expo.dev)\n\n### Maps Not Displaying\nMaps may not work on web or some simulators:\n1. Use a physical device for best results\n2. On Android emulator, enable Google Play Services\n3. On iOS simulator, maps should work by default\n\n## ๐Ÿ“– Code Structure\n\nThe `ExpoSnack.tsx` file is organized into these sections:\n\n1. **Imports**: All required dependencies\n2. **Data**: Initial messages and earlier messages\n3. **Media Utilities**: Functions for image picker, camera, and location\n4. **CustomView**: Component for rendering map locations\n5. **CustomActions**: Action button component with action sheet\n6. **AccessoryBar**: Bottom toolbar component\n7. **ChatExample**: Main chat component\n8. **App**: Root component with ActionSheetProvider\n\n## ๐Ÿš€ Next Steps\n\nOnce you have this working, you can:\n\n1. Customize the styling to match your app\n2. Connect to a real backend (Firebase, Socket.io, etc.)\n3. Add more custom message types\n4. Implement message persistence\n5. Add user authentication\n6. Implement push notifications\n\n## ๐Ÿ“š Additional Resources\n\n- [React Native Gifted Chat Documentation](https://github.com/FaridSafi/react-native-gifted-chat)\n- [Expo Documentation](https://docs.expo.dev)\n- [Expo Snack](https://snack.expo.dev)\n\n## โš ๏ธ Known Limitations\n\nWhen using in Expo Snack:\n- File sizes may be limited\n- Some native modules may not work\n- Performance may be slower than a local app\n- Network requests may be restricted\n\nFor production apps, it's recommended to use this as a starting point and develop locally with Expo CLI or React Native CLI.\n\n## ๐Ÿ’ก Tips\n\n1. **Test on a real device**: Many features work better on physical devices\n2. **Use the Expo Go app**: Scan the QR code with Expo Go for best results\n3. **Check console for errors**: Open the console in Expo Snack to see any errors\n4. **Experiment**: Modify the code and see changes in real-time!\n\n## ๐Ÿ“ License\n\nThis example is based on the React Native Gifted Chat library which is MIT licensed.\n\n---\n\nHappy chatting! ๐ŸŽ‰\n" }, { "path": "expoSnack/package.json", "content": "{\n \"dependencies\": {\n \"dayjs\": \"*\",\n \"expo-font\": \"~14.0.9\",\n \"expo-image\": \"~3.0.10\",\n \"expo-router\": \"~6.0.15\",\n \"expo-haptics\": \"~15.0.7\",\n \"expo-linking\": \"~8.0.9\",\n \"expo-symbols\": \"~1.0.7\",\n \"expo-location\": \"~19.0.7\",\n \"expo-clipboard\": \"~8.0.7\",\n \"expo-constants\": \"~18.0.10\",\n \"expo-system-ui\": \"~6.0.8\",\n \"expo-status-bar\": \"~3.0.8\",\n \"expo-app-loading\": \"^2.1.1\",\n \"expo-web-browser\": \"~15.0.9\",\n \"expo-image-picker\": \"~17.0.8\",\n \"@expo/vector-icons\": \"^15.0.3\",\n \"expo-splash-screen\": \"~31.0.11\",\n \"react-native-paper\": \"^5.14.5\",\n \"react-native-screens\": \"~4.16.0\",\n \"react-native-worklets\": \"0.5.1\",\n \"react-native-reanimated\": \"~4.1.1\",\n \"@react-navigation/native\": \"^7.1.20\",\n \"react-native-gifted-chat\": \"^3.0.1\",\n \"@react-navigation/elements\": \"^2.8.2\",\n \"react-native-gesture-handler\": \"~2.28.0\",\n \"@react-navigation/bottom-tabs\": \"^7.8.5\",\n \"react-native-safe-area-context\": \"~5.6.0\",\n \"@expo/react-native-action-sheet\": \"^4.1.1\",\n \"react-native-keyboard-controller\": \"1.18.5\",\n \"@react-native-masked-view/masked-view\": \"0.3.2\"\n }\n}\n" }, { "path": "jest.config.cjs", "content": "module.exports = {\n preset: 'react-native',\n resetMocks: true,\n setupFilesAfterEnv: [\n './node_modules/react-native/jest-preset',\n './node_modules/react-native-gesture-handler/jestSetup.js',\n './tests/setup.ts',\n ],\n moduleFileExtensions: ['js', 'jsx', 'json', 'ts', 'tsx'],\n transform: {\n '\\\\.js$': ['babel-jest', { configFile: './babel.config.cjs' }],\n },\n transformIgnorePatterns: [],\n testMatch: ['**/*.test.ts?(x)'],\n modulePathIgnorePatterns: ['./example'],\n coveragePathIgnorePatterns: ['./src/__tests__/'],\n}\n" }, { "path": "package.json", "content": "{\n \"name\": \"react-native-gifted-chat\",\n \"version\": \"3.3.2\",\n \"description\": \"The most complete chat UI for React Native\",\n \"keywords\": [\n \"android\",\n \"ios\",\n \"react-native\",\n \"react\",\n \"react-component\",\n \"messenger\",\n \"message\",\n \"chat\"\n ],\n \"homepage\": \"https://github.com/FaridSafi/react-native-gifted-chat#readme\",\n \"bugs\": {\n \"url\": \"https://github.com/FaridSafi/react-native-gifted-chat/issues\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/FaridSafi/react-native-gifted-chat.git\"\n },\n \"license\": \"MIT\",\n \"author\": \"Farid Safi\",\n \"type\": \"module\",\n \"main\": \"src/index.ts\",\n \"types\": \"src/index.ts\",\n \"files\": [\n \"src\"\n ],\n \"scripts\": {\n \"lint\": \"yarn eslint src example\",\n \"lint:fix\": \"yarn eslint --cache --fix src example\",\n \"prepublishOnly\": \"yarn lint && yarn test\",\n \"start\": \"cd example && expo start\",\n \"start:web\": \"cd example && expo start -w --dev\",\n \"test\": \"TZ=Europe/Paris jest --no-watchman\",\n \"test:coverage\": \"TZ=Europe/Paris jest --coverage\",\n \"test:watch\": \"TZ=Europe/Paris jest --watch\",\n \"tsc:write\": \"yarn tsc --project tsconfig.json\",\n \"tsc:watch\": \"yarn tsc --watch --noEmit\",\n \"fresh\": \"yarn start --reset-cache\",\n \"prepare\": \"yarn husky\"\n },\n \"lint-staged\": {\n \"src/*.{json,js,jsx,ts,tsx}\": [\n \"yarn lint:fix\"\n ]\n },\n \"dependencies\": {\n \"@expo/react-native-action-sheet\": \"^4.1.1\",\n \"@types/lodash.isequal\": \"^4.5.8\",\n \"dayjs\": \"^1.11.19\",\n \"lodash.isequal\": \"^4.5.0\",\n \"react-native-zoom-reanimated\": \"^1.5.2\"\n },\n \"devDependencies\": {\n \"@babel/core\": \"^7.28.5\",\n \"@babel/plugin-transform-react-jsx\": \"^7.27.1\",\n \"@babel/plugin-transform-unicode-property-regex\": \"^7.27.1\",\n \"@babel/preset-env\": \"^7.28.5\",\n \"@react-native-community/cli\": \"20.0.0\",\n \"@react-native-community/cli-platform-android\": \"20.0.0\",\n \"@react-native-community/cli-platform-ios\": \"20.0.0\",\n \"@react-native/babel-preset\": \"0.81.5\",\n \"@react-native/eslint-config\": \"0.81.5\",\n \"@react-native/metro-config\": \"0.81.5\",\n \"@react-native/typescript-config\": \"0.81.5\",\n \"@stylistic/eslint-plugin\": \"^3.1.0\",\n \"@testing-library/dom\": \"^10.4.1\",\n \"@testing-library/react\": \"^16.3.0\",\n \"@testing-library/react-native\": \"^13.3.3\",\n \"@types/jest\": \"^29.5.13\",\n \"@types/react\": \"^19.2.5\",\n \"@types/react-dom\": \"^19.2.3\",\n \"@types/react-native\": \"^0.72.8\",\n \"@types/react-test-renderer\": \"^19.1.0\",\n \"@typescript-eslint/eslint-plugin\": \"^8.46.4\",\n \"@typescript-eslint/parser\": \"^8.46.4\",\n \"babel-jest\": \"^29.7.0\",\n \"eslint\": \"^9.18.0\",\n \"eslint-import-resolver-typescript\": \"^4.4.4\",\n \"eslint-plugin-import\": \"^2.32.0\",\n \"eslint-plugin-jest\": \"^28.11.0\",\n \"eslint-plugin-perfectionist\": \"^4.15.1\",\n \"eslint-plugin-react\": \"^7.37.5\",\n \"eslint-plugin-react-hooks\": \"^5.1.0\",\n \"husky\": \"^9.1.7\",\n \"jest\": \"^29.7.0\",\n \"json\": \"^11.0.0\",\n \"lint-staged\": \"^15.5.0\",\n \"react\": \"19.1.0\",\n \"react-dom\": \"19.1.0\",\n \"react-native\": \"0.81.5\",\n \"react-native-gesture-handler\": \"~2.30.0\",\n \"react-native-keyboard-controller\": \"1.20.6\",\n \"react-native-reanimated\": \"~4.2.1\",\n \"react-native-safe-area-context\": \"~5.6.2\",\n \"react-native-worklets\": \"0.7.2\",\n \"react-test-renderer\": \"19.1.0\",\n \"typescript\": \"^5.9.3\"\n },\n \"peerDependencies\": {\n \"react\": \">=18.0.0\",\n \"react-native\": \"*\",\n \"react-native-gesture-handler\": \">=2.0.0\",\n \"react-native-keyboard-controller\": \">=1.0.0\",\n \"react-native-reanimated\": \">=3.0.0 || ^4.0.0\",\n \"react-native-safe-area-context\": \">=5.0.0\"\n },\n \"packageManager\": \"yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e\",\n \"engines\": {\n \"node\": \">=20\"\n }\n}\n" }, { "path": "src/Actions.tsx", "content": "import React, { ReactNode, useCallback } from 'react'\nimport {\n StyleSheet,\n View,\n StyleProp,\n ViewStyle,\n TextStyle,\n} from 'react-native'\nimport { Text } from 'react-native-gesture-handler'\nimport { Color } from './Color'\nimport { TouchableOpacity } from './components/TouchableOpacity'\n\nimport { useChatContext } from './GiftedChatContext'\nimport stylesCommon from './styles'\n\nexport interface ActionsProps {\n actions?: Array<{ title: string, action: () => void }>\n actionSheetOptionTintColor?: string\n icon?: () => ReactNode\n wrapperStyle?: StyleProp\n iconTextStyle?: StyleProp\n buttonStyle?: StyleProp\n onPressActionButton?(): void\n}\n\nexport function Actions ({\n actions,\n actionSheetOptionTintColor = Color.optionTintColor,\n icon,\n wrapperStyle,\n iconTextStyle,\n onPressActionButton,\n buttonStyle,\n}: ActionsProps) {\n const { actionSheet } = useChatContext()\n\n const handlePress = useCallback(() => {\n if (onPressActionButton) {\n onPressActionButton()\n return\n }\n\n if (!actions?.length)\n return\n\n const titles = actions.map(item => item.title)\n\n actionSheet().showActionSheetWithOptions(\n {\n options: titles,\n cancelButtonIndex: titles.length - 1,\n tintColor: actionSheetOptionTintColor,\n },\n (buttonIndex?: number) => {\n if (buttonIndex === undefined)\n return\n\n const item = actions[buttonIndex]\n item.action?.()\n }\n )\n }, [actionSheet, actions, actionSheetOptionTintColor, onPressActionButton])\n\n const renderIcon = useCallback(() => {\n if (icon)\n return icon()\n\n return (\n \n {'+'}\n \n )\n }, [icon, iconTextStyle, wrapperStyle])\n\n return (\n \n \n {renderIcon()}\n \n \n )\n}\n\nconst styles = StyleSheet.create({\n container: {\n alignItems: 'flex-end',\n },\n button: {\n paddingLeft: 10,\n paddingRight: 4,\n paddingVertical: 7,\n },\n\n wrapper: {\n borderColor: Color.defaultColor,\n borderWidth: 2,\n width: 26,\n height: 26,\n borderRadius: 13,\n },\n iconText: {\n color: Color.defaultColor,\n fontWeight: 'bold',\n fontSize: 16,\n lineHeight: 16,\n },\n})\n" }, { "path": "src/Avatar.tsx", "content": "import React, { ReactNode, useCallback } from 'react'\nimport {\n ImageStyle,\n StyleSheet,\n TextStyle,\n View,\n ViewStyle,\n} from 'react-native'\nimport { GiftedAvatar } from './GiftedAvatar'\nimport { IMessage, LeftRightStyle, User } from './Models'\nimport { isSameUser, isSameDay } from './utils'\n\ninterface Styles {\n left: {\n container: ViewStyle\n onTop: ViewStyle\n image: ImageStyle\n }\n right: {\n container: ViewStyle\n onTop: ViewStyle\n image: ImageStyle\n }\n}\n\nconst styles: Styles = {\n left: StyleSheet.create({\n container: {\n marginRight: 8,\n },\n onTop: {\n alignSelf: 'flex-start',\n },\n image: {\n height: 36,\n width: 36,\n borderRadius: 18,\n },\n }),\n right: StyleSheet.create({\n container: {\n marginLeft: 8,\n },\n onTop: {\n alignSelf: 'flex-start',\n },\n image: {\n height: 36,\n width: 36,\n borderRadius: 18,\n },\n }),\n}\n\nexport interface AvatarProps {\n currentMessage: TMessage\n previousMessage?: TMessage\n nextMessage?: TMessage\n position: 'left' | 'right'\n isAvatarOnTop?: boolean\n isAvatarVisibleForEveryMessage?: boolean\n imageStyle?: LeftRightStyle\n containerStyle?: LeftRightStyle\n textStyle?: TextStyle\n renderAvatar?(props: Omit, 'renderAvatar'>): ReactNode\n onPressAvatar?: (user: User) => void\n onLongPressAvatar?: (user: User) => void\n}\n\nexport function Avatar (\n props: AvatarProps\n) {\n const {\n isAvatarOnTop,\n isAvatarVisibleForEveryMessage,\n containerStyle,\n position,\n currentMessage,\n renderAvatar,\n previousMessage,\n nextMessage,\n imageStyle,\n onPressAvatar,\n onLongPressAvatar,\n } = props\n\n const messageToCompare = isAvatarOnTop ? previousMessage : nextMessage\n\n const renderAvatarComponent = useCallback(() => {\n if (renderAvatar)\n return renderAvatar({\n isAvatarOnTop,\n isAvatarVisibleForEveryMessage,\n containerStyle,\n position,\n currentMessage,\n previousMessage,\n nextMessage,\n imageStyle,\n onPressAvatar,\n onLongPressAvatar,\n })\n\n if (currentMessage)\n return (\n onPressAvatar?.(currentMessage.user)}\n onLongPress={() => onLongPressAvatar?.(currentMessage.user)}\n />\n )\n\n return null\n }, [\n renderAvatar,\n isAvatarOnTop,\n isAvatarVisibleForEveryMessage,\n containerStyle,\n position,\n currentMessage,\n previousMessage,\n nextMessage,\n imageStyle,\n onPressAvatar,\n onLongPressAvatar,\n ])\n\n if (renderAvatar === null)\n return null\n\n if (\n !isAvatarVisibleForEveryMessage &&\n currentMessage &&\n messageToCompare &&\n isSameUser(currentMessage, messageToCompare) &&\n isSameDay(currentMessage, messageToCompare)\n )\n return (\n \n \n \n )\n\n return (\n \n {renderAvatarComponent()}\n \n )\n}\n" }, { "path": "src/Bubble/index.tsx", "content": "import React, { useCallback, useMemo } from 'react'\nimport {\n View,\n Pressable,\n} from 'react-native'\n\nimport { Text } from 'react-native-gesture-handler'\n\nimport { MessageReply } from '../components/MessageReply'\nimport { useChatContext } from '../GiftedChatContext'\nimport { MessageAudio } from '../MessageAudio'\nimport { MessageImage } from '../MessageImage'\nimport { MessageText } from '../MessageText'\nimport { MessageVideo } from '../MessageVideo'\nimport { IMessage } from '../Models'\nimport { QuickReplies } from '../QuickReplies'\nimport { getStyleWithPosition } from '../styles'\nimport { Time } from '../Time'\nimport { isSameUser, isSameDay, renderComponentOrElement } from '../utils'\nimport styles from './styles'\nimport { BubbleProps, RenderMessageTextProps } from './types'\n\nexport * from './types'\n\nexport const Bubble = (props: BubbleProps): React.ReactElement => {\n const {\n currentMessage,\n nextMessage,\n position,\n containerToNextStyle,\n previousMessage,\n containerToPreviousStyle,\n onQuickReply,\n renderQuickReplySend,\n quickReplyStyle,\n quickReplyTextStyle,\n quickReplyContainerStyle,\n containerStyle,\n wrapperStyle,\n bottomContainerStyle,\n onPressMessage: onPressMessageProp,\n onLongPressMessage: onLongPressMessageProp,\n } = props\n\n const context = useChatContext()\n\n const onPress = useCallback(() => {\n onPressMessageProp?.(context, currentMessage)\n }, [onPressMessageProp, context, currentMessage])\n\n const onLongPress = useCallback(() => {\n onLongPressMessageProp?.(context, currentMessage)\n }, [\n currentMessage,\n context,\n onLongPressMessageProp,\n ])\n\n const styledBubbleToNext = useMemo(() => {\n if (\n currentMessage &&\n nextMessage &&\n position &&\n isSameUser(currentMessage, nextMessage) &&\n isSameDay(currentMessage, nextMessage)\n )\n return [\n getStyleWithPosition(styles, 'containerToNext', position),\n containerToNextStyle?.[position],\n ]\n\n return null\n }, [\n currentMessage,\n nextMessage,\n position,\n containerToNextStyle,\n ])\n\n const styledBubbleToPrevious = useMemo(() => {\n if (\n currentMessage &&\n previousMessage &&\n position &&\n isSameUser(currentMessage, previousMessage) &&\n isSameDay(currentMessage, previousMessage)\n )\n return [\n getStyleWithPosition(styles, 'containerToPrevious', position),\n containerToPreviousStyle?.[position],\n ]\n\n return null\n }, [\n currentMessage,\n previousMessage,\n position,\n containerToPreviousStyle,\n ])\n\n const renderQuickReplies = useCallback(() => {\n if (currentMessage?.quickReplies) {\n const {\n /* eslint-disable @typescript-eslint/no-unused-vars */\n containerStyle,\n wrapperStyle,\n /* eslint-enable @typescript-eslint/no-unused-vars */\n ...quickReplyProps\n } = props\n\n if (props.renderQuickReplies)\n return renderComponentOrElement(props.renderQuickReplies, quickReplyProps)\n\n return (\n \n )\n }\n\n return null\n }, [\n currentMessage,\n onQuickReply,\n renderQuickReplySend,\n quickReplyStyle,\n quickReplyTextStyle,\n quickReplyContainerStyle,\n nextMessage,\n props,\n ])\n\n const renderMessageText = useCallback(() => {\n if (currentMessage?.text) {\n const {\n /* eslint-disable @typescript-eslint/no-unused-vars */\n containerStyle,\n wrapperStyle,\n messageTextProps,\n /* eslint-enable @typescript-eslint/no-unused-vars */\n ...messageTextPropsRest\n } = props\n\n const combinedProps = {\n ...messageTextPropsRest,\n ...messageTextProps,\n } as RenderMessageTextProps\n\n if (props.renderMessageText)\n return renderComponentOrElement(props.renderMessageText, combinedProps)\n\n return \n }\n\n return null\n }, [props, currentMessage])\n\n const renderMessageImage = useCallback(() => {\n if (currentMessage?.image) {\n const {\n /* eslint-disable @typescript-eslint/no-unused-vars */\n containerStyle,\n wrapperStyle,\n /* eslint-enable @typescript-eslint/no-unused-vars */\n ...messageImageProps\n } = props\n\n if (props.renderMessageImage)\n return renderComponentOrElement(props.renderMessageImage, messageImageProps)\n\n return \n }\n\n return null\n }, [props, currentMessage])\n\n const renderMessageVideo = useCallback(() => {\n if (!currentMessage?.video)\n return null\n\n const {\n /* eslint-disable @typescript-eslint/no-unused-vars */\n containerStyle,\n wrapperStyle,\n /* eslint-enable @typescript-eslint/no-unused-vars */\n ...messageVideoProps\n } = props\n\n if (props.renderMessageVideo)\n return renderComponentOrElement(props.renderMessageVideo, messageVideoProps)\n\n return \n }, [props, currentMessage])\n\n const renderMessageAudio = useCallback(() => {\n if (!currentMessage?.audio)\n return null\n\n const {\n /* eslint-disable @typescript-eslint/no-unused-vars */\n containerStyle,\n wrapperStyle,\n /* eslint-enable @typescript-eslint/no-unused-vars */\n ...messageAudioProps\n } = props\n\n if (props.renderMessageAudio)\n return renderComponentOrElement(props.renderMessageAudio, messageAudioProps)\n\n return \n }, [props, currentMessage])\n\n const renderTicks = useCallback(() => {\n const {\n renderTicks,\n user,\n } = props\n\n if (renderTicks && currentMessage)\n return renderComponentOrElement(renderTicks, currentMessage)\n\n if (\n user &&\n currentMessage?.user &&\n currentMessage.user._id !== user._id\n )\n return null\n\n if (\n currentMessage &&\n (currentMessage.sent || currentMessage.received || currentMessage.pending)\n )\n return (\n \n {!!currentMessage.sent && (\n \n {'โœ“'}\n \n )}\n {!!currentMessage.received && (\n \n {'โœ“'}\n \n )}\n {!!currentMessage.pending && (\n \n {'๐Ÿ•“'}\n \n )}\n \n )\n\n return null\n }, [\n props,\n currentMessage,\n ])\n\n const renderTime = useCallback(() => {\n if (currentMessage?.createdAt) {\n const {\n /* eslint-disable @typescript-eslint/no-unused-vars */\n containerStyle,\n wrapperStyle,\n textStyle,\n /* eslint-enable @typescript-eslint/no-unused-vars */\n ...timeProps\n } = props\n\n if (props.renderTime)\n return renderComponentOrElement(props.renderTime, timeProps)\n\n return