├── .circleci └── config.yml ├── .editorconfig ├── .eslintrc.js ├── .gitattributes ├── .github ├── FUNDING.yml └── actions │ └── setup │ └── action.yml ├── .gitignore ├── .husky ├── .npmignore ├── commit-msg └── pre-commit ├── .nvmrc ├── .watchmanconfig ├── .yarn ├── plugins │ └── @yarnpkg │ │ ├── plugin-interactive-tools.cjs │ │ └── plugin-workspace-tools.cjs └── releases │ └── yarn-3.6.1.cjs ├── .yarnrc.yml ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── babel.config.js ├── example ├── .bundle │ └── config ├── .watchmanconfig ├── Gemfile ├── Gemfile.lock ├── README.md ├── android │ ├── app │ │ ├── build.gradle │ │ ├── debug.keystore │ │ ├── proguard-rules.pro │ │ └── src │ │ │ ├── debug │ │ │ └── AndroidManifest.xml │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── java │ │ │ └── com │ │ │ │ └── messyexample │ │ │ │ ├── MainActivity.kt │ │ │ │ └── MainApplication.kt │ │ │ └── res │ │ │ ├── drawable │ │ │ └── rn_edit_text_material.xml │ │ │ ├── mipmap-hdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-mdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ └── values │ │ │ ├── strings.xml │ │ │ └── styles.xml │ ├── build.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ └── settings.gradle ├── app.json ├── babel.config.js ├── index.js ├── ios │ ├── .xcode.env │ ├── .xcode.env.local │ ├── File.swift │ ├── MessyExample-Bridging-Header.h │ ├── MessyExample.xcodeproj │ │ ├── project.pbxproj │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ └── MessyExample.xcscheme │ ├── MessyExample.xcworkspace │ │ ├── contents.xcworkspacedata │ │ └── xcshareddata │ │ │ └── IDEWorkspaceChecks.plist │ ├── MessyExample │ │ ├── AppDelegate.h │ │ ├── AppDelegate.mm │ │ ├── Images.xcassets │ │ │ ├── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ │ └── Contents.json │ │ ├── Info.plist │ │ ├── LaunchScreen.storyboard │ │ └── main.m │ ├── MessyExampleTests │ │ ├── Info.plist │ │ └── MessyExampleTests.m │ ├── Podfile │ └── Podfile.lock ├── jest.config.js ├── metro.config.js ├── package.json ├── react-native.config.js └── src │ └── App.tsx ├── lefthook.yml ├── package.json ├── preview ├── demo_1.png └── demo_2.png ├── src ├── Messy.tsx ├── MessyFooter.tsx ├── MessyFooter │ ├── MessyFooter.default.tsx │ ├── MessyFooterAction.tsx │ └── MessyFooterEmoji.default.tsx ├── MessyLoading.tsx ├── MessyMessage │ ├── MessyMessage.tsx │ ├── MessyMessageAvatar.tsx │ ├── MessyMessageContent.tsx │ ├── MessyMessageContentImage.tsx │ ├── MessyMessageContentLocation.tsx │ ├── MessyMessageContentOther.tsx │ ├── MessyMessageContentReaction.tsx │ ├── MessyMessageContentReactionButton.tsx │ ├── MessyMessageContentStatus.tsx │ ├── MessyMessageContentText.tsx │ ├── MessyMessageContentVideo.tsx │ ├── MessyMessageDateTime.tsx │ └── index.ts ├── MessyReaction │ ├── MessyReactionPopup.tsx │ └── modules │ │ └── useReactionMessage.ts ├── elements │ ├── Loading │ │ └── Loading.tsx │ ├── MImage │ │ └── MImage.tsx │ ├── MText │ │ └── MText.tsx │ └── MVideo │ │ └── MVideo.tsx ├── index.tsx ├── modules │ ├── helpers.ts │ ├── index.ts │ ├── useColors.ts │ ├── useMessyEmoji.ts │ ├── useMessyListRef.ts │ ├── useMessyPropsContext.ts │ ├── useSelectFile.ts │ └── useSizes.ts ├── types.d.ts └── utils │ ├── CommonStyle.ts │ └── images │ ├── camera.png │ ├── circle_o.png │ ├── close.png │ ├── emoji.png │ ├── image.png │ ├── microphone.png │ ├── pause.png │ ├── play.png │ ├── send.png │ ├── time_check.png │ ├── time_check_done.png │ └── x.png ├── tsconfig.build.json ├── tsconfig.json └── yarn.lock /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | version: 2.1 2 | 3 | executors: 4 | default: 5 | docker: 6 | - image: circleci/node:10 7 | working_directory: ~/project 8 | 9 | commands: 10 | attach_project: 11 | steps: 12 | - attach_workspace: 13 | at: ~/project 14 | 15 | jobs: 16 | install-dependencies: 17 | executor: default 18 | steps: 19 | - checkout 20 | - attach_project 21 | - restore_cache: 22 | keys: 23 | - dependencies-{{ checksum "package.json" }} 24 | - dependencies- 25 | - restore_cache: 26 | keys: 27 | - dependencies-example-{{ checksum "example/package.json" }} 28 | - dependencies-example- 29 | - run: 30 | name: Install dependencies 31 | command: | 32 | yarn install --cwd example --frozen-lockfile 33 | yarn install --frozen-lockfile 34 | - save_cache: 35 | key: dependencies-{{ checksum "package.json" }} 36 | paths: node_modules 37 | - save_cache: 38 | key: dependencies-example-{{ checksum "example/package.json" }} 39 | paths: example/node_modules 40 | - persist_to_workspace: 41 | root: . 42 | paths: . 43 | 44 | lint: 45 | executor: default 46 | steps: 47 | - attach_project 48 | - run: 49 | name: Lint files 50 | command: | 51 | yarn lint 52 | 53 | typescript: 54 | executor: default 55 | steps: 56 | - attach_project 57 | - run: 58 | name: Typecheck files 59 | command: | 60 | yarn typescript 61 | 62 | unit-tests: 63 | executor: default 64 | steps: 65 | - attach_project 66 | - run: 67 | name: Run unit tests 68 | command: | 69 | yarn test --coverage 70 | - store_artifacts: 71 | path: coverage 72 | destination: coverage 73 | 74 | build-package: 75 | executor: default 76 | steps: 77 | - attach_project 78 | - run: 79 | name: Build package 80 | command: | 81 | yarn prepare 82 | 83 | workflows: 84 | build-and-test: 85 | jobs: 86 | - install-dependencies 87 | - lint: 88 | requires: 89 | - install-dependencies 90 | - typescript: 91 | requires: 92 | - install-dependencies 93 | - unit-tests: 94 | requires: 95 | - install-dependencies 96 | - build-package: 97 | requires: 98 | - install-dependencies 99 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | 9 | indent_style = space 10 | indent_size = 2 11 | 12 | end_of_line = lf 13 | charset = utf-8 14 | trim_trailing_whitespace = true 15 | insert_final_newline = true 16 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: [ 3 | 'eslint:recommended', 4 | 'plugin:@typescript-eslint/recommended', 5 | 'prettier', 6 | '@react-native', 7 | ], 8 | parser: '@typescript-eslint/parser', 9 | plugins: ['@typescript-eslint', 'jest'], 10 | root: true, 11 | rules: { 12 | 'react-native/no-inline-styles': 0, 13 | 'no-sparse-arrays': 0, 14 | 'react-hooks/exhaustive-deps': 0, 15 | '@typescript-eslint/no-non-null-assertion': 0, 16 | '@typescript-eslint/no-var-requires': 0, 17 | '@typescript-eslint/ban-ts-comment': 0, 18 | '@typescript-eslint/no-explicit-any': 0, 19 | '@typescript-eslint/ban-types': 0, 20 | }, 21 | }; 22 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | # specific for windows script files 3 | *.bat text eol=crlf -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: vokhuyetOz # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | #patreon: # Replace with a single Patreon username 5 | #open_collective: # Replace with a single Open Collective username 6 | #ko_fi: # Replace with a single Ko-fi username 7 | #tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | #community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | #liberapay: # Replace with a single Liberapay username 10 | #issuehunt: # Replace with a single IssueHunt username 11 | #lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 12 | #polar: # Replace with a single Polar username 13 | buy_me_a_coffee: vokhuyetoz # Replace with a single Buy Me a Coffee username 14 | #thanks_dev: # Replace with a single thanks.dev username 15 | #custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 16 | -------------------------------------------------------------------------------- /.github/actions/setup/action.yml: -------------------------------------------------------------------------------- 1 | name: Setup 2 | description: Setup Node.js and install dependencies 3 | 4 | runs: 5 | using: composite 6 | steps: 7 | - name: Setup Node.js 8 | uses: actions/setup-node@v3 9 | with: 10 | node-version-file: .nvmrc 11 | 12 | - name: Cache dependencies 13 | id: yarn-cache 14 | uses: actions/cache@v3 15 | with: 16 | path: | 17 | **/node_modules 18 | .yarn/install-state.gz 19 | key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}-${{ hashFiles('**/package.json', '!node_modules/**') }} 20 | restore-keys: | 21 | ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }} 22 | ${{ runner.os }}-yarn- 23 | 24 | - name: Install dependencies 25 | if: steps.yarn-cache.outputs.cache-hit != 'true' 26 | run: yarn install --immutable 27 | shell: bash 28 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # XDE 6 | .expo/ 7 | 8 | # VSCode 9 | .vscode/ 10 | jsconfig.json 11 | 12 | # Xcode 13 | # 14 | build/ 15 | *.pbxuser 16 | !default.pbxuser 17 | *.mode1v3 18 | !default.mode1v3 19 | *.mode2v3 20 | !default.mode2v3 21 | *.perspectivev3 22 | !default.perspectivev3 23 | xcuserdata 24 | *.xccheckout 25 | *.moved-aside 26 | DerivedData 27 | *.hmap 28 | *.ipa 29 | *.xcuserstate 30 | project.xcworkspace 31 | 32 | # Android/IJ 33 | # 34 | .classpath 35 | .cxx 36 | .gradle 37 | .idea 38 | .project 39 | .settings 40 | local.properties 41 | android.iml 42 | 43 | # Cocoapods 44 | # 45 | example/ios/Pods 46 | 47 | # Ruby 48 | example/vendor/ 49 | 50 | # node.js 51 | # 52 | node_modules/ 53 | npm-debug.log 54 | yarn-debug.log 55 | yarn-error.log 56 | 57 | # BUCK 58 | buck-out/ 59 | \.buckd/ 60 | android/app/libs 61 | android/keystores/debug.keystore 62 | 63 | # Yarn 64 | .yarn/* 65 | !.yarn/patches 66 | !.yarn/plugins 67 | !.yarn/releases 68 | !.yarn/sdks 69 | !.yarn/versions 70 | 71 | # Expo 72 | .expo/ 73 | 74 | # Turborepo 75 | .turbo/ 76 | 77 | # generated by bob 78 | lib/ 79 | -------------------------------------------------------------------------------- /.husky/.npmignore: -------------------------------------------------------------------------------- 1 | _ 2 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | # . "$(dirname "$0")/_/husky.sh" 3 | 4 | # yarn commitlint -E HUSKY_GIT_PARAMS 5 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | # . "$(dirname "$0")/_/husky.sh" 3 | 4 | # yarn lint && yarn typescript 5 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v18 2 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | nodeLinker: node-modules 2 | nmHoistingLimits: workspaces 3 | 4 | plugins: 5 | - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs 6 | spec: "@yarnpkg/plugin-interactive-tools" 7 | - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs 8 | spec: "@yarnpkg/plugin-workspace-tools" 9 | 10 | yarnPath: .yarn/releases/yarn-3.6.1.cjs 11 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | 2 | # Contributor Covenant Code of Conduct 3 | 4 | ## Our Pledge 5 | 6 | We as members, contributors, and leaders pledge to make participation in our 7 | community a harassment-free experience for everyone, regardless of age, body 8 | size, visible or invisible disability, ethnicity, sex characteristics, gender 9 | identity and expression, level of experience, education, socio-economic status, 10 | nationality, personal appearance, race, caste, color, religion, or sexual 11 | identity and orientation. 12 | 13 | We pledge to act and interact in ways that contribute to an open, welcoming, 14 | diverse, inclusive, and healthy community. 15 | 16 | ## Our Standards 17 | 18 | Examples of behavior that contributes to a positive environment for our 19 | community include: 20 | 21 | * Demonstrating empathy and kindness toward other people 22 | * Being respectful of differing opinions, viewpoints, and experiences 23 | * Giving and gracefully accepting constructive feedback 24 | * Accepting responsibility and apologizing to those affected by our mistakes, 25 | and learning from the experience 26 | * Focusing on what is best not just for us as individuals, but for the overall 27 | community 28 | 29 | Examples of unacceptable behavior include: 30 | 31 | * The use of sexualized language or imagery, and sexual attention or advances of 32 | any kind 33 | * Trolling, insulting or derogatory comments, and personal or political attacks 34 | * Public or private harassment 35 | * Publishing others' private information, such as a physical or email address, 36 | without their explicit permission 37 | * Other conduct which could reasonably be considered inappropriate in a 38 | professional setting 39 | 40 | ## Enforcement Responsibilities 41 | 42 | Community leaders are responsible for clarifying and enforcing our standards of 43 | acceptable behavior and will take appropriate and fair corrective action in 44 | response to any behavior that they deem inappropriate, threatening, offensive, 45 | or harmful. 46 | 47 | Community leaders have the right and responsibility to remove, edit, or reject 48 | comments, commits, code, wiki edits, issues, and other contributions that are 49 | not aligned to this Code of Conduct, and will communicate reasons for moderation 50 | decisions when appropriate. 51 | 52 | ## Scope 53 | 54 | This Code of Conduct applies within all community spaces, and also applies when 55 | an individual is officially representing the community in public spaces. 56 | Examples of representing our community include using an official e-mail address, 57 | posting via an official social media account, or acting as an appointed 58 | representative at an online or offline event. 59 | 60 | ## Enforcement 61 | 62 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 63 | reported to the community leaders responsible for enforcement at 64 | [INSERT CONTACT METHOD]. 65 | All complaints will be reviewed and investigated promptly and fairly. 66 | 67 | All community leaders are obligated to respect the privacy and security of the 68 | reporter of any incident. 69 | 70 | ## Enforcement Guidelines 71 | 72 | Community leaders will follow these Community Impact Guidelines in determining 73 | the consequences for any action they deem in violation of this Code of Conduct: 74 | 75 | ### 1. Correction 76 | 77 | **Community Impact**: Use of inappropriate language or other behavior deemed 78 | unprofessional or unwelcome in the community. 79 | 80 | **Consequence**: A private, written warning from community leaders, providing 81 | clarity around the nature of the violation and an explanation of why the 82 | behavior was inappropriate. A public apology may be requested. 83 | 84 | ### 2. Warning 85 | 86 | **Community Impact**: A violation through a single incident or series of 87 | actions. 88 | 89 | **Consequence**: A warning with consequences for continued behavior. No 90 | interaction with the people involved, including unsolicited interaction with 91 | those enforcing the Code of Conduct, for a specified period of time. This 92 | includes avoiding interactions in community spaces as well as external channels 93 | like social media. Violating these terms may lead to a temporary or permanent 94 | ban. 95 | 96 | ### 3. Temporary Ban 97 | 98 | **Community Impact**: A serious violation of community standards, including 99 | sustained inappropriate behavior. 100 | 101 | **Consequence**: A temporary ban from any sort of interaction or public 102 | communication with the community for a specified period of time. No public or 103 | private interaction with the people involved, including unsolicited interaction 104 | with those enforcing the Code of Conduct, is allowed during this period. 105 | Violating these terms may lead to a permanent ban. 106 | 107 | ### 4. Permanent Ban 108 | 109 | **Community Impact**: Demonstrating a pattern of violation of community 110 | standards, including sustained inappropriate behavior, harassment of an 111 | individual, or aggression toward or disparagement of classes of individuals. 112 | 113 | **Consequence**: A permanent ban from any sort of public interaction within the 114 | community. 115 | 116 | ## Attribution 117 | 118 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 119 | version 2.1, available at 120 | [https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1]. 121 | 122 | Community Impact Guidelines were inspired by 123 | [Mozilla's code of conduct enforcement ladder][Mozilla CoC]. 124 | 125 | For answers to common questions about this code of conduct, see the FAQ at 126 | [https://www.contributor-covenant.org/faq][FAQ]. Translations are available at 127 | [https://www.contributor-covenant.org/translations][translations]. 128 | 129 | [homepage]: https://www.contributor-covenant.org 130 | [v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html 131 | [Mozilla CoC]: https://github.com/mozilla/diversity 132 | [FAQ]: https://www.contributor-covenant.org/faq 133 | [translations]: https://www.contributor-covenant.org/translations 134 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Contributions are always welcome, no matter how large or small! 4 | 5 | We want this community to be friendly and respectful to each other. Please follow it in all your interactions with the project. Before contributing, please read the [code of conduct](./CODE_OF_CONDUCT.md). 6 | 7 | ## Development workflow 8 | 9 | This project is a monorepo managed using [Yarn workspaces](https://yarnpkg.com/features/workspaces). It contains the following packages: 10 | 11 | - The library package in the root directory. 12 | - An example app in the `example/` directory. 13 | 14 | To get started with the project, run `yarn` in the root directory to install the required dependencies for each package: 15 | 16 | ```sh 17 | yarn 18 | ``` 19 | 20 | > Since the project relies on Yarn workspaces, you cannot use [`npm`](https://github.com/npm/cli) for development. 21 | 22 | The [example app](/example/) demonstrates usage of the library. You need to run it to test any changes you make. 23 | 24 | It is configured to use the local version of the library, so any changes you make to the library's source code will be reflected in the example app. Changes to the library's JavaScript code will be reflected in the example app without a rebuild, but native code changes will require a rebuild of the example app. 25 | 26 | You can use various commands from the root directory to work with the project. 27 | 28 | To start the packager: 29 | 30 | ```sh 31 | yarn example start 32 | ``` 33 | 34 | To run the example app on Android: 35 | 36 | ```sh 37 | yarn example android 38 | ``` 39 | 40 | To run the example app on iOS: 41 | 42 | ```sh 43 | yarn example ios 44 | ``` 45 | 46 | To run the example app on Web: 47 | 48 | ```sh 49 | yarn example web 50 | ``` 51 | 52 | Make sure your code passes TypeScript and ESLint. Run the following to verify: 53 | 54 | ```sh 55 | yarn typecheck 56 | yarn lint 57 | ``` 58 | 59 | To fix formatting errors, run the following: 60 | 61 | ```sh 62 | yarn lint --fix 63 | ``` 64 | 65 | Remember to add tests for your change if possible. Run the unit tests by: 66 | 67 | ```sh 68 | yarn test 69 | ``` 70 | 71 | ### Commit message convention 72 | 73 | We follow the [conventional commits specification](https://www.conventionalcommits.org/en) for our commit messages: 74 | 75 | - `fix`: bug fixes, e.g. fix crash due to deprecated method. 76 | - `feat`: new features, e.g. add new method to the module. 77 | - `refactor`: code refactor, e.g. migrate from class components to hooks. 78 | - `docs`: changes into documentation, e.g. add usage example for the module.. 79 | - `test`: adding or updating tests, e.g. add integration tests using detox. 80 | - `chore`: tooling changes, e.g. change CI config. 81 | 82 | Our pre-commit hooks verify that your commit message matches this format when committing. 83 | 84 | ### Linting and tests 85 | 86 | [ESLint](https://eslint.org/), [Prettier](https://prettier.io/), [TypeScript](https://www.typescriptlang.org/) 87 | 88 | We use [TypeScript](https://www.typescriptlang.org/) for type checking, [ESLint](https://eslint.org/) with [Prettier](https://prettier.io/) for linting and formatting the code, and [Jest](https://jestjs.io/) for testing. 89 | 90 | Our pre-commit hooks verify that the linter and tests pass when committing. 91 | 92 | ### Publishing to npm 93 | 94 | We use [release-it](https://github.com/release-it/release-it) to make it easier to publish new versions. It handles common tasks like bumping version based on semver, creating tags and releases etc. 95 | 96 | To publish new versions, run the following: 97 | 98 | ```sh 99 | yarn release 100 | ``` 101 | 102 | ### Scripts 103 | 104 | The `package.json` file contains various scripts for common tasks: 105 | 106 | - `yarn`: setup project by installing dependencies. 107 | - `yarn typecheck`: type-check files with TypeScript. 108 | - `yarn lint`: lint files with ESLint. 109 | - `yarn test`: run unit tests with Jest. 110 | - `yarn example start`: start the Metro server for the example app. 111 | - `yarn example android`: run the example app on Android. 112 | - `yarn example ios`: run the example app on iOS. 113 | 114 | ### Sending a pull request 115 | 116 | > **Working on your first pull request?** You can learn how from this _free_ series: [How to Contribute to an Open Source Project on GitHub](https://app.egghead.io/playlists/how-to-contribute-to-an-open-source-project-on-github). 117 | 118 | When you're sending a pull request: 119 | 120 | - Prefer small pull requests focused on one change. 121 | - Verify that linters and tests are passing. 122 | - Review the documentation to make sure it looks good. 123 | - Follow the pull request template when opening a pull request. 124 | - For pull requests that change the API or implementation, discuss with maintainers first by opening an issue. 125 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Vok 4 | Permission is hereby granted, free of charge, to any person obtaining a copy 5 | of this software and associated documentation files (the "Software"), to deal 6 | in the Software without restriction, including without limitation the rights 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the Software is 9 | furnished to do so, subject to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be included in all 12 | copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 20 | SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-native-messy 2 | 3 | Chat ui for React Native 4 | 5 |

