├── .editorconfig ├── .eslintrc.js ├── .gitattributes ├── .github ├── actions │ └── setup │ │ └── action.yml └── workflows │ └── ci.yml ├── .gitignore ├── .husky ├── commit-msg ├── commit-msg.old ├── pre-commit ├── pre-commit.old └── prepare-commit-msg ├── .nvmrc ├── .watchmanconfig ├── .yarnrc ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── babel.config.js ├── docs ├── comprehensive.gif ├── minimal_flatlist.gif └── minimal_scrollview.gif ├── example ├── .bundle │ └── config ├── .eslintrc.js ├── .prettierrc.js ├── .watchmanconfig ├── .yarn │ └── releases │ │ └── yarn-3.6.4.cjs ├── .yarnrc.yml ├── App.tsx ├── Gemfile ├── Gemfile.lock ├── README.md ├── __tests__ │ └── App.test.tsx ├── android │ ├── app │ │ ├── build.gradle │ │ ├── debug.keystore │ │ ├── proguard-rules.pro │ │ └── src │ │ │ ├── debug │ │ │ └── AndroidManifest.xml │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── java │ │ │ └── com │ │ │ │ └── example │ │ │ │ ├── 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 │ ├── Podfile │ ├── Podfile.lock │ ├── example.xcodeproj │ │ ├── project.pbxproj │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ └── example.xcscheme │ ├── example.xcworkspace │ │ └── contents.xcworkspacedata │ ├── example │ │ ├── AppDelegate.h │ │ ├── AppDelegate.mm │ │ ├── Images.xcassets │ │ │ ├── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ │ └── Contents.json │ │ ├── Info.plist │ │ ├── LaunchScreen.storyboard │ │ ├── PrivacyInfo.xcprivacy │ │ └── main.m │ └── exampleTests │ │ ├── Info.plist │ │ └── exampleTests.m ├── jest.config.js ├── metro.config.js ├── package-lock.json ├── package.json ├── src │ ├── demo │ │ ├── DemoFlatListIndicator.tsx │ │ └── DemoScrollViewIndicator.tsx │ ├── lorem.json │ └── react-native-scroll-indicator │ │ ├── Indicator.tsx │ │ ├── ScrollIndicator.tsx │ │ ├── functions.ts │ │ └── index.tsx ├── tsconfig.json └── yarn.lock ├── lefthook.yml ├── package-lock.json ├── package.json ├── scripts └── bootstrap.js ├── src ├── Indicator.tsx ├── ScrollIndicator.tsx ├── __tests__ │ └── index.test.tsx ├── functions.ts └── index.tsx ├── tsconfig.build.json ├── tsconfig.json └── yarn.lock /.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 | root: true, 3 | extends: '@react-native', 4 | }; 5 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | # specific for windows script files 3 | *.bat text eol=crlf -------------------------------------------------------------------------------- /.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 | key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} 19 | restore-keys: | 20 | ${{ runner.os }}-yarn- 21 | 22 | - name: Install dependencies 23 | if: steps.yarn-cache.outputs.cache-hit != 'true' 24 | run: | 25 | yarn install --cwd example --frozen-lockfile 26 | yarn install --frozen-lockfile 27 | shell: bash 28 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | on: 3 | push: 4 | branches: 5 | - main 6 | pull_request: 7 | branches: 8 | - main 9 | 10 | jobs: 11 | lint: 12 | runs-on: ubuntu-latest 13 | steps: 14 | - name: Checkout 15 | uses: actions/checkout@v3 16 | 17 | - name: Setup 18 | uses: ./.github/actions/setup 19 | 20 | - name: Lint files 21 | run: yarn lint 22 | 23 | - name: Typecheck files 24 | run: yarn typecheck 25 | 26 | test: 27 | runs-on: ubuntu-latest 28 | steps: 29 | - name: Checkout 30 | uses: actions/checkout@v3 31 | 32 | - name: Setup 33 | uses: ./.github/actions/setup 34 | 35 | - name: Run unit tests 36 | run: yarn test --maxWorkers=2 --coverage 37 | 38 | build: 39 | runs-on: ubuntu-latest 40 | steps: 41 | - name: Checkout 42 | uses: actions/checkout@v3 43 | 44 | - name: Setup 45 | uses: ./.github/actions/setup 46 | 47 | - name: Build package 48 | run: yarn prepack 49 | -------------------------------------------------------------------------------- /.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 | # Expo 64 | .expo/ 65 | 66 | # Turborepo 67 | .turbo/ 68 | 69 | # generated by bob 70 | lib/ 71 | 72 | *.tgz 73 | 74 | 75 | # OSX 76 | # 77 | example/.DS_Store 78 | 79 | # Xcode 80 | # 81 | example/uild/ 82 | example/*.pbxuser 83 | !example/default.pbxuser 84 | example/*.mode1v3 85 | !example/default.mode1v3 86 | example/*.mode2v3 87 | !example/default.mode2v3 88 | example/*.perspectivev3 89 | !example/default.perspectivev3 90 | example/xcuserdata 91 | example/*.xccheckout 92 | example/*.moved-aside 93 | example/DerivedData 94 | example/*.hmap 95 | example/*.ipa 96 | example/*.xcuserstate 97 | example/**/.xcode.env.local 98 | 99 | # Android/IntelliJ 100 | # 101 | example/build/ 102 | example/.idea 103 | example/.gradle 104 | example/local.properties 105 | example/*.iml 106 | example/*.hprof 107 | example/.cxx/ 108 | example/*.keystore 109 | !example/debug.keystore 110 | 111 | # node.js 112 | # 113 | example/node_modules/ 114 | example/npm-debug.log 115 | example/yarn-error.log 116 | 117 | # fastlane 118 | # 119 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 120 | # screenshots whenever they are needed. 121 | # For more information about the recommended setup visit: 122 | # https://docs.fastlane.tools/best-practices/source-control/ 123 | 124 | example/**/fastlane/report.xml 125 | example/**/fastlane/Preview.html 126 | example/**/fastlane/screenshots 127 | example/**/fastlane/test_output 128 | 129 | # Bundle artifact 130 | example/*.jsbundle 131 | 132 | # Ruby / CocoaPods 133 | example/**/Pods/ 134 | example//vendor/bundle/ 135 | 136 | # Temporary files created by Metro to check the health of the file watcher 137 | example/.metro-health-check* 138 | 139 | # testing 140 | example/coverage 141 | 142 | # Yarn 143 | example/.yarn/* 144 | !example/.yarn/patches 145 | !example/.yarn/plugins 146 | !example/.yarn/releases 147 | !example/.yarn/sdks 148 | !example/.yarn/versions 149 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | if [ "$LEFTHOOK" = "0" ]; then 4 | exit 0 5 | fi 6 | 7 | call_lefthook() 8 | { 9 | dir="$(git rev-parse --show-toplevel)" 10 | osArch=$(echo "$(uname)" | tr '[:upper:]' '[:lower:]') 11 | cpuArch=$(echo "$(uname -m)" | sed 's/aarch64/arm64/') 12 | 13 | if lefthook -h >/dev/null 2>&1 14 | then 15 | eval lefthook $@ 16 | elif test -f "$dir/node_modules/lefthook/bin/index.js" 17 | then 18 | eval "\"$dir/node_modules/lefthook/bin/index.js\" $@" 19 | elif test -f "$dir/node_modules/@evilmartians/lefthook/bin/lefthook_${osArch}_${cpuArch}/lefthook" 20 | then 21 | eval "\"$dir/node_modules/@evilmartians/lefthook/bin/lefthook_${osArch}_${cpuArch}/lefthook\" $@" 22 | elif test -f "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook_${osArch}_${cpuArch}/lefthook" 23 | then 24 | eval "\"$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook_${osArch}_${cpuArch}/lefthook\" $@" 25 | elif bundle exec lefthook -h >/dev/null 2>&1 26 | then 27 | bundle exec lefthook $@ 28 | elif yarn lefthook -h >/dev/null 2>&1 29 | then 30 | yarn lefthook $@ 31 | elif pnpm lefthook -h >/dev/null 2>&1 32 | then 33 | pnpm lefthook $@ 34 | elif npx @evilmartians/lefthook -h >/dev/null 2>&1 35 | then 36 | npx @evilmartians/lefthook $@ 37 | else 38 | echo "Can't find lefthook in PATH" 39 | fi 40 | } 41 | 42 | call_lefthook "run commit-msg $@" 43 | -------------------------------------------------------------------------------- /.husky/commit-msg.old: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | npx --no -- commitlint --edit ${1} 5 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | if [ "$LEFTHOOK" = "0" ]; then 4 | exit 0 5 | fi 6 | 7 | call_lefthook() 8 | { 9 | dir="$(git rev-parse --show-toplevel)" 10 | osArch=$(echo "$(uname)" | tr '[:upper:]' '[:lower:]') 11 | cpuArch=$(echo "$(uname -m)" | sed 's/aarch64/arm64/') 12 | 13 | if lefthook -h >/dev/null 2>&1 14 | then 15 | eval lefthook $@ 16 | elif test -f "$dir/node_modules/lefthook/bin/index.js" 17 | then 18 | eval "\"$dir/node_modules/lefthook/bin/index.js\" $@" 19 | elif test -f "$dir/node_modules/@evilmartians/lefthook/bin/lefthook_${osArch}_${cpuArch}/lefthook" 20 | then 21 | eval "\"$dir/node_modules/@evilmartians/lefthook/bin/lefthook_${osArch}_${cpuArch}/lefthook\" $@" 22 | elif test -f "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook_${osArch}_${cpuArch}/lefthook" 23 | then 24 | eval "\"$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook_${osArch}_${cpuArch}/lefthook\" $@" 25 | elif bundle exec lefthook -h >/dev/null 2>&1 26 | then 27 | bundle exec lefthook $@ 28 | elif yarn lefthook -h >/dev/null 2>&1 29 | then 30 | yarn lefthook $@ 31 | elif pnpm lefthook -h >/dev/null 2>&1 32 | then 33 | pnpm lefthook $@ 34 | elif npx @evilmartians/lefthook -h >/dev/null 2>&1 35 | then 36 | npx @evilmartians/lefthook $@ 37 | else 38 | echo "Can't find lefthook in PATH" 39 | fi 40 | } 41 | 42 | call_lefthook "run pre-commit $@" 43 | -------------------------------------------------------------------------------- /.husky/pre-commit.old: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | yarn lint && yarn typecheck 5 | -------------------------------------------------------------------------------- /.husky/prepare-commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | if [ "$LEFTHOOK" = "0" ]; then 4 | exit 0 5 | fi 6 | 7 | call_lefthook() 8 | { 9 | dir="$(git rev-parse --show-toplevel)" 10 | osArch=$(echo "$(uname)" | tr '[:upper:]' '[:lower:]') 11 | cpuArch=$(echo "$(uname -m)" | sed 's/aarch64/arm64/') 12 | 13 | if lefthook -h >/dev/null 2>&1 14 | then 15 | eval lefthook $@ 16 | elif test -f "$dir/node_modules/lefthook/bin/index.js" 17 | then 18 | eval "\"$dir/node_modules/lefthook/bin/index.js\" $@" 19 | elif test -f "$dir/node_modules/@evilmartians/lefthook/bin/lefthook_${osArch}_${cpuArch}/lefthook" 20 | then 21 | eval "\"$dir/node_modules/@evilmartians/lefthook/bin/lefthook_${osArch}_${cpuArch}/lefthook\" $@" 22 | elif test -f "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook_${osArch}_${cpuArch}/lefthook" 23 | then 24 | eval "\"$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook_${osArch}_${cpuArch}/lefthook\" $@" 25 | elif bundle exec lefthook -h >/dev/null 2>&1 26 | then 27 | bundle exec lefthook $@ 28 | elif yarn lefthook -h >/dev/null 2>&1 29 | then 30 | yarn lefthook $@ 31 | elif pnpm lefthook -h >/dev/null 2>&1 32 | then 33 | pnpm lefthook $@ 34 | elif npx @evilmartians/lefthook -h >/dev/null 2>&1 35 | then 36 | npx @evilmartians/lefthook $@ 37 | else 38 | echo "Can't find lefthook in PATH" 39 | fi 40 | } 41 | 42 | call_lefthook "run prepare-commit-msg $@" 43 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 16.18.1 2 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /.yarnrc: -------------------------------------------------------------------------------- 1 | # Override Yarn command so we can automatically setup the repo on running `yarn` 2 | 3 | yarn-path "scripts/bootstrap.js" 4 | -------------------------------------------------------------------------------- /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 | To get started with the project, run `yarn` in the root directory to install the required dependencies for each package: 10 | 11 | ```sh 12 | yarn 13 | ``` 14 | 15 | Get husky ready 16 | 17 | ```sh 18 | yarn prepare 19 | ``` 20 | 21 | > While it's possible to use [`npm`](https://github.com/npm/cli), the tooling is built around [`yarn`](https://classic.yarnpkg.com/), so you'll have an easier time if you use `yarn` for development. 22 | 23 | All development must take place inside the `example` folder. Thus change your work directory there and run: 24 | 25 | ```sh 26 | cd example 27 | npm install 28 | ``` 29 | 30 | This will install the dependencies for running the example app. It is **CRUCIAL** to note that the source code is located in `example/src/react-native-scroll-indicator/*`, NOT `./src/*`. Regular development should be conducted while the example app is running, because the app can obtain the component directly from `example/src/react-native-scroll-indicator`. Once development is done, one must return to the root folder and build the package: 31 | 32 | ```sh 33 | cd .. 34 | yarn build 35 | ``` 36 | 37 | The `yarn build` command copies the source code from `example/src/react-native-scroll-indicator/*` to `./src/*` and build the package. 38 | 39 | Before releasing the package, one must test whether the package can be successfully installed and used. To do so, we run the following command under root 40 | 41 | ```sh 42 | npm pack 43 | ``` 44 | 45 | This packages the compiled code in a `fanchenbao-react-native-scroll-indicator-x.x.x.tgz` file, where `x.x.x` is the version number. Install it in the `example` folder: 46 | 47 | ```sh 48 | cd example 49 | npm install ../fanchenbao-react-native-scroll-indicator-x.x.x.tgz 50 | ``` 51 | 52 | Then in the example app, we can use custom scroll indicator by importing it directly from `node_modules`: 53 | 54 | In file `example/src/demo/DemoFlatListIndicator.tsx`, use 55 | 56 | ```javascript 57 | // import { FlatListIndicator } from '../react-native-scroll-indicator'; 58 | import {FlatListIndicator} from '@fanchenbao/react-native-scroll-indicator'; 59 | ``` 60 | 61 | In file `example/src/demo/DemoScrollViewIndicator.tsx`, use 62 | 63 | ```javascript 64 | // import { ScrollViewIndicator } from '../react-native-scroll-indicator'; 65 | import {ScrollViewIndicator} from '@fanchenbao/react-native-scroll-indicator'; 66 | ``` 67 | 68 | To run the example app on Android: 69 | 70 | ```sh 71 | yarn example android 72 | ``` 73 | 74 | To run the example app on iOS: 75 | 76 | ```sh 77 | yarn example ios 78 | ``` 79 | 80 | Make sure your code passes TypeScript and ESLint. Run the following to verify: 81 | 82 | ```sh 83 | yarn typecheck 84 | yarn lint 85 | ``` 86 | 87 | To fix formatting errors, run the following: 88 | 89 | ```sh 90 | yarn lint --fix 91 | ``` 92 | 93 | ~~Remember to add tests for your change if possible. Run the unit tests by:~~ 94 | No unit test available at the moment 95 | 96 | ```sh 97 | yarn test 98 | ``` 99 | 100 | ### Commit message convention 101 | 102 | We follow the [conventional commits specification](https://www.conventionalcommits.org/en) for our commit messages: 103 | 104 | - `fix`: bug fixes, e.g. fix crash due to deprecated method. 105 | - `feat`: new features, e.g. add new method to the module. 106 | - `refactor`: code refactor, e.g. migrate from class components to hooks. 107 | - `docs`: changes into documentation, e.g. add usage example for the module.. 108 | - `test`: adding or updating tests, e.g. add integration tests using detox. 109 | - `chore`: tooling changes, e.g. change CI config. 110 | 111 | Our pre-commit hooks verify that your commit message matches this format when committing. 112 | 113 | ### Linting and tests 114 | 115 | [ESLint](https://eslint.org/), [Prettier](https://prettier.io/), [TypeScript](https://www.typescriptlang.org/) 116 | 117 | 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. 118 | 119 | Our pre-commit hooks verify that the linter and tests pass when committing. 120 | 121 | ### Publishing to npm 122 | 123 | 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. 124 | 125 | To publish new versions, do the following: 126 | 127 | 1. Push the feature branch to github and also set up upstream (`git push -u origin firstname.lastname.some_feature_branch`) and open a pull request 128 | 2. Resolve any issues if exist 129 | 3. **BEFORE** merging the branch to master, run `yarn release` on the local feature branch. This allows `release-it` to access all the commit history from the previous release and automatically decide on the next version and changelog. 130 | 4. After release, merge the pull request to master and squash the commits. 131 | 132 | If release on the feature branch is not possible, one can merge the feature branch to master and release from master. HOWEVER, this merge must NOT be squashed. If squashed, `release-it` won't be able to see all the individual commits and will generate incorrect new version and changelog. 133 | 134 | ### Scripts 135 | 136 | The `package.json` file contains various scripts for common tasks: 137 | 138 | - `yarn bootstrap`: setup project by installing all dependencies and pods. 139 | - `yarn typecheck`: type-check files with TypeScript. 140 | - `yarn lint`: lint files with ESLint. 141 | - `yarn test`: run unit tests with Jest. 142 | - `yarn example start`: start the Metro server for the example app. 143 | - `yarn example android`: run the example app on Android. 144 | - `yarn example ios`: run the example app on iOS. 145 | 146 | ### Sending a pull request 147 | 148 | > **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). 149 | 150 | When you're sending a pull request: 151 | 152 | - Prefer small pull requests focused on one change. 153 | - Verify that linters and tests are passing. 154 | - Review the documentation to make sure it looks good. 155 | - Follow the pull request template when opening a pull request. 156 | - For pull requests that change the API or implementation, discuss with maintainers first by opening an issue. 157 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Fanchen Bao 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 | # @fanchenbao/react-native-scroll-indicator 2 | 3 | A react-native component that offers a customizable scroll indicator for ScrollView and FlatList 4 | 5 | ## Disclaimer 6 | 7 | The idea of animating a scroll indicator in response to the scrolling on a scrollable component is borrowed from [Lord Pooria's SO answer](https://stackoverflow.com/a/57839837/9723036). 8 | 9 | ## Why do we need another customizable scroll indicator? 10 | 11 | If you search for react native scroll indicator on npm, there are more than 10 packages already there. Compared to those, this package has the following advantages: 12 | 13 | - Supports: 14 | - Both `ScrollView` and `FlatList` 15 | - Both vertical and horizontal scrolling 16 | - Indicator shrinking in iOS when user scrolls beyond the edge 17 | - `inverted={true}` in `FlatList` 18 | - Indicator customization just like a regular `View` (e.g. color, width, position, etc.) 19 | - Draggable indicator (_added in v0.3.0_) 20 | - Detailed documentation with comprehensive examples 21 | - The animation logic of the indicator is well documented in the source code. 22 | 23 | ## Installation 24 | 25 | ```sh 26 | npm install @fanchenbao/react-native-scroll-indicator 27 | ``` 28 | 29 | ## Usage 30 | 31 | ### ScrollViewIndicator 32 | 33 | ```js 34 | import * as React from 'react'; 35 | import {View, Text} from 'react-native'; 36 | import {ScrollViewIndicator} from '@fanchenbao/react-native-scroll-indicator'; 37 | 38 | const App = () => { 39 | return ( 40 | 47 | 48 | 55 | 56 | 57 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam 58 | rhoncus nisl egestas, auctor mi pulvinar, aliquam metus. Nunc 59 | porttitor quam molestie tempor laoreet. Sed vitae ex vitae turpis 60 | convallis accumsan. Fusce consequat quis nisi sed lacinia. Nullam 61 | quis condimentum tellus. Donec ornare quam sit amet tempor 62 | imperdiet. Proin condimentum leo quis ipsum pretium ornare 63 | facilisis eget nunc. Pellentesque orci purus, pellentesque et nisl 64 | at, varius molestie nisi. Vestibulum ante ipsum primis in faucibus 65 | orci luctus et ultrices posuere cubilia curae; Nam ante nulla, 66 | sagittis vitae ante id, dignissim vestibulum ligula. Mauris 67 | iaculis nisi sed sapien finibus, sed pharetra risus rutrum. Cras 68 | laoreet mattis egestas. Pellentesque feugiat accumsan ultricies. 69 | Nullam viverra sapien nec tellus commodo aliquet. Integer faucibus 70 | quam sed nibh congue, at cursus risus vulputate. Morbi commodo 71 | mollis tempus. 72 | 73 | 74 | 75 | 76 | 77 | ); 78 | }; 79 | 80 | export default App; 81 | ``` 82 | 83 | ![Minimal ScrollView Demo](./docs/minimal_scrollview.gif) 84 | 85 | ### FlatListIndicator 86 | 87 | ```js 88 | import * as React from 'react'; 89 | import {View, Text} from 'react-native'; 90 | import {FlatListIndicator} from '@fanchenbao/react-native-scroll-indicator'; 91 | 92 | const App = () => { 93 | return ( 94 | 101 | 107 | ( 110 | 111 | ), 112 | data: [ 113 | 'Druid', 114 | 'Sorceress', 115 | 'Paladin', 116 | 'Barbarian', 117 | 'Necromancer', 118 | 'Assassin', 119 | 'Amazon', 120 | ], 121 | renderItem: ({item}) => ( 122 | 123 | {item} 124 | 125 | ), 126 | }} 127 | horizontal={true} 128 | position="bottom" 129 | indStyle={{width: 30}} 130 | containerStyle={{borderWidth: 1, borderColor: 'black'}} 131 | /> 132 | 133 | 134 | ); 135 | }; 136 | 137 | export default App; 138 | ``` 139 | 140 | ![Minimal FlatList Demo](./docs/minimal_flatlist.gif) 141 | 142 | ## Comprehensive Examples 143 | 144 | [**Try it on Snack Expo**](https://snack.expo.dev/@fanchenbao/react-native-scroll-indicator_demo) 145 | 146 | The comprehensive example takes advantage of the scroll indicator's customizability. A brief summary of the corresponding props for each option is given below. For details, refer to the Props table. 147 | 148 | - Horizontal: `horizontal={true}` 149 | - Vertical: `horizontal={false}` 150 | - left: `position="left"` 151 | - right: `position="right"` 152 | - top: `position="top"` 153 | - bottom: `position="bottom"` 154 | - 20: `position={20}` 155 | - 50: `position={50}` 156 | - 80: `position={80}` 157 | - Normal: `indStyle={backgroundColor: 'grey', width: 5}` 158 | - Crazy: `indStyle={backgroundColor: 'red', width: 40}` 159 | 160 | ![Comprehensive Demo](./docs/comprehensive.gif) 161 | 162 | ## Run Comprehensive Examples 163 | 164 | Download this repo 165 | 166 | ```sh 167 | git clone https://github.com/FanchenBao/react-native-scroll-indicator.git 168 | ``` 169 | 170 | Go to the `example` folder and sets up the example app 171 | 172 | ```sh 173 | npm install 174 | ``` 175 | 176 | While inside the `example` folder, run the app for iOS 177 | 178 | ```sh 179 | npm run ios 180 | ``` 181 | 182 | or Android 183 | 184 | ```sh 185 | npm run android 186 | ``` 187 | 188 | The example app is running from [`./example/App.tsx`](./example/App.tsx) 189 | 190 | ## Props 191 | 192 | | Props | Type | Default | Note | 193 | | ------------------- | ------------------------------------ | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 194 | | horizontal | boolean | `false` | If false, vertical scrolling. If true, horizontal scrolling. | 195 | | position | string \| number | `''` | Desired position of the indicator. One can supply "left" or "right" for vertical scrolling, in which case the indicator will be placed at the left or right edge of the view. The same goes for "top" or "bottom" for horizontal scrolling. In addition, one can supply a number, which indicates where in the view the indicator's center line (along the scrolling direction) will be located. For example, `position={20} horizontal={false}` would place the center line of the indicator at 20% of the view's width from its left edge. `position={80} horizontal={true}` would place the center line of the indicator at 80% of the view's height from its top edge. If the indicator's girth is too big such that if its center line is placed at the desired location, the indicator would overflow outside the edge, the position will be automatically clamped to ensure no overflow takes place. This is demonstrated in the comprehensive example when the "Crazy" option is selected. If supplied an empty string, the position is automatically assigned to `"right"` if vertical scrolling, or `"bottom"` if horizontal scrolling. | 196 | | persistentScrollbar | boolean | `false` | If false, scroll indicator does not show if the content can fit the view. If true, scroll indicator shows under all circumstances. | 197 | | indStyle | ViewStyle | `{backgroundColor: 'grey', width: 5}` | Styling of the scroll indicator. The scroll indicator is just an `Animated.View`. Thus, any props that modifies a `View` can potentially modify the appearance of the scroll indicator. Note that `width` refers to the girth of the indicator, which is width in vertical scrolling but height in horizontal scrolling. `borderRadius` value will be derived from the `width` prop to make it round (i.e., half the value of `width`) if not overridden. Please do not assign the following props, as they will be overwritten and won't have any effect: `position`, `height`, `transform`. | 198 | | scrollViewProps | ScrollViewProps | `{}` | `ScrollViewIndicator` only. Props to pass to the underlying `ScrollView`.