6 | 7 | 8 |

9 | 10 | ## Dependency 11 | 12 | - [gorhom/bottom-sheet](https://github.com/gorhom/react-native-bottom-sheet) 13 | - [react-native-keyboard-controller](https://kirillzyusko.github.io/react-native-keyboard-controller/) 14 | - [react-native-image-picker](https://github.com/react-native-image-picker/react-native-image-picker) 15 | - [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler#readme) 16 | - [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated#readme) 17 | - [react-native-tab-view](https://reactnavigation.org/docs/tab-view/) 18 | - [react-native-video](https://github.com/TheWidlarzGroup/react-native-video) 19 | - [@shopify/flash-list](https://shopify.github.io/flash-list/) 20 | 21 | ## Features 22 | 23 | - [x] text message, phone, url, email format and fully customize 24 | - [x] single image message and fully customize 25 | - [x] list images message and fully customize 26 | - [x] emoji keyboard 27 | - [x] loadmore 28 | - [x] customize default system UI ( Text, Image, List...) 29 | - [ ] audio message 30 | - [ ] swipe to reply 31 | - [x] reaction 32 | - [ ] and more 33 | 34 | ## Installation 35 | 36 | ```sh 37 | npm install @vokhuyet/react-native-messy 38 | ``` 39 | 40 | or 41 | 42 | ```sh 43 | yarn add @vokhuyet/react-native-messy 44 | ``` 45 | 46 | ## Usage 47 | 48 | ```ts 49 | import { Messy } from '@vokhuyet/react-native-messy'; 50 | 51 | // ... 52 | const [list, setList] = useState([]); 53 | 54 | { 68 | //hide all bottom sheet modal inlcuding: emoji picker,... 69 | dismissAll(); 70 | //hide keyboard 71 | Keyboard.dismiss(); 72 | }, 73 | }} 74 | messageProps={{ 75 | hideOwnerAvatar: true, 76 | hidePartnerAvatar: false, 77 | onPress: onPressMessage, 78 | onLongPress: onLongPressMessage, 79 | }} 80 | user={{id: account?.user?.id}} 81 | footerProps={{ 82 | hideEmoji: false; 83 | hideFooterAction: false; 84 | Send: 85 | onSend, 86 | ExtraLeft: , 87 | ExtraActionLeft: , 88 | }} 89 | /> 90 | ``` 91 | 92 | ## Default Element 93 | 94 | ### MessyFooterActionLibraryDefault 95 | 96 | - props 97 | 98 | ```typescript 99 | onPress?: () => Promise | void; // use your own onPress handler 100 | handlePermission?: () => Promise; // insert check permisson before use our internal handle select image 101 | style?: ImageStyle; 102 | source?: ImageSourcePropType; 103 | ``` 104 | 105 | ### MessyFooterActionCameraDefault 106 | 107 | - props 108 | 109 | ```typescript 110 | onPress?: () => Promise | void; // use your own onPress handler 111 | handlePermission?: () => Promise; // insert check permisson before use our internal handle select image 112 | style?: ImageStyle; 113 | source?: ImageSourcePropType; 114 | ``` 115 | 116 | ## Default Function 117 | 118 | ### setMessyFooterInputText 119 | 120 | Use as global function to set Message Input text 121 | 122 | ## Object Type 123 | 124 | ### TMessyMessageLocation 125 | 126 | ```typescript 127 | name: string; 128 | image: ImageProps['source']; 129 | latitude: string; 130 | longitude: string; 131 | ``` 132 | 133 | ### TMessyMessage 134 | 135 | ```ts 136 | id?: string | number | null; 137 | text?: string; 138 | image?: ImageSourcePropType; 139 | video?: { uri: string }; 140 | audio?: {uri: string}; // not implemented, you can implement by yourself 141 | location?: TMessyMessageLocation; 142 | user?: TUser; 143 | type?: 'system' | 'message'; 144 | createdTime?: Date | number | string; 145 | status?: 'sending' | 'sent' | 'seen'; 146 | seenBy?: TUser[]; 147 | local?: Asset; 148 | clientId?: string; // used for display message in List before receiving response from Server 149 | category?: string; // used for display multiple type of system message 150 | ``` 151 | 152 | ### TColor 153 | 154 | ```ts 155 | background: string; 156 | primary: string; 157 | accent: string; 158 | placeholder: string; 159 | shadow: string; 160 | success: string; 161 | message_left: { 162 | background: string; 163 | text: string; 164 | link: string; 165 | email: string; 166 | phone: string; 167 | audio: string; 168 | } 169 | message_right: { 170 | background: string; 171 | text: string; 172 | link: string; 173 | email: string; 174 | phone: string; 175 | audio: string; 176 | } 177 | input: { 178 | text: string; //text color in TextInput 179 | } 180 | ``` 181 | 182 | ### TUser 183 | 184 | ```ts 185 | id: string | number | null | undefined; 186 | userName?: string | null; 187 | avatar?: ImageSource; 188 | ``` 189 | 190 | ### TMessyFooterProps 191 | 192 | ```ts 193 | hideEmoji?: boolean; 194 | hideFooterAction?: boolean; 195 | Send?: React.ReactNode; 196 | Emoji?: React.ReactNode; // button for click to open emoji picker 197 | onSend?: (message?: TMessyMessage) => Promise | void; 198 | inputProps?: TextInputProps; 199 | ExtraLeft?: React.ReactNode; 200 | ExtraActionLeft?: React.ReactNode; 201 | renderFooter?: FC; 202 | renderFooterAction?: FC; 203 | ``` 204 | 205 | ### TMessageProps 206 | 207 | ```ts 208 | hideOwnerAvatar: boolean; 209 | hidePartnerAvatar: boolean; 210 | onPress?: (message: TMessyMessageProps) => Promise | void; 211 | onLongPress?: (message: TMessyMessageProps) => Promise | void; 212 | ``` 213 | 214 | ### TBaseModule 215 | 216 | ```ts 217 | Image?: FC; 218 | Text?: FC; 219 | Video?: FC; 220 | Cache: { 221 | get: (key: string) => any; 222 | set: (key: string, value: any) => void; 223 | }; 224 | ``` 225 | 226 | ## Props 227 | 228 | - `useInBottomSheet`(boolean): default false 229 | - `loading`(boolean): loading status 230 | - **`messages`**([TMessyMessage[]](#tmessymessage)): list of messages 231 | - `user`([TUser](#tuser)): sender information; 232 | - `theme`: ([TColor](#tcolor)): custom theme for message; 233 | - `footerProps`([TMessyFooterProps](#tmessyfooterprops)): Custom props for Element below list messages; 234 | - `listProps`(TListProps): custom flatlist props and onPress event; 235 | - `messageProps`([TMessageProps](#tmessageprops)); 236 | - `parsedShape`([ParseShape[]](https://github.com/taskrabbit/react-native-parsed-text)): Custom parse patterns for react-native-parsed-text ; 237 | - `showDateTime`(boolean): show created time of message; 238 | - `renderLoading`(FC<{}>): component when loading list message; 239 | - `renderMessageSystem`(FC<{ data?: TMessyMessage }>): custom system message; 240 | - `renderMessage`((data: TMessyMessageProps) => JSX.Element): custom whole message item view; 241 | - `renderAvatar`FC<{ user?: TUser }>: custom ; 242 | - `renderMessageText`((data: TMessyMessageProps) => JSX.Element): custom text message; 243 | - `renderMessageAudio`(data: TMessyMessageProps) => JSX.Element; 244 | - `renderMessageImage`(data: TMessyMessageProps) => JSX.Element; 245 | - `renderMessageVideo`(data: TMessyMessageProps) => JSX.Element; 246 | - `renderMessageDateTime`((data: TMessyMessage) => JSX.Element): custom datetime value in message item 247 | - `renderMessageLocation`: (data: TMessyMessageProps) => JSX.Element; 248 | - `renderMessageOther`(data: TMessyMessageProps) => JSX.Element: Customize other message types that the library does not yet support 249 | - `BaseModule`([TBaseModule](#tbasemodule)); 250 | 251 | ## Contributing 252 | 253 | See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow. 254 | 255 | ## License 256 | 257 | MIT 258 | 259 | --- 260 | 261 | Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob) 262 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:@react-native/babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /example/.bundle/config: -------------------------------------------------------------------------------- 1 | BUNDLE_PATH: "vendor/bundle" 2 | BUNDLE_FORCE_RUBY_PLATFORM: 1 3 | -------------------------------------------------------------------------------- /example/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /example/Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version 4 | ruby ">= 2.6.10" 5 | 6 | gem 'cocoapods', '~> 1.13' 7 | gem 'activesupport', '>= 6.1.7.3', '< 7.1.0' 8 | -------------------------------------------------------------------------------- /example/Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | CFPropertyList (3.0.6) 5 | rexml 6 | activesupport (7.0.8) 7 | concurrent-ruby (~> 1.0, >= 1.0.2) 8 | i18n (>= 1.6, < 2) 9 | minitest (>= 5.1) 10 | tzinfo (~> 2.0) 11 | addressable (2.8.6) 12 | public_suffix (>= 2.0.2, < 6.0) 13 | algoliasearch (1.27.5) 14 | httpclient (~> 2.8, >= 2.8.3) 15 | json (>= 1.5.1) 16 | atomos (0.1.3) 17 | claide (1.1.0) 18 | cocoapods (1.14.3) 19 | addressable (~> 2.8) 20 | claide (>= 1.0.2, < 2.0) 21 | cocoapods-core (= 1.14.3) 22 | cocoapods-deintegrate (>= 1.0.3, < 2.0) 23 | cocoapods-downloader (>= 2.1, < 3.0) 24 | cocoapods-plugins (>= 1.0.0, < 2.0) 25 | cocoapods-search (>= 1.0.0, < 2.0) 26 | cocoapods-trunk (>= 1.6.0, < 2.0) 27 | cocoapods-try (>= 1.1.0, < 2.0) 28 | colored2 (~> 3.1) 29 | escape (~> 0.0.4) 30 | fourflusher (>= 2.3.0, < 3.0) 31 | gh_inspector (~> 1.0) 32 | molinillo (~> 0.8.0) 33 | nap (~> 1.0) 34 | ruby-macho (>= 2.3.0, < 3.0) 35 | xcodeproj (>= 1.23.0, < 2.0) 36 | cocoapods-core (1.14.3) 37 | activesupport (>= 5.0, < 8) 38 | addressable (~> 2.8) 39 | algoliasearch (~> 1.0) 40 | concurrent-ruby (~> 1.1) 41 | fuzzy_match (~> 2.0.4) 42 | nap (~> 1.0) 43 | netrc (~> 0.11) 44 | public_suffix (~> 4.0) 45 | typhoeus (~> 1.0) 46 | cocoapods-deintegrate (1.0.5) 47 | cocoapods-downloader (2.1) 48 | cocoapods-plugins (1.0.0) 49 | nap 50 | cocoapods-search (1.0.1) 51 | cocoapods-trunk (1.6.0) 52 | nap (>= 0.8, < 2.0) 53 | netrc (~> 0.11) 54 | cocoapods-try (1.2.0) 55 | colored2 (3.1.2) 56 | concurrent-ruby (1.2.3) 57 | escape (0.0.4) 58 | ethon (0.16.0) 59 | ffi (>= 1.15.0) 60 | ffi (1.16.3) 61 | fourflusher (2.3.1) 62 | fuzzy_match (2.0.4) 63 | gh_inspector (1.1.3) 64 | httpclient (2.8.3) 65 | i18n (1.14.1) 66 | concurrent-ruby (~> 1.0) 67 | json (2.7.1) 68 | minitest (5.21.2) 69 | molinillo (0.8.0) 70 | nanaimo (0.3.0) 71 | nap (1.1.0) 72 | netrc (0.11.0) 73 | public_suffix (4.0.7) 74 | rexml (3.2.6) 75 | ruby-macho (2.5.1) 76 | typhoeus (1.4.1) 77 | ethon (>= 0.9.0) 78 | tzinfo (2.0.6) 79 | concurrent-ruby (~> 1.0) 80 | xcodeproj (1.23.0) 81 | CFPropertyList (>= 2.3.3, < 4.0) 82 | atomos (~> 0.1.3) 83 | claide (>= 1.0.2, < 2.0) 84 | colored2 (~> 3.1) 85 | nanaimo (~> 0.3.0) 86 | rexml (~> 3.2.4) 87 | 88 | PLATFORMS 89 | ruby 90 | 91 | DEPENDENCIES 92 | activesupport (>= 6.1.7.3, < 7.1.0) 93 | cocoapods (~> 1.13) 94 | 95 | RUBY VERSION 96 | ruby 2.7.6p219 97 | 98 | BUNDLED WITH 99 | 2.4.21 100 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli). 2 | 3 | # Getting Started 4 | 5 | >**Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding. 6 | 7 | ## Step 1: Start the Metro Server 8 | 9 | First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native. 10 | 11 | To start Metro, run the following command from the _root_ of your React Native project: 12 | 13 | ```bash 14 | # using npm 15 | npm start 16 | 17 | # OR using Yarn 18 | yarn start 19 | ``` 20 | 21 | ## Step 2: Start your Application 22 | 23 | Let Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app: 24 | 25 | ### For Android 26 | 27 | ```bash 28 | # using npm 29 | npm run android 30 | 31 | # OR using Yarn 32 | yarn android 33 | ``` 34 | 35 | ### For iOS 36 | 37 | ```bash 38 | # using npm 39 | npm run ios 40 | 41 | # OR using Yarn 42 | yarn ios 43 | ``` 44 | 45 | If everything is set up _correctly_, you should see your new app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator/simulator correctly. 46 | 47 | This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively. 48 | 49 | ## Step 3: Modifying your App 50 | 51 | Now that you have successfully run the app, let's modify it. 52 | 53 | 1. Open `App.tsx` in your text editor of choice and edit some lines. 54 | 2. For **Android**: Press the R key twice or select **"Reload"** from the **Developer Menu** (Ctrl + M (on Window and Linux) or Cmd ⌘ + M (on macOS)) to see your changes! 55 | 56 | For **iOS**: Hit Cmd ⌘ + R in your iOS Simulator to reload the app and see your changes! 57 | 58 | ## Congratulations! :tada: 59 | 60 | You've successfully run and modified your React Native App. :partying_face: 61 | 62 | ### Now what? 63 | 64 | - If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps). 65 | - If you're curious to learn more about React Native, check out the [Introduction to React Native](https://reactnative.dev/docs/getting-started). 66 | 67 | # Troubleshooting 68 | 69 | If you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page. 70 | 71 | # Learn More 72 | 73 | To learn more about React Native, take a look at the following resources: 74 | 75 | - [React Native Website](https://reactnative.dev) - learn more about React Native. 76 | - [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment. 77 | - [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**. 78 | - [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts. 79 | - [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native. 80 | -------------------------------------------------------------------------------- /example/android/app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: "com.android.application" 2 | apply plugin: "org.jetbrains.kotlin.android" 3 | apply plugin: "com.facebook.react" 4 | 5 | /** 6 | * This is the configuration block to customize your React Native Android app. 7 | * By default you don't need to apply any configuration, just uncomment the lines you need. 8 | */ 9 | react { 10 | /* Folders */ 11 | // The root of your project, i.e. where "package.json" lives. Default is '..' 12 | // root = file("../") 13 | // The folder where the react-native NPM package is. Default is ../node_modules/react-native 14 | // reactNativeDir = file("../node_modules/react-native") 15 | // The folder where the react-native Codegen package is. Default is ../node_modules/@react-native/codegen 16 | // codegenDir = file("../node_modules/@react-native/codegen") 17 | // The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js 18 | // cliFile = file("../node_modules/react-native/cli.js") 19 | 20 | /* Variants */ 21 | // The list of variants to that are debuggable. For those we're going to 22 | // skip the bundling of the JS bundle and the assets. By default is just 'debug'. 23 | // If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants. 24 | // debuggableVariants = ["liteDebug", "prodDebug"] 25 | 26 | /* Bundling */ 27 | // A list containing the node command and its flags. Default is just 'node'. 28 | // nodeExecutableAndArgs = ["node"] 29 | // 30 | // The command to run when bundling. By default is 'bundle' 31 | // bundleCommand = "ram-bundle" 32 | // 33 | // The path to the CLI configuration file. Default is empty. 34 | // bundleConfig = file(../rn-cli.config.js) 35 | // 36 | // The name of the generated asset file containing your JS bundle 37 | // bundleAssetName = "MyApplication.android.bundle" 38 | // 39 | // The entry file for bundle generation. Default is 'index.android.js' or 'index.js' 40 | // entryFile = file("../js/MyApplication.android.js") 41 | // 42 | // A list of extra flags to pass to the 'bundle' commands. 43 | // See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle 44 | // extraPackagerArgs = [] 45 | 46 | /* Hermes Commands */ 47 | // The hermes compiler command to run. By default it is 'hermesc' 48 | // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc" 49 | // 50 | // The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map" 51 | // hermesFlags = ["-O", "-output-source-map"] 52 | } 53 | 54 | /** 55 | * Set this to true to Run Proguard on Release builds to minify the Java bytecode. 56 | */ 57 | def enableProguardInReleaseBuilds = false 58 | 59 | /** 60 | * The preferred build flavor of JavaScriptCore (JSC) 61 | * 62 | * For example, to use the international variant, you can use: 63 | * `def jscFlavor = 'org.webkit:android-jsc-intl:+'` 64 | * 65 | * The international variant includes ICU i18n library and necessary data 66 | * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that 67 | * give correct results when using with locales other than en-US. Note that 68 | * this variant is about 6MiB larger per architecture than default. 69 | */ 70 | def jscFlavor = 'org.webkit:android-jsc:+' 71 | 72 | android { 73 | ndkVersion rootProject.ext.ndkVersion 74 | buildToolsVersion rootProject.ext.buildToolsVersion 75 | compileSdk rootProject.ext.compileSdkVersion 76 | 77 | namespace "com.messyexample" 78 | defaultConfig { 79 | applicationId "com.messyexample" 80 | minSdkVersion rootProject.ext.minSdkVersion 81 | targetSdkVersion rootProject.ext.targetSdkVersion 82 | versionCode 1 83 | versionName "1.0" 84 | } 85 | signingConfigs { 86 | debug { 87 | storeFile file('debug.keystore') 88 | storePassword 'android' 89 | keyAlias 'androiddebugkey' 90 | keyPassword 'android' 91 | } 92 | } 93 | buildTypes { 94 | debug { 95 | signingConfig signingConfigs.debug 96 | } 97 | release { 98 | // Caution! In production, you need to generate your own keystore file. 99 | // see https://reactnative.dev/docs/signed-apk-android. 100 | signingConfig signingConfigs.debug 101 | minifyEnabled enableProguardInReleaseBuilds 102 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 103 | } 104 | } 105 | } 106 | 107 | dependencies { 108 | // The version of react-native is set by the React Native Gradle Plugin 109 | implementation("com.facebook.react:react-android") 110 | implementation("com.facebook.react:flipper-integration") 111 | 112 | if (hermesEnabled.toBoolean()) { 113 | implementation("com.facebook.react:hermes-android") 114 | } else { 115 | implementation jscFlavor 116 | } 117 | } 118 | 119 | apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project) 120 | -------------------------------------------------------------------------------- /example/android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vokhuyetOz/react-native-messy/c43d484f04c48c812fbc36cab605a7fccfabbf07/example/android/app/debug.keystore -------------------------------------------------------------------------------- /example/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | -------------------------------------------------------------------------------- /example/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 9 | 10 | -------------------------------------------------------------------------------- /example/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 12 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/messyexample/MainActivity.kt: -------------------------------------------------------------------------------- 1 | package com.messyexample 2 | 3 | import com.facebook.react.ReactActivity 4 | import com.facebook.react.ReactActivityDelegate 5 | import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled 6 | import com.facebook.react.defaults.DefaultReactActivityDelegate 7 | 8 | class MainActivity : ReactActivity() { 9 | 10 | /** 11 | * Returns the name of the main component registered from JavaScript. This is used to schedule 12 | * rendering of the component. 13 | */ 14 | override fun getMainComponentName(): String = "MessyExample" 15 | 16 | /** 17 | * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate] 18 | * which allows you to enable New Architecture with a single boolean flags [fabricEnabled] 19 | */ 20 | override fun createReactActivityDelegate(): ReactActivityDelegate = 21 | DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled) 22 | } 23 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/messyexample/MainApplication.kt: -------------------------------------------------------------------------------- 1 | package com.messyexample 2 | 3 | import android.app.Application 4 | import com.facebook.react.PackageList 5 | import com.facebook.react.ReactApplication 6 | import com.facebook.react.ReactHost 7 | import com.facebook.react.ReactNativeHost 8 | import com.facebook.react.ReactPackage 9 | import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load 10 | import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost 11 | import com.facebook.react.defaults.DefaultReactNativeHost 12 | import com.facebook.react.flipper.ReactNativeFlipper 13 | import com.facebook.soloader.SoLoader 14 | 15 | class MainApplication : Application(), ReactApplication { 16 | 17 | override val reactNativeHost: ReactNativeHost = 18 | object : DefaultReactNativeHost(this) { 19 | override fun getPackages(): List = 20 | PackageList(this).packages.apply { 21 | // Packages that cannot be autolinked yet can be added manually here, for example: 22 | // add(MyReactNativePackage()) 23 | } 24 | 25 | override fun getJSMainModuleName(): String = "index" 26 | 27 | override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG 28 | 29 | override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED 30 | override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED 31 | } 32 | 33 | override val reactHost: ReactHost 34 | get() = getDefaultReactHost(this.applicationContext, reactNativeHost) 35 | 36 | override fun onCreate() { 37 | super.onCreate() 38 | SoLoader.init(this, false) 39 | if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) { 40 | // If you opted-in for the New Architecture, we load the native entry point for this app. 41 | load() 42 | } 43 | ReactNativeFlipper.initializeFlipper(this, reactNativeHost.reactInstanceManager) 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/drawable/rn_edit_text_material.xml: -------------------------------------------------------------------------------- 1 | 2 | 16 | 21 | 22 | 23 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vokhuyetOz/react-native-messy/c43d484f04c48c812fbc36cab605a7fccfabbf07/example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vokhuyetOz/react-native-messy/c43d484f04c48c812fbc36cab605a7fccfabbf07/example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vokhuyetOz/react-native-messy/c43d484f04c48c812fbc36cab605a7fccfabbf07/example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vokhuyetOz/react-native-messy/c43d484f04c48c812fbc36cab605a7fccfabbf07/example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vokhuyetOz/react-native-messy/c43d484f04c48c812fbc36cab605a7fccfabbf07/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vokhuyetOz/react-native-messy/c43d484f04c48c812fbc36cab605a7fccfabbf07/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vokhuyetOz/react-native-messy/c43d484f04c48c812fbc36cab605a7fccfabbf07/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vokhuyetOz/react-native-messy/c43d484f04c48c812fbc36cab605a7fccfabbf07/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vokhuyetOz/react-native-messy/c43d484f04c48c812fbc36cab605a7fccfabbf07/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vokhuyetOz/react-native-messy/c43d484f04c48c812fbc36cab605a7fccfabbf07/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | MessyExample 3 | 4 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /example/android/build.gradle: -------------------------------------------------------------------------------- 1 | buildscript { 2 | ext { 3 | buildToolsVersion = "34.0.0" 4 | minSdkVersion = 21 5 | compileSdkVersion = 34 6 | targetSdkVersion = 34 7 | ndkVersion = "25.1.8937393" 8 | kotlinVersion = "1.8.0" 9 | } 10 | repositories { 11 | google() 12 | mavenCentral() 13 | } 14 | dependencies { 15 | classpath("com.android.tools.build:gradle") 16 | classpath("com.facebook.react:react-native-gradle-plugin") 17 | classpath("org.jetbrains.kotlin:kotlin-gradle-plugin") 18 | } 19 | } 20 | 21 | apply plugin: "com.facebook.react.rootproject" 22 | -------------------------------------------------------------------------------- /example/android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx512m -XX:MaxMetaspaceSize=256m 13 | org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | # AndroidX package structure to make it clearer which packages are bundled with the 21 | # Android operating system, and which are packaged with your app's APK 22 | # https://developer.android.com/topic/libraries/support-library/androidx-rn 23 | android.useAndroidX=true 24 | # Automatically convert third-party libraries to use AndroidX 25 | android.enableJetifier=true 26 | 27 | # Use this property to specify which architecture you want to build. 28 | # You can also override it from the CLI using 29 | # ./gradlew -PreactNativeArchitectures=x86_64 30 | reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64 31 | 32 | # Use this property to enable support to the new architecture. 33 | # This will allow you to use TurboModules and the Fabric render in 34 | # your application. You should enable this flag either if you want 35 | # to write custom TurboModules/Fabric components OR use libraries that 36 | # are providing them. 37 | newArchEnabled=false 38 | 39 | # Use this property to enable or disable the Hermes JS engine. 40 | # If set to false, you will be using JSC instead. 41 | hermesEnabled=true 42 | -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vokhuyetOz/react-native-messy/c43d484f04c48c812fbc36cab605a7fccfabbf07/example/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-8.3-all.zip 4 | networkTimeout=10000 5 | validateDistributionUrl=true 6 | zipStoreBase=GRADLE_USER_HOME 7 | zipStorePath=wrapper/dists 8 | -------------------------------------------------------------------------------- /example/android/gradlew: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | # 4 | # Copyright © 2015-2021 the original authors. 5 | # 6 | # Licensed under the Apache License, Version 2.0 (the "License"); 7 | # you may not use this file except in compliance with the License. 8 | # You may obtain a copy of the License at 9 | # 10 | # https://www.apache.org/licenses/LICENSE-2.0 11 | # 12 | # Unless required by applicable law or agreed to in writing, software 13 | # distributed under the License is distributed on an "AS IS" BASIS, 14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | # See the License for the specific language governing permissions and 16 | # limitations under the License. 17 | # 18 | 19 | ############################################################################## 20 | # 21 | # Gradle start up script for POSIX generated by Gradle. 22 | # 23 | # Important for running: 24 | # 25 | # (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is 26 | # noncompliant, but you have some other compliant shell such as ksh or 27 | # bash, then to run this script, type that shell name before the whole 28 | # command line, like: 29 | # 30 | # ksh Gradle 31 | # 32 | # Busybox and similar reduced shells will NOT work, because this script 33 | # requires all of these POSIX shell features: 34 | # * functions; 35 | # * expansions «$var», «${var}», «${var:-default}», «${var+SET}», 36 | # «${var#prefix}», «${var%suffix}», and «$( cmd )»; 37 | # * compound commands having a testable exit status, especially «case»; 38 | # * various built-in commands including «command», «set», and «ulimit». 39 | # 40 | # Important for patching: 41 | # 42 | # (2) This script targets any POSIX shell, so it avoids extensions provided 43 | # by Bash, Ksh, etc; in particular arrays are avoided. 44 | # 45 | # The "traditional" practice of packing multiple parameters into a 46 | # space-separated string is a well documented source of bugs and security 47 | # problems, so this is (mostly) avoided, by progressively accumulating 48 | # options in "$@", and eventually passing that to Java. 49 | # 50 | # Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS, 51 | # and GRADLE_OPTS) rely on word-splitting, this is performed explicitly; 52 | # see the in-line comments for details. 53 | # 54 | # There are tweaks for specific operating systems such as AIX, CygWin, 55 | # Darwin, MinGW, and NonStop. 56 | # 57 | # (3) This script is generated from the Groovy template 58 | # https://github.com/gradle/gradle/blob/HEAD/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt 59 | # within the Gradle project. 60 | # 61 | # You can find Gradle at https://github.com/gradle/gradle/. 62 | # 63 | ############################################################################## 64 | 65 | # Attempt to set APP_HOME 66 | 67 | # Resolve links: $0 may be a link 68 | app_path=$0 69 | 70 | # Need this for daisy-chained symlinks. 71 | while 72 | APP_HOME=${app_path%"${app_path##*/}"} # leaves a trailing /; empty if no leading path 73 | [ -h "$app_path" ] 74 | do 75 | ls=$( ls -ld "$app_path" ) 76 | link=${ls#*' -> '} 77 | case $link in #( 78 | /*) app_path=$link ;; #( 79 | *) app_path=$APP_HOME$link ;; 80 | esac 81 | done 82 | 83 | # This is normally unused 84 | # shellcheck disable=SC2034 85 | APP_BASE_NAME=${0##*/} 86 | # Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036) 87 | APP_HOME=$( cd "${APP_HOME:-./}" > /dev/null && pwd -P ) || exit 88 | 89 | # Use the maximum available, or set MAX_FD != -1 to use that value. 90 | MAX_FD=maximum 91 | 92 | warn () { 93 | echo "$*" 94 | } >&2 95 | 96 | die () { 97 | echo 98 | echo "$*" 99 | echo 100 | exit 1 101 | } >&2 102 | 103 | # OS specific support (must be 'true' or 'false'). 104 | cygwin=false 105 | msys=false 106 | darwin=false 107 | nonstop=false 108 | case "$( uname )" in #( 109 | CYGWIN* ) cygwin=true ;; #( 110 | Darwin* ) darwin=true ;; #( 111 | MSYS* | MINGW* ) msys=true ;; #( 112 | NONSTOP* ) nonstop=true ;; 113 | esac 114 | 115 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 116 | 117 | 118 | # Determine the Java command to use to start the JVM. 119 | if [ -n "$JAVA_HOME" ] ; then 120 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 121 | # IBM's JDK on AIX uses strange locations for the executables 122 | JAVACMD=$JAVA_HOME/jre/sh/java 123 | else 124 | JAVACMD=$JAVA_HOME/bin/java 125 | fi 126 | if [ ! -x "$JAVACMD" ] ; then 127 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 128 | 129 | Please set the JAVA_HOME variable in your environment to match the 130 | location of your Java installation." 131 | fi 132 | else 133 | JAVACMD=java 134 | if ! command -v java >/dev/null 2>&1 135 | then 136 | die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 137 | 138 | Please set the JAVA_HOME variable in your environment to match the 139 | location of your Java installation." 140 | fi 141 | fi 142 | 143 | # Increase the maximum file descriptors if we can. 144 | if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then 145 | case $MAX_FD in #( 146 | max*) 147 | # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked. 148 | # shellcheck disable=SC3045 149 | MAX_FD=$( ulimit -H -n ) || 150 | warn "Could not query maximum file descriptor limit" 151 | esac 152 | case $MAX_FD in #( 153 | '' | soft) :;; #( 154 | *) 155 | # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked. 156 | # shellcheck disable=SC3045 157 | ulimit -n "$MAX_FD" || 158 | warn "Could not set maximum file descriptor limit to $MAX_FD" 159 | esac 160 | fi 161 | 162 | # Collect all arguments for the java command, stacking in reverse order: 163 | # * args from the command line 164 | # * the main class name 165 | # * -classpath 166 | # * -D...appname settings 167 | # * --module-path (only if needed) 168 | # * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables. 169 | 170 | # For Cygwin or MSYS, switch paths to Windows format before running java 171 | if "$cygwin" || "$msys" ; then 172 | APP_HOME=$( cygpath --path --mixed "$APP_HOME" ) 173 | CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" ) 174 | 175 | JAVACMD=$( cygpath --unix "$JAVACMD" ) 176 | 177 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 178 | for arg do 179 | if 180 | case $arg in #( 181 | -*) false ;; # don't mess with options #( 182 | /?*) t=${arg#/} t=/${t%%/*} # looks like a POSIX filepath 183 | [ -e "$t" ] ;; #( 184 | *) false ;; 185 | esac 186 | then 187 | arg=$( cygpath --path --ignore --mixed "$arg" ) 188 | fi 189 | # Roll the args list around exactly as many times as the number of 190 | # args, so each arg winds up back in the position where it started, but 191 | # possibly modified. 192 | # 193 | # NB: a `for` loop captures its iteration list before it begins, so 194 | # changing the positional parameters here affects neither the number of 195 | # iterations, nor the values presented in `arg`. 196 | shift # remove old arg 197 | set -- "$@" "$arg" # push replacement arg 198 | done 199 | fi 200 | 201 | 202 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 203 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' 204 | 205 | # Collect all arguments for the java command; 206 | # * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of 207 | # shell script including quotes and variable substitutions, so put them in 208 | # double quotes to make sure that they get re-expanded; and 209 | # * put everything else in single quotes, so that it's not re-expanded. 210 | 211 | set -- \ 212 | "-Dorg.gradle.appname=$APP_BASE_NAME" \ 213 | -classpath "$CLASSPATH" \ 214 | org.gradle.wrapper.GradleWrapperMain \ 215 | "$@" 216 | 217 | # Stop when "xargs" is not available. 218 | if ! command -v xargs >/dev/null 2>&1 219 | then 220 | die "xargs is not available" 221 | fi 222 | 223 | # Use "xargs" to parse quoted args. 224 | # 225 | # With -n1 it outputs one arg per line, with the quotes and backslashes removed. 226 | # 227 | # In Bash we could simply go: 228 | # 229 | # readarray ARGS < <( xargs -n1 <<<"$var" ) && 230 | # set -- "${ARGS[@]}" "$@" 231 | # 232 | # but POSIX shell has neither arrays nor command substitution, so instead we 233 | # post-process each arg (as a line of input to sed) to backslash-escape any 234 | # character that might be a shell metacharacter, then use eval to reverse 235 | # that process (while maintaining the separation between arguments), and wrap 236 | # the whole thing up as a single "set" statement. 237 | # 238 | # This will of course break if any of these variables contains a newline or 239 | # an unmatched quote. 240 | # 241 | 242 | eval "set -- $( 243 | printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" | 244 | xargs -n1 | 245 | sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' | 246 | tr '\n' ' ' 247 | )" '"$@"' 248 | 249 | exec "$JAVACMD" "$@" 250 | -------------------------------------------------------------------------------- /example/android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @rem 2 | @rem Copyright 2015 the original author or authors. 3 | @rem 4 | @rem Licensed under the Apache License, Version 2.0 (the "License"); 5 | @rem you may not use this file except in compliance with the License. 6 | @rem You may obtain a copy of the License at 7 | @rem 8 | @rem https://www.apache.org/licenses/LICENSE-2.0 9 | @rem 10 | @rem Unless required by applicable law or agreed to in writing, software 11 | @rem distributed under the License is distributed on an "AS IS" BASIS, 12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | @rem See the License for the specific language governing permissions and 14 | @rem limitations under the License. 15 | @rem 16 | 17 | @if "%DEBUG%"=="" @echo off 18 | @rem ########################################################################## 19 | @rem 20 | @rem Gradle startup script for Windows 21 | @rem 22 | @rem ########################################################################## 23 | 24 | @rem Set local scope for the variables with windows NT shell 25 | if "%OS%"=="Windows_NT" setlocal 26 | 27 | set DIRNAME=%~dp0 28 | if "%DIRNAME%"=="" set DIRNAME=. 29 | @rem This is normally unused 30 | set APP_BASE_NAME=%~n0 31 | set APP_HOME=%DIRNAME% 32 | 33 | @rem Resolve any "." and ".." in APP_HOME to make it shorter. 34 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi 35 | 36 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 37 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 38 | 39 | @rem Find java.exe 40 | if defined JAVA_HOME goto findJavaFromJavaHome 41 | 42 | set JAVA_EXE=java.exe 43 | %JAVA_EXE% -version >NUL 2>&1 44 | if %ERRORLEVEL% equ 0 goto execute 45 | 46 | echo. 47 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 48 | echo. 49 | echo Please set the JAVA_HOME variable in your environment to match the 50 | echo location of your Java installation. 51 | 52 | goto fail 53 | 54 | :findJavaFromJavaHome 55 | set JAVA_HOME=%JAVA_HOME:"=% 56 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 57 | 58 | if exist "%JAVA_EXE%" goto execute 59 | 60 | echo. 61 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 62 | echo. 63 | echo Please set the JAVA_HOME variable in your environment to match the 64 | echo location of your Java installation. 65 | 66 | goto fail 67 | 68 | :execute 69 | @rem Setup the command line 70 | 71 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 72 | 73 | 74 | @rem Execute Gradle 75 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* 76 | 77 | :end 78 | @rem End local scope for the variables with windows NT shell 79 | if %ERRORLEVEL% equ 0 goto mainEnd 80 | 81 | :fail 82 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 83 | rem the _cmd.exe /c_ return code! 84 | set EXIT_CODE=%ERRORLEVEL% 85 | if %EXIT_CODE% equ 0 set EXIT_CODE=1 86 | if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE% 87 | exit /b %EXIT_CODE% 88 | 89 | :mainEnd 90 | if "%OS%"=="Windows_NT" endlocal 91 | 92 | :omega 93 | -------------------------------------------------------------------------------- /example/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'MessyExample' 2 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 3 | include ':app' 4 | includeBuild('../node_modules/@react-native/gradle-plugin') 5 | -------------------------------------------------------------------------------- /example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "MessyExample", 3 | "displayName": "MessyExample" 4 | } 5 | -------------------------------------------------------------------------------- /example/babel.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const pak = require('../package.json'); 3 | 4 | module.exports = { 5 | presets: ['module:@react-native/babel-preset'], 6 | plugins: [ 7 | [ 8 | 'module-resolver', 9 | { 10 | extensions: ['.tsx', '.ts', '.js', '.json'], 11 | alias: { 12 | [pak.name]: path.join(__dirname, '..', pak.source), 13 | }, 14 | }, 15 | ], 16 | 'react-native-reanimated/plugin', 17 | ], 18 | }; 19 | -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | import 'react-native-gesture-handler'; 2 | 3 | import { AppRegistry } from 'react-native'; 4 | import App from './src/App'; 5 | import { name as appName } from './app.json'; 6 | 7 | AppRegistry.registerComponent(appName, () => App); 8 | -------------------------------------------------------------------------------- /example/ios/.xcode.env: -------------------------------------------------------------------------------- 1 | # This `.xcode.env` file is versioned and is used to source the environment 2 | # used when running script phases inside Xcode. 3 | # To customize your local environment, you can create an `.xcode.env.local` 4 | # file that is not versioned. 5 | 6 | # NODE_BINARY variable contains the PATH to the node executable. 7 | # 8 | # Customize the NODE_BINARY variable here. 9 | # For example, to use nvm with brew, add the following line 10 | # . "$(brew --prefix nvm)/nvm.sh" --no-use 11 | export NODE_BINARY=$(command -v node) 12 | -------------------------------------------------------------------------------- /example/ios/.xcode.env.local: -------------------------------------------------------------------------------- 1 | export NODE_BINARY=/usr/local/bin/node 2 | 3 | -------------------------------------------------------------------------------- /example/ios/File.swift: -------------------------------------------------------------------------------- 1 | // 2 | // File.swift 3 | // MessyExample 4 | // 5 | 6 | import Foundation 7 | -------------------------------------------------------------------------------- /example/ios/MessyExample-Bridging-Header.h: -------------------------------------------------------------------------------- 1 | // 2 | // Use this file to import your target's public headers that you would like to expose to Swift. 3 | // 4 | -------------------------------------------------------------------------------- /example/ios/MessyExample.xcodeproj/xcshareddata/xcschemes/MessyExample.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 24 | 25 | 30 | 31 | 33 | 39 | 40 | 41 | 42 | 43 | 53 | 55 | 61 | 62 | 63 | 64 | 70 | 72 | 78 | 79 | 80 | 81 | 83 | 84 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /example/ios/MessyExample.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /example/ios/MessyExample.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /example/ios/MessyExample/AppDelegate.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | @interface AppDelegate : RCTAppDelegate 5 | 6 | @end 7 | -------------------------------------------------------------------------------- /example/ios/MessyExample/AppDelegate.mm: -------------------------------------------------------------------------------- 1 | #import "AppDelegate.h" 2 | 3 | #import 4 | 5 | @implementation AppDelegate 6 | 7 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 8 | { 9 | self.moduleName = @"MessyExample"; 10 | // You can add your custom initial props in the dictionary below. 11 | // They will be passed down to the ViewController used by React Native. 12 | self.initialProps = @{}; 13 | 14 | return [super application:application didFinishLaunchingWithOptions:launchOptions]; 15 | } 16 | 17 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge 18 | { 19 | return [self getBundleURL]; 20 | } 21 | 22 | - (NSURL *)getBundleURL 23 | { 24 | #if DEBUG 25 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"]; 26 | #else 27 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 28 | #endif 29 | } 30 | 31 | @end 32 | -------------------------------------------------------------------------------- /example/ios/MessyExample/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "scale" : "2x", 6 | "size" : "20x20" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "scale" : "3x", 11 | "size" : "20x20" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "scale" : "2x", 16 | "size" : "29x29" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "scale" : "3x", 21 | "size" : "29x29" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "scale" : "2x", 26 | "size" : "40x40" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "scale" : "3x", 31 | "size" : "40x40" 32 | }, 33 | { 34 | "idiom" : "iphone", 35 | "scale" : "2x", 36 | "size" : "60x60" 37 | }, 38 | { 39 | "idiom" : "iphone", 40 | "scale" : "3x", 41 | "size" : "60x60" 42 | }, 43 | { 44 | "idiom" : "ios-marketing", 45 | "scale" : "1x", 46 | "size" : "1024x1024" 47 | } 48 | ], 49 | "info" : { 50 | "author" : "xcode", 51 | "version" : 1 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /example/ios/MessyExample/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /example/ios/MessyExample/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | MessyExample 9 | CFBundleExecutable 10 | $(EXECUTABLE_NAME) 11 | CFBundleIdentifier 12 | $(PRODUCT_BUNDLE_IDENTIFIER) 13 | CFBundleInfoDictionaryVersion 14 | 6.0 15 | CFBundleName 16 | $(PRODUCT_NAME) 17 | CFBundlePackageType 18 | APPL 19 | CFBundleShortVersionString 20 | $(MARKETING_VERSION) 21 | CFBundleSignature 22 | ???? 23 | CFBundleVersion 24 | $(CURRENT_PROJECT_VERSION) 25 | LSRequiresIPhoneOS 26 | 27 | NSAppTransportSecurity 28 | 29 | NSAllowsArbitraryLoads 30 | 31 | NSAllowsLocalNetworking 32 | 33 | 34 | NSCameraUsageDescription 35 | need camera to take photo 36 | NSLocationWhenInUseUsageDescription 37 | 38 | NSPhotoLibraryUsageDescription 39 | need photo to send image and video 40 | UILaunchStoryboardName 41 | LaunchScreen 42 | UIRequiredDeviceCapabilities 43 | 44 | armv7 45 | 46 | UISupportedInterfaceOrientations 47 | 48 | UIInterfaceOrientationPortrait 49 | UIInterfaceOrientationLandscapeLeft 50 | UIInterfaceOrientationLandscapeRight 51 | 52 | UIViewControllerBasedStatusBarAppearance 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /example/ios/MessyExample/LaunchScreen.storyboard: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /example/ios/MessyExample/main.m: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | #import "AppDelegate.h" 4 | 5 | int main(int argc, char *argv[]) 6 | { 7 | @autoreleasepool { 8 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /example/ios/MessyExampleTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /example/ios/MessyExampleTests/MessyExampleTests.m: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | #import 5 | #import 6 | 7 | #define TIMEOUT_SECONDS 600 8 | #define TEXT_TO_LOOK_FOR @"Welcome to React" 9 | 10 | @interface MessyExampleTests : XCTestCase 11 | 12 | @end 13 | 14 | @implementation MessyExampleTests 15 | 16 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL (^)(UIView *view))test 17 | { 18 | if (test(view)) { 19 | return YES; 20 | } 21 | for (UIView *subview in [view subviews]) { 22 | if ([self findSubviewInView:subview matching:test]) { 23 | return YES; 24 | } 25 | } 26 | return NO; 27 | } 28 | 29 | - (void)testRendersWelcomeScreen 30 | { 31 | UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController]; 32 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 33 | BOOL foundElement = NO; 34 | 35 | __block NSString *redboxError = nil; 36 | #ifdef DEBUG 37 | RCTSetLogFunction( 38 | ^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 39 | if (level >= RCTLogLevelError) { 40 | redboxError = message; 41 | } 42 | }); 43 | #endif 44 | 45 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 46 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 47 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 48 | 49 | foundElement = [self findSubviewInView:vc.view 50 | matching:^BOOL(UIView *view) { 51 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 52 | return YES; 53 | } 54 | return NO; 55 | }]; 56 | } 57 | 58 | #ifdef DEBUG 59 | RCTSetLogFunction(RCTDefaultLogFunction); 60 | #endif 61 | 62 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 63 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 64 | } 65 | 66 | @end 67 | -------------------------------------------------------------------------------- /example/ios/Podfile: -------------------------------------------------------------------------------- 1 | 2 | def node_require(script) 3 | # Resolve script with node to allow for hoisting 4 | require Pod::Executable.execute_command('node', ['-p', 5 | "require.resolve( 6 | '#{script}', 7 | {paths: [process.argv[1]]}, 8 | )", __dir__]).strip 9 | end 10 | 11 | node_require('react-native/scripts/react_native_pods.rb') 12 | node_require('react-native-permissions/scripts/setup.rb') 13 | platform :ios, min_ios_version_supported 14 | prepare_react_native_project! 15 | 16 | 17 | setup_permissions([ 18 | # 'AppTrackingTransparency', 19 | # 'Bluetooth', 20 | # 'Calendars', 21 | # 'CalendarsWriteOnly', 22 | 'Camera', 23 | # 'Contacts', 24 | # 'FaceID', 25 | # 'LocationAccuracy', 26 | # 'LocationAlways', 27 | # 'LocationWhenInUse', 28 | # 'MediaLibrary', 29 | # 'Microphone', 30 | # 'Motion', 31 | # 'Notifications', 32 | 'PhotoLibrary', 33 | # 'PhotoLibraryAddOnly', 34 | # 'Reminders', 35 | # 'Siri', 36 | # 'SpeechRecognition', 37 | # 'StoreKit', 38 | ]) 39 | 40 | # If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set. 41 | # because `react-native-flipper` depends on (FlipperKit,...) that will be excluded 42 | # 43 | # To fix this you can also exclude `react-native-flipper` using a `react-native.config.js` 44 | # ```js 45 | # module.exports = { 46 | # dependencies: { 47 | # ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}), 48 | # ``` 49 | # flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled 50 | 51 | # linkage = ENV['USE_FRAMEWORKS'] 52 | # if linkage != nil 53 | # Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green 54 | # use_frameworks! :linkage => linkage.to_sym 55 | # end 56 | use_frameworks! :linkage => :static 57 | 58 | target 'MessyExample' do 59 | $RNVideoUseVideoCaching=true 60 | config = use_native_modules! 61 | 62 | use_react_native!( 63 | :path => config[:reactNativePath], 64 | # Enables Flipper. 65 | # 66 | # Note that if you have use_frameworks! enabled, Flipper will not work and 67 | # you should disable the next line. 68 | :flipper_configuration => FlipperConfiguration.disabled, 69 | # An absolute path to your application root. 70 | :app_path => "#{Pod::Config.instance.installation_root}/.." 71 | ) 72 | 73 | target 'MessyExampleTests' do 74 | inherit! :complete 75 | # Pods for testing 76 | end 77 | 78 | post_install do |installer| 79 | # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202 80 | react_native_post_install( 81 | installer, 82 | config[:reactNativePath], 83 | :mac_catalyst_enabled => false 84 | ) 85 | end 86 | end 87 | -------------------------------------------------------------------------------- /example/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'react-native', 3 | }; 4 | -------------------------------------------------------------------------------- /example/metro.config.js: -------------------------------------------------------------------------------- 1 | const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config'); 2 | const path = require('path'); 3 | const escape = require('escape-string-regexp'); 4 | const exclusionList = require('metro-config/src/defaults/exclusionList'); 5 | const pak = require('../package.json'); 6 | 7 | const root = path.resolve(__dirname, '..'); 8 | const modules = Object.keys({ ...pak.peerDependencies }); 9 | 10 | /** 11 | * Metro configuration 12 | * https://facebook.github.io/metro/docs/configuration 13 | * 14 | * @type {import('metro-config').MetroConfig} 15 | */ 16 | const config = { 17 | watchFolders: [root], 18 | 19 | // We need to make sure that only one version is loaded for peerDependencies 20 | // So we block them at the root, and alias them to the versions in example's node_modules 21 | resolver: { 22 | blacklistRE: exclusionList( 23 | modules.map( 24 | (m) => 25 | new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`) 26 | ) 27 | ), 28 | 29 | extraNodeModules: modules.reduce((acc, name) => { 30 | acc[name] = path.join(__dirname, 'node_modules', name); 31 | return acc; 32 | }, {}), 33 | }, 34 | 35 | transformer: { 36 | getTransformOptions: async () => ({ 37 | transform: { 38 | experimentalImportSupport: false, 39 | inlineRequires: true, 40 | }, 41 | }), 42 | }, 43 | }; 44 | 45 | module.exports = mergeConfig(getDefaultConfig(__dirname), config); 46 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-messy-example", 3 | "version": "0.0.1", 4 | "scripts": { 5 | "android": "react-native run-android", 6 | "ios": "react-native run-ios", 7 | "start": "react-native start", 8 | "build:android": "cd android && ./gradlew assembleDebug --no-daemon --console=plain -PreactNativeArchitectures=arm64-v8a", 9 | "build:ios": "cd ios && xcodebuild -workspace MessyExample.xcworkspace -scheme MessyExample -configuration Debug -sdk iphonesimulator CC=clang CPLUSPLUS=clang++ LD=clang LDPLUSPLUS=clang++ GCC_OPTIMIZATION_LEVEL=0 GCC_PRECOMPILE_PREFIX_HEADER=YES ASSETCATALOG_COMPILER_OPTIMIZATION=time DEBUG_INFORMATION_FORMAT=dwarf COMPILER_INDEX_STORE_ENABLE=NO" 10 | }, 11 | "dependencies": { 12 | "@gorhom/bottom-sheet": "5.0.0-alpha.11", 13 | "@shopify/flash-list": "^1.7.1", 14 | "@vokhuyet/react-native-messy": "link:../", 15 | "react": "18.2.0", 16 | "react-native": "0.73.2", 17 | "react-native-gesture-handler": "^2.20.0", 18 | "react-native-image-picker": "^7.1.2", 19 | "react-native-keyboard-controller": "^1.10.3", 20 | "react-native-mmkv-storage": "^0.10.3", 21 | "react-native-pager-view": "^6.4.1", 22 | "react-native-permissions": "^4.1.5", 23 | "react-native-reanimated": "^3.15.3", 24 | "react-native-tab-view": "^3.5.2", 25 | "react-native-turbo-image": "^1.19.1", 26 | "react-native-video": "^6.6.3" 27 | }, 28 | "devDependencies": { 29 | "@babel/core": "^7.20.0", 30 | "@babel/preset-env": "^7.20.0", 31 | "@babel/runtime": "^7.20.0", 32 | "@react-native/babel-preset": "0.73.19", 33 | "@react-native/metro-config": "0.73.3", 34 | "@react-native/typescript-config": "0.73.1", 35 | "babel-plugin-module-resolver": "^5.0.0", 36 | "pod-install": "^0.1.0" 37 | }, 38 | "engines": { 39 | "node": ">=18" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /example/react-native.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const pak = require('../package.json'); 3 | 4 | module.exports = { 5 | dependencies: { 6 | [pak.name]: { 7 | root: path.join(__dirname, '..'), 8 | }, 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /example/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef, useState } from 'react'; 2 | import { View, Pressable, Text, Keyboard } from 'react-native'; 3 | import { GestureHandlerRootView } from 'react-native-gesture-handler'; 4 | import { KeyboardProvider } from 'react-native-keyboard-controller'; 5 | import { 6 | BottomSheetModal, 7 | BottomSheetModalProvider, 8 | useBottomSheetModal, 9 | } from '@gorhom/bottom-sheet'; 10 | //@ts-ignore 11 | import { Messy, TMessyMessage } from '@vokhuyet/react-native-messy'; 12 | 13 | import { MMKVLoader, MMKVInstance } from 'react-native-mmkv-storage'; 14 | 15 | export const MMKVwithID: MMKVInstance = new MMKVLoader() 16 | .withInstanceID('default-mmkv-id') 17 | .withEncryption() 18 | .initialize(); 19 | 20 | const image1 = { 21 | uri: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg', 22 | }; 23 | const image2 = { 24 | uri: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRN410QNjLLnkMSrQNyi0Z3v8v9Irp6bYtHsAdjGYks-0RtmPVtTPCRXCxRYIG4CGUKo1A&usqp=CAU', 25 | }; 26 | const mockMessage = [ 27 | { 28 | createdTime: 165400565790, 29 | id: 'aasdasdasdasd', 30 | type: 'message', 31 | location: { 32 | name: 'Roman Plaza', 33 | image: { 34 | uri: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg', 35 | }, 36 | latitude: '20.9859402', 37 | longitude: '105.7750793', 38 | }, 39 | }, 40 | { 41 | id: '1asdasd', 42 | image: image1, 43 | user: { 44 | id: 2, 45 | userName: 'Demo', 46 | avatar: image1, 47 | }, 48 | }, 49 | { 50 | id: '1asd', 51 | image: image2, 52 | user: { 53 | id: 1, 54 | userName: 'Demo', 55 | avatar: image1, 56 | }, 57 | }, 58 | { 59 | id: '2', 60 | createdTime: 165400565790, 61 | text: '好きな花は何ですか https://google.com', 62 | user: { 63 | id: 2, 64 | userName: 'Demo', 65 | avatar: image1, 66 | }, 67 | }, 68 | { 69 | id: '2aasdsd', 70 | createdTime: 165400565790, 71 | image: [image1, image2], 72 | user: { 73 | id: 2, 74 | userName: 'Demo', 75 | avatar: image1, 76 | }, 77 | }, 78 | { 79 | id: '2aSDASD', 80 | createdTime: 165400565790, 81 | image: [image1, image2, image1], 82 | user: { 83 | id: 2, 84 | userName: 'Demo', 85 | avatar: image1, 86 | }, 87 | }, 88 | { 89 | id: 'asdasdasdasd', 90 | createdTime: 165400565790, 91 | image: [image1, image2, image1, image2, image1, image2, image1], 92 | user: { 93 | id: 2, 94 | userName: 'Demo', 95 | avatar: image2, 96 | }, 97 | }, 98 | { 99 | id: '3', 100 | createdTime: 1654002565790, 101 | text: '#asdaksdkans @knaskndkasndkasndas vanhung13495@gmail.com 0348641146 https://google.com', 102 | user: { 103 | id: 2, 104 | userName: 'Demo', 105 | avatar: image2, 106 | }, 107 | seenBy: [ 108 | { 109 | id: 1, 110 | userName: 'Demo', 111 | avatar: { 112 | uri: 'https://static.remove.bg/remove-bg-web/588fbfdd2324490a4329d4ad22d1bd436e1d384a/assets/start-1abfb4fe2980eabfbbaaa4365a0692539f7cd2725f324f904565a9a744f8e214.jpg', 113 | }, 114 | }, 115 | { 116 | id: 2, 117 | userName: 'Demo', 118 | avatar: { 119 | uri: 'https://static.remove.bg/remove-bg-web/588fbfdd2324490a4329d4ad22d1bd436e1d384a/assets/start-1abfb4fe2980eabfbbaaa4365a0692539f7cd2725f324f904565a9a744f8e214.jpg', 120 | }, 121 | }, 122 | { 123 | id: 3, 124 | userName: 'Demo', 125 | }, 126 | ], 127 | reactions: [ 128 | { 129 | id: '1', 130 | user: { id: '1', name: 'Demo' }, 131 | reaction: { 132 | key: '2', 133 | value: '🥰', 134 | }, 135 | }, 136 | { 137 | id: '2', 138 | reaction: { key: '1', value: '😀' }, 139 | user: { id: '1', name: 'Demo' }, 140 | }, 141 | { 142 | id: '3', 143 | data: {}, 144 | user: { id: '1', name: 'Demo' }, 145 | reaction: { 146 | key: '3', 147 | value: '🤩', 148 | }, 149 | }, 150 | ], 151 | }, 152 | { 153 | id: '4', 154 | text: '#asdaksdkans @knaskndkasndkasndas vanhung13495@gmail.com 0348641146 https://google.com', 155 | status: 'sent', 156 | user: { 157 | id: 1, 158 | userName: 'Demo', 159 | }, 160 | seenBy: [ 161 | { 162 | id: 1, 163 | userName: 'Demo', 164 | avatar: image1, 165 | }, 166 | { 167 | id: 2, 168 | userName: 'Demo', 169 | avatar: image1, 170 | }, 171 | { 172 | id: 3, 173 | userName: 'Demo', 174 | }, 175 | ], 176 | }, 177 | { 178 | id: '5', 179 | text: '好きな花は何ですか', 180 | user: { 181 | id: 1, 182 | userName: 'Demo', 183 | }, 184 | status: 'seen', 185 | 186 | seenBy: [ 187 | { 188 | id: 1, 189 | userName: 'Demo', 190 | avatar: image1, 191 | }, 192 | { 193 | id: 2, 194 | userName: 'Demo', 195 | avatar: image1, 196 | }, 197 | { 198 | id: 3, 199 | userName: 'Demo', 200 | }, 201 | ], 202 | }, 203 | { 204 | createdTime: 165400565790, 205 | id: 'ssss', 206 | type: 'message', 207 | video: { 208 | uri: 'https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4', 209 | }, 210 | }, 211 | { 212 | createdTime: 165400565790, 213 | id: 'ssss111', 214 | type: 'message', 215 | video: { 216 | uri: 'https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4', 217 | }, 218 | }, 219 | { 220 | createdTime: 165400565790, 221 | id: 'asdasdasdasdasdasdasda', 222 | type: 'message', 223 | video: { 224 | uri: 'https://storage-hrs001.rabiloo.net/videos/a7a0ee7d34422c5c1374e58259d619b089b1a26978958d530eb3307ad1e5dd7e.mov', 225 | }, 226 | reactions: [ 227 | { 228 | id: '1', 229 | user: { id: '1', name: 'Demo' }, 230 | reaction: { 231 | key: '2', 232 | value: '🥰', 233 | }, 234 | }, 235 | { 236 | id: '2', 237 | user: { id: '1', name: 'Demo' }, 238 | reaction: { 239 | key: '1', 240 | value: '😀', 241 | }, 242 | }, 243 | { 244 | user: { id: '1', name: 'Demo' }, 245 | reaction: { 246 | key: '3', 247 | value: '🤩', 248 | }, 249 | data: {}, 250 | }, 251 | ], 252 | }, 253 | ]; 254 | function ExtraLeft({ animatedPosition }) { 255 | const ref = useRef(null); 256 | const componentRef = useRef<{ timeout?: NodeJS.Timeout }>({ 257 | timeout: undefined, 258 | }); 259 | const { dismissAll } = useBottomSheetModal(); 260 | 261 | const clear = () => { 262 | if (componentRef.current.timeout) { 263 | clearTimeout(componentRef.current.timeout); 264 | } 265 | }; 266 | useEffect(() => { 267 | return clear; 268 | }, []); 269 | return ( 270 | 271 | { 273 | console.log('ExtraLeft'); 274 | dismissAll(); 275 | Keyboard.dismiss(); 276 | clear(); 277 | componentRef.current.timeout = setTimeout(() => { 278 | ref.current?.present(); 279 | }, 200); 280 | }} 281 | > 282 | 290 | ExtraLeft 291 | 292 | 293 | 313 | Demo 314 | 315 | 316 | ); 317 | } 318 | function BasicExample() { 319 | const [mess, setMess] = useState([...mockMessage.reverse()]); 320 | 321 | const { dismissAll } = useBottomSheetModal(); 322 | const user = { id: 2 }; 323 | return ( 324 | { 336 | console.log('press item'); 337 | }, 338 | onLongPress: () => { 339 | console.log('long press item'); 340 | }, 341 | }} 342 | listProps={{ 343 | onStartReached: () => { 344 | console.log('onStartReached'); 345 | }, 346 | onEndReached: () => { 347 | console.log('onEndReached'); 348 | }, 349 | onPress: () => { 350 | //hide all bottom sheet modal 351 | dismissAll(); 352 | //hide keyboard 353 | Keyboard.dismiss(); 354 | }, 355 | }} 356 | reaction={{ 357 | onPress: ({ message, reaction }) => { 358 | const messageIndex = mess.findIndex((item) => item.id === message.id); 359 | if (!message.reactions) { 360 | message.reactions = []; 361 | } 362 | const reactedIndex = message.reactions.findIndex( 363 | (item) => 364 | item?.user?.id === user.id && item.reaction.key === reaction.key 365 | ); 366 | if (reactedIndex !== -1) { 367 | //remove 368 | message.reactions.splice(reactedIndex, 1); 369 | } else { 370 | //add more 371 | message.reactions.push({ id: `${Date.now()}`, user, reaction }); 372 | } 373 | mess[messageIndex] = message; 374 | setMess([...mess]); 375 | }, 376 | }} 377 | messages={mess} 378 | user={user} 379 | footerProps={{ 380 | onSend: async (message: TMessyMessage) => { 381 | mess.unshift(message); 382 | setMess([...mess]); 383 | // upload image 384 | setTimeout(() => { 385 | //@ts-ignore 386 | mess[0].status = 'sent'; 387 | setMess([...mess]); 388 | }, 2000); 389 | 390 | //send to server by socket 391 | }, 392 | ExtraLeft: , 393 | }} 394 | /> 395 | ); 396 | } 397 | // function UseInBottomSheetExample() { 398 | // const sheetRef = useRef(null); 399 | 400 | // const [mess, setMess] = useState([...mockMessage.reverse()]); 401 | 402 | // useEffect(() => { 403 | // sheetRef.current?.expand(); 404 | // }, []); 405 | // return ( 406 | // 414 | // { 427 | // console.log('press item'); 428 | // }, 429 | // onLongPress: () => { 430 | // console.log('long press item'); 431 | // }, 432 | // }} 433 | // listProps={{ 434 | // onStartReached: () => { 435 | // console.log('onStartReached'); 436 | // }, 437 | // onEndReached: () => { 438 | // console.log('onEndReached'); 439 | // }, 440 | // }} 441 | // messages={mess} 442 | // user={{ id: 2 }} 443 | // footerProps={{ 444 | // onSend: async (message: TMessyMessage) => { 445 | // message; 446 | // mess.unshift(message); 447 | // setMess([...mess]); 448 | // // upload image 449 | // setTimeout(() => { 450 | // //@ts-ignore 451 | // mess[0].status = 'sent'; 452 | // setMess([...mess]); 453 | // }, 2000); 454 | 455 | // //send to server by socket 456 | // }, 457 | // ExtraLeft: , 458 | // }} 459 | // /> 460 | // 461 | // ); 462 | // } 463 | function App() { 464 | return ( 465 | 466 | 467 | 468 | 469 | 470 | {/* */} 471 | 472 | 473 | 474 | 475 | ); 476 | } 477 | 478 | export default App; 479 | -------------------------------------------------------------------------------- /lefthook.yml: -------------------------------------------------------------------------------- 1 | pre-commit: 2 | parallel: true 3 | commands: 4 | lint: 5 | glob: "*.{js,ts,jsx,tsx}" 6 | run: npx eslint {staged_files} 7 | types: 8 | glob: "*.{js,ts, jsx, tsx}" 9 | run: npx tsc --noEmit 10 | commit-msg: 11 | parallel: true 12 | commands: 13 | commitlint: 14 | run: npx commitlint --edit 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vokhuyet/react-native-messy", 3 | "version": "0.2.10", 4 | "description": "chat ui", 5 | "main": "lib/commonjs/index", 6 | "module": "lib/module/index", 7 | "types": "lib/typescript/src/index.d.ts", 8 | "react-native": "src/index", 9 | "source": "src/index", 10 | "files": [ 11 | "src", 12 | "lib", 13 | "android", 14 | "ios", 15 | "cpp", 16 | "*.podspec", 17 | "!ios/build", 18 | "!android/build", 19 | "!android/gradle", 20 | "!android/gradlew", 21 | "!android/gradlew.bat", 22 | "!android/local.properties", 23 | "!**/__tests__", 24 | "!**/__fixtures__", 25 | "!**/__mocks__", 26 | "!**/.*" 27 | ], 28 | "scripts": { 29 | "example": "yarn workspace react-native-messy-example", 30 | "test": "jest", 31 | "typecheck": "tsc --noEmit", 32 | "lint": "eslint \"**/*.{js,ts,tsx}\"", 33 | "clean": "del-cli lib", 34 | "prepare": "bob build", 35 | "release": "release-it" 36 | }, 37 | "keywords": [ 38 | "react-native", 39 | "ios", 40 | "android" 41 | ], 42 | "repository": { 43 | "type": "git", 44 | "url": "git+https://github.com/vokhuyetOz/react-native-messy.git" 45 | }, 46 | "author": "Vok (https://github.com/vokhuyetOz)", 47 | "license": "MIT", 48 | "bugs": { 49 | "url": "https://github.com/vokhuyetOz/react-native-messy/issues" 50 | }, 51 | "homepage": "https://github.com/vokhuyetOz/react-native-messy#readme", 52 | "publishConfig": { 53 | "registry": "https://registry.npmjs.org/" 54 | }, 55 | "dependencies": { 56 | "@vokhuyet/native-hooks": "^0.0.2", 57 | "dayjs": "^1.11.10", 58 | "emojilib": "^3.0.11", 59 | "react-native-parsed-text": "^0.0.22", 60 | "react-native-zoom-reanimated": "^1.4.8", 61 | "unicode-emoji-json": "^0.6.0" 62 | }, 63 | "devDependencies": { 64 | "@commitlint/config-conventional": "^17.0.2", 65 | "@evilmartians/lefthook": "^1.5.0", 66 | "@gorhom/bottom-sheet": "5.0.0-alpha.11", 67 | "@react-native/eslint-config": "^0.72.2", 68 | "@release-it/conventional-changelog": "^5.0.0", 69 | "@shopify/flash-list": "^1.7.1", 70 | "@types/invariant": "^2.2.37", 71 | "@types/jest": "^28.1.2", 72 | "@types/react": "^18.2.61", 73 | "@types/react-native": "0.73.0", 74 | "commitlint": "^17.0.2", 75 | "del-cli": "^5.0.0", 76 | "eslint": "^8.4.1", 77 | "eslint-config-prettier": "^8.5.0", 78 | "eslint-plugin-prettier": "^4.0.0", 79 | "fbjs": "^3.0.4", 80 | "jest": "^28.1.1", 81 | "prettier": "^2.0.5", 82 | "react": "18.2.0", 83 | "react-native": "0.73.2", 84 | "react-native-builder-bob": "^0.20.0", 85 | "react-native-gesture-handler": "^2.20.0", 86 | "react-native-image-picker": "^7.1.2", 87 | "react-native-keyboard-controller": "^1.13.4", 88 | "react-native-pager-view": "^6.4.1", 89 | "react-native-reanimated": "^3.15.3", 90 | "react-native-tab-view": "^3.5.2", 91 | "react-native-video": "6.6.3", 92 | "release-it": "^15.0.0", 93 | "typescript": "^5.0.2" 94 | }, 95 | "resolutions": { 96 | "@types/react": "18.2.61" 97 | }, 98 | "peerDependencies": { 99 | "@gorhom/bottom-sheet": "*", 100 | "@shopify/flash-list": ">=1.6.3", 101 | "dayjs": "*", 102 | "fbjs": "*", 103 | "react": "*", 104 | "react-native": "*", 105 | "react-native-gesture-handler": "*", 106 | "react-native-image-picker": "*", 107 | "react-native-keyboard-controller": "*", 108 | "react-native-pager-view": "*", 109 | "react-native-reanimated": "*", 110 | "react-native-tab-view": "*" 111 | }, 112 | "workspaces": [ 113 | "example" 114 | ], 115 | "packageManager": "yarn@3.6.1", 116 | "engines": { 117 | "node": ">= 18.0.0" 118 | }, 119 | "jest": { 120 | "preset": "react-native", 121 | "modulePathIgnorePatterns": [ 122 | "/example/node_modules", 123 | "/lib/" 124 | ] 125 | }, 126 | "commitlint": { 127 | "extends": [ 128 | "@commitlint/config-conventional" 129 | ] 130 | }, 131 | "release-it": { 132 | "git": { 133 | "commitMessage": "chore: release ${version}", 134 | "tagName": "v${version}" 135 | }, 136 | "npm": { 137 | "publish": true 138 | }, 139 | "github": { 140 | "release": true 141 | }, 142 | "plugins": { 143 | "@release-it/conventional-changelog": { 144 | "preset": "angular" 145 | } 146 | } 147 | }, 148 | "eslintConfig": { 149 | "root": true, 150 | "extends": [ 151 | "@react-native", 152 | "prettier" 153 | ], 154 | "rules": { 155 | "prettier/prettier": [ 156 | "error", 157 | { 158 | "quoteProps": "consistent", 159 | "singleQuote": true, 160 | "tabWidth": 2, 161 | "trailingComma": "es5", 162 | "useTabs": false 163 | } 164 | ] 165 | } 166 | }, 167 | "eslintIgnore": [ 168 | "node_modules/", 169 | "lib/" 170 | ], 171 | "prettier": { 172 | "quoteProps": "consistent", 173 | "singleQuote": true, 174 | "tabWidth": 2, 175 | "trailingComma": "es5", 176 | "useTabs": false 177 | }, 178 | "react-native-builder-bob": { 179 | "source": "src", 180 | "output": "lib", 181 | "targets": [ 182 | "commonjs", 183 | "module", 184 | [ 185 | "typescript", 186 | { 187 | "project": "tsconfig.build.json" 188 | } 189 | ] 190 | ] 191 | } 192 | } 193 | -------------------------------------------------------------------------------- /preview/demo_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vokhuyetOz/react-native-messy/c43d484f04c48c812fbc36cab605a7fccfabbf07/preview/demo_1.png -------------------------------------------------------------------------------- /preview/demo_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vokhuyetOz/react-native-messy/c43d484f04c48c812fbc36cab605a7fccfabbf07/preview/demo_2.png -------------------------------------------------------------------------------- /src/Messy.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View } from 'react-native'; 3 | import type { TMessyMessage, TMessyProps } from './types'; 4 | import { BottomSheetFlatList } from '@gorhom/bottom-sheet'; 5 | import { FlashList } from '@shopify/flash-list'; 6 | 7 | import { MessyLoading } from './MessyLoading'; 8 | 9 | import { useInitColors, useMessyListRef } from './modules'; 10 | import { MessyFooter } from './MessyFooter'; 11 | import { MessyMessage } from './MessyMessage'; 12 | import { MessyPropsContext } from './modules/useMessyPropsContext'; 13 | import { MessyReactionPopupDefault } from './MessyReaction/MessyReactionPopup'; 14 | 15 | type TListComponentItem = { 16 | item: TMessyMessage; 17 | index: number; 18 | }; 19 | export function Messy(props: TMessyProps) { 20 | useInitColors(props.theme); 21 | 22 | const flatlistRef = useMessyListRef(); 23 | 24 | const { loading, messages = [], listProps } = props; 25 | 26 | if (loading) { 27 | return ; 28 | } 29 | 30 | let ListComponent: 31 | | typeof BottomSheetFlatList 32 | | typeof FlashList = FlashList; 33 | 34 | if (props.useInBottomSheet) { 35 | ListComponent = BottomSheetFlatList; 36 | } 37 | return ( 38 | 39 | 40 | `${item.clientId || item.id}`} 45 | maintainVisibleContentPosition={{ 46 | minIndexForVisible: 1, 47 | autoscrollToTopThreshold: 1, 48 | }} 49 | scrollsToTop={false} 50 | data={[...messages]} 51 | renderItem={({ item, index }: TListComponentItem) => { 52 | return ( 53 | 58 | ); 59 | }} 60 | {...listProps} 61 | inverted 62 | /> 63 | 64 | 65 | 66 | 67 | ); 68 | } 69 | -------------------------------------------------------------------------------- /src/MessyFooter.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { MessyFooterDefault } from './MessyFooter/MessyFooter.default'; 4 | import { useMessyPropsContext } from './modules'; 5 | 6 | export function MessyFooter() { 7 | const { footerProps } = useMessyPropsContext(); 8 | if (typeof footerProps?.renderFooter === 'function') { 9 | return footerProps.renderFooter(footerProps); 10 | } 11 | 12 | return ; 13 | } 14 | -------------------------------------------------------------------------------- /src/MessyFooter/MessyFooter.default.tsx: -------------------------------------------------------------------------------- 1 | import React, { 2 | useEffect, 3 | useRef, 4 | useState, 5 | type RefObject, 6 | cloneElement, 7 | isValidElement, 8 | } from 'react'; 9 | import { 10 | Image, 11 | Pressable, 12 | TextInput, 13 | View, 14 | type LayoutChangeEvent, 15 | type TextInputSelectionChangeEventData, 16 | type NativeSyntheticEvent, 17 | type TextInputProps, 18 | } from 'react-native'; 19 | import { useReanimatedKeyboardAnimation } from 'react-native-keyboard-controller'; 20 | import Animated, { 21 | useAnimatedStyle, 22 | useSharedValue, 23 | } from 'react-native-reanimated'; 24 | import { useBottomSheetModal } from '@gorhom/bottom-sheet'; 25 | 26 | import type { TMessyFooterSend } from '../types'; 27 | 28 | import { 29 | useColors, 30 | useMessyListAction, 31 | useSizes, 32 | selectEmoji, 33 | useSelectEmoji, 34 | insert, 35 | useMessyPropsContext, 36 | } from '../modules'; 37 | 38 | import { MessyFooterAction } from './MessyFooterAction'; 39 | import { MessyFooterEmoji } from './MessyFooterEmoji.default'; 40 | 41 | type TMessyFooterTextInput = Readonly<{ 42 | textInputRef: RefObject; 43 | inputProps?: TextInputProps; 44 | onChangeText: (text: string) => void; 45 | clearTextInput?: () => void; 46 | }>; 47 | 48 | export let setMessyFooterInputText: React.Dispatch< 49 | React.SetStateAction 50 | >; 51 | 52 | function MessyFooterTextInput({ 53 | textInputRef, 54 | onChangeText, 55 | }: TMessyFooterTextInput) { 56 | const Sizes = useSizes(); 57 | const Colors = useColors(); 58 | const { footerProps } = useMessyPropsContext(); 59 | const { dismissAll } = useBottomSheetModal(); 60 | 61 | const { emoji: newEmoji, force } = useSelectEmoji(); 62 | 63 | const [text, setText] = useState(''); 64 | const componentRef = useRef({ 65 | cursorStart: text.length - 1, 66 | }); 67 | 68 | //create global setting text function 69 | useEffect(() => { 70 | setMessyFooterInputText = setText; 71 | }, []); 72 | 73 | useEffect(() => { 74 | if (!newEmoji) { 75 | return; 76 | } 77 | const newText = insert({ 78 | str: text, 79 | index: componentRef.current.cursorStart, 80 | value: newEmoji.emoji, 81 | }); 82 | setText(newText); 83 | }, [force]); 84 | //update text to parent 85 | useEffect(() => { 86 | onChangeText?.(text); 87 | }, [text]); 88 | 89 | const onSelectionChange = ( 90 | e: NativeSyntheticEvent 91 | ) => { 92 | componentRef.current.cursorStart = e.nativeEvent.selection.start; 93 | }; 94 | const onInputFocus = () => { 95 | dismissAll(); 96 | }; 97 | return ( 98 | 119 | ); 120 | } 121 | function MessyFooterSend({ onPress }: TMessyFooterSend) { 122 | const Sizes = useSizes(); 123 | const { footerProps } = useMessyPropsContext(); 124 | const renderSend = () => { 125 | if (isValidElement(footerProps?.Send)) { 126 | return footerProps.Send; 127 | } 128 | return ( 129 | 134 | ); 135 | }; 136 | return ( 137 | 144 | {renderSend()} 145 | 146 | ); 147 | } 148 | 149 | export function MessyFooterDefault() { 150 | const Sizes = useSizes(); 151 | const Colors = useColors(); 152 | const { user, footerProps: props } = useMessyPropsContext(); 153 | 154 | const { scrollToLast } = useMessyListAction(); 155 | 156 | const [borderRadius, setBorderRadius] = useState(Sizes.input_border_radius); 157 | const textInputRef = useRef(null); 158 | const componentRef = useRef({ 159 | text: '', 160 | }); 161 | // const [inputKey, setInputKey] = useState(Date.now()); 162 | const emojiShared = useSharedValue(Sizes.device_height); 163 | const leftExtraShared = useSharedValue(Sizes.device_height); 164 | const { height } = useReanimatedKeyboardAnimation(); 165 | 166 | const fakeViewKeyboard = useAnimatedStyle(() => { 167 | const emojiHeight = Sizes.device_height - emojiShared.value; 168 | const leftExtraHeight = Sizes.device_height - leftExtraShared.value; 169 | 170 | const maxHeight = Math.max( 171 | Math.abs(emojiHeight), 172 | Math.abs(height.value), 173 | Math.abs(leftExtraHeight) 174 | ); 175 | return { 176 | height: maxHeight, 177 | }; 178 | }, [Sizes.device_height]); 179 | 180 | const onLayout = ({ nativeEvent }: LayoutChangeEvent) => { 181 | if ( 182 | Math.floor(nativeEvent.layout.height) === 183 | Math.floor(Sizes.input_height + Sizes.border * 2) 184 | ) { 185 | setBorderRadius(Sizes.input_border_radius); 186 | return; 187 | } 188 | setBorderRadius(Sizes.border_radius / 2); 189 | }; 190 | const onChangeText = (text: string) => { 191 | componentRef.current.text = text; 192 | }; 193 | const onPressSendText = () => { 194 | const text = componentRef.current.text; 195 | if (!text?.trim()) { 196 | return; 197 | } 198 | selectEmoji(); 199 | textInputRef.current?.clear(); 200 | componentRef.current.text = ''; 201 | const createdTime = Date.now(); 202 | // setInputKey(createdTime); 203 | props?.onSend?.({ 204 | id: `${Date.now()}`, 205 | text, 206 | createdTime, 207 | status: 'sending', 208 | user, 209 | clientId: `${createdTime}`, 210 | }); 211 | scrollToLast(); 212 | }; 213 | 214 | let ExtraLeftWithProps = props?.ExtraLeft; 215 | if (props?.ExtraLeft) { 216 | ExtraLeftWithProps = cloneElement(props.ExtraLeft as React.ReactElement, { 217 | animatedPosition: leftExtraShared, 218 | }); 219 | } 220 | 221 | return ( 222 | 225 | 226 | 235 | {ExtraLeftWithProps} 236 | 248 | 253 | {!props?.hideEmoji && ( 254 | 255 | )} 256 | 257 | 258 | 259 | {!props?.hideFooterAction && } 260 | 261 | {/* fakeview keyboard */} 262 | 263 | 264 | ); 265 | } 266 | -------------------------------------------------------------------------------- /src/MessyFooter/MessyFooterAction.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | View, 4 | Pressable, 5 | type ImageStyle, 6 | type ImageSourcePropType, 7 | } from 'react-native'; 8 | import { 9 | launchCamera, 10 | launchImageLibrary, 11 | type ImagePickerResponse, 12 | } from 'react-native-image-picker'; 13 | 14 | import { MImage } from '../elements/MImage/MImage'; 15 | import { useSizes, useMessyPropsContext, useMessyListAction } from '../modules'; 16 | import { TMessyFooterActionItemDefault } from '../types'; 17 | 18 | type TMessyFooterActionItem = Readonly<{ 19 | onPress: () => Promise | void; 20 | style: ImageStyle; 21 | source: ImageSourcePropType; 22 | }>; 23 | 24 | const useHandleFile = () => { 25 | const { scrollToLast } = useMessyListAction(); 26 | const { footerProps, user } = useMessyPropsContext(); 27 | const handleOnSendFile = (result: ImagePickerResponse) => { 28 | if (result.didCancel) { 29 | return; 30 | } 31 | if (result.errorCode) { 32 | return; 33 | } 34 | const asset = result.assets?.[0]; 35 | const createdTime = Date.now(); 36 | footerProps?.onSend?.({ 37 | user, 38 | type: 'message', 39 | createdTime, 40 | status: 'sending', 41 | local: asset, 42 | clientId: `${createdTime}`, 43 | }); 44 | scrollToLast(); 45 | }; 46 | const handleCamera = async () => { 47 | //check permission 48 | const result = await launchCamera({ 49 | mediaType: 'photo', 50 | includeBase64: false, 51 | includeExtra: false, 52 | assetRepresentationMode: 'current', 53 | quality: 0.8, 54 | }); 55 | handleOnSendFile(result); 56 | }; 57 | const handleLibrary = async () => { 58 | const result = await launchImageLibrary({ 59 | includeBase64: false, 60 | includeExtra: false, 61 | selectionLimit: 1, 62 | mediaType: 'mixed', 63 | assetRepresentationMode: 'current', 64 | quality: 0.8, 65 | videoQuality: 'medium', 66 | maxWidth: 960, 67 | maxHeight: 1280, 68 | }); 69 | 70 | handleOnSendFile(result); 71 | }; 72 | return { handleCamera, handleLibrary }; 73 | }; 74 | 75 | function MessyFooterActionItem({ 76 | onPress, 77 | style, 78 | source, 79 | }: TMessyFooterActionItem) { 80 | const Sizes = useSizes(); 81 | 82 | return ( 83 | 84 | 95 | 96 | ); 97 | } 98 | 99 | export function MessyFooterActionCameraDefault({ 100 | onPress, 101 | handlePermission, 102 | style, 103 | source = require('../utils/images/camera.png'), 104 | }: TMessyFooterActionItemDefault) { 105 | const { handleCamera } = useHandleFile(); 106 | const onPressDefault = async () => { 107 | // use your own onPress handler 108 | if (onPress) { 109 | return onPress(); 110 | } 111 | 112 | let validate = true; 113 | if (typeof handlePermission === 'function') { 114 | validate = await handlePermission(); 115 | } 116 | if (!validate) { 117 | return; 118 | } 119 | return handleCamera(); 120 | }; 121 | 122 | return ( 123 | 128 | ); 129 | } 130 | export function MessyFooterActionLibraryDefault({ 131 | handlePermission, 132 | style, 133 | source = require('../utils/images/image.png'), 134 | onPress, 135 | }: TMessyFooterActionItemDefault) { 136 | const Sizes = useSizes(); 137 | const { handleLibrary } = useHandleFile(); 138 | 139 | const onPressDefault = async () => { 140 | //use your own onPress handler 141 | if (onPress) { 142 | onPress(); 143 | return; 144 | } 145 | let validate = true; 146 | if (typeof handlePermission === 'function') { 147 | validate = await handlePermission(); 148 | } 149 | if (!validate) { 150 | return; 151 | } 152 | return handleLibrary(); 153 | }; 154 | 155 | return ( 156 | 161 | ); 162 | } 163 | 164 | export function MessyFooterAction() { 165 | const Sizes = useSizes(); 166 | const { footerProps } = useMessyPropsContext(); 167 | if (typeof footerProps?.renderFooterAction === 'function') { 168 | return footerProps.renderFooterAction(footerProps); 169 | } 170 | return ( 171 | 178 | {footerProps?.ExtraActionLeft} 179 | 180 | 181 | 182 | ); 183 | } 184 | -------------------------------------------------------------------------------- /src/MessyFooter/MessyFooterEmoji.default.tsx: -------------------------------------------------------------------------------- 1 | import React, { 2 | Fragment, 3 | useEffect, 4 | useRef, 5 | useState, 6 | useCallback, 7 | isValidElement, 8 | } from 'react'; 9 | import { Image, Pressable, View, Keyboard } from 'react-native'; 10 | import type { SharedValue } from 'react-native-reanimated'; 11 | import { 12 | BottomSheetModal, 13 | BottomSheetTextInput, 14 | BottomSheetBackdrop, 15 | type BottomSheetBackdropProps, 16 | useBottomSheet, 17 | useBottomSheetModal, 18 | } from '@gorhom/bottom-sheet'; 19 | import emojiJson from 'unicode-emoji-json/data-by-group.json'; 20 | import { 21 | TabView, 22 | TabBar, 23 | type TabBarProps, 24 | type SceneRendererProps, 25 | type Route, 26 | } from 'react-native-tab-view'; 27 | import { FlashList } from '@shopify/flash-list'; 28 | 29 | import { 30 | useColors, 31 | useSizes, 32 | selectEmoji, 33 | type TEmoji, 34 | useMessyEmojiSheetRef, 35 | useMessyPropsContext, 36 | setBottomSheetEmojiIndex, 37 | useBotomSheetEmojiIndex, 38 | } from '../modules'; 39 | 40 | import { CommonStyle } from '../utils/CommonStyle'; 41 | import { MImage } from '../elements/MImage/MImage'; 42 | import { MLoading } from '../elements/Loading/Loading'; 43 | import { MText } from '../elements/MText/MText'; 44 | 45 | const emojiAll = emojiJson.map(({ slug, emojis }) => { 46 | return { 47 | key: slug, 48 | title: emojis[0].emoji, 49 | data: emojis, 50 | }; 51 | }); 52 | 53 | type TMessyFooterEmojiSearch = Readonly<{ 54 | query: string; 55 | setQuery: React.Dispatch>; 56 | }>; 57 | 58 | type TMessyFooterEmoji = Readonly<{ 59 | emojiShared: SharedValue; 60 | }>; 61 | 62 | type TMessyFooterEmojiContentPage = Readonly<{ 63 | data: TEmoji[]; 64 | }>; 65 | 66 | function MessyFooterEmojiSearch({ query, setQuery }: TMessyFooterEmojiSearch) { 67 | const Sizes = useSizes(); 68 | const Colors = useColors(); 69 | const bottomSheet = useBottomSheet(); 70 | 71 | const onPress = () => { 72 | bottomSheet.close(); 73 | }; 74 | return ( 75 | 84 | 96 | 101 | 110 | 111 | 112 | ); 113 | } 114 | function MessyFooterEmojiContentPage({ data }: TMessyFooterEmojiContentPage) { 115 | const Sizes = useSizes(); 116 | const bottomSheet = useBottomSheet(); 117 | const sheetIndex = useBotomSheetEmojiIndex(); 118 | const componentRef = useRef({ 119 | firstOnEndReached: false, 120 | }); 121 | if (sheetIndex === -1) { 122 | return ; 123 | } 124 | const onRefresh = () => { 125 | Keyboard.dismiss(); 126 | bottomSheet.snapToIndex(0); 127 | }; 128 | const onEndReached = () => { 129 | if (!componentRef.current.firstOnEndReached) { 130 | componentRef.current.firstOnEndReached = true; 131 | return; 132 | } 133 | bottomSheet.expand(); 134 | }; 135 | return ( 136 | { 145 | const onPress = () => { 146 | selectEmoji(item); 147 | bottomSheet.snapToIndex(0); 148 | }; 149 | return ( 150 | 151 | 159 | {item.emoji} 160 | 161 | 162 | ); 163 | }} 164 | /> 165 | ); 166 | } 167 | 168 | function MessyFooterEmojiContent() { 169 | const Sizes = useSizes(); 170 | const Colors = useColors(); 171 | 172 | const [query, setQuery] = useState(''); 173 | const [emojiData, setEmojiData] = useState(emojiAll); 174 | const [index, setIndex] = useState(0); 175 | useEffect(() => { 176 | const handleSearch = () => { 177 | if (!query) { 178 | return emojiAll; 179 | } 180 | return emojiAll.map((item) => { 181 | return { 182 | ...item, 183 | data: item.data.filter((e) => 184 | e.name?.toLowerCase().includes(query.trim().toLowerCase()) 185 | ), 186 | }; 187 | }); 188 | }; 189 | 190 | const timeout = setTimeout(() => { 191 | const data = handleSearch(); 192 | setEmojiData(data); 193 | }, 200); 194 | 195 | return () => { 196 | clearTimeout(timeout); 197 | }; 198 | }, [query]); 199 | 200 | const renderScene = useCallback( 201 | ({ route }: SceneRendererProps & { route: Route & { data: TEmoji[] } }) => { 202 | if (!route?.data?.length) { 203 | return null; 204 | } 205 | 206 | return ; 207 | }, 208 | [] 209 | ); 210 | const renderTabBar = (props: TabBarProps) => { 211 | return ( 212 | 225 | ); 226 | }; 227 | 228 | const pages = emojiData.filter((item) => item.data.length); 229 | 230 | return ( 231 | 232 | 233 | 241 | 242 | ); 243 | } 244 | 245 | export function MessyFooterEmoji({ emojiShared }: TMessyFooterEmoji) { 246 | const { footerProps } = useMessyPropsContext(); 247 | const Sizes = useSizes(); 248 | const { dismissAll } = useBottomSheetModal(); 249 | 250 | const bottomSheetRef = useMessyEmojiSheetRef(); 251 | 252 | const componentRef = useRef<{ 253 | timeout?: NodeJS.Timeout; 254 | modalePresentTimeout?: NodeJS.Timeout; 255 | }>({ 256 | timeout: undefined, 257 | modalePresentTimeout: undefined, 258 | }); 259 | 260 | const clear = () => { 261 | if (componentRef.current.timeout) { 262 | clearTimeout(componentRef.current.timeout); 263 | } 264 | }; 265 | useEffect(() => { 266 | return clear; 267 | }, []); 268 | 269 | const onPress = () => { 270 | Keyboard.dismiss(); 271 | dismissAll(); 272 | clear(); 273 | clearTimeout(componentRef.current.modalePresentTimeout); 274 | componentRef.current.modalePresentTimeout = setTimeout(() => { 275 | bottomSheetRef?.current?.present(); 276 | }, 200); 277 | }; 278 | 279 | const renderBackdrop = (props: BottomSheetBackdropProps) => { 280 | return ; 281 | }; 282 | const renderEmoji = () => { 283 | if (isValidElement(footerProps?.Emoji)) { 284 | return footerProps.Emoji; 285 | } 286 | return ( 287 | 292 | ); 293 | }; 294 | 295 | return ( 296 | 297 | 298 | {renderEmoji()} 299 | 300 | 314 | 315 | 316 | 317 | ); 318 | } 319 | -------------------------------------------------------------------------------- /src/MessyLoading.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import type { TMessyProps } from './types'; 3 | 4 | import { MLoading } from './elements/Loading/Loading'; 5 | 6 | export function MessyLoading(props: TMessyProps) { 7 | const { renderLoading } = props; 8 | if (typeof renderLoading === 'function') { 9 | return renderLoading({}); 10 | } 11 | return ; 12 | } 13 | -------------------------------------------------------------------------------- /src/MessyMessage/MessyMessage.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Pressable } from 'react-native'; 3 | 4 | import { TMessyMessageProps } from '../types'; 5 | 6 | import { MessyMessageContent } from './MessyMessageContent'; 7 | import { MessyMessageDateTime } from './MessyMessageDateTime'; 8 | import { useMessyPropsContext, useSizes } from '../modules'; 9 | 10 | export function MessyMessage(props: TMessyMessageProps) { 11 | const Sizes = useSizes(); 12 | const { renderMessage, listProps } = useMessyPropsContext(); 13 | 14 | if (renderMessage) { 15 | return renderMessage(props); 16 | } 17 | return ( 18 | 24 | 25 | 26 | 27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /src/MessyMessage/MessyMessageAvatar.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Image, View } from 'react-native'; 3 | import dayjs from 'dayjs'; 4 | 5 | import { useColors, useMessyPropsContext, useSizes } from '../modules'; 6 | 7 | import type { TMessyMessageProps } from '../types'; 8 | import { MText } from '../elements/MText/MText'; 9 | 10 | export function MessyMessageAvatar(props: TMessyMessageProps) { 11 | const Sizes = useSizes(); 12 | const Colors = useColors(); 13 | const { renderAvatar } = useMessyPropsContext(); 14 | 15 | const { value, preMessage } = props; 16 | 17 | const currentDate = dayjs(value.createdTime).format('YYYY MMMM DD'); 18 | const preDate = dayjs(preMessage?.createdTime).format('YYYY MMMM DD'); 19 | 20 | if (currentDate === preDate && preMessage?.user?.id === value?.user?.id) { 21 | return ( 22 | 29 | ); 30 | } 31 | 32 | if (typeof renderAvatar === 'function') { 33 | return renderAvatar(value); 34 | } 35 | 36 | if (!value?.user?.avatar) { 37 | return ( 38 | 48 | 55 | {value?.user?.userName?.[0]} 56 | 57 | 58 | ); 59 | } 60 | return ( 61 | 70 | ); 71 | } 72 | -------------------------------------------------------------------------------- /src/MessyMessage/MessyMessageContent.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Pressable, View } from 'react-native'; 3 | 4 | import type { TMessyMessageProps } from '../types'; 5 | 6 | import { useMessyPropsContext, useSizes } from '../modules'; 7 | import { MessyMessageAvatar } from './MessyMessageAvatar'; 8 | import { MessyMessageContentImage } from './MessyMessageContentImage'; 9 | import { MessyMessageContentText } from './MessyMessageContentText'; 10 | 11 | import { MessyMessageContentLocation } from './MessyMessageContentLocation'; 12 | import { MessyMessageContentVideo } from './MessyMessageContentVideo'; 13 | import { MText } from '../elements/MText/MText'; 14 | import { MessyMessageContentOther } from './MessyMessageContentOther'; 15 | import { MessyMessageContentReactionButton } from './MessyMessageContentReactionButton'; 16 | import { MessyMessageContentReaction } from './MessyMessageContentReaction'; 17 | import { MessyMessageContentStatus } from './MessyMessageContentStatus'; 18 | 19 | export function MessyMessageContent(props: TMessyMessageProps) { 20 | const Sizes = useSizes(); 21 | const messyProps = useMessyPropsContext(); 22 | 23 | const { 24 | renderMessageSystem, 25 | user, 26 | messageProps = { hideOwnerAvatar: true, hidePartnerAvatar: false }, 27 | } = messyProps; 28 | const { value, index } = props; 29 | 30 | //System message 31 | if (value?.type === 'system') { 32 | if (typeof renderMessageSystem === 'function') { 33 | return renderMessageSystem({ data: value }); 34 | } 35 | return ( 36 | 37 | {value.text} 38 | 39 | ); 40 | } 41 | const justifyContent: any = { 42 | true: 'flex-end', 43 | false: 'flex-start', 44 | }[`${user?.id === value?.user?.id}`]; 45 | 46 | const renderAvatarLeft = () => { 47 | if (justifyContent === 'flex-end') { 48 | return null; 49 | } 50 | if (messageProps?.hidePartnerAvatar) { 51 | return null; 52 | } 53 | return ; 54 | }; 55 | const renderAvatarRight = () => { 56 | if (justifyContent === 'flex-start') { 57 | return null; 58 | } 59 | if (messageProps?.hideOwnerAvatar) { 60 | return null; 61 | } 62 | return ; 63 | }; 64 | const onPress = () => { 65 | // contentStatusRef?.current?.setDisplay?.((pre: boolean) => !pre); 66 | messageProps.onPress?.({ ...props, ...messyProps }); 67 | }; 68 | const onLongPress = () => { 69 | messageProps.onLongPress?.({ ...props, ...messyProps }); 70 | }; 71 | 72 | let maxWidth = Sizes.text_max_width; 73 | if (value.image || value.local) { 74 | maxWidth = Sizes.image_max_width; 75 | } 76 | 77 | return ( 78 | 86 | {renderAvatarLeft()} 87 | 88 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | {renderAvatarRight()} 107 | 108 | ); 109 | } 110 | -------------------------------------------------------------------------------- /src/MessyMessage/MessyMessageContentImage.tsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, useState } from 'react'; 2 | import { 3 | type ImageSourcePropType, 4 | View, 5 | type ImageStyle, 6 | type ViewStyle, 7 | Pressable, 8 | Text, 9 | } from 'react-native'; 10 | import { BottomSheetModal, useBottomSheetModal } from '@gorhom/bottom-sheet'; 11 | import Zoom from 'react-native-zoom-reanimated'; 12 | import PagerView, { 13 | type PagerViewOnPageSelectedEvent, 14 | } from 'react-native-pager-view'; 15 | 16 | import type { TMessyMessageProps } from '../types'; 17 | 18 | import { isImage, useMessyPropsContext, useSizes } from '../modules'; 19 | 20 | import { MImage } from '../elements/MImage/MImage'; 21 | import { MLoading } from '../elements/Loading/Loading'; 22 | import { useBackHandler } from '@vokhuyet/native-hooks'; 23 | 24 | type TImageContentListItem = Readonly<{ 25 | data: ImageSourcePropType; 26 | onPresent: () => void; 27 | imageStyle: ImageStyle; 28 | }>; 29 | type TModalPageIndex = Readonly<{ 30 | page: number; 31 | all: number; 32 | }>; 33 | type TMessyMessageContentImageList = Readonly<{ 34 | data: ImageSourcePropType[]; 35 | style: ViewStyle; 36 | }>; 37 | function ImageContentListItem({ 38 | data, 39 | onPresent, 40 | imageStyle, 41 | }: TImageContentListItem) { 42 | const Sizes = useSizes(); 43 | return ( 44 | 52 | 58 | 59 | ); 60 | } 61 | function ModalClose() { 62 | const Sizes = useSizes(); 63 | const { dismiss } = useBottomSheetModal(); 64 | 65 | const onClose = () => { 66 | dismiss(); 67 | }; 68 | return ( 69 | 79 | 84 | 85 | ); 86 | } 87 | function ModalPageIndex({ page, all }: TModalPageIndex) { 88 | const Sizes = useSizes(); 89 | 90 | return ( 91 | 98 | 99 | {page + 1}/{all} 100 | 101 | 102 | ); 103 | } 104 | function MessyMessageContentImageList({ 105 | data, 106 | style, 107 | }: TMessyMessageContentImageList) { 108 | const Sizes = useSizes(); 109 | 110 | const bottomSheetRef = useRef(null); 111 | const [page, setPage] = useState(0); 112 | 113 | const onPresent = (index: number) => () => { 114 | bottomSheetRef.current?.present(); 115 | setPage(index); 116 | }; 117 | 118 | const onPageSelected = (e: PagerViewOnPageSelectedEvent) => { 119 | setPage(e.nativeEvent.position); 120 | }; 121 | 122 | let imageWidth = Sizes.image_max_width / 3 - Sizes.border * 2; 123 | if (data.length === 2) { 124 | imageWidth = Sizes.text_max_width / 2 - Sizes.border * 2; 125 | } 126 | const ImageContentList = data.map( 127 | (item: ImageSourcePropType, index: number) => { 128 | return ( 129 | 138 | ); 139 | } 140 | ); 141 | return ( 142 | 152 | {ImageContentList} 153 | 161 | 166 | {React.Children.map(ImageContentList, (child, childIndex) => { 167 | return ( 168 | 169 | {React.cloneElement(child, { 170 | imageStyle: { 171 | ...child.props.style, 172 | width: Sizes.device_width, 173 | height: Sizes.device_height, 174 | resizeMode: 'contain', 175 | }, 176 | })} 177 | 178 | ); 179 | })} 180 | 181 | 182 | 183 | 184 | 185 | ); 186 | } 187 | function MessyMessageContentImageDefault({ value }: TMessyMessageProps) { 188 | const Sizes = useSizes(); 189 | const componentRef = useRef({ 190 | sheetOpen: false, 191 | }); 192 | const bottomSheetRef = useRef(null); 193 | useBackHandler(() => { 194 | if (componentRef.current.sheetOpen) { 195 | bottomSheetRef.current?.dismiss(); 196 | return true; 197 | } 198 | return false; 199 | }); 200 | 201 | const onPresent = () => { 202 | bottomSheetRef.current?.present(); 203 | }; 204 | 205 | let border: ImageStyle = { 206 | borderRadius: Sizes.border_radius, 207 | }; 208 | if (value.text) { 209 | border = { 210 | borderBottomLeftRadius: Sizes.border_radius, 211 | borderBottomRightRadius: Sizes.border_radius, 212 | }; 213 | } 214 | 215 | if (Array.isArray(value.image)) { 216 | return ; 217 | } 218 | const renderLoading = () => { 219 | if (value.status !== 'sending') { 220 | return null; 221 | } 222 | return ( 223 | 229 | ); 230 | }; 231 | 232 | const ImageContent = ( 233 | 234 | ); 235 | 236 | return ( 237 | 238 | {ImageContent} 239 | {renderLoading()} 240 | 247 | 248 | {React.cloneElement(ImageContent, { 249 | style: { 250 | ...ImageContent.props.style, 251 | width: Sizes.device_width, 252 | height: Sizes.device_height, 253 | }, 254 | })} 255 | 256 | 257 | 258 | 259 | ); 260 | } 261 | export function MessyMessageContentImage(props: TMessyMessageProps) { 262 | const { value } = props; 263 | const messyProps = useMessyPropsContext(); 264 | 265 | if (!value?.image && !value.local) { 266 | return null; 267 | } 268 | if (value.local && !isImage(value.local?.uri)) { 269 | return null; 270 | } 271 | if (typeof messyProps.renderMessageImage === 'function') { 272 | return messyProps.renderMessageImage({ ...props, ...messyProps }); 273 | } 274 | return ; 275 | } 276 | -------------------------------------------------------------------------------- /src/MessyMessage/MessyMessageContentLocation.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Linking, Pressable } from 'react-native'; 3 | 4 | import type { TMessyMessageProps } from '../types'; 5 | 6 | import { useColors, useMessyPropsContext, useSizes } from '../modules'; 7 | 8 | import { MImage } from '../elements/MImage/MImage'; 9 | import { MText } from '../elements/MText/MText'; 10 | 11 | export function MessyMessageContentLocation(props: TMessyMessageProps) { 12 | const Colors = useColors(); 13 | const Sizes = useSizes(); 14 | const messyProps = useMessyPropsContext(); 15 | const { renderMessageLocation, user, messageProps } = messyProps; 16 | const { value } = props; 17 | 18 | if (!value?.location) { 19 | return null; 20 | } 21 | 22 | if (typeof renderMessageLocation === 'function') { 23 | return renderMessageLocation({ ...props, ...messyProps }); 24 | } 25 | const onPress = async () => { 26 | if (messageProps?.onPress) { 27 | return; 28 | } 29 | Linking.openURL( 30 | `https://maps.google.com/maps?q=${value.location?.latitude},${value.location?.longitude}+(${value.location?.name})&z=14&ll=${value.location?.latitude},${value.location?.longitude}` 31 | ).catch(); 32 | }; 33 | 34 | const backgroundColor: string = { 35 | true: Colors.message_right.background, 36 | false: Colors.message_left.background, 37 | }[`${user?.id === value?.user?.id}`]; 38 | 39 | const textColor: string = { 40 | true: Colors.message_right.text, 41 | false: Colors.message_left.text, 42 | }[`${user?.id === value?.user?.id}`]; 43 | 44 | return ( 45 | 46 | 47 | 59 | {value.location.name} 60 | 61 | 62 | ); 63 | } 64 | -------------------------------------------------------------------------------- /src/MessyMessage/MessyMessageContentOther.tsx: -------------------------------------------------------------------------------- 1 | import { useMessyPropsContext } from '../modules'; 2 | import type { TMessyMessageProps } from '../types'; 3 | 4 | export function MessyMessageContentOther(props: TMessyMessageProps) { 5 | const { value } = props; 6 | const messyProps = useMessyPropsContext(); 7 | 8 | if ( 9 | value?.text || 10 | value?.audio || 11 | value?.image || 12 | value?.video || 13 | value?.location 14 | ) { 15 | return null; 16 | } 17 | 18 | if (typeof messyProps.renderMessageOther === 'function') { 19 | return messyProps.renderMessageOther({ ...props, ...messyProps }); 20 | } 21 | 22 | return null; 23 | } 24 | -------------------------------------------------------------------------------- /src/MessyMessage/MessyMessageContentReaction.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View, ViewProps } from 'react-native'; 3 | import Animated, { ZoomIn, ZoomOut } from 'react-native-reanimated'; 4 | 5 | import type { TMessyMessageProps } from '../types'; 6 | 7 | import { useColors, useMessyPropsContext, useSizes } from '../modules'; 8 | 9 | import { MText } from '../elements/MText/MText'; 10 | import { useReactionConverter } from '../MessyReaction/modules/useReactionMessage'; 11 | 12 | /** 13 | * user's reaction 14 | * @param param0 15 | * @returns 16 | */ 17 | export function MessyMessageContentReaction(props: TMessyMessageProps) { 18 | const Colors = useColors(); 19 | const Sizes = useSizes(); 20 | const messyProps = useMessyPropsContext(); 21 | const { messageProps = { hideOwnerAvatar: true, hidePartnerAvatar: false } } = 22 | messyProps; 23 | const { value } = props; 24 | 25 | const { list } = useReactionConverter(value.reactions); 26 | 27 | if (typeof messageProps?.renderMessyMessageContentReaction === 'function') { 28 | return messageProps.renderMessyMessageContentReaction({ 29 | ...messyProps, 30 | ...props, 31 | }); 32 | } 33 | 34 | if (!value.reactions?.length) { 35 | return null; 36 | } 37 | 38 | return ( 39 | 48 | {list.map((item, index) => { 49 | return ( 50 | 63 | 64 | {item.react.value} 65 | {item.users.length}{' '} 66 | 67 | 68 | ); 69 | })} 70 | 71 | ); 72 | } 73 | -------------------------------------------------------------------------------- /src/MessyMessage/MessyMessageContentReactionButton.tsx: -------------------------------------------------------------------------------- 1 | import React, { useRef } from 'react'; 2 | import { 3 | GestureResponderEvent, 4 | LayoutChangeEvent, 5 | LayoutRectangle, 6 | Pressable, 7 | } from 'react-native'; 8 | 9 | import type { TMessyMessageProps } from '../types'; 10 | 11 | import { useMessyPropsContext, useSizes } from '../modules'; 12 | import { MText } from '../elements/MText/MText'; 13 | import { setReactionMessage } from '../MessyReaction/modules/useReactionMessage'; 14 | 15 | export function MessyMessageContentReactionButton(props: TMessyMessageProps) { 16 | const Sizes = useSizes(); 17 | const messyProps = useMessyPropsContext(); 18 | 19 | const { user, reaction } = messyProps; 20 | const { value } = props; 21 | 22 | const componentRef = useRef<{ layout?: LayoutRectangle }>({ 23 | layout: undefined, 24 | }); 25 | 26 | if (reaction?.renderReactionButton) { 27 | return reaction.renderReactionButton({ ...messyProps, ...props }); 28 | } 29 | 30 | if (user?.id === value?.user?.id) { 31 | return null; 32 | } 33 | const onLayout = (e: LayoutChangeEvent) => { 34 | componentRef.current.layout = e.nativeEvent.layout; 35 | }; 36 | const onPress = (e: GestureResponderEvent) => { 37 | setReactionMessage({ 38 | layout: { ...e.nativeEvent, ...componentRef.current.layout! }, 39 | message: value, 40 | }); 41 | }; 42 | 43 | return ( 44 | 45 | 🫥 46 | 47 | ); 48 | } 49 | -------------------------------------------------------------------------------- /src/MessyMessage/MessyMessageContentStatus.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import { View } from 'react-native'; 3 | import Animated, { ZoomIn, ZoomOut } from 'react-native-reanimated'; 4 | 5 | import type { TMessyMessage } from '../types'; 6 | 7 | import { useColors, useMessyPropsContext, useSizes } from '../modules'; 8 | 9 | import { MImage } from '../elements/MImage/MImage'; 10 | import { MText } from '../elements/MText/MText'; 11 | 12 | type MessyMessageContentStatusProps = Readonly<{ 13 | value: TMessyMessage; 14 | last: boolean; 15 | }>; 16 | 17 | export function MessyMessageContentStatus({ 18 | value, 19 | last, 20 | }: MessyMessageContentStatusProps) { 21 | const Colors = useColors(); 22 | const Sizes = useSizes(); 23 | const { user } = useMessyPropsContext(); 24 | 25 | const [display, setDisplay] = useState(last); 26 | 27 | useEffect(() => { 28 | setDisplay(last); 29 | }, [last]); 30 | 31 | if (!display) { 32 | return null; 33 | } 34 | 35 | const alignItems: any = { 36 | true: 'flex-end', 37 | false: 'flex-start', 38 | }[`${user?.id === value?.user?.id}`]; 39 | 40 | const renderContent = () => { 41 | if (value.seenBy && Array.isArray(value.seenBy) && value.seenBy.length) { 42 | return ( 43 | 51 | {value.seenBy.map((item) => { 52 | if (item.avatar) { 53 | return ( 54 | 65 | ); 66 | } 67 | if (item.userName) { 68 | return ( 69 | 81 | 88 | {item.userName?.[0]} 89 | 90 | 91 | ); 92 | } 93 | return null; 94 | })} 95 | 96 | ); 97 | } 98 | let source = require('../utils/images/circle_o.png'); 99 | if (value.status === 'sent') { 100 | source = require('../utils/images/time_check.png'); 101 | } 102 | if (value.status === 'seen') { 103 | source = require('../utils/images/time_check_done.png'); 104 | } 105 | return ( 106 | 117 | ); 118 | }; 119 | 120 | return ( 121 | 126 | 127 | {renderContent()} 128 | 129 | 130 | ); 131 | } 132 | -------------------------------------------------------------------------------- /src/MessyMessage/MessyMessageContentText.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Linking } from 'react-native'; 3 | 4 | //@ts-ignore 5 | import ParsedText from 'react-native-parsed-text'; 6 | 7 | import { useColors, useMessyPropsContext, useSizes } from '../modules'; 8 | 9 | import type { TMessyMessageProps } from '../types'; 10 | 11 | export function MessyMessageContentText(props: TMessyMessageProps) { 12 | const Colors = useColors(); 13 | const Sizes = useSizes(); 14 | const messyProps = useMessyPropsContext(); 15 | const { renderMessageText, user, parsedShape = [] } = messyProps; 16 | 17 | const { value } = props; 18 | 19 | if (!value?.text) { 20 | return null; 21 | } 22 | 23 | if (typeof renderMessageText === 'function') { 24 | return renderMessageText({ ...props, ...messyProps }); 25 | } 26 | 27 | const onUrlPress = (url: string) => { 28 | // When someone sends a message that includes a website address beginning with "www." (omitting the scheme), 29 | // react-native-parsed-text recognizes it as a valid url, but Linking fails to open due to the missing scheme. 30 | if (/^www\./i.test(url)) { 31 | onUrlPress(`https://${url}`); 32 | return; 33 | } 34 | Linking.openURL(url).catch(); 35 | }; 36 | const onEmailPress = (email: string) => { 37 | Linking.openURL(`mailto:${email}`).catch(); 38 | }; 39 | 40 | const backgroundColor: string = { 41 | true: Colors.message_right.background, 42 | false: Colors.message_left.background, 43 | }[`${user?.id === value?.user?.id}`]; 44 | 45 | const textColor: string = { 46 | true: Colors.message_right.text, 47 | false: Colors.message_left.text, 48 | }[`${user?.id === value?.user?.id}`]; 49 | 50 | const linkColor: string = { 51 | true: Colors.message_right.link, 52 | false: Colors.message_left.link, 53 | }[`${user?.id === value?.user?.id}`]; 54 | 55 | const phoneColor: string = { 56 | true: Colors.message_right.phone, 57 | false: Colors.message_left.phone, 58 | }[`${user?.id === value?.user?.id}`]; 59 | 60 | const emailColor: string = { 61 | true: Colors.message_right.email, 62 | false: Colors.message_left.email, 63 | }[`${user?.id === value?.user?.id}`]; 64 | 65 | return ( 66 | 96 | {value?.text} 97 | 98 | ); 99 | } 100 | -------------------------------------------------------------------------------- /src/MessyMessage/MessyMessageContentVideo.tsx: -------------------------------------------------------------------------------- 1 | import React, { useRef } from 'react'; 2 | import { View, Pressable } from 'react-native'; 3 | 4 | import { VideoRef } from 'react-native-video'; 5 | import { BottomSheetModal, useBottomSheetModal } from '@gorhom/bottom-sheet'; 6 | import { useBackHandler } from '@vokhuyet/native-hooks'; 7 | 8 | import type { TMessyMessageProps } from '../types'; 9 | 10 | import { MImage } from '../elements/MImage/MImage'; 11 | import { isImage, useColors, useMessyPropsContext, useSizes } from '../modules'; 12 | 13 | import { MLoading } from '../elements/Loading/Loading'; 14 | import { MVideo } from '../elements/MVideo/MVideo'; 15 | 16 | function ModalClose() { 17 | const Sizes = useSizes(); 18 | const { dismiss } = useBottomSheetModal(); 19 | const onClose = () => { 20 | dismiss(); 21 | }; 22 | return ( 23 | 33 | 38 | 39 | ); 40 | } 41 | 42 | function MessyMessageContentVideoDefault({ value }: TMessyMessageProps) { 43 | const Sizes = useSizes(); 44 | const Colors = useColors(); 45 | 46 | const componentRef = useRef({ 47 | sheetOpen: false, 48 | }); 49 | 50 | const videoRef = useRef(null); 51 | const bottomSheetRef = useRef(null); 52 | 53 | useBackHandler(() => { 54 | if (componentRef.current.sheetOpen) { 55 | bottomSheetRef.current?.dismiss(); 56 | return true; 57 | } 58 | return false; 59 | }); 60 | 61 | const onPress = () => { 62 | bottomSheetRef.current?.present(); 63 | componentRef.current.sheetOpen = true; 64 | }; 65 | 66 | const onDismiss = () => { 67 | componentRef.current.sheetOpen = false; 68 | }; 69 | 70 | const renderLoading = () => { 71 | if (value.status !== 'sending') { 72 | return null; 73 | } 74 | return ( 75 | 81 | ); 82 | }; 83 | const VideoContent = ( 84 | 95 | ); 96 | 97 | return ( 98 | 99 | 108 | {VideoContent} 109 | 120 | {renderLoading()} 121 | 122 | 123 | 136 | 139 | {React.cloneElement(VideoContent, { 140 | style: { 141 | ...VideoContent.props.style, 142 | width: Sizes.device_width, 143 | height: Sizes.device_height * 0.9, 144 | }, 145 | paused: false, 146 | controls: false, 147 | fullscreen: false, 148 | displayProgress: true, 149 | })} 150 | 151 | 152 | 153 | 154 | 155 | ); 156 | } 157 | 158 | export function MessyMessageContentVideo(props: TMessyMessageProps) { 159 | const { value } = props; 160 | const messyProps = useMessyPropsContext(); 161 | 162 | if (!value?.video && !value.local) { 163 | return null; 164 | } 165 | if (value.local && isImage(value.local?.uri)) { 166 | return null; 167 | } 168 | 169 | if (typeof messyProps.renderMessageVideo === 'function') { 170 | return messyProps.renderMessageVideo({ ...props, ...messyProps }); 171 | } 172 | return ; 173 | } 174 | -------------------------------------------------------------------------------- /src/MessyMessage/MessyMessageDateTime.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import dayjs from 'dayjs'; 3 | import type { TMessyMessageProps } from '../types'; 4 | import { MText } from '../elements/MText/MText'; 5 | 6 | import { useColors, useMessyPropsContext, useSizes } from '../modules'; 7 | 8 | export function MessyMessageDateTime(props: TMessyMessageProps) { 9 | const Colors = useColors(); 10 | const Sizes = useSizes(); 11 | 12 | const { value, preMessage, index } = props; 13 | 14 | const { renderMessageDateTime } = useMessyPropsContext(); 15 | 16 | if (!value?.createdTime) { 17 | return null; 18 | } 19 | 20 | if (typeof renderMessageDateTime === 'function') { 21 | return renderMessageDateTime(value); 22 | } 23 | const currentDate = dayjs(value.createdTime); 24 | let currentDateFormat = currentDate.format('YYYY MMMM DD'); 25 | const preDateFormat = dayjs(preMessage?.createdTime).format('YYYY MMMM DD'); 26 | if (preMessage?.createdTime && currentDateFormat === preDateFormat) { 27 | return null; 28 | } 29 | if (index === 0) { 30 | currentDateFormat = currentDate.format('YYYY MMMM DD HH:mm'); 31 | } 32 | return ( 33 | 42 | {currentDateFormat} 43 | 44 | ); 45 | } 46 | -------------------------------------------------------------------------------- /src/MessyMessage/index.ts: -------------------------------------------------------------------------------- 1 | export * from './MessyMessage'; 2 | -------------------------------------------------------------------------------- /src/MessyReaction/MessyReactionPopup.tsx: -------------------------------------------------------------------------------- 1 | import React, { useRef } from 'react'; 2 | import { LayoutChangeEvent, Pressable, View, ViewStyle } from 'react-native'; 3 | import Animated, { 4 | Extrapolation, 5 | FadeIn, 6 | FadeInDown, 7 | FadeInUp, 8 | FadeOutDown, 9 | FadeOutUp, 10 | interpolate, 11 | useAnimatedStyle, 12 | useSharedValue, 13 | withTiming, 14 | ZoomIn, 15 | ZoomOut, 16 | } from 'react-native-reanimated'; 17 | 18 | import { 19 | REACTION_DATA, 20 | setReactionMessage, 21 | useReactionMessage, 22 | } from './modules/useReactionMessage'; 23 | import { useColors, useMessyPropsContext, useSizes } from '../modules'; 24 | import { MText } from '../elements/MText/MText'; 25 | import { 26 | TMessyReactionPopupItem, 27 | EMessyReactionPopupItemDirection, 28 | TMessyMessage, 29 | } from '../types.d'; 30 | import { CommonStyle } from '../utils/CommonStyle'; 31 | 32 | type TMessyReactionPopupTriangle = { 33 | style?: ViewStyle; 34 | }; 35 | 36 | const delay = 200; 37 | const duration = 200; 38 | 39 | function MessyReactionPopupTriangle({ 40 | style, 41 | }: Readonly) { 42 | const Sizes = useSizes(); 43 | const Colors = useColors(); 44 | 45 | return ( 46 | 63 | ); 64 | } 65 | function MessyReactionPopupTriangleUp() { 66 | return ; 67 | } 68 | function MessyReactionPopupTriangleDown() { 69 | return ( 70 | 71 | ); 72 | } 73 | function MessyReactionPopupItemDefault({ 74 | data, 75 | direction, 76 | }: Readonly) { 77 | const Sizes = useSizes(); 78 | const Colors = useColors(); 79 | const reactionMessage = useReactionMessage(); 80 | const { reaction } = useMessyPropsContext(); 81 | 82 | const zoomShared = useSharedValue(1); 83 | 84 | const animated = useAnimatedStyle(() => { 85 | const scale = interpolate(zoomShared.value, [1, 2], [1, 2], { 86 | extrapolateLeft: Extrapolation.CLAMP, 87 | }); 88 | 89 | let translateYData = [0, Sizes.padding]; 90 | if (direction === EMessyReactionPopupItemDirection.DOWN) { 91 | translateYData = [0, -Sizes.padding]; 92 | } 93 | 94 | const translateY = interpolate(zoomShared.value, [1, 2], translateYData, { 95 | extrapolateLeft: Extrapolation.CLAMP, 96 | }); 97 | return { 98 | transform: [{ scale }, { translateY }], 99 | }; 100 | }, [direction]); 101 | 102 | const onPressIn = () => { 103 | zoomShared.value = withTiming(2); 104 | }; 105 | const onPressOut = () => { 106 | zoomShared.value = withTiming(1); 107 | }; 108 | const onPress = () => { 109 | if (typeof reaction?.onPress === 'function') { 110 | reaction.onPress({ 111 | reaction: { ...data }, 112 | message: reactionMessage?.message as TMessyMessage, 113 | }); 114 | } 115 | setReactionMessage(); 116 | }; 117 | const isReacted = reactionMessage?.message.reactions?.find( 118 | (item) => item.reaction.key === data.key 119 | ); 120 | return ( 121 | 122 | 123 | 134 | 141 | {data.value} 142 | 143 | {!!isReacted && ( 144 | 153 | )} 154 | 155 | 156 | 157 | ); 158 | } 159 | 160 | export function MessyReactionPopupDefault() { 161 | const Colors = useColors(); 162 | const Sizes = useSizes(); 163 | const { reaction } = useMessyPropsContext(); 164 | 165 | const reactionData = reaction?.data || REACTION_DATA; 166 | const componentRef = useRef<{ layout: { width: number; height: number } }>({ 167 | layout: { 168 | width: reactionData.length * (Sizes.emoji_react + Sizes.padding), 169 | height: Sizes.emoji_react + Sizes.padding, 170 | }, 171 | }); 172 | //current message to react 173 | const reactionMessage = useReactionMessage(); 174 | 175 | if (!reactionMessage) { 176 | return null; 177 | } 178 | 179 | const onLayout = (e: LayoutChangeEvent) => { 180 | componentRef.current.layout = e.nativeEvent.layout; 181 | }; 182 | const onPress = () => { 183 | setReactionMessage(); 184 | }; 185 | /** 186 | * caculate left, x for pop up 187 | * @returns x: used for carret 188 | */ 189 | const getPositonLeft = () => { 190 | const width = componentRef.current.layout.width ?? 0; 191 | const x = reactionMessage.layout.x; 192 | const carretX = x - reactionMessage.layout.width / 4 + 2; 193 | if (x - width / 2 < Sizes.padding) { 194 | return { left: Sizes.padding, x: carretX }; 195 | } 196 | if (x + width / 2 >= Sizes.device_width) { 197 | return { 198 | left: Sizes.device_width - width - Sizes.padding, 199 | x: carretX, 200 | }; 201 | } 202 | return { x: carretX, left: x - width / 2 }; 203 | }; 204 | /** 205 | * caculate top, y for pop up 206 | * @returns y: used for carret 207 | */ 208 | const getPositonTop = () => { 209 | const height = componentRef.current.layout?.height ?? 0; 210 | const y = reactionMessage.layout.pageY - reactionMessage.layout.locationY; 211 | const top = 212 | y - height - reactionMessage.layout.height - (3 * Sizes.emoji_button) / 2; 213 | if (top >= height) { 214 | return { 215 | top, 216 | direction: EMessyReactionPopupItemDirection.DOWN, 217 | y: y - reactionMessage.layout.height - Sizes.padding * 2, 218 | }; 219 | } 220 | return { 221 | top: y + Sizes.emoji_button / 2, 222 | direction: EMessyReactionPopupItemDirection.UP, 223 | y, 224 | }; 225 | }; 226 | const { left, x } = getPositonLeft(); 227 | const { top, direction, y } = getPositonTop(); 228 | return ( 229 | 239 | {direction === 'up' && ( 240 | 249 | 250 | 251 | )} 252 | {direction === 'down' && ( 253 | 262 | 263 | 264 | )} 265 | 266 | 279 | {reactionData.map((item, index) => { 280 | if (typeof reaction?.renderItems === 'function') { 281 | return reaction.renderItems({ item, index, direction }); 282 | } 283 | return ( 284 | 290 | ); 291 | })} 292 | 293 | 294 | ); 295 | } 296 | -------------------------------------------------------------------------------- /src/MessyReaction/modules/useReactionMessage.ts: -------------------------------------------------------------------------------- 1 | import { SetStateAction, useEffect, useState, Dispatch } from 'react'; 2 | import { 3 | TMessyMessageContentReaction, 4 | TReactionItem, 5 | TUser, 6 | TUseReaction, 7 | } from '../../types'; 8 | 9 | const listeners = new Set>>(); 10 | 11 | export const REACTION_DATA: TReactionItem[] = [ 12 | { 13 | key: '1', 14 | value: '😀', 15 | }, 16 | { 17 | key: '2', 18 | value: '🥰', 19 | }, 20 | { 21 | key: '3', 22 | value: '🤩', 23 | }, 24 | { 25 | key: '4', 26 | value: '😔', 27 | }, 28 | { 29 | key: '5', 30 | value: '😱', 31 | }, 32 | { 33 | key: '6', 34 | value: '🤡', 35 | }, 36 | ]; 37 | 38 | let defaultData: TUseReaction | undefined; 39 | export const setReactionMessage = (e?: TUseReaction) => { 40 | defaultData = e; 41 | listeners.forEach((listener) => listener(e)); 42 | }; 43 | 44 | export const useReactionMessage = () => { 45 | const [data, setData] = useState(defaultData); 46 | 47 | useEffect(() => { 48 | listeners.add(setData); 49 | 50 | return () => { 51 | listeners.delete(setData); 52 | }; 53 | }, []); 54 | 55 | return data; 56 | }; 57 | /** 58 | * convert [{id:'', user:{}, react:{}}] to [{users:[], react:{}}, {users:[], react:{}}] 59 | * @param reactions 60 | * @returns 61 | */ 62 | export const useReactionConverter = ( 63 | reactions: Array = [] 64 | ) => { 65 | const objectByKey: { 66 | [key: string]: { users: Array; react: TReactionItem }; 67 | } = {}; 68 | for (const element of reactions) { 69 | if (!objectByKey[element.reaction.key]) { 70 | objectByKey[element.reaction.key] = { 71 | users: [], 72 | react: element.reaction, 73 | }; 74 | } 75 | objectByKey[element.reaction.key].users.push(element.user); 76 | } 77 | return { objectByKey, list: Object.values(objectByKey) }; 78 | }; 79 | -------------------------------------------------------------------------------- /src/elements/Loading/Loading.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { ActivityIndicator, type ActivityIndicatorProps } from 'react-native'; 4 | 5 | export function MLoading(props: Readonly) { 6 | return ; 7 | } 8 | -------------------------------------------------------------------------------- /src/elements/MImage/MImage.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Image, ImageURISource, type ImageProps } from 'react-native'; 3 | import { useImageDimensions } from '@vokhuyet/native-hooks'; 4 | 5 | import { useMessyPropsContext, useSizes } from '../../modules'; 6 | 7 | type TMImage = Readonly< 8 | ImageProps & { 9 | autoSize: boolean; 10 | } 11 | >; 12 | 13 | function MImageAuto(props: TMImage) { 14 | const Sizes = useSizes(); 15 | const { BaseModule } = useMessyPropsContext(); 16 | 17 | const { dimensions } = useImageDimensions(props.source as any); 18 | let width = Sizes.image_max_width; 19 | let height = Sizes.image_max_height; 20 | if ((props?.source as ImageURISource)?.uri && BaseModule?.Cache) { 21 | const size = BaseModule.Cache.get<{ width: number; height: number }>( 22 | (props?.source as ImageURISource)?.uri as string 23 | ); 24 | if (size) { 25 | width = size.width; 26 | height = size.height; 27 | } 28 | } 29 | 30 | if (dimensions?.aspectRatio) { 31 | const maxRatio = Sizes.image_max_width / Sizes.image_max_height; 32 | if (dimensions.aspectRatio > maxRatio) { 33 | height = Sizes.image_max_width / dimensions.aspectRatio; 34 | } else { 35 | width = Sizes.image_max_height * dimensions.aspectRatio; 36 | } 37 | if ( 38 | BaseModule?.Cache && 39 | typeof (props.source as ImageURISource)?.uri === 'string' 40 | ) { 41 | BaseModule.Cache.set((props.source as ImageURISource)?.uri as string, { 42 | width, 43 | height, 44 | }); 45 | } 46 | } 47 | if (BaseModule?.Image) { 48 | return ( 49 | 54 | ); 55 | } 56 | return ( 57 | 62 | ); 63 | } 64 | export function MImage(props: TMImage) { 65 | const { BaseModule } = useMessyPropsContext(); 66 | if (!props.source) { 67 | return null; 68 | } 69 | 70 | if (props.autoSize) { 71 | return ; 72 | } 73 | if (BaseModule?.Image) { 74 | return ; 75 | } 76 | return ; 77 | } 78 | -------------------------------------------------------------------------------- /src/elements/MText/MText.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Text, type TextProps } from 'react-native'; 3 | 4 | type TMText = Readonly; 5 | 6 | export function MText(props: TMText) { 7 | return ; 8 | } 9 | -------------------------------------------------------------------------------- /src/elements/MVideo/MVideo.tsx: -------------------------------------------------------------------------------- 1 | import React, { RefObject, useState } from 'react'; 2 | import { View } from 'react-native'; 3 | import Video, { 4 | OnLoadData, 5 | OnProgressData, 6 | ReactVideoProps, 7 | VideoRef, 8 | } from 'react-native-video'; 9 | import { useColors, useMessyPropsContext, useSizes } from '../../modules'; 10 | 11 | type TMVideo = Readonly< 12 | ReactVideoProps & { 13 | videoRef?: RefObject | null; 14 | displayProgress: boolean; 15 | } 16 | >; 17 | 18 | export function MVideo({ displayProgress, ...props }: TMVideo) { 19 | const Sizes = useSizes(); 20 | const Colors = useColors(); 21 | const { BaseModule } = useMessyPropsContext(); 22 | const [progress, setProgress] = useState({ 23 | playableDuration: 1, 24 | seekableDuration: 1, 25 | currentTime: 0, 26 | }); 27 | const [videoSize, setVideoSize] = useState(() => { 28 | if (BaseModule?.Cache && typeof props.source?.uri === 'string') { 29 | const size = BaseModule.Cache.get<{ width: number; height: number }>( 30 | props.source.uri 31 | ); 32 | 33 | if (size) { 34 | return { 35 | width: size.width, 36 | height: size.height, 37 | }; 38 | } 39 | } 40 | return { 41 | width: Sizes.image_max_width, 42 | height: Sizes.image_max_height, 43 | }; 44 | }); 45 | const onLoad = ({ naturalSize }: OnLoadData) => { 46 | const maxWidth = Sizes.image_max_width; 47 | const maxHeight = Sizes.image_max_height; 48 | 49 | let width = naturalSize.width; 50 | let height = naturalSize.height; 51 | if (naturalSize.orientation === 'portrait') { 52 | height = naturalSize.width; 53 | width = naturalSize.height; 54 | } 55 | 56 | const aspectRatio = width / height; 57 | 58 | const maxRatio = maxWidth / maxHeight; 59 | if (aspectRatio > maxRatio) { 60 | width = maxWidth; 61 | height = maxWidth / aspectRatio; 62 | } else { 63 | height = maxHeight; 64 | width = maxHeight * aspectRatio; 65 | } 66 | if (BaseModule?.Cache && typeof props.source?.uri === 'string') { 67 | BaseModule.Cache.set(props.source?.uri, { width, height }); 68 | } 69 | setVideoSize({ width, height }); 70 | }; 71 | 72 | const width = 73 | (Sizes.device_width * progress.currentTime) / progress.seekableDuration; 74 | return ( 75 | 76 |