Please do not pass the following props, as they will be overwritten and won't have any effect: `horizontal`, `showsVerticalScrollIndicator`, `showsHorizontalScrollIndicator`, `onContentSizeChange`, `scrollEventThrottle`.

Note that `onScroll` and `onLayout` are allowed (_updated in v0.4.0_). | 199 | | flatListProps | ScrollViewProps & FlatListProps | **required** | `FlatListIndicator` only. Props to pass to the underlying `FlatList`. This is a required prop, as one must supply `data` and `renderItem` to `FlatList`.

Please do not pass the following props, as they will be overwritten and won't have any effect: `horizontal`, `showsVerticalScrollIndicator`, `showsHorizontalScrollIndicator`, `onContentSizeChange`, `scrollEventThrottle`.

Note that `onScroll` and `onLayout` are allowed (_updated in v0.4.0_). | 200 | | containerStyle | ViewStyle | `{}` | Styling of the parent container that holds both the scroll indicator and the scrollable component (_updated in v0.4.0_). | 201 | 202 | ## Limitations 203 | 204 | The package is designed to be a substitute of `ScrollView` and `FlatList` under the most basic usage. Thus, despite allowing any props from `ScrollView` and `FlatList` to be passed to `ScrollViewIndicator` and `FlatListIndicator`, the package has NOT been fully tested on the combination of all the props. It is very likely that some prop combinations would break the custom scroll indicator. If that happens, please raise an issue or suggest a feature request on GitHub. 205 | 206 | ## Contributing 207 | 208 | See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow. 209 | 210 | ## License 211 | 212 | MIT 213 | 214 | --- 215 | 216 | Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob) 217 | 218 | ``` 219 | 220 | ``` 221 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /docs/comprehensive.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FanchenBao/react-native-scroll-indicator/916693d6580dac37475651034d46d09ac1035cf4/docs/comprehensive.gif -------------------------------------------------------------------------------- /docs/minimal_flatlist.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FanchenBao/react-native-scroll-indicator/916693d6580dac37475651034d46d09ac1035cf4/docs/minimal_flatlist.gif -------------------------------------------------------------------------------- /docs/minimal_scrollview.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FanchenBao/react-native-scroll-indicator/916693d6580dac37475651034d46d09ac1035cf4/docs/minimal_scrollview.gif -------------------------------------------------------------------------------- /example/.bundle/config: -------------------------------------------------------------------------------- 1 | BUNDLE_PATH: "vendor/bundle" 2 | BUNDLE_FORCE_RUBY_PLATFORM: 1 3 | -------------------------------------------------------------------------------- /example/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native', 4 | }; 5 | -------------------------------------------------------------------------------- /example/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | arrowParens: 'avoid', 3 | bracketSameLine: true, 4 | bracketSpacing: false, 5 | singleQuote: true, 6 | trailingComma: 'all', 7 | }; 8 | -------------------------------------------------------------------------------- /example/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /example/.yarnrc.yml: -------------------------------------------------------------------------------- 1 | nodeLinker: node-modules 2 | 3 | yarnPath: .yarn/releases/yarn-3.6.4.cjs 4 | -------------------------------------------------------------------------------- /example/App.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react-native/no-inline-styles */ 2 | /** 3 | * Sample React Native App 4 | * https://github.com/facebook/react-native 5 | * 6 | * Generated with the TypeScript template 7 | * https://github.com/react-native-community/react-native-template-typescript 8 | * 9 | * @format 10 | */ 11 | 12 | import * as React from 'react'; 13 | import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; 14 | import lorem from './src/lorem.json'; 15 | import { DemoScrollViewIndicator } from './src/demo/DemoScrollViewIndicator'; 16 | import { DemoFlatListIndicator } from './src/demo/DemoFlatListIndicator'; 17 | 18 | const App = () => { 19 | const [hori, setHori] = React.useState(false); 20 | const [posi, setPosi] = React.useState('right'); 21 | const [ind, setInd] = React.useState('Normal'); 22 | const [comp, setComp] = React.useState('ScrollView'); 23 | const [inverted, setInverted] = React.useState(false); 24 | 25 | const posiTypesHori = ['left', 'right', 20, 50, 80]; 26 | const posiTypeVert = ['top', 'bottom', 20, 50, 80]; 27 | const indTypes = ['Normal', 'Crazy']; 28 | const compTypes = ['ScrollView', 'FlatList']; 29 | 30 | return ( 31 | 32 | 33 | 34 | {compTypes.map(v => ( 35 | setComp(v)} 43 | key={v}> 44 | {v} 45 | 46 | ))} 47 | 48 | 49 | { 55 | setHori(false); 56 | setPosi(''); 57 | }}> 58 | Vertical 59 | 60 | 61 | {posiTypesHori.map(v => ( 62 | setPosi(v)} 72 | disabled={hori} 73 | key={v}> 74 | {v} 75 | 76 | ))} 77 | 78 | 79 | 80 | { 86 | setHori(true); 87 | setPosi(''); 88 | }}> 89 | Horizontal 90 | 91 | 92 | {posiTypeVert.map(v => ( 93 | setPosi(v)} 102 | disabled={!hori} 103 | key={v}> 104 | {v} 105 | 106 | ))} 107 | 108 | 109 | 110 | {indTypes.map(v => ( 111 | setInd(v)} 119 | key={v}> 120 | {v} 121 | 122 | ))} 123 | 124 | 125 | setInverted(!inverted)}> 143 | 145 | Inverted 146 | 147 | 148 | 149 | 150 | 151 | <> 152 | {comp === 'ScrollView' ? ( 153 | 165 | ) : ( 166 | 179 | )} 180 | 181 | 182 | 183 | ); 184 | }; 185 | 186 | const styles = StyleSheet.create({ 187 | container: { 188 | flex: 1, 189 | justifyContent: 'center', 190 | alignItems: 'center', 191 | // borderWidth: 2, 192 | // borderColor: 'red', 193 | }, 194 | buttonContainer: { 195 | flex: 0.8, 196 | justifyContent: 'flex-end', 197 | alignItems: 'flex-start', 198 | // borderWidth: 2, 199 | // borderColor: 'blue', 200 | }, 201 | buttonSubContainer: { 202 | marginVertical: 10, 203 | }, 204 | minorButtonContainer: { 205 | flexDirection: 'row', 206 | }, 207 | contentContainer: { 208 | height: 300, 209 | marginHorizontal: 30, 210 | marginVertical: 30, 211 | }, 212 | scrollContainer: { 213 | borderWidth: 1, 214 | borderColor: 'black', 215 | }, 216 | indStyleNormal: { backgroundColor: 'grey', width: 5 }, 217 | indStyleCrazy: { backgroundColor: 'red', width: 40 }, 218 | majorButton: { 219 | borderWidth: 1, 220 | borderColor: 'black', 221 | borderRadius: 5, 222 | alignItems: 'center', 223 | padding: 5, 224 | width: 100, 225 | marginHorizontal: 5, 226 | marginVertical: 5, 227 | }, 228 | minorButton: { 229 | borderWidth: 1, 230 | borderRadius: 5, 231 | alignItems: 'center', 232 | padding: 5, 233 | width: 60, 234 | marginHorizontal: 5, 235 | }, 236 | }); 237 | 238 | export default App; 239 | -------------------------------------------------------------------------------- /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 | # Exclude problematic versions of cocoapods and activesupport that causes build failures. 7 | gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1' 8 | gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0' 9 | -------------------------------------------------------------------------------- /example/Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | CFPropertyList (3.0.7) 5 | base64 6 | nkf 7 | rexml 8 | activesupport (6.1.7.8) 9 | concurrent-ruby (~> 1.0, >= 1.0.2) 10 | i18n (>= 1.6, < 2) 11 | minitest (>= 5.1) 12 | tzinfo (~> 2.0) 13 | zeitwerk (~> 2.3) 14 | addressable (2.8.7) 15 | public_suffix (>= 2.0.2, < 7.0) 16 | algoliasearch (1.27.5) 17 | httpclient (~> 2.8, >= 2.8.3) 18 | json (>= 1.5.1) 19 | atomos (0.1.3) 20 | base64 (0.2.0) 21 | claide (1.1.0) 22 | cocoapods (1.15.2) 23 | addressable (~> 2.8) 24 | claide (>= 1.0.2, < 2.0) 25 | cocoapods-core (= 1.15.2) 26 | cocoapods-deintegrate (>= 1.0.3, < 2.0) 27 | cocoapods-downloader (>= 2.1, < 3.0) 28 | cocoapods-plugins (>= 1.0.0, < 2.0) 29 | cocoapods-search (>= 1.0.0, < 2.0) 30 | cocoapods-trunk (>= 1.6.0, < 2.0) 31 | cocoapods-try (>= 1.1.0, < 2.0) 32 | colored2 (~> 3.1) 33 | escape (~> 0.0.4) 34 | fourflusher (>= 2.3.0, < 3.0) 35 | gh_inspector (~> 1.0) 36 | molinillo (~> 0.8.0) 37 | nap (~> 1.0) 38 | ruby-macho (>= 2.3.0, < 3.0) 39 | xcodeproj (>= 1.23.0, < 2.0) 40 | cocoapods-core (1.15.2) 41 | activesupport (>= 5.0, < 8) 42 | addressable (~> 2.8) 43 | algoliasearch (~> 1.0) 44 | concurrent-ruby (~> 1.1) 45 | fuzzy_match (~> 2.0.4) 46 | nap (~> 1.0) 47 | netrc (~> 0.11) 48 | public_suffix (~> 4.0) 49 | typhoeus (~> 1.0) 50 | cocoapods-deintegrate (1.0.5) 51 | cocoapods-downloader (2.1) 52 | cocoapods-plugins (1.0.0) 53 | nap 54 | cocoapods-search (1.0.1) 55 | cocoapods-trunk (1.6.0) 56 | nap (>= 0.8, < 2.0) 57 | netrc (~> 0.11) 58 | cocoapods-try (1.2.0) 59 | colored2 (3.1.2) 60 | concurrent-ruby (1.3.4) 61 | escape (0.0.4) 62 | ethon (0.16.0) 63 | ffi (>= 1.15.0) 64 | ffi (1.17.0) 65 | fourflusher (2.3.1) 66 | fuzzy_match (2.0.4) 67 | gh_inspector (1.1.3) 68 | httpclient (2.8.3) 69 | i18n (1.14.5) 70 | concurrent-ruby (~> 1.0) 71 | json (2.7.2) 72 | minitest (5.25.0) 73 | molinillo (0.8.0) 74 | nanaimo (0.3.0) 75 | nap (1.1.0) 76 | netrc (0.11.0) 77 | nkf (0.2.0) 78 | public_suffix (4.0.7) 79 | rexml (3.3.5) 80 | strscan 81 | ruby-macho (2.5.1) 82 | strscan (3.1.0) 83 | typhoeus (1.4.1) 84 | ethon (>= 0.9.0) 85 | tzinfo (2.0.6) 86 | concurrent-ruby (~> 1.0) 87 | xcodeproj (1.25.0) 88 | CFPropertyList (>= 2.3.3, < 4.0) 89 | atomos (~> 0.1.3) 90 | claide (>= 1.0.2, < 2.0) 91 | colored2 (~> 3.1) 92 | nanaimo (~> 0.3.0) 93 | rexml (>= 3.3.2, < 4.0) 94 | zeitwerk (2.6.17) 95 | 96 | PLATFORMS 97 | ruby 98 | 99 | DEPENDENCIES 100 | activesupport (>= 6.1.7.5, != 7.1.0) 101 | cocoapods (>= 1.13, != 1.15.1, != 1.15.0) 102 | 103 | RUBY VERSION 104 | ruby 2.6.10p210 105 | 106 | BUNDLED WITH 107 | 1.17.2 108 | -------------------------------------------------------------------------------- /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/__tests__/App.test.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import 'react-native'; 6 | import React from 'react'; 7 | import App from '../App'; 8 | 9 | // Note: import explicitly to use the types shipped with jest. 10 | import {it} from '@jest/globals'; 11 | 12 | // Note: test renderer must be required after react-native. 13 | import renderer from 'react-test-renderer'; 14 | 15 | it('renders correctly', () => { 16 | renderer.create(); 17 | }); 18 | -------------------------------------------------------------------------------- /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 | /* Autolinking */ 54 | autolinkLibrariesWithApp() 55 | } 56 | 57 | /** 58 | * Set this to true to Run Proguard on Release builds to minify the Java bytecode. 59 | */ 60 | def enableProguardInReleaseBuilds = false 61 | 62 | /** 63 | * The preferred build flavor of JavaScriptCore (JSC) 64 | * 65 | * For example, to use the international variant, you can use: 66 | * `def jscFlavor = 'org.webkit:android-jsc-intl:+'` 67 | * 68 | * The international variant includes ICU i18n library and necessary data 69 | * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that 70 | * give correct results when using with locales other than en-US. Note that 71 | * this variant is about 6MiB larger per architecture than default. 72 | */ 73 | def jscFlavor = 'org.webkit:android-jsc:+' 74 | 75 | android { 76 | ndkVersion rootProject.ext.ndkVersion 77 | buildToolsVersion rootProject.ext.buildToolsVersion 78 | compileSdk rootProject.ext.compileSdkVersion 79 | 80 | namespace "com.example" 81 | defaultConfig { 82 | applicationId "com.example" 83 | minSdkVersion rootProject.ext.minSdkVersion 84 | targetSdkVersion rootProject.ext.targetSdkVersion 85 | versionCode 1 86 | versionName "1.0" 87 | } 88 | signingConfigs { 89 | debug { 90 | storeFile file('debug.keystore') 91 | storePassword 'android' 92 | keyAlias 'androiddebugkey' 93 | keyPassword 'android' 94 | } 95 | } 96 | buildTypes { 97 | debug { 98 | signingConfig signingConfigs.debug 99 | } 100 | release { 101 | // Caution! In production, you need to generate your own keystore file. 102 | // see https://reactnative.dev/docs/signed-apk-android. 103 | signingConfig signingConfigs.debug 104 | minifyEnabled enableProguardInReleaseBuilds 105 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 106 | } 107 | } 108 | } 109 | 110 | dependencies { 111 | // The version of react-native is set by the React Native Gradle Plugin 112 | implementation("com.facebook.react:react-android") 113 | 114 | if (hermesEnabled.toBoolean()) { 115 | implementation("com.facebook.react:hermes-android") 116 | } else { 117 | implementation jscFlavor 118 | } 119 | } 120 | -------------------------------------------------------------------------------- /example/android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FanchenBao/react-native-scroll-indicator/916693d6580dac37475651034d46d09ac1035cf4/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 | 13 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/example/MainActivity.kt: -------------------------------------------------------------------------------- 1 | package com.example 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 = "example" 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/example/MainApplication.kt: -------------------------------------------------------------------------------- 1 | package com.example 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.soloader.SoLoader 13 | 14 | class MainApplication : Application(), ReactApplication { 15 | 16 | override val reactNativeHost: ReactNativeHost = 17 | object : DefaultReactNativeHost(this) { 18 | override fun getPackages(): List = 19 | PackageList(this).packages.apply { 20 | // Packages that cannot be autolinked yet can be added manually here, for example: 21 | // add(MyReactNativePackage()) 22 | } 23 | 24 | override fun getJSMainModuleName(): String = "index" 25 | 26 | override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG 27 | 28 | override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED 29 | override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED 30 | } 31 | 32 | override val reactHost: ReactHost 33 | get() = getDefaultReactHost(applicationContext, reactNativeHost) 34 | 35 | override fun onCreate() { 36 | super.onCreate() 37 | SoLoader.init(this, false) 38 | if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) { 39 | // If you opted-in for the New Architecture, we load the native entry point for this app. 40 | load() 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/drawable/rn_edit_text_material.xml: -------------------------------------------------------------------------------- 1 | 2 | 16 | 22 | 23 | 24 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FanchenBao/react-native-scroll-indicator/916693d6580dac37475651034d46d09ac1035cf4/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/FanchenBao/react-native-scroll-indicator/916693d6580dac37475651034d46d09ac1035cf4/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/FanchenBao/react-native-scroll-indicator/916693d6580dac37475651034d46d09ac1035cf4/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/FanchenBao/react-native-scroll-indicator/916693d6580dac37475651034d46d09ac1035cf4/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/FanchenBao/react-native-scroll-indicator/916693d6580dac37475651034d46d09ac1035cf4/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/FanchenBao/react-native-scroll-indicator/916693d6580dac37475651034d46d09ac1035cf4/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/FanchenBao/react-native-scroll-indicator/916693d6580dac37475651034d46d09ac1035cf4/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/FanchenBao/react-native-scroll-indicator/916693d6580dac37475651034d46d09ac1035cf4/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/FanchenBao/react-native-scroll-indicator/916693d6580dac37475651034d46d09ac1035cf4/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/FanchenBao/react-native-scroll-indicator/916693d6580dac37475651034d46d09ac1035cf4/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | example 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 = 23 5 | compileSdkVersion = 34 6 | targetSdkVersion = 34 7 | ndkVersion = "26.1.10909125" 8 | kotlinVersion = "1.9.24" 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 | 25 | # Use this property to specify which architecture you want to build. 26 | # You can also override it from the CLI using 27 | # ./gradlew -PreactNativeArchitectures=x86_64 28 | reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64 29 | 30 | # Use this property to enable support to the new architecture. 31 | # This will allow you to use TurboModules and the Fabric render in 32 | # your application. You should enable this flag either if you want 33 | # to write custom TurboModules/Fabric components OR use libraries that 34 | # are providing them. 35 | newArchEnabled=false 36 | 37 | # Use this property to enable or disable the Hermes JS engine. 38 | # If set to false, you will be using JSC instead. 39 | hermesEnabled=true 40 | -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FanchenBao/react-native-scroll-indicator/916693d6580dac37475651034d46d09ac1035cf4/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.8-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/platforms/jvm/plugins-application/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=SC2039,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=SC2039,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, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments, 207 | # and any embedded shellness will be escaped. 208 | # * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be 209 | # treated as '${Hostname}' itself on the command line. 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. 1>&2 47 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2 48 | echo. 1>&2 49 | echo Please set the JAVA_HOME variable in your environment to match the 1>&2 50 | echo location of your Java installation. 1>&2 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. 1>&2 61 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2 62 | echo. 1>&2 63 | echo Please set the JAVA_HOME variable in your environment to match the 1>&2 64 | echo location of your Java installation. 1>&2 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 | pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") } 2 | plugins { id("com.facebook.react.settings") } 3 | extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() } 4 | rootProject.name = 'example' 5 | include ':app' 6 | includeBuild('../node_modules/@react-native/gradle-plugin') 7 | -------------------------------------------------------------------------------- /example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "displayName": "example" 4 | } 5 | -------------------------------------------------------------------------------- /example/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:@react-native/babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import {AppRegistry} from 'react-native'; 6 | import App from './App'; 7 | import {name as appName} from './app.json'; 8 | 9 | AppRegistry.registerComponent(appName, () => App); 10 | -------------------------------------------------------------------------------- /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/Podfile: -------------------------------------------------------------------------------- 1 | # Resolve react_native_pods.rb with node to allow for hoisting 2 | require Pod::Executable.execute_command('node', ['-p', 3 | 'require.resolve( 4 | "react-native/scripts/react_native_pods.rb", 5 | {paths: [process.argv[1]]}, 6 | )', __dir__]).strip 7 | 8 | platform :ios, min_ios_version_supported 9 | prepare_react_native_project! 10 | 11 | linkage = ENV['USE_FRAMEWORKS'] 12 | if linkage != nil 13 | Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green 14 | use_frameworks! :linkage => linkage.to_sym 15 | end 16 | 17 | target 'example' do 18 | config = use_native_modules! 19 | 20 | use_react_native!( 21 | :path => config[:reactNativePath], 22 | # An absolute path to your application root. 23 | :app_path => "#{Pod::Config.instance.installation_root}/.." 24 | ) 25 | 26 | target 'exampleTests' do 27 | inherit! :complete 28 | # Pods for testing 29 | end 30 | 31 | post_install do |installer| 32 | # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202 33 | react_native_post_install( 34 | installer, 35 | config[:reactNativePath], 36 | :mac_catalyst_enabled => false, 37 | # :ccache_enabled => true 38 | ) 39 | end 40 | end 41 | -------------------------------------------------------------------------------- /example/ios/example.xcodeproj/project.pbxproj: -------------------------------------------------------------------------------- 1 | // !$*UTF8*$! 2 | { 3 | archiveVersion = 1; 4 | classes = { 5 | }; 6 | objectVersion = 54; 7 | objects = { 8 | 9 | /* Begin PBXBuildFile section */ 10 | 00E356F31AD99517003FC87E /* exampleTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* exampleTests.m */; }; 11 | 0C80B921A6F3F58F76C31292 /* libPods-example.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5DCACB8F33CDC322A6C60F78 /* libPods-example.a */; }; 12 | 13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.mm */; }; 13 | 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; }; 14 | 13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; }; 15 | 62109187A424F313A0A938ED /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = 730118B09A29EC52F73789FC /* PrivacyInfo.xcprivacy */; }; 16 | 7699B88040F8A987B510C191 /* libPods-example-exampleTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 19F6CBCC0A4E27FBF8BF4A61 /* libPods-example-exampleTests.a */; }; 17 | 81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; }; 18 | /* End PBXBuildFile section */ 19 | 20 | /* Begin PBXContainerItemProxy section */ 21 | 00E356F41AD99517003FC87E /* PBXContainerItemProxy */ = { 22 | isa = PBXContainerItemProxy; 23 | containerPortal = 83CBB9F71A601CBA00E9B192 /* Project object */; 24 | proxyType = 1; 25 | remoteGlobalIDString = 13B07F861A680F5B00A75B9A; 26 | remoteInfo = example; 27 | }; 28 | /* End PBXContainerItemProxy section */ 29 | 30 | /* Begin PBXFileReference section */ 31 | 00E356EE1AD99517003FC87E /* exampleTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = exampleTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; }; 32 | 00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = ""; }; 33 | 00E356F21AD99517003FC87E /* exampleTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = exampleTests.m; sourceTree = ""; }; 34 | 13B07F961A680F5B00A75B9A /* example.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = example.app; sourceTree = BUILT_PRODUCTS_DIR; }; 35 | 13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = example/AppDelegate.h; sourceTree = ""; }; 36 | 13B07FB01A68108700A75B9A /* AppDelegate.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; name = AppDelegate.mm; path = example/AppDelegate.mm; sourceTree = ""; }; 37 | 13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = example/Images.xcassets; sourceTree = ""; }; 38 | 13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = example/Info.plist; sourceTree = ""; }; 39 | 13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = example/main.m; sourceTree = ""; }; 40 | 13B07FB81A68108700A75B9A /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = PrivacyInfo.xcprivacy; path = example/PrivacyInfo.xcprivacy; sourceTree = ""; }; 41 | 19F6CBCC0A4E27FBF8BF4A61 /* libPods-example-exampleTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-example-exampleTests.a"; sourceTree = BUILT_PRODUCTS_DIR; }; 42 | 3B4392A12AC88292D35C810B /* Pods-example.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-example.debug.xcconfig"; path = "Target Support Files/Pods-example/Pods-example.debug.xcconfig"; sourceTree = ""; }; 43 | 5709B34CF0A7D63546082F79 /* Pods-example.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-example.release.xcconfig"; path = "Target Support Files/Pods-example/Pods-example.release.xcconfig"; sourceTree = ""; }; 44 | 5B7EB9410499542E8C5724F5 /* Pods-example-exampleTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-example-exampleTests.debug.xcconfig"; path = "Target Support Files/Pods-example-exampleTests/Pods-example-exampleTests.debug.xcconfig"; sourceTree = ""; }; 45 | 5DCACB8F33CDC322A6C60F78 /* libPods-example.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-example.a"; sourceTree = BUILT_PRODUCTS_DIR; }; 46 | 730118B09A29EC52F73789FC /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; includeInIndex = 1; name = PrivacyInfo.xcprivacy; path = example/PrivacyInfo.xcprivacy; sourceTree = ""; }; 47 | 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = example/LaunchScreen.storyboard; sourceTree = ""; }; 48 | 89C6BE57DB24E9ADA2F236DE /* Pods-example-exampleTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-example-exampleTests.release.xcconfig"; path = "Target Support Files/Pods-example-exampleTests/Pods-example-exampleTests.release.xcconfig"; sourceTree = ""; }; 49 | ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; }; 50 | /* End PBXFileReference section */ 51 | 52 | /* Begin PBXFrameworksBuildPhase section */ 53 | 00E356EB1AD99517003FC87E /* Frameworks */ = { 54 | isa = PBXFrameworksBuildPhase; 55 | buildActionMask = 2147483647; 56 | files = ( 57 | 7699B88040F8A987B510C191 /* libPods-example-exampleTests.a in Frameworks */, 58 | ); 59 | runOnlyForDeploymentPostprocessing = 0; 60 | }; 61 | 13B07F8C1A680F5B00A75B9A /* Frameworks */ = { 62 | isa = PBXFrameworksBuildPhase; 63 | buildActionMask = 2147483647; 64 | files = ( 65 | 0C80B921A6F3F58F76C31292 /* libPods-example.a in Frameworks */, 66 | ); 67 | runOnlyForDeploymentPostprocessing = 0; 68 | }; 69 | /* End PBXFrameworksBuildPhase section */ 70 | 71 | /* Begin PBXGroup section */ 72 | 00E356EF1AD99517003FC87E /* exampleTests */ = { 73 | isa = PBXGroup; 74 | children = ( 75 | 00E356F21AD99517003FC87E /* exampleTests.m */, 76 | 00E356F01AD99517003FC87E /* Supporting Files */, 77 | ); 78 | path = exampleTests; 79 | sourceTree = ""; 80 | }; 81 | 00E356F01AD99517003FC87E /* Supporting Files */ = { 82 | isa = PBXGroup; 83 | children = ( 84 | 00E356F11AD99517003FC87E /* Info.plist */, 85 | ); 86 | name = "Supporting Files"; 87 | sourceTree = ""; 88 | }; 89 | 13B07FAE1A68108700A75B9A /* example */ = { 90 | isa = PBXGroup; 91 | children = ( 92 | 13B07FAF1A68108700A75B9A /* AppDelegate.h */, 93 | 13B07FB01A68108700A75B9A /* AppDelegate.mm */, 94 | 13B07FB51A68108700A75B9A /* Images.xcassets */, 95 | 13B07FB61A68108700A75B9A /* Info.plist */, 96 | 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */, 97 | 13B07FB71A68108700A75B9A /* main.m */, 98 | 13B07FB81A68108700A75B9A /* PrivacyInfo.xcprivacy */, 99 | 730118B09A29EC52F73789FC /* PrivacyInfo.xcprivacy */, 100 | ); 101 | name = example; 102 | sourceTree = ""; 103 | }; 104 | 2D16E6871FA4F8E400B85C8A /* Frameworks */ = { 105 | isa = PBXGroup; 106 | children = ( 107 | ED297162215061F000B7C4FE /* JavaScriptCore.framework */, 108 | 5DCACB8F33CDC322A6C60F78 /* libPods-example.a */, 109 | 19F6CBCC0A4E27FBF8BF4A61 /* libPods-example-exampleTests.a */, 110 | ); 111 | name = Frameworks; 112 | sourceTree = ""; 113 | }; 114 | 832341AE1AAA6A7D00B99B32 /* Libraries */ = { 115 | isa = PBXGroup; 116 | children = ( 117 | ); 118 | name = Libraries; 119 | sourceTree = ""; 120 | }; 121 | 83CBB9F61A601CBA00E9B192 = { 122 | isa = PBXGroup; 123 | children = ( 124 | 13B07FAE1A68108700A75B9A /* example */, 125 | 832341AE1AAA6A7D00B99B32 /* Libraries */, 126 | 00E356EF1AD99517003FC87E /* exampleTests */, 127 | 83CBBA001A601CBA00E9B192 /* Products */, 128 | 2D16E6871FA4F8E400B85C8A /* Frameworks */, 129 | BBD78D7AC51CEA395F1C20DB /* Pods */, 130 | ); 131 | indentWidth = 2; 132 | sourceTree = ""; 133 | tabWidth = 2; 134 | usesTabs = 0; 135 | }; 136 | 83CBBA001A601CBA00E9B192 /* Products */ = { 137 | isa = PBXGroup; 138 | children = ( 139 | 13B07F961A680F5B00A75B9A /* example.app */, 140 | 00E356EE1AD99517003FC87E /* exampleTests.xctest */, 141 | ); 142 | name = Products; 143 | sourceTree = ""; 144 | }; 145 | BBD78D7AC51CEA395F1C20DB /* Pods */ = { 146 | isa = PBXGroup; 147 | children = ( 148 | 3B4392A12AC88292D35C810B /* Pods-example.debug.xcconfig */, 149 | 5709B34CF0A7D63546082F79 /* Pods-example.release.xcconfig */, 150 | 5B7EB9410499542E8C5724F5 /* Pods-example-exampleTests.debug.xcconfig */, 151 | 89C6BE57DB24E9ADA2F236DE /* Pods-example-exampleTests.release.xcconfig */, 152 | ); 153 | path = Pods; 154 | sourceTree = ""; 155 | }; 156 | /* End PBXGroup section */ 157 | 158 | /* Begin PBXNativeTarget section */ 159 | 00E356ED1AD99517003FC87E /* exampleTests */ = { 160 | isa = PBXNativeTarget; 161 | buildConfigurationList = 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "exampleTests" */; 162 | buildPhases = ( 163 | A55EABD7B0C7F3A422A6CC61 /* [CP] Check Pods Manifest.lock */, 164 | 00E356EA1AD99517003FC87E /* Sources */, 165 | 00E356EB1AD99517003FC87E /* Frameworks */, 166 | 00E356EC1AD99517003FC87E /* Resources */, 167 | C59DA0FBD6956966B86A3779 /* [CP] Embed Pods Frameworks */, 168 | F6A41C54EA430FDDC6A6ED99 /* [CP] Copy Pods Resources */, 169 | ); 170 | buildRules = ( 171 | ); 172 | dependencies = ( 173 | 00E356F51AD99517003FC87E /* PBXTargetDependency */, 174 | ); 175 | name = exampleTests; 176 | productName = exampleTests; 177 | productReference = 00E356EE1AD99517003FC87E /* exampleTests.xctest */; 178 | productType = "com.apple.product-type.bundle.unit-test"; 179 | }; 180 | 13B07F861A680F5B00A75B9A /* example */ = { 181 | isa = PBXNativeTarget; 182 | buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "example" */; 183 | buildPhases = ( 184 | C38B50BA6285516D6DCD4F65 /* [CP] Check Pods Manifest.lock */, 185 | 13B07F871A680F5B00A75B9A /* Sources */, 186 | 13B07F8C1A680F5B00A75B9A /* Frameworks */, 187 | 13B07F8E1A680F5B00A75B9A /* Resources */, 188 | 00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */, 189 | 00EEFC60759A1932668264C0 /* [CP] Embed Pods Frameworks */, 190 | E235C05ADACE081382539298 /* [CP] Copy Pods Resources */, 191 | ); 192 | buildRules = ( 193 | ); 194 | dependencies = ( 195 | ); 196 | name = example; 197 | productName = example; 198 | productReference = 13B07F961A680F5B00A75B9A /* example.app */; 199 | productType = "com.apple.product-type.application"; 200 | }; 201 | /* End PBXNativeTarget section */ 202 | 203 | /* Begin PBXProject section */ 204 | 83CBB9F71A601CBA00E9B192 /* Project object */ = { 205 | isa = PBXProject; 206 | attributes = { 207 | LastUpgradeCheck = 1210; 208 | TargetAttributes = { 209 | 00E356ED1AD99517003FC87E = { 210 | CreatedOnToolsVersion = 6.2; 211 | TestTargetID = 13B07F861A680F5B00A75B9A; 212 | }; 213 | 13B07F861A680F5B00A75B9A = { 214 | LastSwiftMigration = 1120; 215 | }; 216 | }; 217 | }; 218 | buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "example" */; 219 | compatibilityVersion = "Xcode 12.0"; 220 | developmentRegion = en; 221 | hasScannedForEncodings = 0; 222 | knownRegions = ( 223 | en, 224 | Base, 225 | ); 226 | mainGroup = 83CBB9F61A601CBA00E9B192; 227 | productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */; 228 | projectDirPath = ""; 229 | projectRoot = ""; 230 | targets = ( 231 | 13B07F861A680F5B00A75B9A /* example */, 232 | 00E356ED1AD99517003FC87E /* exampleTests */, 233 | ); 234 | }; 235 | /* End PBXProject section */ 236 | 237 | /* Begin PBXResourcesBuildPhase section */ 238 | 00E356EC1AD99517003FC87E /* Resources */ = { 239 | isa = PBXResourcesBuildPhase; 240 | buildActionMask = 2147483647; 241 | files = ( 242 | ); 243 | runOnlyForDeploymentPostprocessing = 0; 244 | }; 245 | 13B07F8E1A680F5B00A75B9A /* Resources */ = { 246 | isa = PBXResourcesBuildPhase; 247 | buildActionMask = 2147483647; 248 | files = ( 249 | 81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */, 250 | 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */, 251 | 62109187A424F313A0A938ED /* PrivacyInfo.xcprivacy in Resources */, 252 | ); 253 | runOnlyForDeploymentPostprocessing = 0; 254 | }; 255 | /* End PBXResourcesBuildPhase section */ 256 | 257 | /* Begin PBXShellScriptBuildPhase section */ 258 | 00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */ = { 259 | isa = PBXShellScriptBuildPhase; 260 | buildActionMask = 2147483647; 261 | files = ( 262 | ); 263 | inputPaths = ( 264 | "$(SRCROOT)/.xcode.env.local", 265 | "$(SRCROOT)/.xcode.env", 266 | ); 267 | name = "Bundle React Native code and images"; 268 | outputPaths = ( 269 | ); 270 | runOnlyForDeploymentPostprocessing = 0; 271 | shellPath = /bin/sh; 272 | shellScript = "set -e\n\nWITH_ENVIRONMENT=\"$REACT_NATIVE_PATH/scripts/xcode/with-environment.sh\"\nREACT_NATIVE_XCODE=\"$REACT_NATIVE_PATH/scripts/react-native-xcode.sh\"\n\n/bin/sh -c \"$WITH_ENVIRONMENT $REACT_NATIVE_XCODE\"\n"; 273 | }; 274 | 00EEFC60759A1932668264C0 /* [CP] Embed Pods Frameworks */ = { 275 | isa = PBXShellScriptBuildPhase; 276 | buildActionMask = 2147483647; 277 | files = ( 278 | ); 279 | inputFileListPaths = ( 280 | "${PODS_ROOT}/Target Support Files/Pods-example/Pods-example-frameworks-${CONFIGURATION}-input-files.xcfilelist", 281 | ); 282 | name = "[CP] Embed Pods Frameworks"; 283 | outputFileListPaths = ( 284 | "${PODS_ROOT}/Target Support Files/Pods-example/Pods-example-frameworks-${CONFIGURATION}-output-files.xcfilelist", 285 | ); 286 | runOnlyForDeploymentPostprocessing = 0; 287 | shellPath = /bin/sh; 288 | shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-example/Pods-example-frameworks.sh\"\n"; 289 | showEnvVarsInLog = 0; 290 | }; 291 | A55EABD7B0C7F3A422A6CC61 /* [CP] Check Pods Manifest.lock */ = { 292 | isa = PBXShellScriptBuildPhase; 293 | buildActionMask = 2147483647; 294 | files = ( 295 | ); 296 | inputFileListPaths = ( 297 | ); 298 | inputPaths = ( 299 | "${PODS_PODFILE_DIR_PATH}/Podfile.lock", 300 | "${PODS_ROOT}/Manifest.lock", 301 | ); 302 | name = "[CP] Check Pods Manifest.lock"; 303 | outputFileListPaths = ( 304 | ); 305 | outputPaths = ( 306 | "$(DERIVED_FILE_DIR)/Pods-example-exampleTests-checkManifestLockResult.txt", 307 | ); 308 | runOnlyForDeploymentPostprocessing = 0; 309 | shellPath = /bin/sh; 310 | shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n"; 311 | showEnvVarsInLog = 0; 312 | }; 313 | C38B50BA6285516D6DCD4F65 /* [CP] Check Pods Manifest.lock */ = { 314 | isa = PBXShellScriptBuildPhase; 315 | buildActionMask = 2147483647; 316 | files = ( 317 | ); 318 | inputFileListPaths = ( 319 | ); 320 | inputPaths = ( 321 | "${PODS_PODFILE_DIR_PATH}/Podfile.lock", 322 | "${PODS_ROOT}/Manifest.lock", 323 | ); 324 | name = "[CP] Check Pods Manifest.lock"; 325 | outputFileListPaths = ( 326 | ); 327 | outputPaths = ( 328 | "$(DERIVED_FILE_DIR)/Pods-example-checkManifestLockResult.txt", 329 | ); 330 | runOnlyForDeploymentPostprocessing = 0; 331 | shellPath = /bin/sh; 332 | shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n"; 333 | showEnvVarsInLog = 0; 334 | }; 335 | C59DA0FBD6956966B86A3779 /* [CP] Embed Pods Frameworks */ = { 336 | isa = PBXShellScriptBuildPhase; 337 | buildActionMask = 2147483647; 338 | files = ( 339 | ); 340 | inputFileListPaths = ( 341 | "${PODS_ROOT}/Target Support Files/Pods-example-exampleTests/Pods-example-exampleTests-frameworks-${CONFIGURATION}-input-files.xcfilelist", 342 | ); 343 | name = "[CP] Embed Pods Frameworks"; 344 | outputFileListPaths = ( 345 | "${PODS_ROOT}/Target Support Files/Pods-example-exampleTests/Pods-example-exampleTests-frameworks-${CONFIGURATION}-output-files.xcfilelist", 346 | ); 347 | runOnlyForDeploymentPostprocessing = 0; 348 | shellPath = /bin/sh; 349 | shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-example-exampleTests/Pods-example-exampleTests-frameworks.sh\"\n"; 350 | showEnvVarsInLog = 0; 351 | }; 352 | E235C05ADACE081382539298 /* [CP] Copy Pods Resources */ = { 353 | isa = PBXShellScriptBuildPhase; 354 | buildActionMask = 2147483647; 355 | files = ( 356 | ); 357 | inputFileListPaths = ( 358 | "${PODS_ROOT}/Target Support Files/Pods-example/Pods-example-resources-${CONFIGURATION}-input-files.xcfilelist", 359 | ); 360 | name = "[CP] Copy Pods Resources"; 361 | outputFileListPaths = ( 362 | "${PODS_ROOT}/Target Support Files/Pods-example/Pods-example-resources-${CONFIGURATION}-output-files.xcfilelist", 363 | ); 364 | runOnlyForDeploymentPostprocessing = 0; 365 | shellPath = /bin/sh; 366 | shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-example/Pods-example-resources.sh\"\n"; 367 | showEnvVarsInLog = 0; 368 | }; 369 | F6A41C54EA430FDDC6A6ED99 /* [CP] Copy Pods Resources */ = { 370 | isa = PBXShellScriptBuildPhase; 371 | buildActionMask = 2147483647; 372 | files = ( 373 | ); 374 | inputFileListPaths = ( 375 | "${PODS_ROOT}/Target Support Files/Pods-example-exampleTests/Pods-example-exampleTests-resources-${CONFIGURATION}-input-files.xcfilelist", 376 | ); 377 | name = "[CP] Copy Pods Resources"; 378 | outputFileListPaths = ( 379 | "${PODS_ROOT}/Target Support Files/Pods-example-exampleTests/Pods-example-exampleTests-resources-${CONFIGURATION}-output-files.xcfilelist", 380 | ); 381 | runOnlyForDeploymentPostprocessing = 0; 382 | shellPath = /bin/sh; 383 | shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-example-exampleTests/Pods-example-exampleTests-resources.sh\"\n"; 384 | showEnvVarsInLog = 0; 385 | }; 386 | /* End PBXShellScriptBuildPhase section */ 387 | 388 | /* Begin PBXSourcesBuildPhase section */ 389 | 00E356EA1AD99517003FC87E /* Sources */ = { 390 | isa = PBXSourcesBuildPhase; 391 | buildActionMask = 2147483647; 392 | files = ( 393 | 00E356F31AD99517003FC87E /* exampleTests.m in Sources */, 394 | ); 395 | runOnlyForDeploymentPostprocessing = 0; 396 | }; 397 | 13B07F871A680F5B00A75B9A /* Sources */ = { 398 | isa = PBXSourcesBuildPhase; 399 | buildActionMask = 2147483647; 400 | files = ( 401 | 13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */, 402 | 13B07FC11A68108700A75B9A /* main.m in Sources */, 403 | ); 404 | runOnlyForDeploymentPostprocessing = 0; 405 | }; 406 | /* End PBXSourcesBuildPhase section */ 407 | 408 | /* Begin PBXTargetDependency section */ 409 | 00E356F51AD99517003FC87E /* PBXTargetDependency */ = { 410 | isa = PBXTargetDependency; 411 | target = 13B07F861A680F5B00A75B9A /* example */; 412 | targetProxy = 00E356F41AD99517003FC87E /* PBXContainerItemProxy */; 413 | }; 414 | /* End PBXTargetDependency section */ 415 | 416 | /* Begin XCBuildConfiguration section */ 417 | 00E356F61AD99517003FC87E /* Debug */ = { 418 | isa = XCBuildConfiguration; 419 | baseConfigurationReference = 5B7EB9410499542E8C5724F5 /* Pods-example-exampleTests.debug.xcconfig */; 420 | buildSettings = { 421 | BUNDLE_LOADER = "$(TEST_HOST)"; 422 | GCC_PREPROCESSOR_DEFINITIONS = ( 423 | "DEBUG=1", 424 | "$(inherited)", 425 | ); 426 | INFOPLIST_FILE = exampleTests/Info.plist; 427 | IPHONEOS_DEPLOYMENT_TARGET = 13.4; 428 | LD_RUNPATH_SEARCH_PATHS = ( 429 | "$(inherited)", 430 | "@executable_path/Frameworks", 431 | "@loader_path/Frameworks", 432 | ); 433 | OTHER_LDFLAGS = ( 434 | "-ObjC", 435 | "-lc++", 436 | "$(inherited)", 437 | ); 438 | PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; 439 | PRODUCT_NAME = "$(TARGET_NAME)"; 440 | TEST_HOST = "$(BUILT_PRODUCTS_DIR)/example.app/example"; 441 | }; 442 | name = Debug; 443 | }; 444 | 00E356F71AD99517003FC87E /* Release */ = { 445 | isa = XCBuildConfiguration; 446 | baseConfigurationReference = 89C6BE57DB24E9ADA2F236DE /* Pods-example-exampleTests.release.xcconfig */; 447 | buildSettings = { 448 | BUNDLE_LOADER = "$(TEST_HOST)"; 449 | COPY_PHASE_STRIP = NO; 450 | INFOPLIST_FILE = exampleTests/Info.plist; 451 | IPHONEOS_DEPLOYMENT_TARGET = 13.4; 452 | LD_RUNPATH_SEARCH_PATHS = ( 453 | "$(inherited)", 454 | "@executable_path/Frameworks", 455 | "@loader_path/Frameworks", 456 | ); 457 | OTHER_LDFLAGS = ( 458 | "-ObjC", 459 | "-lc++", 460 | "$(inherited)", 461 | ); 462 | PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; 463 | PRODUCT_NAME = "$(TARGET_NAME)"; 464 | TEST_HOST = "$(BUILT_PRODUCTS_DIR)/example.app/example"; 465 | }; 466 | name = Release; 467 | }; 468 | 13B07F941A680F5B00A75B9A /* Debug */ = { 469 | isa = XCBuildConfiguration; 470 | baseConfigurationReference = 3B4392A12AC88292D35C810B /* Pods-example.debug.xcconfig */; 471 | buildSettings = { 472 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 473 | CLANG_ENABLE_MODULES = YES; 474 | CURRENT_PROJECT_VERSION = 1; 475 | ENABLE_BITCODE = NO; 476 | INFOPLIST_FILE = example/Info.plist; 477 | LD_RUNPATH_SEARCH_PATHS = ( 478 | "$(inherited)", 479 | "@executable_path/Frameworks", 480 | ); 481 | MARKETING_VERSION = 1.0; 482 | OTHER_LDFLAGS = ( 483 | "$(inherited)", 484 | "-ObjC", 485 | "-lc++", 486 | ); 487 | PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; 488 | PRODUCT_NAME = example; 489 | SWIFT_OPTIMIZATION_LEVEL = "-Onone"; 490 | SWIFT_VERSION = 5.0; 491 | VERSIONING_SYSTEM = "apple-generic"; 492 | }; 493 | name = Debug; 494 | }; 495 | 13B07F951A680F5B00A75B9A /* Release */ = { 496 | isa = XCBuildConfiguration; 497 | baseConfigurationReference = 5709B34CF0A7D63546082F79 /* Pods-example.release.xcconfig */; 498 | buildSettings = { 499 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 500 | CLANG_ENABLE_MODULES = YES; 501 | CURRENT_PROJECT_VERSION = 1; 502 | INFOPLIST_FILE = example/Info.plist; 503 | LD_RUNPATH_SEARCH_PATHS = ( 504 | "$(inherited)", 505 | "@executable_path/Frameworks", 506 | ); 507 | MARKETING_VERSION = 1.0; 508 | OTHER_LDFLAGS = ( 509 | "$(inherited)", 510 | "-ObjC", 511 | "-lc++", 512 | ); 513 | PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; 514 | PRODUCT_NAME = example; 515 | SWIFT_VERSION = 5.0; 516 | VERSIONING_SYSTEM = "apple-generic"; 517 | }; 518 | name = Release; 519 | }; 520 | 83CBBA201A601CBA00E9B192 /* Debug */ = { 521 | isa = XCBuildConfiguration; 522 | buildSettings = { 523 | ALWAYS_SEARCH_USER_PATHS = NO; 524 | CC = ""; 525 | CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES; 526 | CLANG_CXX_LANGUAGE_STANDARD = "c++20"; 527 | CLANG_CXX_LIBRARY = "libc++"; 528 | CLANG_ENABLE_MODULES = YES; 529 | CLANG_ENABLE_OBJC_ARC = YES; 530 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 531 | CLANG_WARN_BOOL_CONVERSION = YES; 532 | CLANG_WARN_COMMA = YES; 533 | CLANG_WARN_CONSTANT_CONVERSION = YES; 534 | CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; 535 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 536 | CLANG_WARN_EMPTY_BODY = YES; 537 | CLANG_WARN_ENUM_CONVERSION = YES; 538 | CLANG_WARN_INFINITE_RECURSION = YES; 539 | CLANG_WARN_INT_CONVERSION = YES; 540 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 541 | CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; 542 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 543 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 544 | CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES; 545 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 546 | CLANG_WARN_STRICT_PROTOTYPES = YES; 547 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 548 | CLANG_WARN_UNREACHABLE_CODE = YES; 549 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 550 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 551 | COPY_PHASE_STRIP = NO; 552 | CXX = ""; 553 | ENABLE_STRICT_OBJC_MSGSEND = YES; 554 | ENABLE_TESTABILITY = YES; 555 | "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = ""; 556 | GCC_C_LANGUAGE_STANDARD = gnu99; 557 | GCC_DYNAMIC_NO_PIC = NO; 558 | GCC_NO_COMMON_BLOCKS = YES; 559 | GCC_OPTIMIZATION_LEVEL = 0; 560 | GCC_PREPROCESSOR_DEFINITIONS = ( 561 | "DEBUG=1", 562 | "$(inherited)", 563 | ); 564 | GCC_SYMBOLS_PRIVATE_EXTERN = NO; 565 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 566 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 567 | GCC_WARN_UNDECLARED_SELECTOR = YES; 568 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 569 | GCC_WARN_UNUSED_FUNCTION = YES; 570 | GCC_WARN_UNUSED_VARIABLE = YES; 571 | IPHONEOS_DEPLOYMENT_TARGET = 13.4; 572 | LD = ""; 573 | LDPLUSPLUS = ""; 574 | LD_RUNPATH_SEARCH_PATHS = ( 575 | /usr/lib/swift, 576 | "$(inherited)", 577 | ); 578 | LIBRARY_SEARCH_PATHS = ( 579 | "\"$(SDKROOT)/usr/lib/swift\"", 580 | "\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"", 581 | "\"$(inherited)\"", 582 | ); 583 | MTL_ENABLE_DEBUG_INFO = YES; 584 | ONLY_ACTIVE_ARCH = YES; 585 | OTHER_CPLUSPLUSFLAGS = ( 586 | "$(OTHER_CFLAGS)", 587 | "-DFOLLY_NO_CONFIG", 588 | "-DFOLLY_MOBILE=1", 589 | "-DFOLLY_USE_LIBCPP=1", 590 | "-DFOLLY_CFG_NO_COROUTINES=1", 591 | "-DFOLLY_HAVE_CLOCK_GETTIME=1", 592 | ); 593 | OTHER_LDFLAGS = ( 594 | "$(inherited)", 595 | " ", 596 | ); 597 | REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native"; 598 | SDKROOT = iphoneos; 599 | SWIFT_ACTIVE_COMPILATION_CONDITIONS = "$(inherited) DEBUG"; 600 | USE_HERMES = true; 601 | }; 602 | name = Debug; 603 | }; 604 | 83CBBA211A601CBA00E9B192 /* Release */ = { 605 | isa = XCBuildConfiguration; 606 | buildSettings = { 607 | ALWAYS_SEARCH_USER_PATHS = NO; 608 | CC = ""; 609 | CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES; 610 | CLANG_CXX_LANGUAGE_STANDARD = "c++20"; 611 | CLANG_CXX_LIBRARY = "libc++"; 612 | CLANG_ENABLE_MODULES = YES; 613 | CLANG_ENABLE_OBJC_ARC = YES; 614 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 615 | CLANG_WARN_BOOL_CONVERSION = YES; 616 | CLANG_WARN_COMMA = YES; 617 | CLANG_WARN_CONSTANT_CONVERSION = YES; 618 | CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; 619 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 620 | CLANG_WARN_EMPTY_BODY = YES; 621 | CLANG_WARN_ENUM_CONVERSION = YES; 622 | CLANG_WARN_INFINITE_RECURSION = YES; 623 | CLANG_WARN_INT_CONVERSION = YES; 624 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 625 | CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; 626 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 627 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 628 | CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES; 629 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 630 | CLANG_WARN_STRICT_PROTOTYPES = YES; 631 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 632 | CLANG_WARN_UNREACHABLE_CODE = YES; 633 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 634 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 635 | COPY_PHASE_STRIP = YES; 636 | CXX = ""; 637 | ENABLE_NS_ASSERTIONS = NO; 638 | ENABLE_STRICT_OBJC_MSGSEND = YES; 639 | "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = ""; 640 | GCC_C_LANGUAGE_STANDARD = gnu99; 641 | GCC_NO_COMMON_BLOCKS = YES; 642 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 643 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 644 | GCC_WARN_UNDECLARED_SELECTOR = YES; 645 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 646 | GCC_WARN_UNUSED_FUNCTION = YES; 647 | GCC_WARN_UNUSED_VARIABLE = YES; 648 | IPHONEOS_DEPLOYMENT_TARGET = 13.4; 649 | LD = ""; 650 | LDPLUSPLUS = ""; 651 | LD_RUNPATH_SEARCH_PATHS = ( 652 | /usr/lib/swift, 653 | "$(inherited)", 654 | ); 655 | LIBRARY_SEARCH_PATHS = ( 656 | "\"$(SDKROOT)/usr/lib/swift\"", 657 | "\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"", 658 | "\"$(inherited)\"", 659 | ); 660 | MTL_ENABLE_DEBUG_INFO = NO; 661 | OTHER_CPLUSPLUSFLAGS = ( 662 | "$(OTHER_CFLAGS)", 663 | "-DFOLLY_NO_CONFIG", 664 | "-DFOLLY_MOBILE=1", 665 | "-DFOLLY_USE_LIBCPP=1", 666 | "-DFOLLY_CFG_NO_COROUTINES=1", 667 | "-DFOLLY_HAVE_CLOCK_GETTIME=1", 668 | ); 669 | OTHER_LDFLAGS = ( 670 | "$(inherited)", 671 | " ", 672 | ); 673 | REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native"; 674 | SDKROOT = iphoneos; 675 | USE_HERMES = true; 676 | VALIDATE_PRODUCT = YES; 677 | }; 678 | name = Release; 679 | }; 680 | /* End XCBuildConfiguration section */ 681 | 682 | /* Begin XCConfigurationList section */ 683 | 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "exampleTests" */ = { 684 | isa = XCConfigurationList; 685 | buildConfigurations = ( 686 | 00E356F61AD99517003FC87E /* Debug */, 687 | 00E356F71AD99517003FC87E /* Release */, 688 | ); 689 | defaultConfigurationIsVisible = 0; 690 | defaultConfigurationName = Release; 691 | }; 692 | 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "example" */ = { 693 | isa = XCConfigurationList; 694 | buildConfigurations = ( 695 | 13B07F941A680F5B00A75B9A /* Debug */, 696 | 13B07F951A680F5B00A75B9A /* Release */, 697 | ); 698 | defaultConfigurationIsVisible = 0; 699 | defaultConfigurationName = Release; 700 | }; 701 | 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "example" */ = { 702 | isa = XCConfigurationList; 703 | buildConfigurations = ( 704 | 83CBBA201A601CBA00E9B192 /* Debug */, 705 | 83CBBA211A601CBA00E9B192 /* Release */, 706 | ); 707 | defaultConfigurationIsVisible = 0; 708 | defaultConfigurationName = Release; 709 | }; 710 | /* End XCConfigurationList section */ 711 | }; 712 | rootObject = 83CBB9F71A601CBA00E9B192 /* Project object */; 713 | } 714 | -------------------------------------------------------------------------------- /example/ios/example.xcodeproj/xcshareddata/xcschemes/example.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/example.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /example/ios/example/AppDelegate.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | @interface AppDelegate : RCTAppDelegate 5 | 6 | @end 7 | -------------------------------------------------------------------------------- /example/ios/example/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 = @"example"; 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 bundleURL]; 20 | } 21 | 22 | - (NSURL *)bundleURL 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/example/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/example/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /example/ios/example/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | example 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 | 30 | NSAllowsArbitraryLoads 31 | 32 | NSAllowsLocalNetworking 33 | 34 | 35 | NSLocationWhenInUseUsageDescription 36 | 37 | UILaunchStoryboardName 38 | LaunchScreen 39 | UIRequiredDeviceCapabilities 40 | 41 | arm64 42 | 43 | UISupportedInterfaceOrientations 44 | 45 | UIInterfaceOrientationPortrait 46 | UIInterfaceOrientationLandscapeLeft 47 | UIInterfaceOrientationLandscapeRight 48 | 49 | UIViewControllerBasedStatusBarAppearance 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /example/ios/example/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/example/PrivacyInfo.xcprivacy: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | NSPrivacyAccessedAPITypes 6 | 7 | 8 | NSPrivacyAccessedAPIType 9 | NSPrivacyAccessedAPICategoryFileTimestamp 10 | NSPrivacyAccessedAPITypeReasons 11 | 12 | C617.1 13 | 14 | 15 | 16 | NSPrivacyAccessedAPIType 17 | NSPrivacyAccessedAPICategoryUserDefaults 18 | NSPrivacyAccessedAPITypeReasons 19 | 20 | CA92.1 21 | 22 | 23 | 24 | NSPrivacyAccessedAPIType 25 | NSPrivacyAccessedAPICategorySystemBootTime 26 | NSPrivacyAccessedAPITypeReasons 27 | 28 | 35F9.1 29 | 30 | 31 | 32 | NSPrivacyCollectedDataTypes 33 | 34 | NSPrivacyTracking 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /example/ios/example/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/exampleTests/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/exampleTests/exampleTests.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 exampleTests : XCTestCase 11 | 12 | @end 13 | 14 | @implementation exampleTests 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/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 | 3 | /** 4 | * Metro configuration 5 | * https://reactnative.dev/docs/metro 6 | * 7 | * @type {import('metro-config').MetroConfig} 8 | */ 9 | const config = {}; 10 | 11 | module.exports = mergeConfig(getDefaultConfig(__dirname), config); 12 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "android": "react-native run-android", 7 | "ios": "react-native run-ios", 8 | "lint": "eslint .", 9 | "start": "react-native start", 10 | "test": "jest", 11 | "clean": "react-native-clean-project" 12 | }, 13 | "dependencies": { 14 | "@fanchenbao/react-native-scroll-indicator": "file:../fanchenbao-react-native-scroll-indicator-0.3.2.tgz", 15 | "react": "18.3.1", 16 | "react-native": "0.75.1" 17 | }, 18 | "devDependencies": { 19 | "@babel/core": "^7.20.0", 20 | "@babel/preset-env": "^7.20.0", 21 | "@babel/runtime": "^7.20.0", 22 | "@react-native/babel-preset": "0.75.1", 23 | "@react-native/eslint-config": "0.75.1", 24 | "@react-native/metro-config": "0.75.1", 25 | "@react-native/typescript-config": "0.75.1", 26 | "@types/react": "^18.2.6", 27 | "@types/react-test-renderer": "^18.0.0", 28 | "babel-jest": "^29.6.3", 29 | "eslint": "^8.19.0", 30 | "jest": "^29.6.3", 31 | "prettier": "2.8.8", 32 | "react-native-clean-project": "^4.0.3", 33 | "react-test-renderer": "18.3.1", 34 | "typescript": "5.0.4" 35 | }, 36 | "engines": { 37 | "node": ">=18" 38 | }, 39 | "packageManager": "yarn@3.6.4" 40 | } 41 | -------------------------------------------------------------------------------- /example/src/demo/DemoFlatListIndicator.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react-native/no-inline-styles */ 2 | /** 3 | * Sample React Native App 4 | * https://github.com/facebook/react-native 5 | * 6 | * Generated with the TypeScript template 7 | * https://github.com/react-native-community/react-native-template-typescript 8 | * 9 | * @format 10 | */ 11 | import * as React from 'react'; 12 | import { Text, View, ViewStyle } from 'react-native'; 13 | // import { FlatListIndicator } from '../react-native-scroll-indicator'; 14 | import { FlatListIndicator } from '@fanchenbao/react-native-scroll-indicator'; 15 | 16 | type PropsT = { 17 | hori: boolean; 18 | posi: string | number; 19 | inverted: boolean; 20 | indStyle: ViewStyle; 21 | containerStyle: ViewStyle; 22 | data: Array; 23 | }; 24 | 25 | export const DemoFlatListIndicator = (props: PropsT) => { 26 | const { hori, posi, inverted, indStyle, containerStyle, data } = props; 27 | 28 | return ( 29 | ( 32 | 39 | ), 40 | data: data, 41 | renderItem: ({ item }) => ( 42 | 43 | {item} 44 | 45 | ), 46 | inverted: inverted, 47 | }} 48 | horizontal={hori} 49 | position={posi} 50 | indStyle={indStyle} 51 | containerStyle={containerStyle} 52 | /> 53 | ); 54 | }; 55 | -------------------------------------------------------------------------------- /example/src/demo/DemoScrollViewIndicator.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react-native/no-inline-styles */ 2 | /** 3 | * Sample React Native App 4 | * https://github.com/facebook/react-native 5 | * 6 | * Generated with the TypeScript template 7 | * https://github.com/react-native-community/react-native-template-typescript 8 | * 9 | * @format 10 | */ 11 | import * as React from 'react'; 12 | import { Text, View, ViewStyle } from 'react-native'; 13 | // import { ScrollViewIndicator } from '../react-native-scroll-indicator'; 14 | import { ScrollViewIndicator } from '@fanchenbao/react-native-scroll-indicator'; 15 | 16 | type PropsT = { 17 | hori: boolean; 18 | posi: string | number; 19 | indStyle: ViewStyle; 20 | containerStyle: ViewStyle; 21 | text: string; 22 | }; 23 | 24 | export const DemoScrollViewIndicator = (props: PropsT) => { 25 | const { hori, posi, indStyle, containerStyle, text } = props; 26 | 27 | return ( 28 | 33 | 34 | {text} 35 | 36 | 37 | ); 38 | }; 39 | -------------------------------------------------------------------------------- /example/src/lorem.json: -------------------------------------------------------------------------------- 1 | { 2 | "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur maximus lorem id sem gravida, eget pretium orci facilisis. Suspendisse mollis erat nulla, eget placerat urna euismod sit amet. Sed a lacus sem. Vivamus posuere dignissim mauris, in finibus erat condimentum in. Suspendisse lacinia nunc at nisi malesuada, nec elementum orci fringilla. Cras sodales lorem risus, eget tempus risus consequat quis. Vestibulum placerat turpis eu fringilla ultricies. Mauris id dui sit amet felis porttitor feugiat ac lacinia Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur maximus lorem id sem gravida, eget pretium orci facilisis. Suspendisse mollis erat nulla, eget placerat urna euismod sit amet. Sed a lacus sem. Vivamus posuere dignissim mauris, in finibus erat condimentum in. Suspendisse lacinia nunc at nisi malesuada, nec elementum orci fringilla. Cras sodales lorem risus, eget tempus risus consequat quis. Vestibulum placerat turpis eu fringilla ultricies. Mauris id dui sit amet felis porttitor feugiat ac lacinia Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur maximus lorem id sem gravida, eget pretium orci facilisis. Suspendisse mollis erat nulla, eget placerat urna euismod sit amet. Sed a lacus sem. Vivamus posuere dignissim mauris, in finibus erat condimentum in. Suspendisse lacinia nunc at nisi malesuada, nec elementum orci fringilla. Cras sodales lorem risus, eget tempus risus consequat quis. Vestibulum placerat turpis eu fringilla ultricies. Mauris id dui sit amet felis porttitor feugiat ac lacinia Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur maximus lorem id sem gravida, eget pretium orci facilisis. Suspendisse mollis erat nulla, eget placerat urna euismod sit amet. Sed a lacus sem. Vivamus posuere dignissim mauris, in finibus erat condimentum in. Suspendisse lacinia nunc at nisi malesuada, nec elementum orci fringilla. Cras sodales lorem risus, eget tempus risus consequat quis. Vestibulum placerat turpis eu fringilla ultricies. Mauris id dui sit amet felis porttitor feugiat ac lacinia" 3 | } -------------------------------------------------------------------------------- /example/src/react-native-scroll-indicator/Indicator.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react-native/no-inline-styles */ 2 | /** 3 | * @format 4 | */ 5 | import * as React from 'react'; 6 | import { 7 | Animated, 8 | ViewStyle, 9 | PanResponder, 10 | FlatList, 11 | ScrollView, 12 | } from 'react-native'; 13 | 14 | type PropsT = { 15 | // distance traveled by the top or left of the indicator relative to the top 16 | // or left of the visible view 17 | d: Animated.Value; 18 | 19 | // the amount of scaling on the indicator when the scroll hits the edge 20 | sc: Animated.Value; 21 | 22 | horizontal: boolean; // whether the indicator is for horizontal or vertical 23 | 24 | indSize: number; // length of the indicator 25 | 26 | // the total amount of distance to travel for the indicator if we start at 27 | // the beginning and scroll to the end, without moving beyond the edges on 28 | // both direction 29 | diff: number; 30 | 31 | inverted: boolean; // FlatList only, whether FlatList is inverted 32 | 33 | // The refs for scrollable component. We use these refs to manually scroll 34 | // the scrollable component when the indicator is dragged 35 | scrollRefs: { 36 | FlatList: React.RefObject; 37 | ScrollView: React.RefObject; 38 | }; 39 | 40 | contentSize: number; // size of the actual content 41 | 42 | visibleSize: number; // size of the visible portion of the content 43 | 44 | // Coordinate of the view that contains the content and the indicator 45 | parentPos: { 46 | pageX: number; 47 | pageY: number; 48 | ready: boolean; 49 | }; 50 | 51 | // styling of the indicator regarding its location 52 | locStyle: ViewStyle; 53 | 54 | // styling of the indicator itself, e.g. girth, color, etc. 55 | indStyle: ViewStyle; 56 | }; 57 | 58 | export const Indicator = (props: PropsT) => { 59 | const { 60 | d, 61 | sc, 62 | horizontal, 63 | indSize, 64 | diff, 65 | inverted, 66 | scrollRefs, 67 | contentSize, 68 | visibleSize, 69 | parentPos, 70 | locStyle, 71 | indStyle, 72 | } = props; 73 | 74 | // The indicator offset (the distance between the top or left of the 75 | // indicator to the top or left of the content boundary) the moment when it 76 | // starts to be dragged. We need this offset to properly compute the 77 | // indicator offset when it is being dragged. 78 | const indOffsetOnMove = React.useRef(0); 79 | 80 | // Use ref to make values of the props or any value that might be changed 81 | // upon refresh available inside animated value callbacks. The values in 82 | // animated callbacks do not update upon any state update. 83 | const refs = { 84 | horizontal: React.useRef(false), 85 | inverted: React.useRef(false), 86 | actualIndSize: React.useRef(0), 87 | diff: React.useRef(0), 88 | contentSize: React.useRef(0), 89 | visibleSize: React.useRef(0), 90 | }; 91 | refs.horizontal.current = horizontal; 92 | refs.inverted.current = inverted; 93 | refs.diff.current = diff; 94 | refs.contentSize.current = contentSize; 95 | refs.visibleSize.current = visibleSize; 96 | 97 | const pan = React.useRef(new Animated.ValueXY()).current; 98 | pan.addListener(({ x, y }) => { 99 | // x and y is the delta x and delta y when the indicator is being dragged. 100 | // Thus the total amount of indicator offset is the initial offset plus the 101 | // delta value. 102 | // Note that we clamp on how much indicator can be dragged. It cannot 103 | // be dragged beyond the scrollable component 104 | // Also note that when Flatlist is inverted, so is the delta value, because 105 | // we want to keep indicatorOffset always positive. It always increases 106 | // as the top or left (bottom or right) of the indicator moves away from 107 | // the top or left (bottom or right) of the parent bound. 108 | const indicatorOffset = Math.min( 109 | Math.max( 110 | (refs.horizontal.current 111 | ? refs.inverted.current 112 | ? -x 113 | : x 114 | : refs.inverted.current 115 | ? -y 116 | : y) + indOffsetOnMove.current, 117 | 0, 118 | ), 119 | refs.diff.current, 120 | ); 121 | d.setValue(indicatorOffset); 122 | 123 | // Compute the content offset to manually scroll the scrollable component 124 | // Note that animated is set to false because the pan itself is an 125 | // animated value. As y is being changed, there is no need to add further 126 | // animation. The animation is needed when we supply the end offset to 127 | // the scrollable component. In the current case, we are not assigning 128 | // the end offset. Rather, we are assigning the current offset. 129 | const contentOffset = 130 | (indicatorOffset * refs.contentSize.current) / refs.visibleSize.current; 131 | if (scrollRefs.FlatList.current) { 132 | scrollRefs.FlatList.current.scrollToOffset({ 133 | offset: contentOffset, 134 | animated: false, 135 | }); 136 | } else if (scrollRefs.ScrollView.current) { 137 | scrollRefs.ScrollView.current.scrollTo( 138 | refs.horizontal.current 139 | ? { 140 | x: contentOffset, 141 | animated: false, 142 | } 143 | : { 144 | y: contentOffset, 145 | animated: false, 146 | }, 147 | ); 148 | } 149 | }); 150 | 151 | const panResponder = React.useRef( 152 | PanResponder.create({ 153 | onMoveShouldSetPanResponder: () => true, 154 | onPanResponderGrant: evt => { 155 | // top or left of indicator to the top or left of parent boundary 156 | const indStartToParentStart = refs.horizontal.current 157 | ? evt.nativeEvent.pageX - evt.nativeEvent.locationX - parentPos.pageX 158 | : evt.nativeEvent.pageY - evt.nativeEvent.locationY - parentPos.pageY; 159 | // If inverted, we need to compute the bottom or right of indicator 160 | // to the bottom or right of parent boundary 161 | indOffsetOnMove.current = refs.inverted.current 162 | ? refs.visibleSize.current - 163 | indStartToParentStart - 164 | refs.actualIndSize.current 165 | : indStartToParentStart; 166 | }, 167 | onPanResponderMove: Animated.event([null, { dy: pan.y, dx: pan.x }], { 168 | useNativeDriver: false, 169 | }), 170 | }), 171 | ).current; 172 | 173 | // Use the indicator offset to interpolate the actual travel on x or y 174 | // coordinate 175 | // Note that the max travel distance is diff 176 | const move = d.interpolate({ 177 | inputRange: [0, diff], 178 | outputRange: inverted ? [diff, 0] : [0, diff], 179 | extrapolate: 'extend', 180 | }); 181 | // interpolate the scale need to shrink by the indicator to scaleX or scaleY. 182 | // Note that the range of shrink scale is from 0 (completely shrunk, 183 | // invisible) to 1 (no shrink) 184 | const shrink = sc.interpolate({ 185 | inputRange: [0, 1], 186 | outputRange: [0, 1], 187 | extrapolate: 'clamp', 188 | }); 189 | 190 | return ( 191 | { 203 | // The actual size of the indicator is different from the given indSize 204 | // due to size changes in the parent components 205 | refs.actualIndSize.current = horizontal 206 | ? e.nativeEvent.layout.width 207 | : e.nativeEvent.layout.height; 208 | }} 209 | {...panResponder.panHandlers} 210 | /> 211 | ); 212 | }; 213 | -------------------------------------------------------------------------------- /example/src/react-native-scroll-indicator/ScrollIndicator.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | import * as React from 'react'; 5 | import { 6 | Animated, 7 | ScrollView, 8 | FlatList, 9 | ViewStyle, 10 | FlatListProps, 11 | ScrollViewProps, 12 | View, 13 | LayoutChangeEvent, 14 | NativeSyntheticEvent, 15 | NativeScrollEvent, 16 | } from 'react-native'; 17 | import { Indicator } from './Indicator'; 18 | import { getLocStyle } from './functions'; 19 | 20 | type PropsT = { 21 | target: 'ScrollView' | 'FlatList'; 22 | targetProps: ScrollViewProps | (ScrollViewProps & FlatListProps); 23 | position: string | number; // position of the indicator 24 | horizontal: boolean; // whether the scrolling direction is horizontal 25 | persistentScrollbar: boolean; // whether to persist scroll indicator 26 | indStyle: ViewStyle; // style of the scroll indicator 27 | containerStyle: ViewStyle; // style of the parent container that holds both the indicator and the scrollable component 28 | children?: React.ReactNode | React.ReactNode[]; // used for ScrollView only 29 | }; 30 | 31 | export const ScrollIndicator = (props: PropsT) => { 32 | const { 33 | target, 34 | targetProps, 35 | position, 36 | horizontal, 37 | persistentScrollbar, 38 | indStyle, 39 | containerStyle, 40 | } = props; 41 | 42 | // total size of the content if rendered 43 | const [contentSize, setContentSize] = React.useState(1); 44 | // size of the visible part of the content, i.e., size of the scroll view 45 | // itself. 46 | const [visibleSize, setVisibleSize] = React.useState(0); 47 | // the size orthogonal to visibleSize, for use in computing the position of 48 | // the indicator 49 | const [orthSize, setOrthSize] = React.useState(0); 50 | 51 | // parent view position. Parent view is the component that holds both the 52 | // scroll indicator and the scrollable component 53 | const parentRef = React.useRef(null); 54 | const [parentPos, setParentPos] = React.useState({ 55 | pageX: 0, 56 | pageY: 0, 57 | ready: false, 58 | }); 59 | 60 | // scroll container refs. Use this to manually scroll the scrollable 61 | // component when dragging the indicator 62 | const scrollRefs = { 63 | FlatList: React.useRef(null), 64 | ScrollView: React.useRef(null), 65 | }; 66 | 67 | // height or width of the indicator, if it is vertical or horizontal, 68 | // respectively. If there is more content than visible on the view, the 69 | // proportion of indSize to visibleSize is the same as the visibleSize to 70 | // contentSize. Otherwise, set the indSize the same as visibleSize. 71 | const indSize = 72 | contentSize > visibleSize 73 | ? (visibleSize * visibleSize) / contentSize 74 | : visibleSize; 75 | 76 | // the amount of distance the indicator needs to travel during scrolling 77 | // without any shrinking 78 | const diff = visibleSize > indSize ? visibleSize - indSize : 1; 79 | 80 | // distance that the top or left of the indicator needs to travel in 81 | // accordance with scrolling 82 | const d = React.useRef(new Animated.Value(0)).current; 83 | // the scale that the indicator needs to shrink if scrolling beyond the end 84 | const sc = React.useRef(new Animated.Value(1)).current; 85 | 86 | /**************************************************** 87 | * Callbacks shared by both Flatlist and Scrollview 88 | ****************************************************/ 89 | const configContentSize = (w: number, h: number) => { 90 | // total size of the content 91 | setContentSize(horizontal ? w : h); 92 | }; 93 | 94 | const configVisibleSize = (e: LayoutChangeEvent) => { 95 | // layout of the visible part of the scroll view 96 | setVisibleSize( 97 | horizontal ? e.nativeEvent.layout.width : e.nativeEvent.layout.height, 98 | ); 99 | setOrthSize( 100 | horizontal ? e.nativeEvent.layout.height : e.nativeEvent.layout.width, 101 | ); 102 | }; 103 | 104 | const configOnScroll = (e: NativeSyntheticEvent) => { 105 | /** 106 | * obtain contentOffset, which is the distance from the top or left 107 | * of the content to the top or left of the scroll view. 108 | * contentOffset gets bigger if user scrolls up or left (i.e. 109 | * content goes up or left), 110 | * otherwise smaller. It is possible for contentOffset to be 111 | * negative, if user scrolls down or right until there is empty 112 | * space above or to the left of the content. 113 | * indicatorOffset is computed similarly to indSize, in which the 114 | * proportion of the amount of distance to travel by the indicator 115 | * to the container size is the same as the proportion of the 116 | * container size to total size. 117 | */ 118 | const indicatorOffset = 119 | ((horizontal 120 | ? e.nativeEvent.contentOffset.x 121 | : e.nativeEvent.contentOffset.y) * 122 | visibleSize) / 123 | contentSize; 124 | d.setValue(indicatorOffset); 125 | /** 126 | * What we desire is that when the indicator touches the edge, it 127 | * shrinks in size while maintaining the contact to the edge if 128 | * user scrolls in the same direction further. 129 | * If we don't move the indicator, after shrinking, there will be a 130 | * gap of size 131 | * 132 | * (indSize - indSize * sc) / 2 133 | * 134 | * between the end of the indicator and the edge of the container. 135 | * To make the end of the indicator maintain contact to the edge, 136 | * the indicator must move in the same rate as the gap appears. 137 | * 138 | * If we scroll down or right, we have the following relationship 139 | * 140 | * indicatorOffset = diff + (indSize - indSize * sc) / 2 141 | * 142 | * If we scroll up or left, we have a slightly different 143 | * relationship 144 | * 145 | * indicatorOffset = (indSize - indSize * sc) / 2 146 | * 147 | * From these two relationship, we can compute sc based on 148 | * indicatorOffset. 149 | */ 150 | sc.setValue( 151 | indicatorOffset >= 0 152 | ? (indSize + 2 * diff - 2 * indicatorOffset) / indSize 153 | : (indSize + 2 * indicatorOffset) / indSize, 154 | ); 155 | }; 156 | 157 | return ( 158 | { 162 | if (parentRef.current) { 163 | parentRef.current?.measure((_1, _2, _3, _4, pageX, pageY) => { 164 | setParentPos({ 165 | pageX: pageX, 166 | pageY: pageY, 167 | ready: true, 168 | }); 169 | }); 170 | } 171 | }}> 172 | {target === 'FlatList' ? ( 173 | )} 175 | ref={scrollRefs.FlatList} 176 | horizontal={horizontal} 177 | showsVerticalScrollIndicator={false} 178 | showsHorizontalScrollIndicator={false} 179 | onContentSizeChange={configContentSize} 180 | onLayout={e => { 181 | configVisibleSize(e); 182 | if ( 183 | 'onLayout' in targetProps && 184 | typeof targetProps.onLayout === 'function' 185 | ) { 186 | targetProps.onLayout(e); 187 | } 188 | }} 189 | scrollEventThrottle={16} 190 | onScroll={e => { 191 | configOnScroll(e); 192 | if ( 193 | 'onScroll' in targetProps && 194 | typeof targetProps.onScroll === 'function' 195 | ) { 196 | targetProps.onScroll(e); 197 | } 198 | }} 199 | /> 200 | ) : ( 201 | // The logic for ScrollView is exactly the same as FlatList 202 | { 210 | configVisibleSize(e); 211 | if ( 212 | 'onLayout' in targetProps && 213 | typeof targetProps.onLayout === 'function' 214 | ) { 215 | targetProps.onLayout(e); 216 | } 217 | }} 218 | scrollEventThrottle={16} 219 | onScroll={e => { 220 | configOnScroll(e); 221 | if ( 222 | 'onScroll' in targetProps && 223 | typeof targetProps.onScroll === 'function' 224 | ) { 225 | targetProps.onScroll(e); 226 | } 227 | }}> 228 | {props.children} 229 | 230 | )} 231 | {(persistentScrollbar || indSize < visibleSize) && parentPos.ready && ( 232 | 257 | )} 258 | 259 | ); 260 | }; 261 | -------------------------------------------------------------------------------- /example/src/react-native-scroll-indicator/functions.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Compute the position of the indicator given the size of the container it is 3 | * located, its girth, and the desired position. The goal is to place the 4 | * center line of the indicator (vertical if the indicator moves in vertical 5 | * direction, horizontal otherwise) at the desired position. If, by doing so, 6 | * part of the indicator will be overflowing the container, clamp it such that 7 | * the indicator is flush with the edge of the container. 8 | * @param containerSize size of the container orthogonal to the direction of 9 | * the indicator, i.e., if indicator is vertical, the size will be the width 10 | * of the container, otherwise height. 11 | * @param indGirth the width or height of the indicator if it is vertical or 12 | * horizontal, respectively. 13 | * @param position desired position of the indicator, as a percentage of the 14 | * container. e.g. 20 means we want to place a vertical indicator's center line 15 | * at 20% of the container's width. 16 | * @returns the absolute position of the indicator as used in the style for 17 | * top (indicator is horizontal) or left (indicator is vertical) 18 | */ 19 | const getIndPosition = ( 20 | containerSize: number, 21 | indGirth: number, 22 | position: number, 23 | ) => 24 | Math.max( 25 | 0, 26 | Math.min( 27 | (position / 100) * containerSize - (indGirth as number) / 2, 28 | containerSize - (indGirth as number), 29 | ), 30 | ); 31 | 32 | /** 33 | * Get default position when it is not supplied by the user 34 | * @param horizontal whether the indicator is horizontal 35 | * @param position desired position of the indicator, as a percentage of the 36 | * container. e.g. 20 means we want to place a vertical indicator's center line 37 | * at 20% of the container's width. If user has not specified it, it will have 38 | * the value of empty string. 39 | * @returns default position if it has not been supplied 40 | */ 41 | export const getDefaultPosition = ( 42 | horizontal: boolean, 43 | position: string | number, 44 | ) => { 45 | let posi = position; 46 | if (horizontal && position === '') { 47 | posi = 'bottom'; 48 | } else if (!horizontal && position === '') { 49 | posi = 'right'; 50 | } 51 | return posi; 52 | }; 53 | 54 | /** 55 | * get the style for indicator's location. 56 | * @param horizontal whether the indicator is horizontal 57 | * @param position desired position of the indicator, as a percentage of the 58 | * container. e.g. 20 means we want to place a vertical indicator's center line 59 | * at 20% of the container's width. 60 | * @param orthSize the size of the content view orthogonal to that of the 61 | * scrolling direction. e.g. if the scrolling is vertical, orthSize is the 62 | * content view's width, otherwise height. 63 | * @param indGirth the girth of the indicator, which is width for vertical 64 | * indicator, or height for horizontal indicator 65 | * @returns the location style of the indicator, which includes a numeric value 66 | * for top, bottom, left, or right. 67 | */ 68 | export const getLocStyle = ( 69 | horizontal: boolean, 70 | position: string | number, 71 | orthSize: number, 72 | indGirth: number, 73 | ) => { 74 | let locStyle; 75 | if (horizontal) { 76 | if (typeof position === 'string' && ['top', 'bottom'].includes(position)) { 77 | locStyle = {[position]: 0}; 78 | } else if (typeof position === 'number') { 79 | locStyle = { 80 | top: getIndPosition(orthSize, indGirth, position), 81 | }; 82 | } else { 83 | throw Error( 84 | '"position" must be one of "top", "buttom", or a floating number when the scroll view is horizontal', 85 | ); 86 | } 87 | } else { 88 | if (typeof position === 'string' && ['left', 'right'].includes(position)) { 89 | locStyle = {[position]: 0}; 90 | } else if (typeof position === 'number') { 91 | locStyle = { 92 | left: getIndPosition(orthSize, indGirth as number, position), 93 | }; 94 | } else { 95 | throw Error( 96 | '"position" must be one of "left", "right", or a floating number when the scroll view is vertical', 97 | ); 98 | } 99 | } 100 | return locStyle; 101 | }; 102 | -------------------------------------------------------------------------------- /example/src/react-native-scroll-indicator/index.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react-native/no-inline-styles */ 2 | /** 3 | * @format 4 | */ 5 | import * as React from 'react'; 6 | import { ScrollIndicator } from './ScrollIndicator'; 7 | 8 | import type { FlatListProps, ScrollViewProps, ViewStyle } from 'react-native'; 9 | import { getDefaultPosition } from './functions'; 10 | 11 | type ScrollViewPropsT = { 12 | position?: string | number; 13 | horizontal?: boolean; 14 | persistentScrollbar?: boolean; 15 | indStyle?: ViewStyle; 16 | containerStyle?: ViewStyle; 17 | scrollViewProps?: ScrollViewProps; 18 | children?: React.ReactNode | React.ReactNode[]; 19 | }; 20 | 21 | export const ScrollViewIndicator = (props: ScrollViewPropsT) => { 22 | const { 23 | position = '', 24 | horizontal = false, 25 | persistentScrollbar = false, 26 | indStyle: { width = 5, ...indStyle } = {}, 27 | containerStyle = {}, 28 | scrollViewProps = {}, 29 | } = props; 30 | 31 | return ( 32 | 45 | {props.children} 46 | 47 | ); 48 | }; 49 | 50 | type FlatListPropsT = { 51 | flatListProps: ScrollViewProps & FlatListProps; 52 | position?: string | number; 53 | horizontal?: boolean; 54 | persistentScrollbar?: boolean; 55 | indStyle?: ViewStyle; 56 | containerStyle?: ViewStyle; 57 | }; 58 | 59 | export const FlatListIndicator = (props: FlatListPropsT) => { 60 | const { 61 | flatListProps, 62 | position = '', 63 | horizontal = false, 64 | persistentScrollbar = false, 65 | indStyle: { width = 5, ...indStyle } = {}, 66 | containerStyle = {}, 67 | } = props; 68 | 69 | return ( 70 | 84 | ); 85 | }; 86 | -------------------------------------------------------------------------------- /example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@react-native/typescript-config/tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /lefthook.yml: -------------------------------------------------------------------------------- 1 | pre-commit: 2 | parallel: true 3 | commands: 4 | lint: 5 | # files: git diff --name-only @{push} 6 | glob: '*.{js,ts,jsx,tsx}' 7 | run: npx eslint {staged_files} 8 | types: 9 | # files: git diff --name-only @{push} 10 | glob: '*.{js,ts, jsx, tsx}' 11 | run: npx tsc --noEmit 12 | commit-msg: 13 | parallel: true 14 | commands: 15 | commitlint: 16 | run: npx commitlint --edit 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@fanchenbao/react-native-scroll-indicator", 3 | "version": "0.4.0", 4 | "description": "A React Native component that offers a customizable scroll indicator for ScrollView and FlatList", 5 | "main": "lib/commonjs/index", 6 | "module": "lib/module/index", 7 | "types": "lib/typescript/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 | "!lib/typescript/example", 18 | "!ios/build", 19 | "!android/build", 20 | "!android/gradle", 21 | "!android/gradlew", 22 | "!android/gradlew.bat", 23 | "!android/local.properties", 24 | "!**/__tests__", 25 | "!**/__fixtures__", 26 | "!**/__mocks__", 27 | "!**/.*" 28 | ], 29 | "scripts": { 30 | "test": "jest", 31 | "typecheck": "cd example && tsc --noEmit", 32 | "lint": "cd example && eslint \"**/*.{js,ts,tsx}\"", 33 | "build": "cp example/src/react-native-scroll-indicator/* src/ && bob build", 34 | "prepare": "husky install", 35 | "release": "yarn build && release-it", 36 | "example": "yarn --cwd example", 37 | "bootstrap": "yarn example && yarn install" 38 | }, 39 | "keywords": [ 40 | "react-native", 41 | "scroll-indicator", 42 | "ios", 43 | "android" 44 | ], 45 | "repository": "https://github.com/FanchenBao/react-native-scroll-indicator", 46 | "author": "Fanchen Bao (https://github.com/FanchenBao)", 47 | "license": "MIT", 48 | "bugs": { 49 | "url": "https://github.com/FanchenBao/react-native-scroll-indicator/issues" 50 | }, 51 | "homepage": "https://github.com/FanchenBao/react-native-scroll-indicator#readme", 52 | "publishConfig": { 53 | "registry": "https://registry.npmjs.org/", 54 | "access": "public" 55 | }, 56 | "devDependencies": { 57 | "@babel/core": "^7.20.0", 58 | "@babel/preset-env": "^7.20.0", 59 | "@babel/runtime": "^7.20.0", 60 | "@commitlint/config-conventional": "^17.0.2", 61 | "@evilmartians/lefthook": "^1.2.2", 62 | "@react-native/babel-preset": "0.75.1", 63 | "@react-native/eslint-config": "0.75.1", 64 | "@react-native/metro-config": "0.75.1", 65 | "@react-native/typescript-config": "0.75.1", 66 | "@release-it/conventional-changelog": "^5.0.0", 67 | "@types/jest": "^29.5.12", 68 | "@types/react": "^18.2.6", 69 | "@types/react-test-renderer": "^18.0.0", 70 | "babel-jest": "^29.6.3", 71 | "commitlint": "^17.0.2", 72 | "del-cli": "^5.0.0", 73 | "eslint": "^8.19.0", 74 | "husky": "^8.0.3", 75 | "jest": "^29.6.3", 76 | "metro-react-native-babel-preset": "^0.77.0", 77 | "prettier": "2.8.8", 78 | "react": "18.3.1", 79 | "react-native": "0.75.1", 80 | "react-native-builder-bob": "^0.20.3", 81 | "react-native-clean-project": "^4.0.3", 82 | "react-test-renderer": "18.3.1", 83 | "release-it": "^15.0.0", 84 | "typescript": "5.0.4" 85 | }, 86 | "resolutions": { 87 | "@types/react": "18.2.6" 88 | }, 89 | "peerDependencies": { 90 | "react": "*", 91 | "react-native": "*" 92 | }, 93 | "engines": { 94 | "node": ">= 16.0.0" 95 | }, 96 | "packageManager": "^yarn@1.22.15", 97 | "jest": { 98 | "preset": "react-native", 99 | "modulePathIgnorePatterns": [ 100 | "/example/node_modules", 101 | "/lib/" 102 | ] 103 | }, 104 | "commitlint": { 105 | "extends": [ 106 | "@commitlint/config-conventional" 107 | ] 108 | }, 109 | "release-it": { 110 | "git": { 111 | "commitMessage": "chore: release ${version}", 112 | "tagName": "v${version}" 113 | }, 114 | "npm": { 115 | "publish": true 116 | }, 117 | "github": { 118 | "release": true 119 | }, 120 | "plugins": { 121 | "@release-it/conventional-changelog": { 122 | "preset": "angular" 123 | } 124 | } 125 | }, 126 | "eslintConfig": { 127 | "root": true, 128 | "extends": [ 129 | "@react-native-community", 130 | "prettier" 131 | ], 132 | "rules": { 133 | "prettier/prettier": [ 134 | "error", 135 | { 136 | "arrowParens": "avoid", 137 | "bracketSameLine": true, 138 | "bracketSpacing": false, 139 | "quoteProps": "consistent", 140 | "singleQuote": true, 141 | "tabWidth": 2, 142 | "trailingComma": "all", 143 | "useTabs": false 144 | } 145 | ] 146 | } 147 | }, 148 | "eslintIgnore": [ 149 | "node_modules/", 150 | "lib/" 151 | ], 152 | "prettier": { 153 | "quoteProps": "consistent", 154 | "singleQuote": true, 155 | "tabWidth": 2, 156 | "trailingComma": "all", 157 | "useTabs": false, 158 | "jsxBracketSameLine": true, 159 | "bracketSpacing": false, 160 | "arrowParens": "avoid" 161 | }, 162 | "react-native-builder-bob": { 163 | "source": "src", 164 | "output": "lib", 165 | "targets": [ 166 | "commonjs", 167 | "module", 168 | [ 169 | "typescript", 170 | { 171 | "project": "tsconfig.build.json" 172 | } 173 | ] 174 | ] 175 | } 176 | } 177 | -------------------------------------------------------------------------------- /scripts/bootstrap.js: -------------------------------------------------------------------------------- 1 | const os = require('os'); 2 | const path = require('path'); 3 | const child_process = require('child_process'); 4 | 5 | const root = path.resolve(__dirname, '..'); 6 | const args = process.argv.slice(2); 7 | const options = { 8 | cwd: process.cwd(), 9 | env: process.env, 10 | stdio: 'inherit', 11 | encoding: 'utf-8', 12 | }; 13 | 14 | if (os.type() === 'Windows_NT') { 15 | options.shell = true; 16 | } 17 | 18 | let result; 19 | 20 | if (process.cwd() !== root || args.length) { 21 | // We're not in the root of the project, or additional arguments were passed 22 | // In this case, forward the command to `yarn` 23 | result = child_process.spawnSync('yarn', args, options); 24 | } else { 25 | // If `yarn` is run without arguments, perform bootstrap 26 | result = child_process.spawnSync('yarn', ['bootstrap'], options); 27 | } 28 | 29 | process.exitCode = result.status; 30 | -------------------------------------------------------------------------------- /src/Indicator.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react-native/no-inline-styles */ 2 | /** 3 | * @format 4 | */ 5 | import * as React from 'react'; 6 | import { 7 | Animated, 8 | ViewStyle, 9 | PanResponder, 10 | FlatList, 11 | ScrollView, 12 | } from 'react-native'; 13 | 14 | type PropsT = { 15 | // distance traveled by the top or left of the indicator relative to the top 16 | // or left of the visible view 17 | d: Animated.Value; 18 | 19 | // the amount of scaling on the indicator when the scroll hits the edge 20 | sc: Animated.Value; 21 | 22 | horizontal: boolean; // whether the indicator is for horizontal or vertical 23 | 24 | indSize: number; // length of the indicator 25 | 26 | // the total amount of distance to travel for the indicator if we start at 27 | // the beginning and scroll to the end, without moving beyond the edges on 28 | // both direction 29 | diff: number; 30 | 31 | inverted: boolean; // FlatList only, whether FlatList is inverted 32 | 33 | // The refs for scrollable component. We use these refs to manually scroll 34 | // the scrollable component when the indicator is dragged 35 | scrollRefs: { 36 | FlatList: React.RefObject; 37 | ScrollView: React.RefObject; 38 | }; 39 | 40 | contentSize: number; // size of the actual content 41 | 42 | visibleSize: number; // size of the visible portion of the content 43 | 44 | // Coordinate of the view that contains the content and the indicator 45 | parentPos: { 46 | pageX: number; 47 | pageY: number; 48 | ready: boolean; 49 | }; 50 | 51 | // styling of the indicator regarding its location 52 | locStyle: ViewStyle; 53 | 54 | // styling of the indicator itself, e.g. girth, color, etc. 55 | indStyle: ViewStyle; 56 | }; 57 | 58 | export const Indicator = (props: PropsT) => { 59 | const { 60 | d, 61 | sc, 62 | horizontal, 63 | indSize, 64 | diff, 65 | inverted, 66 | scrollRefs, 67 | contentSize, 68 | visibleSize, 69 | parentPos, 70 | locStyle, 71 | indStyle, 72 | } = props; 73 | 74 | // The indicator offset (the distance between the top or left of the 75 | // indicator to the top or left of the content boundary) the moment when it 76 | // starts to be dragged. We need this offset to properly compute the 77 | // indicator offset when it is being dragged. 78 | const indOffsetOnMove = React.useRef(0); 79 | 80 | // Use ref to make values of the props or any value that might be changed 81 | // upon refresh available inside animated value callbacks. The values in 82 | // animated callbacks do not update upon any state update. 83 | const refs = { 84 | horizontal: React.useRef(false), 85 | inverted: React.useRef(false), 86 | actualIndSize: React.useRef(0), 87 | diff: React.useRef(0), 88 | contentSize: React.useRef(0), 89 | visibleSize: React.useRef(0), 90 | }; 91 | refs.horizontal.current = horizontal; 92 | refs.inverted.current = inverted; 93 | refs.diff.current = diff; 94 | refs.contentSize.current = contentSize; 95 | refs.visibleSize.current = visibleSize; 96 | 97 | const pan = React.useRef(new Animated.ValueXY()).current; 98 | pan.addListener(({ x, y }) => { 99 | // x and y is the delta x and delta y when the indicator is being dragged. 100 | // Thus the total amount of indicator offset is the initial offset plus the 101 | // delta value. 102 | // Note that we clamp on how much indicator can be dragged. It cannot 103 | // be dragged beyond the scrollable component 104 | // Also note that when Flatlist is inverted, so is the delta value, because 105 | // we want to keep indicatorOffset always positive. It always increases 106 | // as the top or left (bottom or right) of the indicator moves away from 107 | // the top or left (bottom or right) of the parent bound. 108 | const indicatorOffset = Math.min( 109 | Math.max( 110 | (refs.horizontal.current 111 | ? refs.inverted.current 112 | ? -x 113 | : x 114 | : refs.inverted.current 115 | ? -y 116 | : y) + indOffsetOnMove.current, 117 | 0, 118 | ), 119 | refs.diff.current, 120 | ); 121 | d.setValue(indicatorOffset); 122 | 123 | // Compute the content offset to manually scroll the scrollable component 124 | // Note that animated is set to false because the pan itself is an 125 | // animated value. As y is being changed, there is no need to add further 126 | // animation. The animation is needed when we supply the end offset to 127 | // the scrollable component. In the current case, we are not assigning 128 | // the end offset. Rather, we are assigning the current offset. 129 | const contentOffset = 130 | (indicatorOffset * refs.contentSize.current) / refs.visibleSize.current; 131 | if (scrollRefs.FlatList.current) { 132 | scrollRefs.FlatList.current.scrollToOffset({ 133 | offset: contentOffset, 134 | animated: false, 135 | }); 136 | } else if (scrollRefs.ScrollView.current) { 137 | scrollRefs.ScrollView.current.scrollTo( 138 | refs.horizontal.current 139 | ? { 140 | x: contentOffset, 141 | animated: false, 142 | } 143 | : { 144 | y: contentOffset, 145 | animated: false, 146 | }, 147 | ); 148 | } 149 | }); 150 | 151 | const panResponder = React.useRef( 152 | PanResponder.create({ 153 | onMoveShouldSetPanResponder: () => true, 154 | onPanResponderGrant: evt => { 155 | // top or left of indicator to the top or left of parent boundary 156 | const indStartToParentStart = refs.horizontal.current 157 | ? evt.nativeEvent.pageX - evt.nativeEvent.locationX - parentPos.pageX 158 | : evt.nativeEvent.pageY - evt.nativeEvent.locationY - parentPos.pageY; 159 | // If inverted, we need to compute the bottom or right of indicator 160 | // to the bottom or right of parent boundary 161 | indOffsetOnMove.current = refs.inverted.current 162 | ? refs.visibleSize.current - 163 | indStartToParentStart - 164 | refs.actualIndSize.current 165 | : indStartToParentStart; 166 | }, 167 | onPanResponderMove: Animated.event([null, { dy: pan.y, dx: pan.x }], { 168 | useNativeDriver: false, 169 | }), 170 | }), 171 | ).current; 172 | 173 | // Use the indicator offset to interpolate the actual travel on x or y 174 | // coordinate 175 | // Note that the max travel distance is diff 176 | const move = d.interpolate({ 177 | inputRange: [0, diff], 178 | outputRange: inverted ? [diff, 0] : [0, diff], 179 | extrapolate: 'extend', 180 | }); 181 | // interpolate the scale need to shrink by the indicator to scaleX or scaleY. 182 | // Note that the range of shrink scale is from 0 (completely shrunk, 183 | // invisible) to 1 (no shrink) 184 | const shrink = sc.interpolate({ 185 | inputRange: [0, 1], 186 | outputRange: [0, 1], 187 | extrapolate: 'clamp', 188 | }); 189 | 190 | return ( 191 | { 203 | // The actual size of the indicator is different from the given indSize 204 | // due to size changes in the parent components 205 | refs.actualIndSize.current = horizontal 206 | ? e.nativeEvent.layout.width 207 | : e.nativeEvent.layout.height; 208 | }} 209 | {...panResponder.panHandlers} 210 | /> 211 | ); 212 | }; 213 | -------------------------------------------------------------------------------- /src/ScrollIndicator.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | import * as React from 'react'; 5 | import { 6 | Animated, 7 | ScrollView, 8 | FlatList, 9 | ViewStyle, 10 | FlatListProps, 11 | ScrollViewProps, 12 | View, 13 | LayoutChangeEvent, 14 | NativeSyntheticEvent, 15 | NativeScrollEvent, 16 | } from 'react-native'; 17 | import { Indicator } from './Indicator'; 18 | import { getLocStyle } from './functions'; 19 | 20 | type PropsT = { 21 | target: 'ScrollView' | 'FlatList'; 22 | targetProps: ScrollViewProps | (ScrollViewProps & FlatListProps); 23 | position: string | number; // position of the indicator 24 | horizontal: boolean; // whether the scrolling direction is horizontal 25 | persistentScrollbar: boolean; // whether to persist scroll indicator 26 | indStyle: ViewStyle; // style of the scroll indicator 27 | containerStyle: ViewStyle; // style of the parent container that holds both the indicator and the scrollable component 28 | children?: React.ReactNode | React.ReactNode[]; // used for ScrollView only 29 | }; 30 | 31 | export const ScrollIndicator = (props: PropsT) => { 32 | const { 33 | target, 34 | targetProps, 35 | position, 36 | horizontal, 37 | persistentScrollbar, 38 | indStyle, 39 | containerStyle, 40 | } = props; 41 | 42 | // total size of the content if rendered 43 | const [contentSize, setContentSize] = React.useState(1); 44 | // size of the visible part of the content, i.e., size of the scroll view 45 | // itself. 46 | const [visibleSize, setVisibleSize] = React.useState(0); 47 | // the size orthogonal to visibleSize, for use in computing the position of 48 | // the indicator 49 | const [orthSize, setOrthSize] = React.useState(0); 50 | 51 | // parent view position. Parent view is the component that holds both the 52 | // scroll indicator and the scrollable component 53 | const parentRef = React.useRef(null); 54 | const [parentPos, setParentPos] = React.useState({ 55 | pageX: 0, 56 | pageY: 0, 57 | ready: false, 58 | }); 59 | 60 | // scroll container refs. Use this to manually scroll the scrollable 61 | // component when dragging the indicator 62 | const scrollRefs = { 63 | FlatList: React.useRef(null), 64 | ScrollView: React.useRef(null), 65 | }; 66 | 67 | // height or width of the indicator, if it is vertical or horizontal, 68 | // respectively. If there is more content than visible on the view, the 69 | // proportion of indSize to visibleSize is the same as the visibleSize to 70 | // contentSize. Otherwise, set the indSize the same as visibleSize. 71 | const indSize = 72 | contentSize > visibleSize 73 | ? (visibleSize * visibleSize) / contentSize 74 | : visibleSize; 75 | 76 | // the amount of distance the indicator needs to travel during scrolling 77 | // without any shrinking 78 | const diff = visibleSize > indSize ? visibleSize - indSize : 1; 79 | 80 | // distance that the top or left of the indicator needs to travel in 81 | // accordance with scrolling 82 | const d = React.useRef(new Animated.Value(0)).current; 83 | // the scale that the indicator needs to shrink if scrolling beyond the end 84 | const sc = React.useRef(new Animated.Value(1)).current; 85 | 86 | /**************************************************** 87 | * Callbacks shared by both Flatlist and Scrollview 88 | ****************************************************/ 89 | const configContentSize = (w: number, h: number) => { 90 | // total size of the content 91 | setContentSize(horizontal ? w : h); 92 | }; 93 | 94 | const configVisibleSize = (e: LayoutChangeEvent) => { 95 | // layout of the visible part of the scroll view 96 | setVisibleSize( 97 | horizontal ? e.nativeEvent.layout.width : e.nativeEvent.layout.height, 98 | ); 99 | setOrthSize( 100 | horizontal ? e.nativeEvent.layout.height : e.nativeEvent.layout.width, 101 | ); 102 | }; 103 | 104 | const configOnScroll = (e: NativeSyntheticEvent) => { 105 | /** 106 | * obtain contentOffset, which is the distance from the top or left 107 | * of the content to the top or left of the scroll view. 108 | * contentOffset gets bigger if user scrolls up or left (i.e. 109 | * content goes up or left), 110 | * otherwise smaller. It is possible for contentOffset to be 111 | * negative, if user scrolls down or right until there is empty 112 | * space above or to the left of the content. 113 | * indicatorOffset is computed similarly to indSize, in which the 114 | * proportion of the amount of distance to travel by the indicator 115 | * to the container size is the same as the proportion of the 116 | * container size to total size. 117 | */ 118 | const indicatorOffset = 119 | ((horizontal 120 | ? e.nativeEvent.contentOffset.x 121 | : e.nativeEvent.contentOffset.y) * 122 | visibleSize) / 123 | contentSize; 124 | d.setValue(indicatorOffset); 125 | /** 126 | * What we desire is that when the indicator touches the edge, it 127 | * shrinks in size while maintaining the contact to the edge if 128 | * user scrolls in the same direction further. 129 | * If we don't move the indicator, after shrinking, there will be a 130 | * gap of size 131 | * 132 | * (indSize - indSize * sc) / 2 133 | * 134 | * between the end of the indicator and the edge of the container. 135 | * To make the end of the indicator maintain contact to the edge, 136 | * the indicator must move in the same rate as the gap appears. 137 | * 138 | * If we scroll down or right, we have the following relationship 139 | * 140 | * indicatorOffset = diff + (indSize - indSize * sc) / 2 141 | * 142 | * If we scroll up or left, we have a slightly different 143 | * relationship 144 | * 145 | * indicatorOffset = (indSize - indSize * sc) / 2 146 | * 147 | * From these two relationship, we can compute sc based on 148 | * indicatorOffset. 149 | */ 150 | sc.setValue( 151 | indicatorOffset >= 0 152 | ? (indSize + 2 * diff - 2 * indicatorOffset) / indSize 153 | : (indSize + 2 * indicatorOffset) / indSize, 154 | ); 155 | }; 156 | 157 | return ( 158 | { 162 | if (parentRef.current) { 163 | parentRef.current?.measure((_1, _2, _3, _4, pageX, pageY) => { 164 | setParentPos({ 165 | pageX: pageX, 166 | pageY: pageY, 167 | ready: true, 168 | }); 169 | }); 170 | } 171 | }}> 172 | {target === 'FlatList' ? ( 173 | )} 175 | ref={scrollRefs.FlatList} 176 | horizontal={horizontal} 177 | showsVerticalScrollIndicator={false} 178 | showsHorizontalScrollIndicator={false} 179 | onContentSizeChange={configContentSize} 180 | onLayout={e => { 181 | configVisibleSize(e); 182 | if ( 183 | 'onLayout' in targetProps && 184 | typeof targetProps.onLayout === 'function' 185 | ) { 186 | targetProps.onLayout(e); 187 | } 188 | }} 189 | scrollEventThrottle={16} 190 | onScroll={e => { 191 | configOnScroll(e); 192 | if ( 193 | 'onScroll' in targetProps && 194 | typeof targetProps.onScroll === 'function' 195 | ) { 196 | targetProps.onScroll(e); 197 | } 198 | }} 199 | /> 200 | ) : ( 201 | // The logic for ScrollView is exactly the same as FlatList 202 | { 210 | configVisibleSize(e); 211 | if ( 212 | 'onLayout' in targetProps && 213 | typeof targetProps.onLayout === 'function' 214 | ) { 215 | targetProps.onLayout(e); 216 | } 217 | }} 218 | scrollEventThrottle={16} 219 | onScroll={e => { 220 | configOnScroll(e); 221 | if ( 222 | 'onScroll' in targetProps && 223 | typeof targetProps.onScroll === 'function' 224 | ) { 225 | targetProps.onScroll(e); 226 | } 227 | }}> 228 | {props.children} 229 | 230 | )} 231 | {(persistentScrollbar || indSize < visibleSize) && parentPos.ready && ( 232 | 257 | )} 258 | 259 | ); 260 | }; 261 | -------------------------------------------------------------------------------- /src/__tests__/index.test.tsx: -------------------------------------------------------------------------------- 1 | it.todo('write a test'); 2 | -------------------------------------------------------------------------------- /src/functions.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Compute the position of the indicator given the size of the container it is 3 | * located, its girth, and the desired position. The goal is to place the 4 | * center line of the indicator (vertical if the indicator moves in vertical 5 | * direction, horizontal otherwise) at the desired position. If, by doing so, 6 | * part of the indicator will be overflowing the container, clamp it such that 7 | * the indicator is flush with the edge of the container. 8 | * @param containerSize size of the container orthogonal to the direction of 9 | * the indicator, i.e., if indicator is vertical, the size will be the width 10 | * of the container, otherwise height. 11 | * @param indGirth the width or height of the indicator if it is vertical or 12 | * horizontal, respectively. 13 | * @param position desired position of the indicator, as a percentage of the 14 | * container. e.g. 20 means we want to place a vertical indicator's center line 15 | * at 20% of the container's width. 16 | * @returns the absolute position of the indicator as used in the style for 17 | * top (indicator is horizontal) or left (indicator is vertical) 18 | */ 19 | const getIndPosition = ( 20 | containerSize: number, 21 | indGirth: number, 22 | position: number, 23 | ) => 24 | Math.max( 25 | 0, 26 | Math.min( 27 | (position / 100) * containerSize - (indGirth as number) / 2, 28 | containerSize - (indGirth as number), 29 | ), 30 | ); 31 | 32 | /** 33 | * Get default position when it is not supplied by the user 34 | * @param horizontal whether the indicator is horizontal 35 | * @param position desired position of the indicator, as a percentage of the 36 | * container. e.g. 20 means we want to place a vertical indicator's center line 37 | * at 20% of the container's width. If user has not specified it, it will have 38 | * the value of empty string. 39 | * @returns default position if it has not been supplied 40 | */ 41 | export const getDefaultPosition = ( 42 | horizontal: boolean, 43 | position: string | number, 44 | ) => { 45 | let posi = position; 46 | if (horizontal && position === '') { 47 | posi = 'bottom'; 48 | } else if (!horizontal && position === '') { 49 | posi = 'right'; 50 | } 51 | return posi; 52 | }; 53 | 54 | /** 55 | * get the style for indicator's location. 56 | * @param horizontal whether the indicator is horizontal 57 | * @param position desired position of the indicator, as a percentage of the 58 | * container. e.g. 20 means we want to place a vertical indicator's center line 59 | * at 20% of the container's width. 60 | * @param orthSize the size of the content view orthogonal to that of the 61 | * scrolling direction. e.g. if the scrolling is vertical, orthSize is the 62 | * content view's width, otherwise height. 63 | * @param indGirth the girth of the indicator, which is width for vertical 64 | * indicator, or height for horizontal indicator 65 | * @returns the location style of the indicator, which includes a numeric value 66 | * for top, bottom, left, or right. 67 | */ 68 | export const getLocStyle = ( 69 | horizontal: boolean, 70 | position: string | number, 71 | orthSize: number, 72 | indGirth: number, 73 | ) => { 74 | let locStyle; 75 | if (horizontal) { 76 | if (typeof position === 'string' && ['top', 'bottom'].includes(position)) { 77 | locStyle = {[position]: 0}; 78 | } else if (typeof position === 'number') { 79 | locStyle = { 80 | top: getIndPosition(orthSize, indGirth, position), 81 | }; 82 | } else { 83 | throw Error( 84 | '"position" must be one of "top", "buttom", or a floating number when the scroll view is horizontal', 85 | ); 86 | } 87 | } else { 88 | if (typeof position === 'string' && ['left', 'right'].includes(position)) { 89 | locStyle = {[position]: 0}; 90 | } else if (typeof position === 'number') { 91 | locStyle = { 92 | left: getIndPosition(orthSize, indGirth as number, position), 93 | }; 94 | } else { 95 | throw Error( 96 | '"position" must be one of "left", "right", or a floating number when the scroll view is vertical', 97 | ); 98 | } 99 | } 100 | return locStyle; 101 | }; 102 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react-native/no-inline-styles */ 2 | /** 3 | * @format 4 | */ 5 | import * as React from 'react'; 6 | import { ScrollIndicator } from './ScrollIndicator'; 7 | 8 | import type { FlatListProps, ScrollViewProps, ViewStyle } from 'react-native'; 9 | import { getDefaultPosition } from './functions'; 10 | 11 | type ScrollViewPropsT = { 12 | position?: string | number; 13 | horizontal?: boolean; 14 | persistentScrollbar?: boolean; 15 | indStyle?: ViewStyle; 16 | containerStyle?: ViewStyle; 17 | scrollViewProps?: ScrollViewProps; 18 | children?: React.ReactNode | React.ReactNode[]; 19 | }; 20 | 21 | export const ScrollViewIndicator = (props: ScrollViewPropsT) => { 22 | const { 23 | position = '', 24 | horizontal = false, 25 | persistentScrollbar = false, 26 | indStyle: { width = 5, ...indStyle } = {}, 27 | containerStyle = {}, 28 | scrollViewProps = {}, 29 | } = props; 30 | 31 | return ( 32 | 45 | {props.children} 46 | 47 | ); 48 | }; 49 | 50 | type FlatListPropsT = { 51 | flatListProps: ScrollViewProps & FlatListProps; 52 | position?: string | number; 53 | horizontal?: boolean; 54 | persistentScrollbar?: boolean; 55 | indStyle?: ViewStyle; 56 | containerStyle?: ViewStyle; 57 | }; 58 | 59 | export const FlatListIndicator = (props: FlatListPropsT) => { 60 | const { 61 | flatListProps, 62 | position = '', 63 | horizontal = false, 64 | persistentScrollbar = false, 65 | indStyle: { width = 5, ...indStyle } = {}, 66 | containerStyle = {}, 67 | } = props; 68 | 69 | return ( 70 | 84 | ); 85 | }; 86 | -------------------------------------------------------------------------------- /tsconfig.build.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "extends": "./tsconfig", 4 | "exclude": ["example"] 5 | } 6 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "./", 4 | "paths": { 5 | "@fanchenbao/react-native-scroll-indicator": ["./src/index"] 6 | }, 7 | "allowUnreachableCode": false, 8 | "allowUnusedLabels": false, 9 | "esModuleInterop": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "jsx": "react", 12 | "lib": ["esnext"], 13 | "module": "esnext", 14 | "moduleResolution": "node", 15 | "noFallthroughCasesInSwitch": true, 16 | "noImplicitReturns": true, 17 | "noImplicitUseStrict": false, 18 | "noStrictGenericChecks": false, 19 | "noUncheckedIndexedAccess": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "resolveJsonModule": true, 23 | "skipLibCheck": true, 24 | "strict": true, 25 | "target": "esnext" 26 | } 27 | } 28 | --------------------------------------------------------------------------------