├── .editorconfig ├── .gitattributes ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── bug_report.yml │ ├── config.yml │ ├── custom.md │ └── feature_request.md ├── actions │ └── setup │ │ └── action.yml └── workflows │ └── ci.yml ├── .gitignore ├── .nvmrc ├── .watchmanconfig ├── .yarn ├── plugins │ └── @yarnpkg │ │ ├── plugin-interactive-tools.cjs │ │ └── plugin-workspace-tools.cjs └── releases │ └── yarn-3.6.1.cjs ├── .yarnrc.yml ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── android ├── build.gradle ├── gradle.properties └── src │ ├── main │ ├── AndroidManifest.xml │ ├── AndroidManifestNew.xml │ ├── java │ │ └── com │ │ │ └── autoskeleton │ │ │ ├── AutoSkeletonIgnoreView.kt │ │ │ ├── AutoSkeletonView.kt │ │ │ ├── AutoSkeletonViewPackage.kt │ │ │ └── ViewManagerProvider.kt │ └── res │ │ └── values │ │ └── ids.xml │ ├── newArch │ └── java │ │ └── com │ │ └── autoskeleton │ │ ├── AutoSkeletonIgnoreViewManager.kt │ │ └── AutoSkeletonViewManager.kt │ └── oldArch │ └── java │ └── com │ └── autoskeleton │ ├── AutoSkeletonIgnoreViewManager.kt │ └── AutoSkeletonViewManager.kt ├── app.plugin.js ├── assets └── demo.gif ├── babel.config.js ├── example ├── .bundle │ └── config ├── .watchmanconfig ├── Gemfile ├── README.md ├── android │ ├── app │ │ ├── build.gradle │ │ ├── debug.keystore │ │ ├── proguard-rules.pro │ │ └── src │ │ │ ├── debug │ │ │ └── AndroidManifest.xml │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── java │ │ │ └── autoskeleton │ │ │ │ └── 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 ├── assets │ └── avatar.png ├── babel.config.js ├── index.js ├── ios │ ├── .xcode.env │ ├── AutoSkeletonExample-Bridging-Header.h │ ├── AutoSkeletonExample.xcodeproj │ │ ├── project.pbxproj │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ └── AutoSkeletonExample.xcscheme │ ├── AutoSkeletonExample.xcworkspace │ │ └── contents.xcworkspacedata │ ├── AutoSkeletonExample │ │ ├── AppDelegate.swift │ │ ├── Images.xcassets │ │ │ ├── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ │ └── Contents.json │ │ ├── Info.plist │ │ ├── LaunchScreen.storyboard │ │ └── PrivacyInfo.xcprivacy │ ├── File.swift │ ├── Podfile │ └── Podfile.lock ├── jest.config.js ├── metro.config.js ├── package.json ├── react-native.config.js └── src │ └── App.tsx ├── ios ├── React │ ├── AutoSkeleton-Bridging-Header.h │ ├── AutoSkeletonIgnoreView.h │ ├── AutoSkeletonIgnoreView.mm │ ├── AutoSkeletonView.h │ ├── AutoSkeletonView.mm │ └── AutoSkeletonViewManager.mm └── SkeletonView │ ├── Animations │ ├── AnimationBase.swift │ ├── AnimationGradient.swift │ ├── AnimationNone.swift │ └── AnimationPulse.swift │ ├── Constants.swift │ ├── SkeletonCore.swift │ ├── SkeletonPlaceholderMask.swift │ ├── SkeletonProtocols.swift │ ├── SkeletonViewFabric.swift │ └── SkeletonViewOldArch.swift ├── package.json ├── react-native-auto-skeleton.podspec ├── react-native.config.js ├── src ├── AutoSkeletonIgnoreViewNativeComponent.ts ├── AutoSkeletonViewNativeComponent.ts ├── expo-plugins │ └── withAutoSkeleton.js └── index.tsx ├── tsconfig.build.json ├── tsconfig.json ├── turbo.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 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | # specific for windows script files 3 | *.bat text eol=crlf -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [pioner92] 4 | buy_me_a_coffee: pioner92 5 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.yml: -------------------------------------------------------------------------------- 1 | name: 🐛 Bug report 2 | description: Report a reproducible bug or regression in this library. 3 | labels: [bug] 4 | body: 5 | - type: markdown 6 | attributes: 7 | value: | 8 | # Bug report 9 | 10 | 👋 Hi! 11 | 12 | **Please fill the following carefully before opening a new issue ❗** 13 | *(Your issue may be closed if it doesn't provide the required pieces of information)* 14 | - type: checkboxes 15 | attributes: 16 | label: Before submitting a new issue 17 | description: Please perform simple checks first. 18 | options: 19 | - label: I tested using the latest version of the library, as the bug might be already fixed. 20 | required: true 21 | - label: I tested using a [supported version](https://github.com/reactwg/react-native-releases/blob/main/docs/support.md) of react native. 22 | required: true 23 | - label: I checked for possible duplicate issues, with possible answers. 24 | required: true 25 | - type: textarea 26 | id: summary 27 | attributes: 28 | label: Bug summary 29 | description: | 30 | Provide a clear and concise description of what the bug is. 31 | If needed, you can also provide other samples: error messages / stack traces, screenshots, gifs, etc. 32 | validations: 33 | required: true 34 | - type: input 35 | id: library-version 36 | attributes: 37 | label: Library version 38 | description: What version of the library are you using? 39 | placeholder: "x.x.x" 40 | validations: 41 | required: true 42 | - type: textarea 43 | id: react-native-info 44 | attributes: 45 | label: Environment info 46 | description: Run `react-native info` in your terminal and paste the results here. 47 | render: shell 48 | validations: 49 | required: true 50 | - type: textarea 51 | id: steps-to-reproduce 52 | attributes: 53 | label: Steps to reproduce 54 | description: | 55 | You must provide a clear list of steps and code to reproduce the problem. 56 | value: | 57 | 1. … 58 | 2. … 59 | validations: 60 | required: true 61 | - type: input 62 | id: reproducible-example 63 | attributes: 64 | label: Reproducible example repository 65 | description: Please provide a link to a repository on GitHub with a reproducible example. 66 | render: js 67 | validations: 68 | required: true 69 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: Feature Request 💡 4 | url: https://github.com/pioner92/react-native-auto-skeleton/discussions/new?category=ideas 5 | about: If you have a feature request, please create a new discussion on GitHub. 6 | - name: Discussions on GitHub 💬 7 | url: https://github.com/pioner92/react-native-auto-skeleton/discussions 8 | about: If this library works as promised but you need help, please ask questions there. 9 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/custom.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Custom issue template 3 | about: Describe this issue template's purpose here. 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | 11 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.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@v4 9 | with: 10 | node-version-file: .nvmrc 11 | 12 | - name: Restore dependencies 13 | id: yarn-cache 14 | uses: actions/cache/restore@v4 15 | with: 16 | path: | 17 | **/node_modules 18 | .yarn/install-state.gz 19 | key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}-${{ hashFiles('**/package.json', '!node_modules/**') }} 20 | restore-keys: | 21 | ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }} 22 | ${{ runner.os }}-yarn- 23 | 24 | - name: Install dependencies 25 | if: steps.yarn-cache.outputs.cache-hit != 'true' 26 | run: yarn install --immutable 27 | shell: bash 28 | 29 | - name: Cache dependencies 30 | if: steps.yarn-cache.outputs.cache-hit != 'true' 31 | uses: actions/cache/save@v4 32 | with: 33 | path: | 34 | **/node_modules 35 | .yarn/install-state.gz 36 | key: ${{ steps.yarn-cache.outputs.cache-primary-key }} 37 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | on: 3 | push: 4 | branches: 5 | - main 6 | pull_request: 7 | branches: 8 | - main 9 | merge_group: 10 | types: 11 | - checks_requested 12 | 13 | jobs: 14 | lint: 15 | runs-on: ubuntu-latest 16 | steps: 17 | - name: Checkout 18 | uses: actions/checkout@v4 19 | 20 | - name: Setup 21 | uses: ./.github/actions/setup 22 | 23 | - name: Lint files 24 | run: yarn lint 25 | 26 | - name: Typecheck files 27 | run: yarn typecheck 28 | 29 | test: 30 | runs-on: ubuntu-latest 31 | steps: 32 | - name: Checkout 33 | uses: actions/checkout@v4 34 | 35 | - name: Setup 36 | uses: ./.github/actions/setup 37 | 38 | - name: Run unit tests 39 | run: yarn test --maxWorkers=2 --coverage 40 | 41 | build-library: 42 | runs-on: ubuntu-latest 43 | steps: 44 | - name: Checkout 45 | uses: actions/checkout@v4 46 | 47 | - name: Setup 48 | uses: ./.github/actions/setup 49 | 50 | - name: Build package 51 | run: yarn prepare 52 | 53 | build-android: 54 | runs-on: ubuntu-latest 55 | env: 56 | TURBO_CACHE_DIR: .turbo/android 57 | steps: 58 | - name: Checkout 59 | uses: actions/checkout@v4 60 | 61 | - name: Setup 62 | uses: ./.github/actions/setup 63 | 64 | - name: Cache turborepo for Android 65 | uses: actions/cache@v4 66 | with: 67 | path: ${{ env.TURBO_CACHE_DIR }} 68 | key: ${{ runner.os }}-turborepo-android-${{ hashFiles('yarn.lock') }} 69 | restore-keys: | 70 | ${{ runner.os }}-turborepo-android- 71 | 72 | - name: Check turborepo cache for Android 73 | run: | 74 | TURBO_CACHE_STATUS=$(node -p "($(yarn turbo run build:android --cache-dir="${{ env.TURBO_CACHE_DIR }}" --dry=json)).tasks.find(t => t.task === 'build:android').cache.status") 75 | 76 | if [[ $TURBO_CACHE_STATUS == "HIT" ]]; then 77 | echo "turbo_cache_hit=1" >> $GITHUB_ENV 78 | fi 79 | 80 | - name: Install JDK 81 | if: env.turbo_cache_hit != 1 82 | uses: actions/setup-java@v4 83 | with: 84 | distribution: 'zulu' 85 | java-version: '17' 86 | 87 | - name: Finalize Android SDK 88 | if: env.turbo_cache_hit != 1 89 | run: | 90 | /bin/bash -c "yes | $ANDROID_HOME/cmdline-tools/latest/bin/sdkmanager --licenses > /dev/null" 91 | 92 | - name: Cache Gradle 93 | if: env.turbo_cache_hit != 1 94 | uses: actions/cache@v4 95 | with: 96 | path: | 97 | ~/.gradle/wrapper 98 | ~/.gradle/caches 99 | key: ${{ runner.os }}-gradle-${{ hashFiles('example/android/gradle/wrapper/gradle-wrapper.properties') }} 100 | restore-keys: | 101 | ${{ runner.os }}-gradle- 102 | 103 | - name: Build example for Android 104 | env: 105 | JAVA_OPTS: "-XX:MaxHeapSize=6g" 106 | run: | 107 | yarn turbo run build:android --cache-dir="${{ env.TURBO_CACHE_DIR }}" 108 | 109 | build-ios: 110 | runs-on: macos-latest 111 | env: 112 | TURBO_CACHE_DIR: .turbo/ios 113 | steps: 114 | - name: Checkout 115 | uses: actions/checkout@v4 116 | 117 | - name: Setup 118 | uses: ./.github/actions/setup 119 | 120 | - name: Cache turborepo for iOS 121 | uses: actions/cache@v4 122 | with: 123 | path: ${{ env.TURBO_CACHE_DIR }} 124 | key: ${{ runner.os }}-turborepo-ios-${{ hashFiles('yarn.lock') }} 125 | restore-keys: | 126 | ${{ runner.os }}-turborepo-ios- 127 | 128 | - name: Check turborepo cache for iOS 129 | run: | 130 | TURBO_CACHE_STATUS=$(node -p "($(yarn turbo run build:ios --cache-dir="${{ env.TURBO_CACHE_DIR }}" --dry=json)).tasks.find(t => t.task === 'build:ios').cache.status") 131 | 132 | if [[ $TURBO_CACHE_STATUS == "HIT" ]]; then 133 | echo "turbo_cache_hit=1" >> $GITHUB_ENV 134 | fi 135 | 136 | - name: Restore cocoapods 137 | if: env.turbo_cache_hit != 1 138 | id: cocoapods-cache 139 | uses: actions/cache/restore@v4 140 | with: 141 | path: | 142 | **/ios/Pods 143 | key: ${{ runner.os }}-cocoapods-${{ hashFiles('example/ios/Podfile.lock') }} 144 | restore-keys: | 145 | ${{ runner.os }}-cocoapods- 146 | 147 | - name: Install cocoapods 148 | if: env.turbo_cache_hit != 1 && steps.cocoapods-cache.outputs.cache-hit != 'true' 149 | run: | 150 | cd example/ios 151 | pod install 152 | env: 153 | NO_FLIPPER: 1 154 | 155 | - name: Cache cocoapods 156 | if: env.turbo_cache_hit != 1 && steps.cocoapods-cache.outputs.cache-hit != 'true' 157 | uses: actions/cache/save@v4 158 | with: 159 | path: | 160 | **/ios/Pods 161 | key: ${{ steps.cocoapods-cache.outputs.cache-key }} 162 | 163 | - name: Build example for iOS 164 | run: | 165 | yarn turbo run build:ios --cache-dir="${{ env.TURBO_CACHE_DIR }}" 166 | -------------------------------------------------------------------------------- /.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 | **/.xcode.env.local 32 | 33 | # Android/IJ 34 | # 35 | .classpath 36 | .cxx 37 | .gradle 38 | .idea 39 | .project 40 | .settings 41 | local.properties 42 | android.iml 43 | 44 | # Cocoapods 45 | # 46 | example/ios/Pods 47 | 48 | # Ruby 49 | example/vendor/ 50 | 51 | # node.js 52 | # 53 | node_modules/ 54 | npm-debug.log 55 | yarn-debug.log 56 | yarn-error.log 57 | 58 | # BUCK 59 | buck-out/ 60 | \.buckd/ 61 | android/app/libs 62 | android/keystores/debug.keystore 63 | 64 | # Yarn 65 | .yarn/* 66 | !.yarn/patches 67 | !.yarn/plugins 68 | !.yarn/releases 69 | !.yarn/sdks 70 | !.yarn/versions 71 | 72 | # Expo 73 | .expo/ 74 | 75 | # Turborepo 76 | .turbo/ 77 | 78 | # generated by bob 79 | lib/ 80 | 81 | # React Native Codegen 82 | ios/generated 83 | android/generated 84 | 85 | # React Native Nitro Modules 86 | nitrogen/ 87 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v20 2 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | nodeLinker: node-modules 2 | nmHoistingLimits: workspaces 3 | 4 | plugins: 5 | - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs 6 | spec: "@yarnpkg/plugin-interactive-tools" 7 | - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs 8 | spec: "@yarnpkg/plugin-workspace-tools" 9 | 10 | yarnPath: .yarn/releases/yarn-3.6.1.cjs 11 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Contributions are always welcome, no matter how large or small! 4 | 5 | We want this community to be friendly and respectful to each other. Please follow it in all your interactions with the project. Before contributing, please read the [code of conduct](./CODE_OF_CONDUCT.md). 6 | 7 | ## Development workflow 8 | 9 | This project is a monorepo managed using [Yarn workspaces](https://yarnpkg.com/features/workspaces). It contains the following packages: 10 | 11 | - The library package in the root directory. 12 | - An example app in the `example/` directory. 13 | 14 | To get started with the project, run `yarn` in the root directory to install the required dependencies for each package: 15 | 16 | ```sh 17 | yarn 18 | ``` 19 | 20 | > Since the project relies on Yarn workspaces, you cannot use [`npm`](https://github.com/npm/cli) for development. 21 | 22 | The [example app](/example/) demonstrates usage of the library. You need to run it to test any changes you make. 23 | 24 | It is configured to use the local version of the library, so any changes you make to the library's source code will be reflected in the example app. Changes to the library's JavaScript code will be reflected in the example app without a rebuild, but native code changes will require a rebuild of the example app. 25 | 26 | If you want to use Android Studio or XCode to edit the native code, you can open the `example/android` or `example/ios` directories respectively in those editors. To edit the Objective-C or Swift files, open `example/ios/AutoSkeletonExample.xcworkspace` in XCode and find the source files at `Pods > Development Pods > react-native-auto-skeleton`. 27 | 28 | To edit the Java or Kotlin files, open `example/android` in Android studio and find the source files at `react-native-auto-skeleton` under `Android`. 29 | 30 | You can use various commands from the root directory to work with the project. 31 | 32 | To start the packager: 33 | 34 | ```sh 35 | yarn example start 36 | ``` 37 | 38 | To run the example app on Android: 39 | 40 | ```sh 41 | yarn example android 42 | ``` 43 | 44 | To run the example app on iOS: 45 | 46 | ```sh 47 | yarn example ios 48 | ``` 49 | 50 | To confirm that the app is running with the new architecture, you can check the Metro logs for a message like this: 51 | 52 | ```sh 53 | Running "AutoSkeletonExample" with {"fabric":true,"initialProps":{"concurrentRoot":true},"rootTag":1} 54 | ``` 55 | 56 | Note the `"fabric":true` and `"concurrentRoot":true` properties. 57 | 58 | Make sure your code passes TypeScript and ESLint. Run the following to verify: 59 | 60 | ```sh 61 | yarn typecheck 62 | yarn lint 63 | ``` 64 | 65 | To fix formatting errors, run the following: 66 | 67 | ```sh 68 | yarn lint --fix 69 | ``` 70 | 71 | Remember to add tests for your change if possible. Run the unit tests by: 72 | 73 | ```sh 74 | yarn test 75 | ``` 76 | 77 | ### Commit message convention 78 | 79 | We follow the [conventional commits specification](https://www.conventionalcommits.org/en) for our commit messages: 80 | 81 | - `fix`: bug fixes, e.g. fix crash due to deprecated method. 82 | - `feat`: new features, e.g. add new method to the module. 83 | - `refactor`: code refactor, e.g. migrate from class components to hooks. 84 | - `docs`: changes into documentation, e.g. add usage example for the module.. 85 | - `test`: adding or updating tests, e.g. add integration tests using detox. 86 | - `chore`: tooling changes, e.g. change CI config. 87 | 88 | Our pre-commit hooks verify that your commit message matches this format when committing. 89 | 90 | ### Linting and tests 91 | 92 | [ESLint](https://eslint.org/), [Prettier](https://prettier.io/), [TypeScript](https://www.typescriptlang.org/) 93 | 94 | 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. 95 | 96 | Our pre-commit hooks verify that the linter and tests pass when committing. 97 | 98 | ### Publishing to npm 99 | 100 | 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. 101 | 102 | To publish new versions, run the following: 103 | 104 | ```sh 105 | yarn release 106 | ``` 107 | 108 | ### Scripts 109 | 110 | The `package.json` file contains various scripts for common tasks: 111 | 112 | - `yarn`: setup project by installing dependencies. 113 | - `yarn typecheck`: type-check files with TypeScript. 114 | - `yarn lint`: lint files with ESLint. 115 | - `yarn test`: run unit tests with Jest. 116 | - `yarn example start`: start the Metro server for the example app. 117 | - `yarn example android`: run the example app on Android. 118 | - `yarn example ios`: run the example app on iOS. 119 | 120 | ### Sending a pull request 121 | 122 | > **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). 123 | 124 | When you're sending a pull request: 125 | 126 | - Prefer small pull requests focused on one change. 127 | - Verify that linters and tests are passing. 128 | - Review the documentation to make sure it looks good. 129 | - Follow the pull request template when opening a pull request. 130 | - For pull requests that change the API or implementation, discuss with maintainers first by opening an issue. 131 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 pioner921227 4 | Permission is hereby granted, free of charge, to any person obtaining a copy 5 | of this software and associated documentation files (the "Software"), to deal 6 | in the Software without restriction, including without limitation the rights 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the Software is 9 | furnished to do so, subject to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be included in all 12 | copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 20 | SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Native Auto Skeleton – Lightweight Skeleton Loader for React Native 2 | 3 | **`react-native-auto-skeleton`** is a modern **skeleton loader for React Native**, designed to automatically render **loading placeholders** (shimmer-style) based on your existing layout. 4 | 5 | > Ideal replacement for `react-native-skeleton-placeholder` and other manual solutions. 6 | 7 | 8 |
9 | 10 | npm version 11 | 12 | 13 | npm downloads 14 | 15 | iOS 16 | Android 17 | TypeScript 18 | MIT License 19 | 20 | Bundle size 21 | 22 |
23 | 24 | ## Demo 25 |

26 | react-native-auto-skeleton demo 27 |

28 | 29 | ## ✅ Platform Support 30 | 31 | | Platform | Old Arch | Fabric | 32 | |----------|----------|--------| 33 | | iOS | ✅ | ✅ | 34 | | Android | ✅ | ✅ | 35 | 36 | ## Installation 37 | 38 | Using npm: 39 | ```bash 40 | npm install react-native-auto-skeleton 41 | ``` 42 | 43 | Using yarn: 44 | ```bash 45 | yarn add react-native-auto-skeleton 46 | ``` 47 | ### Expo 48 | This library works in Expo (with `expo prebuild`) without additional configuration. 49 | 50 | ## Usage 51 | 52 | > ⚠️ **Warning:** On Android, automatic detection of a view’s border-radius is not supported. You can override it manually via the defaultRadius prop. 53 | 54 | Here's a quick example to get started: 55 | 56 | 57 | ```tsx 58 | 59 | import { AutoSkeletonView, AutoSkeletonIgnoreView } from 'react-native-auto-skeleton'; 60 | ... 61 | 62 | 63 | ...YOUR VIEWS 64 | // Content that will be ignored by the skeleton 65 | ... Views without skeleton 66 | 67 | 68 | ``` 69 | 70 | Full example 71 | 72 | ```tsx 73 | import { AutoSkeletonView } from 'react-native-auto-skeleton'; 74 | 75 | interface IProfile { 76 | name: string; 77 | jobTitle: string; 78 | avatar: string; 79 | } 80 | 81 | const getProfile = async (): Promise => { 82 | // Fetch profile data from your API 83 | }; 84 | 85 | export default function App() { 86 | const [isLoading, setIsLoading] = useState(true); 87 | const [profile, setProfile] = useState({} as IProfile); 88 | 89 | useEffect(() => { 90 | (async () => { 91 | const res = await getProfile(); 92 | setProfile(res); 93 | setIsLoading(false); 94 | })(); 95 | }, []); 96 | 97 | return ( 98 | 99 | 100 | 101 | 102 | {profile.name} 103 | {profile.jobTitle} 104 | 105 | 106 | 107 | {/* This buttons block will have skeleton applied */} 108 | 109 | 110 | Add 111 | 112 | 113 | Delete 114 | 115 | 116 | 117 | {/* Alternatively, to exclude buttons from skeleton rendering: */} 118 | 119 | 120 | ... 121 | 122 | 123 | 124 | ); 125 | } 126 | ``` 127 | 128 | ## API 129 | | Prop | type | Description | 130 | |---|---|---| 131 | | **isLoading** | boolean | Enables or disables the skeleton state| 132 | | **shimmerSpeed** | number | Duration of one shimmer animation cycle in seconds. Lower values = faster shimmer | 133 | | **shimmerBackgroundColor** | string | Background color for animation types: `pulse` and `none` | 134 | | **gradientColors** | [string,string] | Gradient colors for the skeleton gradient | 135 | | **defaultRadius** | number | Default corner radius for skeleton elements that don't have a defined `borderRadius` | | 136 | | **animationType** | `"gradient"` \| `"pulse"` \| `"none"` | Skeleton animation | | 137 | 138 | ## Best Practices 139 | 140 | - For rapid implementation, wrap entire UI sections with ``. 141 | - For precise control, wrap individual UI components or groups separately. 142 | - Ensure components have clearly defined dimensions, backgrounds, or styles for optimal skeleton rendering. 143 | - To exclude specific components from skeleton rendering, wrap them with ``. Any content inside this wrapper will not be processed by the skeleton system. 144 | 145 | ## 🔁 Alternative Solutions 146 | 147 | You may also know: 148 | 149 | - [`react-native-skeleton-placeholder`](https://github.com/chramos/react-native-skeleton-placeholder) 150 | - [`react-content-loader`](https://github.com/danilowoz/react-content-loader) 151 | 152 | If you're looking for a **React Native skeleton loader** that works **automatically**, with **Fabric support**, and no manual configuration, `react-native-auto-skeleton` is your go-to solution. 153 | 154 | ## License 155 | 156 | [MIT](LICENSE) 157 | 158 | --- 159 | 160 | ## 📌 Keywords 161 | 162 | React Native Skeleton, React Native Placeholder, react-native skeleton loader, react native shimmer, loading indicator React Native, Fabric placeholder view, auto skeleton view, react native content loader. 163 | -------------------------------------------------------------------------------- /android/build.gradle: -------------------------------------------------------------------------------- 1 | buildscript { 2 | ext.getExtOrDefault = {name -> 3 | return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties['AutoSkeleton_' + name] 4 | } 5 | 6 | repositories { 7 | google() 8 | mavenCentral() 9 | } 10 | 11 | dependencies { 12 | classpath "com.android.tools.build:gradle:8.7.2" 13 | // noinspection DifferentKotlinGradleVersion 14 | classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${getExtOrDefault('kotlinVersion')}" 15 | } 16 | } 17 | 18 | 19 | apply plugin: "com.android.library" 20 | apply plugin: "kotlin-android" 21 | 22 | 23 | def isNewArchitectureEnabled() { 24 | return project.hasProperty("newArchEnabled") && project.newArchEnabled == "true" 25 | } 26 | 27 | if (isNewArchitectureEnabled()) { 28 | apply plugin: "com.facebook.react" 29 | } 30 | 31 | def getExtOrIntegerDefault(name) { 32 | return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["AutoSkeleton_" + name]).toInteger() 33 | } 34 | 35 | def supportsNamespace() { 36 | def parsed = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION.tokenize('.') 37 | def major = parsed[0].toInteger() 38 | def minor = parsed[1].toInteger() 39 | 40 | // Namespace support was added in 7.3.0 41 | return (major == 7 && minor >= 3) || major >= 8 42 | } 43 | 44 | android { 45 | if (supportsNamespace()) { 46 | namespace "com.autoskeleton" 47 | 48 | sourceSets { 49 | main { 50 | manifest.srcFile "src/main/AndroidManifestNew.xml" 51 | } 52 | } 53 | } 54 | 55 | compileSdkVersion getExtOrIntegerDefault("compileSdkVersion") 56 | 57 | defaultConfig { 58 | minSdkVersion getExtOrIntegerDefault("minSdkVersion") 59 | targetSdkVersion getExtOrIntegerDefault("targetSdkVersion") 60 | buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString() 61 | } 62 | 63 | buildFeatures { 64 | buildConfig true 65 | } 66 | 67 | buildTypes { 68 | release { 69 | minifyEnabled false 70 | } 71 | } 72 | 73 | lintOptions { 74 | disable "GradleCompatible" 75 | } 76 | 77 | compileOptions { 78 | sourceCompatibility JavaVersion.VERSION_1_8 79 | targetCompatibility JavaVersion.VERSION_1_8 80 | } 81 | 82 | sourceSets { 83 | main { 84 | if (isNewArchitectureEnabled()) { 85 | java.srcDirs += ["src/newArch/java", "generated"] 86 | } else { 87 | java.srcDirs += ["src/oldArch/java"] 88 | } 89 | } 90 | } 91 | } 92 | 93 | repositories { 94 | mavenCentral() 95 | google() 96 | } 97 | 98 | def kotlin_version = getExtOrDefault("kotlinVersion") 99 | 100 | dependencies { 101 | implementation 'com.facebook.react:react-native:+' 102 | implementation "com.facebook.react:react-android" 103 | implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version" 104 | } 105 | 106 | 107 | if(isNewArchitectureEnabled()){ 108 | react { 109 | jsRootDir = file("../src/") 110 | libraryName = "AutoSkeletonView" 111 | codegenJavaPackageName = "com.autoskeleton" 112 | } 113 | } 114 | 115 | -------------------------------------------------------------------------------- /android/gradle.properties: -------------------------------------------------------------------------------- 1 | AutoSkeleton_kotlinVersion=2.0.21 2 | AutoSkeleton_minSdkVersion=24 3 | AutoSkeleton_targetSdkVersion=34 4 | AutoSkeleton_compileSdkVersion=35 5 | AutoSkeleton_ndkVersion=27.1.12297006 6 | -------------------------------------------------------------------------------- /android/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /android/src/main/AndroidManifestNew.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /android/src/main/java/com/autoskeleton/AutoSkeletonIgnoreView.kt: -------------------------------------------------------------------------------- 1 | import android.content.Context 2 | import android.util.AttributeSet 3 | import android.view.ViewGroup 4 | 5 | class AutoSkeletonIgnoreView : ViewGroup { 6 | constructor(context: Context?) : super(context) 7 | constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) 8 | constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super( 9 | context, 10 | attrs, 11 | defStyleAttr 12 | ) 13 | 14 | init { 15 | setWillNotDraw(true) 16 | } 17 | 18 | override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) { 19 | 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /android/src/main/java/com/autoskeleton/AutoSkeletonView.kt: -------------------------------------------------------------------------------- 1 | package com.autoskeleton 2 | import android.animation.ValueAnimator 3 | import android.content.Context 4 | import android.graphics.Canvas 5 | import android.graphics.Color 6 | import android.graphics.LinearGradient 7 | import android.graphics.Paint 8 | import android.graphics.Shader 9 | import android.transition.Fade 10 | import android.transition.TransitionManager 11 | import android.util.AttributeSet 12 | import android.view.View 13 | import android.view.ViewGroup 14 | import android.view.animation.LinearInterpolator 15 | import com.facebook.react.bridge.ReadableArray 16 | 17 | enum class AnimationTypes(val value: String) { 18 | GRADIENT("gradient"), 19 | PULSE("pulse"), 20 | NONE("none"); 21 | } 22 | 23 | class AutoSkeletonView : ViewGroup { 24 | constructor(context: Context?) : super(context) 25 | constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) 26 | constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super( 27 | context, 28 | attrs, 29 | defStyleAttr 30 | ) 31 | 32 | private var isLoading = false 33 | private var shimmerSpeed = 1.0f 34 | private var radius = 10f 35 | 36 | private var animationType = AnimationTypes.GRADIENT 37 | 38 | private var shapesBackgroundColor = Color.parseColor("#DDDDDD") 39 | 40 | private var colorA = Color.parseColor("#DDDDDD") 41 | 42 | private var colorB = Color.parseColor("#F3F3F3") 43 | 44 | private val paint = Paint(Paint.ANTI_ALIAS_FLAG) 45 | private var animationFraction = 0f 46 | 47 | private var animator: ValueAnimator? = null 48 | 49 | init { 50 | setWillNotDraw(false) 51 | } 52 | 53 | fun setIsLoading(value: Boolean) { 54 | if (isLoading == value) return 55 | isLoading = value 56 | 57 | if(value){ 58 | startShimmer() 59 | } 60 | else { 61 | stopShimmer() 62 | } 63 | 64 | requestLayout() 65 | invalidate() 66 | } 67 | 68 | fun setShimmerSpeed(value: Float) { 69 | shimmerSpeed = value 70 | if (isLoading) { 71 | stopShimmer() 72 | startShimmer() 73 | } 74 | } 75 | 76 | fun setShimmerBackgroundColor(value: Int?) { 77 | shapesBackgroundColor = value ?: Color.LTGRAY 78 | paint.color = shapesBackgroundColor 79 | invalidate() 80 | } 81 | 82 | fun setGradientColors(value: ReadableArray?) { 83 | if(value != null){ 84 | colorA = value.getInt(0) 85 | colorB = value.getInt(1) 86 | } 87 | invalidate() 88 | } 89 | 90 | fun setDefaultRadius(value: Float) { 91 | radius = value 92 | invalidate() 93 | } 94 | 95 | fun setAnimationType(value: String?) { 96 | animationType = AnimationTypes.values().find { 97 | it.value.equals(value, ignoreCase = true) 98 | } ?: AnimationTypes.GRADIENT 99 | 100 | paint.shader = null 101 | paint.alpha = 255 102 | invalidate() 103 | } 104 | 105 | override fun onDetachedFromWindow() { 106 | super.onDetachedFromWindow() 107 | stopShimmer() 108 | } 109 | 110 | private fun startShimmer() { 111 | if (animator != null) return 112 | 113 | animator = ValueAnimator.ofFloat(0.0f,1.0f).apply { 114 | duration = (shimmerSpeed * 1000).toLong() 115 | repeatMode = ValueAnimator.REVERSE 116 | repeatCount = ValueAnimator.INFINITE 117 | interpolator = LinearInterpolator() 118 | addUpdateListener { 119 | animationFraction = it.animatedFraction 120 | 121 | when(animationType){ 122 | AnimationTypes.GRADIENT ->{ 123 | val shader = LinearGradient( 124 | 0f, 0f, width.toFloat(), 0f, 125 | intArrayOf(blendColors(colorA,colorB,animationFraction), blendColors(colorB,colorA,animationFraction), blendColors(colorA,colorB,animationFraction)), 126 | floatArrayOf(0f, 0.5f, 1f), 127 | Shader.TileMode.CLAMP 128 | ) 129 | paint.shader = shader 130 | } 131 | AnimationTypes.PULSE -> { 132 | val scaled = 0.5f + animationFraction * 0.5f 133 | paint.alpha = (scaled * 255).toInt().coerceIn(0, 255) 134 | } 135 | AnimationTypes.NONE -> {} 136 | } 137 | 138 | invalidate() 139 | } 140 | start() 141 | } 142 | } 143 | 144 | private fun stopShimmer() { 145 | animator?.cancel() 146 | animator = null 147 | } 148 | 149 | private fun blendColors(from: Int, to: Int, ratio: Float): Int { 150 | val inverse = 1f - ratio 151 | val r = Color.red(from) * inverse + Color.red(to) * ratio 152 | val g = Color.green(from) * inverse + Color.green(to) * ratio 153 | val b = Color.blue(from) * inverse + Color.blue(to) * ratio 154 | return Color.rgb(r.toInt(), g.toInt(), b.toInt()) 155 | } 156 | 157 | override fun onViewAdded(child: View?) { 158 | super.onViewAdded(child) 159 | requestLayout() 160 | invalidate() 161 | } 162 | 163 | override fun onViewRemoved(child: View) { 164 | super.onViewRemoved(child) 165 | requestLayout() 166 | invalidate() 167 | } 168 | 169 | override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) { 170 | setMeasuredDimension(widthMeasureSpec , heightMeasureSpec) 171 | } 172 | 173 | override fun dispatchDraw(canvas: Canvas) { 174 | super.dispatchDraw(canvas) 175 | 176 | if(!isLoading){ 177 | TransitionManager.beginDelayedTransition(this, Fade().apply { 178 | duration = 800 179 | }) 180 | } 181 | 182 | for (i in 0 until childCount) { 183 | val child = getChildAt(i) 184 | 185 | val isMyChild = child.getTag(R.id.is_my_custom_child_view) as? Boolean == true 186 | 187 | if(isMyChild){ 188 | continue 189 | } 190 | 191 | if(isLoading){ 192 | child.visibility = INVISIBLE 193 | canvas.drawRoundRect( 194 | child.left.toFloat(), 195 | child.top.toFloat(), 196 | child.right.toFloat(), 197 | child.bottom.toFloat(), 198 | radius * 2, 199 | radius * 2, 200 | paint 201 | ) 202 | } 203 | else { 204 | child.visibility = VISIBLE 205 | } 206 | } 207 | } 208 | 209 | override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) { 210 | } 211 | } 212 | -------------------------------------------------------------------------------- /android/src/main/java/com/autoskeleton/AutoSkeletonViewPackage.kt: -------------------------------------------------------------------------------- 1 | package com.autoskeleton 2 | 3 | import com.facebook.react.ReactPackage 4 | import com.facebook.react.bridge.NativeModule 5 | import com.facebook.react.bridge.ReactApplicationContext 6 | import com.facebook.react.uimanager.ViewManager 7 | 8 | 9 | class AutoSkeletonViewPackage : ReactPackage { 10 | override fun createViewManagers(reactContext: ReactApplicationContext): List> { 11 | return listOf( 12 | AutoSkeletonViewManager(reactContext), 13 | AutoSkeletonIgnoreViewManager(reactContext) 14 | ) 15 | } 16 | 17 | override fun createNativeModules(reactContext: ReactApplicationContext): List = emptyList() 18 | } 19 | -------------------------------------------------------------------------------- /android/src/main/java/com/autoskeleton/ViewManagerProvider.kt: -------------------------------------------------------------------------------- 1 | package com.autoskeleton 2 | 3 | import com.facebook.react.bridge.ReactApplicationContext 4 | import com.facebook.react.uimanager.ViewManager 5 | 6 | interface ViewManagerProvider { 7 | fun getViewManagers(reactContext: ReactApplicationContext): List> 8 | } 9 | -------------------------------------------------------------------------------- /android/src/main/res/values/ids.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /android/src/newArch/java/com/autoskeleton/AutoSkeletonIgnoreViewManager.kt: -------------------------------------------------------------------------------- 1 | package com.autoskeleton 2 | 3 | import AutoSkeletonIgnoreView 4 | import android.view.View 5 | import com.facebook.react.bridge.ReactApplicationContext 6 | import com.facebook.react.module.annotations.ReactModule 7 | import com.facebook.react.uimanager.IViewGroupManager 8 | import com.facebook.react.uimanager.SimpleViewManager 9 | import com.facebook.react.uimanager.ThemedReactContext 10 | import com.facebook.react.uimanager.ViewManagerDelegate 11 | import com.facebook.react.viewmanagers.AutoSkeletonIgnoreViewManagerDelegate 12 | import com.facebook.react.viewmanagers.AutoSkeletonIgnoreViewManagerInterface 13 | 14 | @ReactModule(name = AutoSkeletonIgnoreViewManager.REACT_CLASS) 15 | class AutoSkeletonIgnoreViewManager(context: ReactApplicationContext) : SimpleViewManager(), 16 | AutoSkeletonIgnoreViewManagerInterface, 17 | IViewGroupManager 18 | { 19 | private val mDelegate: ViewManagerDelegate = 20 | AutoSkeletonIgnoreViewManagerDelegate(this) 21 | 22 | override fun getDelegate(): ViewManagerDelegate = mDelegate 23 | 24 | override fun getName(): String = REACT_CLASS 25 | 26 | public override fun createViewInstance(context: ThemedReactContext): AutoSkeletonIgnoreView { 27 | return AutoSkeletonIgnoreView(context).apply { 28 | setTag(R.id.is_my_custom_child_view,true) 29 | } 30 | } 31 | 32 | companion object { 33 | const val REACT_CLASS = "AutoSkeletonIgnoreView" 34 | } 35 | 36 | override fun getChildAt(parent: AutoSkeletonIgnoreView, index: Int): View { 37 | return parent.getChildAt(index) 38 | } 39 | 40 | override fun getChildCount(parent: AutoSkeletonIgnoreView): Int { 41 | return parent.childCount 42 | } 43 | 44 | override fun addView(parent: AutoSkeletonIgnoreView, child: View, index: Int) { 45 | parent.addView(child, index) 46 | } 47 | 48 | override fun removeViewAt(parent: AutoSkeletonIgnoreView, index: Int) { 49 | parent.removeViewAt(index) 50 | } 51 | 52 | override fun needsCustomLayoutForChildren(): Boolean { 53 | return false 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /android/src/newArch/java/com/autoskeleton/AutoSkeletonViewManager.kt: -------------------------------------------------------------------------------- 1 | package com.autoskeleton 2 | import android.util.Log 3 | import android.view.View 4 | 5 | import com.facebook.react.bridge.ReactApplicationContext 6 | import com.facebook.react.bridge.ReadableArray 7 | import com.facebook.react.module.annotations.ReactModule 8 | import com.facebook.react.uimanager.IViewGroupManager 9 | import com.facebook.react.uimanager.SimpleViewManager 10 | import com.facebook.react.uimanager.ThemedReactContext 11 | import com.facebook.react.uimanager.ViewManagerDelegate 12 | import com.facebook.react.uimanager.annotations.ReactProp 13 | import com.facebook.react.viewmanagers.AutoSkeletonViewManagerDelegate 14 | import com.facebook.react.viewmanagers.AutoSkeletonViewManagerInterface 15 | 16 | 17 | @ReactModule(name = AutoSkeletonViewManager.REACT_CLASS) 18 | class AutoSkeletonViewManager(context: ReactApplicationContext) : SimpleViewManager(), 19 | AutoSkeletonViewManagerInterface, 20 | IViewGroupManager 21 | { 22 | private val mDelegate: ViewManagerDelegate = AutoSkeletonViewManagerDelegate(this) 23 | 24 | override fun getDelegate(): ViewManagerDelegate = mDelegate 25 | 26 | override fun getName(): String = REACT_CLASS 27 | 28 | public override fun createViewInstance(context: ThemedReactContext): AutoSkeletonView = AutoSkeletonView(context) 29 | @ReactProp(name = "isLoading") 30 | override fun setIsLoading(view: AutoSkeletonView?, value: Boolean) { 31 | view?.setIsLoading(value) 32 | } 33 | 34 | @ReactProp(name = "shimmerSpeed") 35 | override fun setShimmerSpeed(view: AutoSkeletonView?, value: Float) { 36 | view?.setShimmerSpeed(value) 37 | } 38 | 39 | @ReactProp(name = "shimmerBackgroundColor") 40 | override fun setShimmerBackgroundColor(view: AutoSkeletonView?, value: Int?) { 41 | view?.setShimmerBackgroundColor(value) 42 | } 43 | 44 | @ReactProp(name = "gradientColors") 45 | override fun setGradientColors(view: AutoSkeletonView?, value: ReadableArray?) { 46 | Log.d("SKELETON","SET COLORS") 47 | view?.setGradientColors(value) 48 | } 49 | 50 | @ReactProp(name = "defaultRadius") 51 | override fun setDefaultRadius(view: AutoSkeletonView?, value: Float) { 52 | view?.setDefaultRadius(value) 53 | } 54 | 55 | @ReactProp(name = "animationType") 56 | override fun setAnimationType(view: AutoSkeletonView?, value: String?) { 57 | view?.setAnimationType(value) 58 | } 59 | 60 | 61 | companion object { 62 | const val REACT_CLASS = "AutoSkeletonView" 63 | } 64 | 65 | override fun getChildAt(parent: AutoSkeletonView, index: Int): View { 66 | return parent.getChildAt(index) 67 | } 68 | 69 | override fun getChildCount(parent: AutoSkeletonView): Int { 70 | return parent.childCount 71 | } 72 | 73 | override fun addView(parent: AutoSkeletonView, child: View, index: Int) { 74 | parent.addView(child, index) 75 | } 76 | 77 | override fun removeViewAt(parent: AutoSkeletonView, index: Int) { 78 | parent.removeViewAt(index) 79 | } 80 | 81 | override fun needsCustomLayoutForChildren(): Boolean { 82 | return false 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /android/src/oldArch/java/com/autoskeleton/AutoSkeletonIgnoreViewManager.kt: -------------------------------------------------------------------------------- 1 | package com.autoskeleton 2 | import AutoSkeletonIgnoreView 3 | import com.facebook.react.bridge.ReactApplicationContext 4 | import com.facebook.react.module.annotations.ReactModule 5 | import com.facebook.react.uimanager.ThemedReactContext 6 | import com.facebook.react.uimanager.ViewGroupManager 7 | 8 | @ReactModule(name = AutoSkeletonIgnoreViewManager.Companion.REACT_CLASS) 9 | class AutoSkeletonIgnoreViewManager(context: ReactApplicationContext) : ViewGroupManager() { 10 | 11 | override fun getName() = REACT_CLASS 12 | 13 | override fun createViewInstance(context: ThemedReactContext): AutoSkeletonIgnoreView { 14 | return AutoSkeletonIgnoreView(context).apply { 15 | setTag(R.id.is_my_custom_child_view,true) 16 | } 17 | } 18 | 19 | companion object { 20 | const val REACT_CLASS = "AutoSkeletonIgnoreView" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /android/src/oldArch/java/com/autoskeleton/AutoSkeletonViewManager.kt: -------------------------------------------------------------------------------- 1 | package com.autoskeleton 2 | 3 | import android.graphics.Color 4 | import com.facebook.react.bridge.Arguments 5 | import com.facebook.react.bridge.ReadableArray 6 | import com.facebook.react.bridge.WritableArray 7 | import com.facebook.react.module.annotations.ReactModule 8 | import com.facebook.react.uimanager.ThemedReactContext 9 | import com.facebook.react.uimanager.ViewGroupManager 10 | import com.facebook.react.uimanager.annotations.ReactProp 11 | import androidx.core.graphics.toColorInt 12 | import com.facebook.react.bridge.ReactApplicationContext 13 | 14 | @ReactModule(name = AutoSkeletonViewManager.Companion.REACT_CLASS) 15 | class AutoSkeletonViewManager(context: ReactApplicationContext) : ViewGroupManager() { 16 | 17 | override fun getName() = REACT_CLASS 18 | 19 | override fun createViewInstance(context: ThemedReactContext): AutoSkeletonView { 20 | return AutoSkeletonView(context) 21 | } 22 | 23 | @ReactProp(name = "isLoading") 24 | fun setIsLoading(view: AutoSkeletonView?, value: Boolean) { 25 | view?.setIsLoading(value) 26 | } 27 | 28 | @ReactProp(name = "shimmerSpeed") 29 | fun setShimmerSpeed(view: AutoSkeletonView?, value: Float) { 30 | view?.setShimmerSpeed(value) 31 | } 32 | 33 | @ReactProp(name = "shimmerBackgroundColor") 34 | fun setShimmerBackgroundColor(view: AutoSkeletonView?, value: String?) { 35 | val color = try { 36 | if (value != null) Color.parseColor(value) else Color.GRAY 37 | } catch (e: IllegalArgumentException) { 38 | Color.GRAY 39 | } 40 | view?.setShimmerBackgroundColor(color) 41 | } 42 | 43 | @ReactProp(name = "gradientColors") 44 | fun setGradientColors(view: AutoSkeletonView?, value: ReadableArray?) { 45 | if(value != null && value.size() == 2){ 46 | val color1 = value.getString(0)?.toColorInt() 47 | val color2 = value.getString(1)?.toColorInt() 48 | 49 | val writableArray: WritableArray = Arguments.createArray() 50 | writableArray.pushInt(color1?: Color.LTGRAY) 51 | writableArray.pushInt(color2?: Color.WHITE) 52 | 53 | val colors: ReadableArray = writableArray 54 | view?.setGradientColors(colors) 55 | } 56 | } 57 | 58 | @ReactProp(name = "defaultRadius") 59 | fun setDefaultRadius(view: AutoSkeletonView?, value: Float) { 60 | view?.setDefaultRadius(value) 61 | } 62 | 63 | @ReactProp(name = "animationType") 64 | fun animationType(view: AutoSkeletonView?, value: String?) { 65 | view?.setAnimationType(value) 66 | } 67 | 68 | companion object { 69 | const val REACT_CLASS = "AutoSkeletonView" 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /app.plugin.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./src/expo-plugins/withAutoSkeleton'); 2 | -------------------------------------------------------------------------------- /assets/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pioner92/react-native-auto-skeleton/4f64035a80338e2587a0a23f23617b5a1d02fb8c/assets/demo.gif -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:react-native-builder-bob/babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /example/.bundle/config: -------------------------------------------------------------------------------- 1 | BUNDLE_PATH: "vendor/bundle" 2 | BUNDLE_FORCE_RUBY_PLATFORM: 1 3 | -------------------------------------------------------------------------------- /example/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /example/Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version 4 | ruby ">= 2.6.10" 5 | 6 | # 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 | gem 'xcodeproj', '< 1.26.0' 10 | gem 'concurrent-ruby', '< 1.3.4' 11 | -------------------------------------------------------------------------------- /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 [Set Up Your Environment](https://reactnative.dev/docs/set-up-your-environment) guide before proceeding. 6 | 7 | ## Step 1: Start Metro 8 | 9 | First, you will need to run **Metro**, the JavaScript build tool for React Native. 10 | 11 | To start the Metro dev server, run the following command from the root of your React Native project: 12 | 13 | ```sh 14 | # Using npm 15 | npm start 16 | 17 | # OR using Yarn 18 | yarn start 19 | ``` 20 | 21 | ## Step 2: Build and run your app 22 | 23 | With Metro running, open a new terminal window/pane from the root of your React Native project, and use one of the following commands to build and run your Android or iOS app: 24 | 25 | ### Android 26 | 27 | ```sh 28 | # Using npm 29 | npm run android 30 | 31 | # OR using Yarn 32 | yarn android 33 | ``` 34 | 35 | ### iOS 36 | 37 | For iOS, remember to install CocoaPods dependencies (this only needs to be run on first clone or after updating native deps). 38 | 39 | The first time you create a new project, run the Ruby bundler to install CocoaPods itself: 40 | 41 | ```sh 42 | bundle install 43 | ``` 44 | 45 | Then, and every time you update your native dependencies, run: 46 | 47 | ```sh 48 | bundle exec pod install 49 | ``` 50 | 51 | For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html). 52 | 53 | ```sh 54 | # Using npm 55 | npm run ios 56 | 57 | # OR using Yarn 58 | yarn ios 59 | ``` 60 | 61 | If everything is set up correctly, you should see your new app running in the Android Emulator, iOS Simulator, or your connected device. 62 | 63 | This is one way to run your app — you can also build it directly from Android Studio or Xcode. 64 | 65 | ## Step 3: Modify your app 66 | 67 | Now that you have successfully run the app, let's make changes! 68 | 69 | Open `App.tsx` in your text editor of choice and make some changes. When you save, your app will automatically update and reflect these changes — this is powered by [Fast Refresh](https://reactnative.dev/docs/fast-refresh). 70 | 71 | When you want to forcefully reload, for example to reset the state of your app, you can perform a full reload: 72 | 73 | - **Android**: Press the R key twice or select **"Reload"** from the **Dev Menu**, accessed via Ctrl + M (Windows/Linux) or Cmd ⌘ + M (macOS). 74 | - **iOS**: Press R in iOS Simulator. 75 | 76 | ## Congratulations! :tada: 77 | 78 | You've successfully run and modified your React Native App. :partying_face: 79 | 80 | ### Now what? 81 | 82 | - 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). 83 | - If you're curious to learn more about React Native, check out the [docs](https://reactnative.dev/docs/getting-started). 84 | 85 | # Troubleshooting 86 | 87 | If you're having issues getting the above steps to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page. 88 | 89 | # Learn More 90 | 91 | To learn more about React Native, take a look at the following resources: 92 | 93 | - [React Native Website](https://reactnative.dev) - learn more about React Native. 94 | - [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment. 95 | - [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**. 96 | - [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts. 97 | - [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native. 98 | -------------------------------------------------------------------------------- /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 = io.github.react-native-community:jsc-android-intl:2026004.+` 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 = 'io.github.react-native-community:jsc-android:2026004.+' 74 | 75 | android { 76 | ndkVersion rootProject.ext.ndkVersion 77 | buildToolsVersion rootProject.ext.buildToolsVersion 78 | compileSdk rootProject.ext.compileSdkVersion 79 | 80 | namespace "autoskeleton.example" 81 | 82 | 83 | // externalNativeBuild { 84 | // cmake { 85 | // // Временно добавляем несуществующий файл, чтобы сборка не срабатывала 86 | // path "noop/CMakeLists.txt" 87 | // } 88 | // } 89 | 90 | defaultConfig { 91 | applicationId "autoskeleton.example" 92 | minSdkVersion rootProject.ext.minSdkVersion 93 | targetSdkVersion rootProject.ext.targetSdkVersion 94 | versionCode 1 95 | versionName "1.0" 96 | } 97 | signingConfigs { 98 | debug { 99 | storeFile file('debug.keystore') 100 | storePassword 'android' 101 | keyAlias 'androiddebugkey' 102 | keyPassword 'android' 103 | } 104 | } 105 | buildTypes { 106 | debug { 107 | signingConfig signingConfigs.debug 108 | } 109 | release { 110 | // Caution! In production, you need to generate your own keystore file. 111 | // see https://reactnative.dev/docs/signed-apk-android. 112 | signingConfig signingConfigs.debug 113 | minifyEnabled enableProguardInReleaseBuilds 114 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 115 | } 116 | } 117 | } 118 | 119 | dependencies { 120 | // The version of react-native is set by the React Native Gradle Plugin 121 | implementation("com.facebook.react:react-android") 122 | 123 | if (hermesEnabled.toBoolean()) { 124 | implementation("com.facebook.react:hermes-android") 125 | } else { 126 | implementation jscFlavor 127 | } 128 | } 129 | 130 | // Run Codegen during development for the example app. 131 | tasks.register('invokeLibraryCodegen', Exec) { 132 | workingDir "$rootDir/../../" 133 | def isWindows = System.getProperty('os.name').toLowerCase().contains('windows') 134 | 135 | if (isWindows) { 136 | commandLine 'cmd', '/c', 'npx bob build --target codegen' 137 | } else { 138 | commandLine 'sh', '-c', 'npx bob build --target codegen' 139 | } 140 | } 141 | 142 | preBuild.dependsOn invokeLibraryCodegen 143 | -------------------------------------------------------------------------------- /example/android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pioner92/react-native-auto-skeleton/4f64035a80338e2587a0a23f23617b5a1d02fb8c/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/autoskeleton/example/MainActivity.kt: -------------------------------------------------------------------------------- 1 | package autoskeleton.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 = "AutoSkeletonExample" 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/autoskeleton/example/MainApplication.kt: -------------------------------------------------------------------------------- 1 | package autoskeleton.example 2 | 3 | import android.app.Application 4 | import com.autoskeleton.AutoSkeletonViewPackage 5 | import com.facebook.react.PackageList 6 | import com.facebook.react.ReactApplication 7 | import com.facebook.react.ReactHost 8 | import com.facebook.react.ReactNativeHost 9 | import com.facebook.react.ReactPackage 10 | import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load 11 | import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost 12 | import com.facebook.react.defaults.DefaultReactNativeHost 13 | import com.facebook.react.soloader.OpenSourceMergedSoMapping 14 | import com.facebook.soloader.SoLoader 15 | 16 | class MainApplication : Application(), ReactApplication { 17 | 18 | override val reactNativeHost: ReactNativeHost = 19 | object : DefaultReactNativeHost(this) { 20 | override fun getPackages(): List = 21 | PackageList(this).packages.apply { 22 | // Packages that cannot be autolinked yet can be added manually here, for example: 23 | // add(MyReactNativePackage()) 24 | add(AutoSkeletonViewPackage()) 25 | } 26 | 27 | override fun getJSMainModuleName(): String = "index" 28 | 29 | override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG 30 | 31 | override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED 32 | override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED 33 | } 34 | 35 | override val reactHost: ReactHost 36 | get() = getDefaultReactHost(applicationContext, reactNativeHost) 37 | 38 | override fun onCreate() { 39 | super.onCreate() 40 | SoLoader.init(this, OpenSourceMergedSoMapping) 41 | if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) { 42 | // If you opted-in for the New Architecture, we load the native entry point for this app. 43 | load() 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /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/pioner92/react-native-auto-skeleton/4f64035a80338e2587a0a23f23617b5a1d02fb8c/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/pioner92/react-native-auto-skeleton/4f64035a80338e2587a0a23f23617b5a1d02fb8c/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/pioner92/react-native-auto-skeleton/4f64035a80338e2587a0a23f23617b5a1d02fb8c/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/pioner92/react-native-auto-skeleton/4f64035a80338e2587a0a23f23617b5a1d02fb8c/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/pioner92/react-native-auto-skeleton/4f64035a80338e2587a0a23f23617b5a1d02fb8c/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/pioner92/react-native-auto-skeleton/4f64035a80338e2587a0a23f23617b5a1d02fb8c/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/pioner92/react-native-auto-skeleton/4f64035a80338e2587a0a23f23617b5a1d02fb8c/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/pioner92/react-native-auto-skeleton/4f64035a80338e2587a0a23f23617b5a1d02fb8c/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/pioner92/react-native-auto-skeleton/4f64035a80338e2587a0a23f23617b5a1d02fb8c/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/pioner92/react-native-auto-skeleton/4f64035a80338e2587a0a23f23617b5a1d02fb8c/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | AutoSkeletonExample 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 = "35.0.0" 4 | minSdkVersion = 24 5 | compileSdkVersion = 35 6 | targetSdkVersion = 35 7 | ndkVersion = "27.1.12297006" 8 | kotlinVersion = "2.0.21" 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=true 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/pioner92/react-native-auto-skeleton/4f64035a80338e2587a0a23f23617b5a1d02fb8c/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.12-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 | # SPDX-License-Identifier: Apache-2.0 19 | # 20 | 21 | ############################################################################## 22 | # 23 | # Gradle start up script for POSIX generated by Gradle. 24 | # 25 | # Important for running: 26 | # 27 | # (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is 28 | # noncompliant, but you have some other compliant shell such as ksh or 29 | # bash, then to run this script, type that shell name before the whole 30 | # command line, like: 31 | # 32 | # ksh Gradle 33 | # 34 | # Busybox and similar reduced shells will NOT work, because this script 35 | # requires all of these POSIX shell features: 36 | # * functions; 37 | # * expansions «$var», «${var}», «${var:-default}», «${var+SET}», 38 | # «${var#prefix}», «${var%suffix}», and «$( cmd )»; 39 | # * compound commands having a testable exit status, especially «case»; 40 | # * various built-in commands including «command», «set», and «ulimit». 41 | # 42 | # Important for patching: 43 | # 44 | # (2) This script targets any POSIX shell, so it avoids extensions provided 45 | # by Bash, Ksh, etc; in particular arrays are avoided. 46 | # 47 | # The "traditional" practice of packing multiple parameters into a 48 | # space-separated string is a well documented source of bugs and security 49 | # problems, so this is (mostly) avoided, by progressively accumulating 50 | # options in "$@", and eventually passing that to Java. 51 | # 52 | # Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS, 53 | # and GRADLE_OPTS) rely on word-splitting, this is performed explicitly; 54 | # see the in-line comments for details. 55 | # 56 | # There are tweaks for specific operating systems such as AIX, CygWin, 57 | # Darwin, MinGW, and NonStop. 58 | # 59 | # (3) This script is generated from the Groovy template 60 | # https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt 61 | # within the Gradle project. 62 | # 63 | # You can find Gradle at https://github.com/gradle/gradle/. 64 | # 65 | ############################################################################## 66 | 67 | # Attempt to set APP_HOME 68 | 69 | # Resolve links: $0 may be a link 70 | app_path=$0 71 | 72 | # Need this for daisy-chained symlinks. 73 | while 74 | APP_HOME=${app_path%"${app_path##*/}"} # leaves a trailing /; empty if no leading path 75 | [ -h "$app_path" ] 76 | do 77 | ls=$( ls -ld "$app_path" ) 78 | link=${ls#*' -> '} 79 | case $link in #( 80 | /*) app_path=$link ;; #( 81 | *) app_path=$APP_HOME$link ;; 82 | esac 83 | done 84 | 85 | # This is normally unused 86 | # shellcheck disable=SC2034 87 | APP_BASE_NAME=${0##*/} 88 | # Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036) 89 | APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit 90 | 91 | # Use the maximum available, or set MAX_FD != -1 to use that value. 92 | MAX_FD=maximum 93 | 94 | warn () { 95 | echo "$*" 96 | } >&2 97 | 98 | die () { 99 | echo 100 | echo "$*" 101 | echo 102 | exit 1 103 | } >&2 104 | 105 | # OS specific support (must be 'true' or 'false'). 106 | cygwin=false 107 | msys=false 108 | darwin=false 109 | nonstop=false 110 | case "$( uname )" in #( 111 | CYGWIN* ) cygwin=true ;; #( 112 | Darwin* ) darwin=true ;; #( 113 | MSYS* | MINGW* ) msys=true ;; #( 114 | NONSTOP* ) nonstop=true ;; 115 | esac 116 | 117 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 118 | 119 | 120 | # Determine the Java command to use to start the JVM. 121 | if [ -n "$JAVA_HOME" ] ; then 122 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 123 | # IBM's JDK on AIX uses strange locations for the executables 124 | JAVACMD=$JAVA_HOME/jre/sh/java 125 | else 126 | JAVACMD=$JAVA_HOME/bin/java 127 | fi 128 | if [ ! -x "$JAVACMD" ] ; then 129 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 130 | 131 | Please set the JAVA_HOME variable in your environment to match the 132 | location of your Java installation." 133 | fi 134 | else 135 | JAVACMD=java 136 | if ! command -v java >/dev/null 2>&1 137 | then 138 | die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 139 | 140 | Please set the JAVA_HOME variable in your environment to match the 141 | location of your Java installation." 142 | fi 143 | fi 144 | 145 | # Increase the maximum file descriptors if we can. 146 | if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then 147 | case $MAX_FD in #( 148 | max*) 149 | # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked. 150 | # shellcheck disable=SC2039,SC3045 151 | MAX_FD=$( ulimit -H -n ) || 152 | warn "Could not query maximum file descriptor limit" 153 | esac 154 | case $MAX_FD in #( 155 | '' | soft) :;; #( 156 | *) 157 | # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked. 158 | # shellcheck disable=SC2039,SC3045 159 | ulimit -n "$MAX_FD" || 160 | warn "Could not set maximum file descriptor limit to $MAX_FD" 161 | esac 162 | fi 163 | 164 | # Collect all arguments for the java command, stacking in reverse order: 165 | # * args from the command line 166 | # * the main class name 167 | # * -classpath 168 | # * -D...appname settings 169 | # * --module-path (only if needed) 170 | # * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables. 171 | 172 | # For Cygwin or MSYS, switch paths to Windows format before running java 173 | if "$cygwin" || "$msys" ; then 174 | APP_HOME=$( cygpath --path --mixed "$APP_HOME" ) 175 | CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" ) 176 | 177 | JAVACMD=$( cygpath --unix "$JAVACMD" ) 178 | 179 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 180 | for arg do 181 | if 182 | case $arg in #( 183 | -*) false ;; # don't mess with options #( 184 | /?*) t=${arg#/} t=/${t%%/*} # looks like a POSIX filepath 185 | [ -e "$t" ] ;; #( 186 | *) false ;; 187 | esac 188 | then 189 | arg=$( cygpath --path --ignore --mixed "$arg" ) 190 | fi 191 | # Roll the args list around exactly as many times as the number of 192 | # args, so each arg winds up back in the position where it started, but 193 | # possibly modified. 194 | # 195 | # NB: a `for` loop captures its iteration list before it begins, so 196 | # changing the positional parameters here affects neither the number of 197 | # iterations, nor the values presented in `arg`. 198 | shift # remove old arg 199 | set -- "$@" "$arg" # push replacement arg 200 | done 201 | fi 202 | 203 | 204 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 205 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' 206 | 207 | # Collect all arguments for the java command: 208 | # * DEFAULT_JVM_OPTS, JAVA_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments, 209 | # and any embedded shellness will be escaped. 210 | # * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be 211 | # treated as '${Hostname}' itself on the command line. 212 | 213 | set -- \ 214 | "-Dorg.gradle.appname=$APP_BASE_NAME" \ 215 | -classpath "$CLASSPATH" \ 216 | org.gradle.wrapper.GradleWrapperMain \ 217 | "$@" 218 | 219 | # Stop when "xargs" is not available. 220 | if ! command -v xargs >/dev/null 2>&1 221 | then 222 | die "xargs is not available" 223 | fi 224 | 225 | # Use "xargs" to parse quoted args. 226 | # 227 | # With -n1 it outputs one arg per line, with the quotes and backslashes removed. 228 | # 229 | # In Bash we could simply go: 230 | # 231 | # readarray ARGS < <( xargs -n1 <<<"$var" ) && 232 | # set -- "${ARGS[@]}" "$@" 233 | # 234 | # but POSIX shell has neither arrays nor command substitution, so instead we 235 | # post-process each arg (as a line of input to sed) to backslash-escape any 236 | # character that might be a shell metacharacter, then use eval to reverse 237 | # that process (while maintaining the separation between arguments), and wrap 238 | # the whole thing up as a single "set" statement. 239 | # 240 | # This will of course break if any of these variables contains a newline or 241 | # an unmatched quote. 242 | # 243 | 244 | eval "set -- $( 245 | printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" | 246 | xargs -n1 | 247 | sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' | 248 | tr '\n' ' ' 249 | )" '"$@"' 250 | 251 | exec "$JAVACMD" "$@" 252 | -------------------------------------------------------------------------------- /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 | @rem SPDX-License-Identifier: Apache-2.0 17 | @rem 18 | 19 | @if "%DEBUG%"=="" @echo off 20 | @rem ########################################################################## 21 | @rem 22 | @rem Gradle startup script for Windows 23 | @rem 24 | @rem ########################################################################## 25 | 26 | @rem Set local scope for the variables with windows NT shell 27 | if "%OS%"=="Windows_NT" setlocal 28 | 29 | set DIRNAME=%~dp0 30 | if "%DIRNAME%"=="" set DIRNAME=. 31 | @rem This is normally unused 32 | set APP_BASE_NAME=%~n0 33 | set APP_HOME=%DIRNAME% 34 | 35 | @rem Resolve any "." and ".." in APP_HOME to make it shorter. 36 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi 37 | 38 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 39 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 40 | 41 | @rem Find java.exe 42 | if defined JAVA_HOME goto findJavaFromJavaHome 43 | 44 | set JAVA_EXE=java.exe 45 | %JAVA_EXE% -version >NUL 2>&1 46 | if %ERRORLEVEL% equ 0 goto execute 47 | 48 | echo. 1>&2 49 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2 50 | echo. 1>&2 51 | echo Please set the JAVA_HOME variable in your environment to match the 1>&2 52 | echo location of your Java installation. 1>&2 53 | 54 | goto fail 55 | 56 | :findJavaFromJavaHome 57 | set JAVA_HOME=%JAVA_HOME:"=% 58 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 59 | 60 | if exist "%JAVA_EXE%" goto execute 61 | 62 | echo. 1>&2 63 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2 64 | echo. 1>&2 65 | echo Please set the JAVA_HOME variable in your environment to match the 1>&2 66 | echo location of your Java installation. 1>&2 67 | 68 | goto fail 69 | 70 | :execute 71 | @rem Setup the command line 72 | 73 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 74 | 75 | 76 | @rem Execute Gradle 77 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* 78 | 79 | :end 80 | @rem End local scope for the variables with windows NT shell 81 | if %ERRORLEVEL% equ 0 goto mainEnd 82 | 83 | :fail 84 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 85 | rem the _cmd.exe /c_ return code! 86 | set EXIT_CODE=%ERRORLEVEL% 87 | if %EXIT_CODE% equ 0 set EXIT_CODE=1 88 | if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE% 89 | exit /b %EXIT_CODE% 90 | 91 | :mainEnd 92 | if "%OS%"=="Windows_NT" endlocal 93 | 94 | :omega 95 | -------------------------------------------------------------------------------- /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 = 'autoskeleton.example' 5 | include ':app' 6 | includeBuild('../node_modules/@react-native/gradle-plugin') 7 | -------------------------------------------------------------------------------- /example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "AutoSkeletonExample", 3 | "displayName": "AutoSkeletonExample" 4 | } 5 | -------------------------------------------------------------------------------- /example/assets/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pioner92/react-native-auto-skeleton/4f64035a80338e2587a0a23f23617b5a1d02fb8c/example/assets/avatar.png -------------------------------------------------------------------------------- /example/babel.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const { getConfig } = require('react-native-builder-bob/babel-config'); 3 | const pkg = require('../package.json'); 4 | 5 | const root = path.resolve(__dirname, '..'); 6 | 7 | module.exports = getConfig( 8 | { 9 | presets: ['module:@react-native/babel-preset'], 10 | }, 11 | { root, pkg } 12 | ); 13 | -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | import { AppRegistry } from 'react-native'; 2 | import App from './src/App'; 3 | import { name as appName } from './app.json'; 4 | 5 | AppRegistry.registerComponent(appName, () => App); 6 | -------------------------------------------------------------------------------- /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/AutoSkeletonExample-Bridging-Header.h: -------------------------------------------------------------------------------- 1 | // 2 | // AutoSkeletonExample-Bridge.h 3 | // AutoSkeletonExample 4 | // 5 | // Created by Oleksandr Shumihin on 23/3/25. 6 | // 7 | 8 | #ifndef AutoSkeletonExample_Bridge_h 9 | #define AutoSkeletonExample_Bridge_h 10 | 11 | #import "Constants.h" 12 | 13 | #endif /* AutoSkeletonExample_Bridge_h */ 14 | -------------------------------------------------------------------------------- /example/ios/AutoSkeletonExample.xcodeproj/project.pbxproj: -------------------------------------------------------------------------------- 1 | // !$*UTF8*$! 2 | { 3 | archiveVersion = 1; 4 | classes = { 5 | }; 6 | objectVersion = 54; 7 | objects = { 8 | 9 | /* Begin PBXBuildFile section */ 10 | 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; }; 11 | 1BBD1C960118A48349FDBFA6 /* libPods-AutoSkeletonExample.a in Frameworks */ = {isa = PBXBuildFile; fileRef = A6FE202C403EFAE2D69DE4C6 /* libPods-AutoSkeletonExample.a */; }; 12 | 761780ED2CA45674006654EE /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 761780EC2CA45674006654EE /* AppDelegate.swift */; }; 13 | 81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; }; 14 | C090EC147B18AC3F6301659F /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB81A68108700A75B9A /* PrivacyInfo.xcprivacy */; }; 15 | FA18FF012D90C63B00432021 /* File.swift in Sources */ = {isa = PBXBuildFile; fileRef = FA18FF002D90C63B00432021 /* File.swift */; }; 16 | /* End PBXBuildFile section */ 17 | 18 | /* Begin PBXFileReference section */ 19 | 13B07F961A680F5B00A75B9A /* AutoSkeletonExample.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = AutoSkeletonExample.app; sourceTree = BUILT_PRODUCTS_DIR; }; 20 | 13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = AutoSkeletonExample/Images.xcassets; sourceTree = ""; }; 21 | 13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = AutoSkeletonExample/Info.plist; sourceTree = ""; }; 22 | 13B07FB81A68108700A75B9A /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = PrivacyInfo.xcprivacy; path = AutoSkeletonExample/PrivacyInfo.xcprivacy; sourceTree = ""; }; 23 | 3B4392A12AC88292D35C810B /* Pods-AutoSkeletonExample.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-AutoSkeletonExample.debug.xcconfig"; path = "Target Support Files/Pods-AutoSkeletonExample/Pods-AutoSkeletonExample.debug.xcconfig"; sourceTree = ""; }; 24 | 5709B34CF0A7D63546082F79 /* Pods-AutoSkeletonExample.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-AutoSkeletonExample.release.xcconfig"; path = "Target Support Files/Pods-AutoSkeletonExample/Pods-AutoSkeletonExample.release.xcconfig"; sourceTree = ""; }; 25 | 761780EC2CA45674006654EE /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = AppDelegate.swift; path = AutoSkeletonExample/AppDelegate.swift; sourceTree = ""; }; 26 | 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = AutoSkeletonExample/LaunchScreen.storyboard; sourceTree = ""; }; 27 | A6FE202C403EFAE2D69DE4C6 /* libPods-AutoSkeletonExample.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-AutoSkeletonExample.a"; sourceTree = BUILT_PRODUCTS_DIR; }; 28 | ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; }; 29 | FA18FF002D90C63B00432021 /* File.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = File.swift; sourceTree = ""; }; 30 | FA18FF022D90C65F00432021 /* AutoSkeletonExample-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "AutoSkeletonExample-Bridging-Header.h"; sourceTree = ""; }; 31 | /* End PBXFileReference section */ 32 | 33 | /* Begin PBXFrameworksBuildPhase section */ 34 | 13B07F8C1A680F5B00A75B9A /* Frameworks */ = { 35 | isa = PBXFrameworksBuildPhase; 36 | buildActionMask = 2147483647; 37 | files = ( 38 | 1BBD1C960118A48349FDBFA6 /* libPods-AutoSkeletonExample.a in Frameworks */, 39 | ); 40 | runOnlyForDeploymentPostprocessing = 0; 41 | }; 42 | /* End PBXFrameworksBuildPhase section */ 43 | 44 | /* Begin PBXGroup section */ 45 | 13B07FAE1A68108700A75B9A /* AutoSkeletonExample */ = { 46 | isa = PBXGroup; 47 | children = ( 48 | 13B07FB51A68108700A75B9A /* Images.xcassets */, 49 | 761780EC2CA45674006654EE /* AppDelegate.swift */, 50 | 13B07FB61A68108700A75B9A /* Info.plist */, 51 | 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */, 52 | 13B07FB81A68108700A75B9A /* PrivacyInfo.xcprivacy */, 53 | FA18FF002D90C63B00432021 /* File.swift */, 54 | FA18FF022D90C65F00432021 /* AutoSkeletonExample-Bridging-Header.h */, 55 | ); 56 | name = AutoSkeletonExample; 57 | sourceTree = ""; 58 | }; 59 | 2D16E6871FA4F8E400B85C8A /* Frameworks */ = { 60 | isa = PBXGroup; 61 | children = ( 62 | ED297162215061F000B7C4FE /* JavaScriptCore.framework */, 63 | A6FE202C403EFAE2D69DE4C6 /* libPods-AutoSkeletonExample.a */, 64 | ); 65 | name = Frameworks; 66 | sourceTree = ""; 67 | }; 68 | 832341AE1AAA6A7D00B99B32 /* Libraries */ = { 69 | isa = PBXGroup; 70 | children = ( 71 | ); 72 | name = Libraries; 73 | sourceTree = ""; 74 | }; 75 | 83CBB9F61A601CBA00E9B192 = { 76 | isa = PBXGroup; 77 | children = ( 78 | 13B07FAE1A68108700A75B9A /* AutoSkeletonExample */, 79 | 832341AE1AAA6A7D00B99B32 /* Libraries */, 80 | 83CBBA001A601CBA00E9B192 /* Products */, 81 | 2D16E6871FA4F8E400B85C8A /* Frameworks */, 82 | BBD78D7AC51CEA395F1C20DB /* Pods */, 83 | ); 84 | indentWidth = 2; 85 | sourceTree = ""; 86 | tabWidth = 2; 87 | usesTabs = 0; 88 | }; 89 | 83CBBA001A601CBA00E9B192 /* Products */ = { 90 | isa = PBXGroup; 91 | children = ( 92 | 13B07F961A680F5B00A75B9A /* AutoSkeletonExample.app */, 93 | ); 94 | name = Products; 95 | sourceTree = ""; 96 | }; 97 | BBD78D7AC51CEA395F1C20DB /* Pods */ = { 98 | isa = PBXGroup; 99 | children = ( 100 | 3B4392A12AC88292D35C810B /* Pods-AutoSkeletonExample.debug.xcconfig */, 101 | 5709B34CF0A7D63546082F79 /* Pods-AutoSkeletonExample.release.xcconfig */, 102 | ); 103 | path = Pods; 104 | sourceTree = ""; 105 | }; 106 | /* End PBXGroup section */ 107 | 108 | /* Begin PBXNativeTarget section */ 109 | 13B07F861A680F5B00A75B9A /* AutoSkeletonExample */ = { 110 | isa = PBXNativeTarget; 111 | buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "AutoSkeletonExample" */; 112 | buildPhases = ( 113 | C38B50BA6285516D6DCD4F65 /* [CP] Check Pods Manifest.lock */, 114 | 13B07F871A680F5B00A75B9A /* Sources */, 115 | 13B07F8C1A680F5B00A75B9A /* Frameworks */, 116 | 13B07F8E1A680F5B00A75B9A /* Resources */, 117 | 00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */, 118 | 00EEFC60759A1932668264C0 /* [CP] Embed Pods Frameworks */, 119 | E235C05ADACE081382539298 /* [CP] Copy Pods Resources */, 120 | ); 121 | buildRules = ( 122 | ); 123 | dependencies = ( 124 | ); 125 | name = AutoSkeletonExample; 126 | productName = AutoSkeletonExample; 127 | productReference = 13B07F961A680F5B00A75B9A /* AutoSkeletonExample.app */; 128 | productType = "com.apple.product-type.application"; 129 | }; 130 | /* End PBXNativeTarget section */ 131 | 132 | /* Begin PBXProject section */ 133 | 83CBB9F71A601CBA00E9B192 /* Project object */ = { 134 | isa = PBXProject; 135 | attributes = { 136 | LastUpgradeCheck = 1210; 137 | TargetAttributes = { 138 | 13B07F861A680F5B00A75B9A = { 139 | LastSwiftMigration = 1120; 140 | }; 141 | }; 142 | }; 143 | buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "AutoSkeletonExample" */; 144 | compatibilityVersion = "Xcode 12.0"; 145 | developmentRegion = en; 146 | hasScannedForEncodings = 0; 147 | knownRegions = ( 148 | en, 149 | Base, 150 | ); 151 | mainGroup = 83CBB9F61A601CBA00E9B192; 152 | productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */; 153 | projectDirPath = ""; 154 | projectRoot = ""; 155 | targets = ( 156 | 13B07F861A680F5B00A75B9A /* AutoSkeletonExample */, 157 | ); 158 | }; 159 | /* End PBXProject section */ 160 | 161 | /* Begin PBXResourcesBuildPhase section */ 162 | 13B07F8E1A680F5B00A75B9A /* Resources */ = { 163 | isa = PBXResourcesBuildPhase; 164 | buildActionMask = 2147483647; 165 | files = ( 166 | 81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */, 167 | 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */, 168 | C090EC147B18AC3F6301659F /* PrivacyInfo.xcprivacy in Resources */, 169 | ); 170 | runOnlyForDeploymentPostprocessing = 0; 171 | }; 172 | /* End PBXResourcesBuildPhase section */ 173 | 174 | /* Begin PBXShellScriptBuildPhase section */ 175 | 00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */ = { 176 | isa = PBXShellScriptBuildPhase; 177 | buildActionMask = 2147483647; 178 | files = ( 179 | ); 180 | inputPaths = ( 181 | "$(SRCROOT)/.xcode.env.local", 182 | "$(SRCROOT)/.xcode.env", 183 | ); 184 | name = "Bundle React Native code and images"; 185 | outputPaths = ( 186 | ); 187 | runOnlyForDeploymentPostprocessing = 0; 188 | shellPath = /bin/sh; 189 | 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"; 190 | }; 191 | 00EEFC60759A1932668264C0 /* [CP] Embed Pods Frameworks */ = { 192 | isa = PBXShellScriptBuildPhase; 193 | buildActionMask = 2147483647; 194 | files = ( 195 | ); 196 | inputFileListPaths = ( 197 | "${PODS_ROOT}/Target Support Files/Pods-AutoSkeletonExample/Pods-AutoSkeletonExample-frameworks-${CONFIGURATION}-input-files.xcfilelist", 198 | ); 199 | name = "[CP] Embed Pods Frameworks"; 200 | outputFileListPaths = ( 201 | "${PODS_ROOT}/Target Support Files/Pods-AutoSkeletonExample/Pods-AutoSkeletonExample-frameworks-${CONFIGURATION}-output-files.xcfilelist", 202 | ); 203 | runOnlyForDeploymentPostprocessing = 0; 204 | shellPath = /bin/sh; 205 | shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-AutoSkeletonExample/Pods-AutoSkeletonExample-frameworks.sh\"\n"; 206 | showEnvVarsInLog = 0; 207 | }; 208 | C38B50BA6285516D6DCD4F65 /* [CP] Check Pods Manifest.lock */ = { 209 | isa = PBXShellScriptBuildPhase; 210 | buildActionMask = 2147483647; 211 | files = ( 212 | ); 213 | inputFileListPaths = ( 214 | ); 215 | inputPaths = ( 216 | "${PODS_PODFILE_DIR_PATH}/Podfile.lock", 217 | "${PODS_ROOT}/Manifest.lock", 218 | ); 219 | name = "[CP] Check Pods Manifest.lock"; 220 | outputFileListPaths = ( 221 | ); 222 | outputPaths = ( 223 | "$(DERIVED_FILE_DIR)/Pods-AutoSkeletonExample-checkManifestLockResult.txt", 224 | ); 225 | runOnlyForDeploymentPostprocessing = 0; 226 | shellPath = /bin/sh; 227 | 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"; 228 | showEnvVarsInLog = 0; 229 | }; 230 | E235C05ADACE081382539298 /* [CP] Copy Pods Resources */ = { 231 | isa = PBXShellScriptBuildPhase; 232 | buildActionMask = 2147483647; 233 | files = ( 234 | ); 235 | inputFileListPaths = ( 236 | "${PODS_ROOT}/Target Support Files/Pods-AutoSkeletonExample/Pods-AutoSkeletonExample-resources-${CONFIGURATION}-input-files.xcfilelist", 237 | ); 238 | name = "[CP] Copy Pods Resources"; 239 | outputFileListPaths = ( 240 | "${PODS_ROOT}/Target Support Files/Pods-AutoSkeletonExample/Pods-AutoSkeletonExample-resources-${CONFIGURATION}-output-files.xcfilelist", 241 | ); 242 | runOnlyForDeploymentPostprocessing = 0; 243 | shellPath = /bin/sh; 244 | shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-AutoSkeletonExample/Pods-AutoSkeletonExample-resources.sh\"\n"; 245 | showEnvVarsInLog = 0; 246 | }; 247 | /* End PBXShellScriptBuildPhase section */ 248 | 249 | /* Begin PBXSourcesBuildPhase section */ 250 | 13B07F871A680F5B00A75B9A /* Sources */ = { 251 | isa = PBXSourcesBuildPhase; 252 | buildActionMask = 2147483647; 253 | files = ( 254 | 761780ED2CA45674006654EE /* AppDelegate.swift in Sources */, 255 | FA18FF012D90C63B00432021 /* File.swift in Sources */, 256 | ); 257 | runOnlyForDeploymentPostprocessing = 0; 258 | }; 259 | /* End PBXSourcesBuildPhase section */ 260 | 261 | /* Begin XCBuildConfiguration section */ 262 | 13B07F941A680F5B00A75B9A /* Debug */ = { 263 | isa = XCBuildConfiguration; 264 | baseConfigurationReference = 3B4392A12AC88292D35C810B /* Pods-AutoSkeletonExample.debug.xcconfig */; 265 | buildSettings = { 266 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 267 | CLANG_ENABLE_MODULES = YES; 268 | CURRENT_PROJECT_VERSION = 1; 269 | DEFINES_MODULE = YES; 270 | DEVELOPMENT_TEAM = 2S8L59L25N; 271 | ENABLE_BITCODE = NO; 272 | INFOPLIST_FILE = AutoSkeletonExample/Info.plist; 273 | IPHONEOS_DEPLOYMENT_TARGET = 15.1; 274 | LD_RUNPATH_SEARCH_PATHS = ( 275 | "$(inherited)", 276 | "@executable_path/Frameworks", 277 | ); 278 | MARKETING_VERSION = 1.0; 279 | OTHER_LDFLAGS = ( 280 | "$(inherited)", 281 | "-ObjC", 282 | "-lc++", 283 | ); 284 | PRODUCT_BUNDLE_IDENTIFIER = autoskeleton.example; 285 | PRODUCT_NAME = AutoSkeletonExample; 286 | SWIFT_OPTIMIZATION_LEVEL = "-Onone"; 287 | SWIFT_VERSION = 5.0; 288 | VERSIONING_SYSTEM = "apple-generic"; 289 | }; 290 | name = Debug; 291 | }; 292 | 13B07F951A680F5B00A75B9A /* Release */ = { 293 | isa = XCBuildConfiguration; 294 | baseConfigurationReference = 5709B34CF0A7D63546082F79 /* Pods-AutoSkeletonExample.release.xcconfig */; 295 | buildSettings = { 296 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 297 | CLANG_ENABLE_MODULES = YES; 298 | CURRENT_PROJECT_VERSION = 1; 299 | DEFINES_MODULE = YES; 300 | DEVELOPMENT_TEAM = 2S8L59L25N; 301 | INFOPLIST_FILE = AutoSkeletonExample/Info.plist; 302 | IPHONEOS_DEPLOYMENT_TARGET = 15.1; 303 | LD_RUNPATH_SEARCH_PATHS = ( 304 | "$(inherited)", 305 | "@executable_path/Frameworks", 306 | ); 307 | MARKETING_VERSION = 1.0; 308 | OTHER_LDFLAGS = ( 309 | "$(inherited)", 310 | "-ObjC", 311 | "-lc++", 312 | ); 313 | PRODUCT_BUNDLE_IDENTIFIER = autoskeleton.example; 314 | PRODUCT_NAME = AutoSkeletonExample; 315 | SWIFT_VERSION = 5.0; 316 | VERSIONING_SYSTEM = "apple-generic"; 317 | }; 318 | name = Release; 319 | }; 320 | 83CBBA201A601CBA00E9B192 /* Debug */ = { 321 | isa = XCBuildConfiguration; 322 | buildSettings = { 323 | ALWAYS_SEARCH_USER_PATHS = NO; 324 | CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES; 325 | CLANG_CXX_LANGUAGE_STANDARD = "c++20"; 326 | CLANG_CXX_LIBRARY = "libc++"; 327 | CLANG_ENABLE_MODULES = YES; 328 | CLANG_ENABLE_OBJC_ARC = YES; 329 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 330 | CLANG_WARN_BOOL_CONVERSION = YES; 331 | CLANG_WARN_COMMA = YES; 332 | CLANG_WARN_CONSTANT_CONVERSION = YES; 333 | CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; 334 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 335 | CLANG_WARN_EMPTY_BODY = YES; 336 | CLANG_WARN_ENUM_CONVERSION = YES; 337 | CLANG_WARN_INFINITE_RECURSION = YES; 338 | CLANG_WARN_INT_CONVERSION = YES; 339 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 340 | CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; 341 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 342 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 343 | CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES; 344 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 345 | CLANG_WARN_STRICT_PROTOTYPES = YES; 346 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 347 | CLANG_WARN_UNREACHABLE_CODE = YES; 348 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 349 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 350 | COPY_PHASE_STRIP = NO; 351 | ENABLE_STRICT_OBJC_MSGSEND = YES; 352 | ENABLE_TESTABILITY = YES; 353 | "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = ""; 354 | GCC_C_LANGUAGE_STANDARD = gnu99; 355 | GCC_DYNAMIC_NO_PIC = NO; 356 | GCC_NO_COMMON_BLOCKS = YES; 357 | GCC_OPTIMIZATION_LEVEL = 0; 358 | GCC_PREPROCESSOR_DEFINITIONS = ( 359 | "DEBUG=1", 360 | "$(inherited)", 361 | ); 362 | GCC_SYMBOLS_PRIVATE_EXTERN = NO; 363 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 364 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 365 | GCC_WARN_UNDECLARED_SELECTOR = YES; 366 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 367 | GCC_WARN_UNUSED_FUNCTION = YES; 368 | GCC_WARN_UNUSED_VARIABLE = YES; 369 | HEADER_SEARCH_PATHS = ( 370 | "$(inherited)", 371 | "${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon/ReactCommon.framework/Headers", 372 | "${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon/ReactCommon.framework/Headers/react/nativemodule/core", 373 | "${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon-Samples/ReactCommon_Samples.framework/Headers", 374 | "${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon-Samples/ReactCommon_Samples.framework/Headers/platform/ios", 375 | "${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers/react/renderer/components/view/platform/cxx", 376 | "${PODS_CONFIGURATION_BUILD_DIR}/React-NativeModulesApple/React_NativeModulesApple.framework/Headers", 377 | "${PODS_CONFIGURATION_BUILD_DIR}/React-graphics/React_graphics.framework/Headers", 378 | "${PODS_CONFIGURATION_BUILD_DIR}/React-graphics/React_graphics.framework/Headers/react/renderer/graphics/platform/ios", 379 | ); 380 | IPHONEOS_DEPLOYMENT_TARGET = 15.1; 381 | LD_RUNPATH_SEARCH_PATHS = ( 382 | /usr/lib/swift, 383 | "$(inherited)", 384 | ); 385 | LIBRARY_SEARCH_PATHS = ( 386 | "\"$(SDKROOT)/usr/lib/swift\"", 387 | "\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"", 388 | "\"$(inherited)\"", 389 | ); 390 | MTL_ENABLE_DEBUG_INFO = YES; 391 | ONLY_ACTIVE_ARCH = YES; 392 | OTHER_CPLUSPLUSFLAGS = ( 393 | "$(OTHER_CFLAGS)", 394 | "-DFOLLY_NO_CONFIG", 395 | "-DFOLLY_MOBILE=1", 396 | "-DFOLLY_USE_LIBCPP=1", 397 | "-DFOLLY_CFG_NO_COROUTINES=1", 398 | "-DFOLLY_HAVE_CLOCK_GETTIME=1", 399 | ); 400 | OTHER_LDFLAGS = ( 401 | "$(inherited)", 402 | " ", 403 | ); 404 | REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native"; 405 | SDKROOT = iphoneos; 406 | SWIFT_ACTIVE_COMPILATION_CONDITIONS = "$(inherited) DEBUG"; 407 | USE_HERMES = true; 408 | }; 409 | name = Debug; 410 | }; 411 | 83CBBA211A601CBA00E9B192 /* Release */ = { 412 | isa = XCBuildConfiguration; 413 | buildSettings = { 414 | ALWAYS_SEARCH_USER_PATHS = NO; 415 | CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES; 416 | CLANG_CXX_LANGUAGE_STANDARD = "c++20"; 417 | CLANG_CXX_LIBRARY = "libc++"; 418 | CLANG_ENABLE_MODULES = YES; 419 | CLANG_ENABLE_OBJC_ARC = YES; 420 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 421 | CLANG_WARN_BOOL_CONVERSION = YES; 422 | CLANG_WARN_COMMA = YES; 423 | CLANG_WARN_CONSTANT_CONVERSION = YES; 424 | CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; 425 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 426 | CLANG_WARN_EMPTY_BODY = YES; 427 | CLANG_WARN_ENUM_CONVERSION = YES; 428 | CLANG_WARN_INFINITE_RECURSION = YES; 429 | CLANG_WARN_INT_CONVERSION = YES; 430 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 431 | CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; 432 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 433 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 434 | CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES; 435 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 436 | CLANG_WARN_STRICT_PROTOTYPES = YES; 437 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 438 | CLANG_WARN_UNREACHABLE_CODE = YES; 439 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 440 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 441 | COPY_PHASE_STRIP = YES; 442 | ENABLE_NS_ASSERTIONS = NO; 443 | ENABLE_STRICT_OBJC_MSGSEND = YES; 444 | "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = ""; 445 | GCC_C_LANGUAGE_STANDARD = gnu99; 446 | GCC_NO_COMMON_BLOCKS = YES; 447 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 448 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 449 | GCC_WARN_UNDECLARED_SELECTOR = YES; 450 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 451 | GCC_WARN_UNUSED_FUNCTION = YES; 452 | GCC_WARN_UNUSED_VARIABLE = YES; 453 | HEADER_SEARCH_PATHS = ( 454 | "$(inherited)", 455 | "${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon/ReactCommon.framework/Headers", 456 | "${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon/ReactCommon.framework/Headers/react/nativemodule/core", 457 | "${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon-Samples/ReactCommon_Samples.framework/Headers", 458 | "${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon-Samples/ReactCommon_Samples.framework/Headers/platform/ios", 459 | "${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers/react/renderer/components/view/platform/cxx", 460 | "${PODS_CONFIGURATION_BUILD_DIR}/React-NativeModulesApple/React_NativeModulesApple.framework/Headers", 461 | "${PODS_CONFIGURATION_BUILD_DIR}/React-graphics/React_graphics.framework/Headers", 462 | "${PODS_CONFIGURATION_BUILD_DIR}/React-graphics/React_graphics.framework/Headers/react/renderer/graphics/platform/ios", 463 | ); 464 | IPHONEOS_DEPLOYMENT_TARGET = 15.1; 465 | LD_RUNPATH_SEARCH_PATHS = ( 466 | /usr/lib/swift, 467 | "$(inherited)", 468 | ); 469 | LIBRARY_SEARCH_PATHS = ( 470 | "\"$(SDKROOT)/usr/lib/swift\"", 471 | "\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"", 472 | "\"$(inherited)\"", 473 | ); 474 | MTL_ENABLE_DEBUG_INFO = NO; 475 | OTHER_CPLUSPLUSFLAGS = ( 476 | "$(OTHER_CFLAGS)", 477 | "-DFOLLY_NO_CONFIG", 478 | "-DFOLLY_MOBILE=1", 479 | "-DFOLLY_USE_LIBCPP=1", 480 | "-DFOLLY_CFG_NO_COROUTINES=1", 481 | "-DFOLLY_HAVE_CLOCK_GETTIME=1", 482 | ); 483 | OTHER_LDFLAGS = ( 484 | "$(inherited)", 485 | " ", 486 | ); 487 | REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native"; 488 | SDKROOT = iphoneos; 489 | USE_HERMES = true; 490 | VALIDATE_PRODUCT = YES; 491 | }; 492 | name = Release; 493 | }; 494 | /* End XCBuildConfiguration section */ 495 | 496 | /* Begin XCConfigurationList section */ 497 | 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "AutoSkeletonExample" */ = { 498 | isa = XCConfigurationList; 499 | buildConfigurations = ( 500 | 13B07F941A680F5B00A75B9A /* Debug */, 501 | 13B07F951A680F5B00A75B9A /* Release */, 502 | ); 503 | defaultConfigurationIsVisible = 0; 504 | defaultConfigurationName = Release; 505 | }; 506 | 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "AutoSkeletonExample" */ = { 507 | isa = XCConfigurationList; 508 | buildConfigurations = ( 509 | 83CBBA201A601CBA00E9B192 /* Debug */, 510 | 83CBBA211A601CBA00E9B192 /* Release */, 511 | ); 512 | defaultConfigurationIsVisible = 0; 513 | defaultConfigurationName = Release; 514 | }; 515 | /* End XCConfigurationList section */ 516 | }; 517 | rootObject = 83CBB9F71A601CBA00E9B192 /* Project object */; 518 | } 519 | -------------------------------------------------------------------------------- /example/ios/AutoSkeletonExample.xcodeproj/xcshareddata/xcschemes/AutoSkeletonExample.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/AutoSkeletonExample.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /example/ios/AutoSkeletonExample/AppDelegate.swift: -------------------------------------------------------------------------------- 1 | import UIKit 2 | import React 3 | import React_RCTAppDelegate 4 | import ReactAppDependencyProvider 5 | 6 | @main 7 | class AppDelegate: RCTAppDelegate { 8 | override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool { 9 | self.moduleName = "AutoSkeletonExample" 10 | self.dependencyProvider = RCTAppDependencyProvider() 11 | 12 | // You can add your custom initial props in the dictionary below. 13 | // They will be passed down to the ViewController used by React Native. 14 | self.initialProps = [:] 15 | 16 | return super.application(application, didFinishLaunchingWithOptions: launchOptions) 17 | } 18 | 19 | override func sourceURL(for bridge: RCTBridge) -> URL? { 20 | self.bundleURL() 21 | } 22 | 23 | override func bundleURL() -> URL? { 24 | #if DEBUG 25 | RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index") 26 | #else 27 | Bundle.main.url(forResource: "main", withExtension: "jsbundle") 28 | #endif 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /example/ios/AutoSkeletonExample/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/AutoSkeletonExample/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /example/ios/AutoSkeletonExample/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | AutoSkeletonExample 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/AutoSkeletonExample/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/AutoSkeletonExample/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/File.swift: -------------------------------------------------------------------------------- 1 | // 2 | // File.swift 3 | // AutoSkeletonExample 4 | // 5 | // Created by Oleksandr Shumihin on 23/3/25. 6 | // 7 | 8 | import Foundation 9 | -------------------------------------------------------------------------------- /example/ios/Podfile: -------------------------------------------------------------------------------- 1 | ENV['RCT_NEW_ARCH_ENABLED'] = '1' 2 | 3 | # Resolve react_native_pods.rb with node to allow for hoisting 4 | require Pod::Executable.execute_command('node', ['-p', 5 | 'require.resolve( 6 | "react-native/scripts/react_native_pods.rb", 7 | {paths: [process.argv[1]]}, 8 | )', __dir__]).strip 9 | 10 | platform :ios, min_ios_version_supported 11 | prepare_react_native_project! 12 | 13 | linkage = ENV['USE_FRAMEWORKS'] 14 | if linkage != nil 15 | Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green 16 | use_frameworks! :linkage => linkage.to_sym 17 | end 18 | 19 | target 'AutoSkeletonExample' do 20 | config = use_native_modules! 21 | 22 | use_react_native!( 23 | :path => config[:reactNativePath], 24 | # An absolute path to your application root. 25 | :app_path => "#{Pod::Config.instance.installation_root}/.." 26 | ) 27 | 28 | 29 | # Run Codegen during development for the example app. 30 | pre_install do |installer| 31 | system("cd ../../ && npx bob build --target codegen") 32 | end 33 | 34 | post_install do |installer| 35 | # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202 36 | react_native_post_install( 37 | installer, 38 | config[:reactNativePath], 39 | :mac_catalyst_enabled => false, 40 | # :ccache_enabled => true 41 | ) 42 | end 43 | end 44 | -------------------------------------------------------------------------------- /example/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'react-native', 3 | }; 4 | -------------------------------------------------------------------------------- /example/metro.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const { getDefaultConfig } = require('@react-native/metro-config'); 3 | const { getConfig } = require('react-native-builder-bob/metro-config'); 4 | const pkg = require('../package.json'); 5 | 6 | const root = path.resolve(__dirname, '..'); 7 | 8 | /** 9 | * Metro configuration 10 | * https://facebook.github.io/metro/docs/configuration 11 | * 12 | * @type {import('metro-config').MetroConfig} 13 | */ 14 | module.exports = getConfig(getDefaultConfig(__dirname), { 15 | root, 16 | pkg, 17 | project: __dirname, 18 | }); 19 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-auto-skeleton-example", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "android": "react-native run-android", 7 | "ios": "react-native run-ios", 8 | "start": "react-native start", 9 | "build:android": "react-native build-android --extra-params \"--no-daemon --console=plain -PreactNativeArchitectures=arm64-v8a\"", 10 | "build:ios": "react-native build-ios --scheme AutoSkeletonExample --mode Debug --extra-params \"-sdk iphonesimulator CC=clang CPLUSPLUS=clang++ LD=clang LDPLUSPLUS=clang++ GCC_OPTIMIZATION_LEVEL=0 GCC_PRECOMPILE_PREFIX_HEADER=YES ASSETCATALOG_COMPILER_OPTIMIZATION=time DEBUG_INFORMATION_FORMAT=dwarf COMPILER_INDEX_STORE_ENABLE=NO\"" 11 | }, 12 | "dependencies": { 13 | "react": "19.0.0", 14 | "react-native": "0.78.1", 15 | "react-native-auto-skeleton": "link:../" 16 | }, 17 | "devDependencies": { 18 | "@babel/core": "^7.25.2", 19 | "@babel/preset-env": "^7.25.3", 20 | "@babel/runtime": "^7.25.0", 21 | "@react-native-community/cli": "15.0.1", 22 | "@react-native-community/cli-platform-android": "15.0.1", 23 | "@react-native-community/cli-platform-ios": "15.0.1", 24 | "@react-native/babel-preset": "0.78.1", 25 | "@react-native/metro-config": "0.78.1", 26 | "@react-native/typescript-config": "0.78.1", 27 | "react-native-builder-bob": "^0.36.0" 28 | }, 29 | "engines": { 30 | "node": ">=18" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /example/react-native.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const pkg = require('../package.json'); 3 | 4 | module.exports = { 5 | project: { 6 | ios: { 7 | automaticPodsInstallation: true, 8 | }, 9 | }, 10 | dependencies: { 11 | [pkg.name]: { 12 | root: path.join(__dirname, '..'), 13 | platforms: { 14 | // Codegen script incorrectly fails without this 15 | // So we explicitly specify the platforms with empty object 16 | ios: {}, 17 | android: {}, 18 | }, 19 | }, 20 | }, 21 | }; 22 | -------------------------------------------------------------------------------- /example/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | import { View, StyleSheet, Text, Image, TouchableOpacity } from 'react-native'; 3 | import { 4 | AutoSkeletonView, 5 | AutoSkeletonIgnoreView, 6 | } from 'react-native-auto-skeleton'; 7 | 8 | interface IProfile { 9 | name: string; 10 | jobTitle: string; 11 | avatar: string; 12 | } 13 | 14 | const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); 15 | 16 | const getProfile = async (): Promise => { 17 | await delay(2000); 18 | return { 19 | name: 'Alex Last-Name', 20 | jobTitle: 'React Native Developer', 21 | avatar: require('../assets/avatar.png'), 22 | }; 23 | }; 24 | 25 | export default function App() { 26 | const [isLoading, setIsLoading] = React.useState(false); 27 | const [profile, setProfile] = React.useState({}); 28 | 29 | const init = async () => { 30 | setIsLoading(true); 31 | const res = await getProfile(); 32 | setProfile(res); 33 | setIsLoading(false); 34 | 35 | await delay(2000); 36 | 37 | setIsLoading(true); 38 | // await delay(3000); 39 | const res2 = await getProfile(); 40 | setProfile(res2); 41 | setIsLoading(false); 42 | }; 43 | 44 | useEffect(() => { 45 | init(); 46 | }, []); 47 | 48 | return ( 49 | <> 50 | 51 | 52 | IS LOADING: {isLoading ? 'true' : 'false'} 53 | 54 | 62 | 63 | 64 | 65 | {profile.name} 66 | {profile.jobTitle} 67 | 68 | 69 | 70 | 71 | 72 | Add 73 | 74 | 75 | Delete 76 | 77 | 78 | 79 | 80 | 81 | 82 | ); 83 | } 84 | 85 | const s = StyleSheet.create({ 86 | container: { 87 | flex: 1, 88 | paddingTop: 70, 89 | paddingHorizontal: 20, 90 | }, 91 | row: { 92 | flexDirection: 'row', 93 | alignItems: 'center', 94 | }, 95 | avatarWithName: { 96 | flexDirection: 'row', 97 | columnGap: 20, 98 | }, 99 | avatar: { 100 | width: 100, 101 | height: 100, 102 | borderRadius: 12, 103 | }, 104 | name: { 105 | width: '100%', 106 | fontSize: 30, 107 | fontWeight: 'bold', 108 | marginTop: 10, 109 | }, 110 | jobTitle: { 111 | width: '100%', 112 | fontSize: 20, 113 | color: '#666', 114 | marginTop: 5, 115 | }, 116 | buttons: { 117 | marginTop: 20, 118 | flexDirection: 'row', 119 | justifyContent: 'center', 120 | columnGap: 20, 121 | }, 122 | button: { 123 | flex: 1, 124 | alignItems: 'center', 125 | paddingVertical: 10, 126 | backgroundColor: 'black', 127 | borderRadius: 10, 128 | }, 129 | buttonTitle: { 130 | color: 'white', 131 | fontSize: 20, 132 | fontWeight: 'bold', 133 | }, 134 | }); 135 | -------------------------------------------------------------------------------- /ios/React/AutoSkeleton-Bridging-Header.h: -------------------------------------------------------------------------------- 1 | // 2 | // Use this file to import your target's public headers that you would like to expose to Swift. 3 | // -------------------------------------------------------------------------------- /ios/React/AutoSkeletonIgnoreView.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | 5 | #ifndef AutoSkeletonIgnoreViewNativeComponent_h 6 | #define AutoSkeletonIgnoreViewNativeComponent_h 7 | 8 | NS_ASSUME_NONNULL_BEGIN 9 | 10 | @interface AutoSkeletonIgnoreView : RCTViewComponentView 11 | @end 12 | 13 | NS_ASSUME_NONNULL_END 14 | 15 | #endif /* AutoSkeletonViewNativeComponent_h */ 16 | -------------------------------------------------------------------------------- /ios/React/AutoSkeletonIgnoreView.mm: -------------------------------------------------------------------------------- 1 | #import "AutoSkeletonIgnoreView.h" 2 | 3 | #import "../generated/RNAutoSkeletonViewSpec/ComponentDescriptors.h" 4 | #import "../generated/RNAutoSkeletonViewSpec/EventEmitters.h" 5 | #import "../generated/RNAutoSkeletonViewSpec/Props.h" 6 | #import "../generated/RNAutoSkeletonViewSpec/RCTComponentViewHelpers.h" 7 | 8 | #import "RCTFabricComponentsPlugins.h" 9 | 10 | #import 11 | #import 12 | #import "RCTBridge.h" 13 | #if __has_include() 14 | #import 15 | #else 16 | #import "react_native_auto_skeleton-Swift.h" 17 | #endif 18 | 19 | 20 | using namespace facebook::react; 21 | 22 | @interface AutoSkeletonIgnoreView () 23 | 24 | @end 25 | 26 | @implementation AutoSkeletonIgnoreView { 27 | UIView * _view; 28 | } 29 | 30 | + (ComponentDescriptorProvider)componentDescriptorProvider 31 | { 32 | return concreteComponentDescriptorProvider(); 33 | } 34 | 35 | -(instancetype)init 36 | { 37 | if(self = [super init]) { 38 | self.accessibilityIdentifier = Constants.IGNORE_VIEW_NAME; 39 | 40 | _view = [UIView new]; 41 | _view.userInteractionEnabled = NO; 42 | self.contentView = _view; 43 | } 44 | return self; 45 | } 46 | 47 | - (instancetype)initWithFrame:(CGRect)frame 48 | { 49 | if (self = [super initWithFrame:frame]) { 50 | static const auto defaultProps = std::make_shared(); 51 | _props = defaultProps; 52 | 53 | self.accessibilityIdentifier = Constants.IGNORE_VIEW_NAME; 54 | 55 | _view = [UIView new]; 56 | _view.userInteractionEnabled = NO; 57 | 58 | self.contentView = _view; 59 | } 60 | 61 | return self; 62 | } 63 | 64 | - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps 65 | { 66 | [super updateProps:props oldProps:oldProps]; 67 | } 68 | 69 | -(void) layoutSubviews { 70 | [super layoutSubviews]; 71 | _view.frame = self.bounds; 72 | } 73 | 74 | Class AutoSkeletonIgnoreViewCls(void) 75 | { 76 | return AutoSkeletonIgnoreView.class; 77 | } 78 | 79 | 80 | @end 81 | -------------------------------------------------------------------------------- /ios/React/AutoSkeletonView.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | 5 | #ifndef AutoSkeletonViewNativeComponent_h 6 | #define AutoSkeletonViewNativeComponent_h 7 | 8 | NS_ASSUME_NONNULL_BEGIN 9 | 10 | @interface AutoSkeletonView : RCTViewComponentView 11 | @end 12 | 13 | NS_ASSUME_NONNULL_END 14 | 15 | #endif /* AutoSkeletonViewNativeComponent_h */ 16 | -------------------------------------------------------------------------------- /ios/React/AutoSkeletonView.mm: -------------------------------------------------------------------------------- 1 | #import "AutoSkeletonView.h" 2 | 3 | #import "../generated/RNAutoSkeletonViewSpec/ComponentDescriptors.h" 4 | #import "../generated/RNAutoSkeletonViewSpec/EventEmitters.h" 5 | #import "../generated/RNAutoSkeletonViewSpec/Props.h" 6 | #import "../generated/RNAutoSkeletonViewSpec/RCTComponentViewHelpers.h" 7 | 8 | #import "RCTFabricComponentsPlugins.h" 9 | #if __has_include() 10 | #import 11 | #else 12 | #import "react_native_auto_skeleton-Swift.h" 13 | #endif 14 | 15 | #import 16 | #import 17 | #import 18 | #import 19 | #import "RCTBridge.h" 20 | 21 | using namespace facebook::react; 22 | 23 | @interface AutoSkeletonView () 24 | 25 | @end 26 | 27 | @implementation AutoSkeletonView { 28 | SkeletonViewFabric* _view; 29 | } 30 | 31 | + (ComponentDescriptorProvider)componentDescriptorProvider { 32 | return concreteComponentDescriptorProvider< 33 | AutoSkeletonViewComponentDescriptor>(); 34 | } 35 | 36 | - (instancetype)init { 37 | if (self = [super init]) { 38 | _view = [SkeletonViewFabric new]; 39 | _view.userInteractionEnabled = NO; 40 | 41 | self.contentView = _view; 42 | } 43 | return self; 44 | } 45 | 46 | - (instancetype)initWithFrame:(CGRect)frame { 47 | if (self = [super initWithFrame:frame]) { 48 | static const auto defaultProps = 49 | std::make_shared(); 50 | _props = defaultProps; 51 | 52 | _view = [SkeletonViewFabric new]; 53 | _view.userInteractionEnabled = NO; 54 | 55 | [_view initOriginalViewsWithSubviews:self.subviews]; 56 | 57 | self.contentView = _view; 58 | } 59 | 60 | return self; 61 | } 62 | 63 | - (void)updateProps:(Props::Shared const&)props 64 | oldProps:(Props::Shared const&)oldProps { 65 | const auto& oldViewProps = 66 | *std::static_pointer_cast(_props); 67 | const auto& newViewProps = 68 | *std::static_pointer_cast(props); 69 | 70 | if (oldViewProps.isLoading != newViewProps.isLoading) { 71 | _view.isLoading = newViewProps.isLoading; 72 | } 73 | if (oldViewProps.shimmerSpeed != newViewProps.shimmerSpeed) { 74 | _view.animationSpeed = newViewProps.shimmerSpeed; 75 | } 76 | 77 | if (oldViewProps.shimmerBackgroundColor != 78 | newViewProps.shimmerBackgroundColor) { 79 | UIColor* uiColor = 80 | RCTUIColorFromSharedColor(newViewProps.shimmerBackgroundColor); 81 | 82 | _view.shapesBackgroundColor = uiColor; 83 | } 84 | 85 | if (oldViewProps.defaultRadius != newViewProps.defaultRadius) { 86 | _view.defaultCorderRadius = newViewProps.defaultRadius; 87 | } 88 | 89 | if (oldViewProps.animationType != newViewProps.animationType) { 90 | _view.animationType = [NSString 91 | stringWithUTF8String:newViewProps.animationType 92 | .c_str()]; 93 | } 94 | 95 | if (oldViewProps.gradientColors != newViewProps.gradientColors) { 96 | if (newViewProps.gradientColors.size() == 2) { 97 | UIColor* color1 = 98 | RCTUIColorFromSharedColor(newViewProps.gradientColors.at(0)); 99 | UIColor* color2 = 100 | RCTUIColorFromSharedColor(newViewProps.gradientColors.at(1)); 101 | NSArray* colors = 102 | [NSArray arrayWithObjects:color1, color2, nil]; 103 | [_view setGradientColors:colors]; 104 | } 105 | } 106 | 107 | [super updateProps:props oldProps:oldProps]; 108 | } 109 | 110 | - (void)layoutSubviews { 111 | [super layoutSubviews]; 112 | _view.frame = self.bounds; 113 | } 114 | 115 | Class AutoSkeletonViewCls(void) { 116 | return AutoSkeletonView.class; 117 | } 118 | 119 | - hexStringToColor:(NSString*)stringToConvert { 120 | NSString* noHashString = 121 | [stringToConvert stringByReplacingOccurrencesOfString:@"#" 122 | withString:@""]; 123 | NSScanner* stringScanner = [NSScanner scannerWithString:noHashString]; 124 | 125 | unsigned hex; 126 | if (![stringScanner scanHexInt:&hex]) 127 | return nil; 128 | int r = (hex >> 16) & 0xFF; 129 | int g = (hex >> 8) & 0xFF; 130 | int b = (hex)&0xFF; 131 | 132 | return [UIColor colorWithRed:r / 255.0f 133 | green:g / 255.0f 134 | blue:b / 255.0f 135 | alpha:1.0f]; 136 | } 137 | 138 | @end 139 | -------------------------------------------------------------------------------- /ios/React/AutoSkeletonViewManager.mm: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | #import "AutoSkeletonView.h" 4 | #import "RCTBridge.h" 5 | #if __has_include() 6 | #import 7 | #else 8 | #import "react_native_auto_skeleton-Swift.h" 9 | #endif 10 | 11 | #pragma mark SkeletonView 12 | 13 | @interface AutoSkeletonViewManager : RCTViewManager 14 | @end 15 | 16 | @implementation AutoSkeletonViewManager 17 | 18 | RCT_EXPORT_MODULE(AutoSkeletonView) 19 | 20 | RCT_CUSTOM_VIEW_PROPERTY(isLoading, BOOL, SkeletonViewOldArch) { 21 | BOOL isLoading = json ? [RCTConvert BOOL:json] : defaultView.isLoading; 22 | view.isLoading = isLoading; 23 | } 24 | 25 | RCT_CUSTOM_VIEW_PROPERTY(defaultRadius, float, SkeletonViewOldArch) { 26 | float defaultRadius = 27 | json ? [RCTConvert float:json] : defaultView.defaultCorderRadius; 28 | view.defaultCorderRadius = defaultRadius; 29 | } 30 | 31 | RCT_CUSTOM_VIEW_PROPERTY(shimmerSpeed, float, SkeletonViewOldArch) { 32 | float shimmerSpeed = 33 | json ? [RCTConvert float:json] : defaultView.animationSpeed; 34 | view.animationSpeed = shimmerSpeed; 35 | } 36 | 37 | RCT_CUSTOM_VIEW_PROPERTY(shimmerBackgroundColor, UIColor, SkeletonViewOldArch) { 38 | UIColor* uiColor = 39 | json ? [RCTConvert UIColor:json] : view.shapesBackgroundColor; 40 | 41 | view.shapesBackgroundColor = uiColor; 42 | } 43 | 44 | RCT_CUSTOM_VIEW_PROPERTY(gradientColors, 45 | NSArray, 46 | SkeletonViewOldArch) { 47 | NSArray* colors = [RCTConvert UIColorArray:json]; 48 | 49 | [view setGradientColors:colors]; 50 | } 51 | 52 | RCT_CUSTOM_VIEW_PROPERTY(animationType, NSString, SkeletonViewOldArch) { 53 | NSString* animationType = 54 | json ? [RCTConvert NSString:json] : view.animationType; 55 | 56 | [view setAnimationType:animationType]; 57 | } 58 | 59 | - (UIView*)view { 60 | SkeletonViewOldArch* view = [SkeletonViewOldArch new]; 61 | view.userInteractionEnabled = NO; 62 | return view; 63 | } 64 | 65 | RCT_EXPORT_VIEW_PROPERTY(color, NSString) 66 | 67 | @end 68 | 69 | // ----------- 70 | 71 | #pragma mark SkeletonIgnoreView 72 | 73 | @interface AutoSkeletonViewIgnoreManager : RCTViewManager 74 | @end 75 | 76 | @implementation AutoSkeletonViewIgnoreManager 77 | 78 | RCT_EXPORT_MODULE(AutoSkeletonIgnoreView) 79 | 80 | - (UIView*)view { 81 | UIView* view = [UIView new]; 82 | view.userInteractionEnabled = NO; 83 | view.accessibilityIdentifier = Constants.IGNORE_VIEW_NAME; 84 | return view; 85 | } 86 | 87 | @end 88 | -------------------------------------------------------------------------------- /ios/SkeletonView/Animations/AnimationBase.swift: -------------------------------------------------------------------------------- 1 | // 2 | // AnimationBase.swift 3 | // react-native-auto-skeleton 4 | // 5 | // Created by Oleksandr Shumihin on 30/3/25. 6 | // 7 | 8 | import Foundation 9 | 10 | 11 | class AnimationBase:SkeletonAnimatable { 12 | weak var delegate: SkeletonAnimatableDelegate? 13 | var isAnimating = false 14 | 15 | var animatedLayer: CALayer? { 16 | fatalError("Subclasses must override `animatedLayer`") 17 | } 18 | 19 | var duration: TimeInterval = 1.0 { 20 | didSet { 21 | restart() 22 | } 23 | } 24 | 25 | func start() { 26 | } 27 | 28 | func stop() { 29 | animatedLayer?.removeAllAnimations() 30 | } 31 | 32 | func restart() { 33 | stop() 34 | start() 35 | } 36 | 37 | func updateBounds(bounds: CGRect) {} 38 | } 39 | -------------------------------------------------------------------------------- /ios/SkeletonView/Animations/AnimationGradient.swift: -------------------------------------------------------------------------------- 1 | // 2 | // Animations.swift 3 | // react-native-auto-skeleton 4 | // 5 | // Created by Oleksandr Shumihin on 30/3/25. 6 | // 7 | 8 | import Foundation 9 | 10 | private let ANIMATION_NAME = "alphaGradientAnimation" 11 | 12 | 13 | final class AnimationGradient: AnimationBase { 14 | 15 | override var animatedLayer: CALayer? { gradientLayer } 16 | 17 | private let animation = CABasicAnimation(keyPath: "colors") 18 | 19 | private let gradientLayer: CAGradientLayer = { 20 | let layer = CAGradientLayer() 21 | 22 | layer.colors = [ 23 | DEFAULT_GRADIENT_COLORS[0].cgColor, 24 | DEFAULT_GRADIENT_COLORS[1].cgColor, 25 | DEFAULT_GRADIENT_COLORS[0].cgColor, 26 | ] 27 | 28 | layer.startPoint = CGPoint(x: 0, y: 0.5) 29 | layer.endPoint = CGPoint(x: 1, y: 0.5) 30 | 31 | layer.locations = [0, 0.5, 1] 32 | 33 | return layer 34 | }() 35 | 36 | 37 | override func start() { 38 | if(gradientLayer.animation(forKey: ANIMATION_NAME) != nil){ 39 | super.stop() 40 | } 41 | 42 | gradientLayer.frame = delegate?.mainLayer.bounds ?? .zero 43 | 44 | let colors = delegate?.gradientColors ?? DEFAULT_GRADIENT_COLORS 45 | 46 | animation.fromValue = [ 47 | colors[0].cgColor, 48 | colors[1].cgColor, 49 | colors[0].cgColor, 50 | ] 51 | animation.toValue = [ 52 | colors[1].cgColor, 53 | colors[0].cgColor, 54 | colors[1].cgColor, 55 | ] 56 | 57 | animation.duration = duration 58 | 59 | animation.autoreverses = true 60 | animation.repeatCount = .infinity 61 | 62 | gradientLayer.add(animation, forKey: ANIMATION_NAME) 63 | 64 | if(gradientLayer.superlayer == nil){ 65 | delegate?.mainLayer.addSublayer(gradientLayer) 66 | } 67 | } 68 | 69 | override func updateBounds(bounds: CGRect) { 70 | gradientLayer.frame = bounds 71 | } 72 | 73 | deinit { 74 | gradientLayer.removeAnimation(forKey: ANIMATION_NAME ) 75 | gradientLayer.removeFromSuperlayer() 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /ios/SkeletonView/Animations/AnimationNone.swift: -------------------------------------------------------------------------------- 1 | 2 | 3 | // 4 | // Animations.swift 5 | // react-native-auto-skeleton 6 | // 7 | // Created by Oleksandr Shumihin on 30/3/25. 8 | // 9 | 10 | import Foundation 11 | 12 | 13 | final class AnimationNone: AnimationBase { 14 | override var animatedLayer: CALayer? { 15 | return delegate?.mainLayer 16 | } 17 | 18 | 19 | override func start() { 20 | } 21 | 22 | deinit { 23 | 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /ios/SkeletonView/Animations/AnimationPulse.swift: -------------------------------------------------------------------------------- 1 | 2 | // 3 | // Animations.swift 4 | // react-native-auto-skeleton 5 | // 6 | // Created by Oleksandr Shumihin on 30/3/25. 7 | // 8 | 9 | import Foundation 10 | 11 | private let ANIMATION_NAME = "animationPulse" 12 | 13 | final class AnimationPulse: AnimationBase { 14 | override var animatedLayer: CALayer? { 15 | return delegate?.mainLayer 16 | } 17 | 18 | private let animation = CABasicAnimation(keyPath: "opacity") 19 | 20 | override func start() { 21 | if(animatedLayer?.animation(forKey: ANIMATION_NAME) != nil){ 22 | super.stop() 23 | } 24 | 25 | animation.fromValue = 1.0 26 | animation.toValue = 0.5 27 | 28 | animation.duration = duration 29 | 30 | animation.autoreverses = true 31 | animation.repeatCount = .infinity 32 | 33 | animatedLayer?.add(animation, forKey: ANIMATION_NAME) 34 | } 35 | 36 | deinit { 37 | animatedLayer?.removeAnimation(forKey: ANIMATION_NAME) 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /ios/SkeletonView/Constants.swift: -------------------------------------------------------------------------------- 1 | import Foundation 2 | 3 | @objc public class Constants: NSObject { 4 | @objc public static let IGNORE_VIEW_NAME = "skeleton_ignore_view" 5 | 6 | } 7 | 8 | let RCT_COMPONENTS_SET = Set(["RCTImageComponentView", "RCTImageView", "RCTParagraphComponentView", "RCTTextInputComponentView"]) 9 | -------------------------------------------------------------------------------- /ios/SkeletonView/SkeletonCore.swift: -------------------------------------------------------------------------------- 1 | // 2 | // SkeletonView.swift 3 | // intch_application 4 | // 5 | // Created by Oleksandr Shumihin on 21/3/25. 6 | // Copyright © 2025 Facebook. All rights reserved. 7 | // 8 | 9 | import Foundation 10 | import UIKit 11 | 12 | let DEFAULT_GRADIENT_COLORS: [UIColor] = [UIColor.lightGray, UIColor.white] 13 | let DEFAULT_BG_COLOR = UIColor.lightGray 14 | 15 | enum AnimationTypes:String { 16 | case gradient 17 | case pulse 18 | case none 19 | } 20 | 21 | @objcMembers 22 | public class SkeletonCore: UIView, PlaceholderMaskDelegate, SkeletonAnimatableDelegate { 23 | var mainLayer = CAShapeLayer() 24 | var views: [UIView] = [] 25 | 26 | private let placeholderMask = SkeletonPlaceholderMask() 27 | 28 | private var animator: SkeletonAnimatable = AnimationGradient() 29 | 30 | public var isLoading: Bool = false { 31 | didSet { 32 | DispatchQueue.main.async { 33 | self.isLoading ? self.showPlaceholder() : self.hidePlaceholder() 34 | } 35 | } 36 | } 37 | 38 | public var shapesBackgroundColor: UIColor = DEFAULT_BG_COLOR { 39 | didSet { 40 | mainLayer.backgroundColor = shapesBackgroundColor.cgColor 41 | } 42 | } 43 | 44 | public var gradientColors: [UIColor] = DEFAULT_GRADIENT_COLORS { 45 | didSet { 46 | guard let animator = animator as? AnimationGradient else { return } 47 | animator.restart() 48 | } 49 | } 50 | 51 | public var animationSpeed: TimeInterval = 1.0 { 52 | didSet { 53 | animator.duration = animationSpeed 54 | } 55 | } 56 | 57 | public var defaultCorderRadius = 4.0 { 58 | didSet { 59 | placeholderMask.defaultBorderRadius = defaultCorderRadius 60 | } 61 | } 62 | 63 | public var animationType: String = AnimationTypes.gradient.rawValue { 64 | didSet { 65 | guard let type = AnimationTypes(rawValue: animationType) else { 66 | setAnimatorByAnimationType(type: AnimationTypes.gradient) 67 | return 68 | } 69 | 70 | setAnimatorByAnimationType(type: type) 71 | } 72 | } 73 | 74 | override public init(frame: CGRect) { 75 | super.init(frame: frame) 76 | commonInit() 77 | } 78 | 79 | public required init?(coder: NSCoder) { 80 | super.init(coder: coder) 81 | commonInit() 82 | } 83 | 84 | func commonInit(){ 85 | layer.addSublayer(mainLayer) 86 | mainLayer.isHidden = true 87 | placeholderMask.delegate = self 88 | animator.delegate = self 89 | } 90 | 91 | override public func didMoveToWindow() { 92 | super.didMoveToWindow() 93 | } 94 | 95 | override public func layoutSubviews() { 96 | super.layoutSubviews() 97 | mainLayer.frame = bounds 98 | 99 | animator.updateBounds(bounds: bounds) 100 | } 101 | 102 | 103 | private func setAnimatorByAnimationType(type:AnimationTypes) { 104 | switch type { 105 | case .gradient: 106 | setAnimator(AnimationGradient()) 107 | break 108 | case .pulse: 109 | setAnimator(AnimationPulse()) 110 | break 111 | case .none: 112 | setAnimator(AnimationNone()) 113 | break 114 | } 115 | } 116 | 117 | private func setAnimator(_ animator: SkeletonAnimatable) { 118 | self.animator.stop() 119 | self.animator = animator 120 | self.animator.delegate = self 121 | 122 | if(isLoading){ 123 | self.animator.start() 124 | } 125 | } 126 | 127 | public func initOriginalViews(subviews: [UIView]) { 128 | views.removeAll() 129 | 130 | views = subviews.filter { 131 | if $0.accessibilityIdentifier == Constants.IGNORE_VIEW_NAME { 132 | return false 133 | } 134 | 135 | if $0.backgroundColor != nil && $0.backgroundColor != .clear && !($0 is SkeletonCore) { 136 | return true 137 | } 138 | 139 | let className = String(describing: type(of: $0)) 140 | 141 | if RCT_COMPONENTS_SET.contains(className) { 142 | return true 143 | } 144 | return false 145 | } 146 | } 147 | 148 | func showPlaceholder() { 149 | mainLayer.isHidden = false 150 | placeholderMask.applyMask() 151 | 152 | UIView.transition(with: self, duration: 0.2, options: [.transitionCrossDissolve], animations: { 153 | self.views.forEach { $0.isHidden = true } 154 | }, completion: { _ in 155 | self.animator.start() 156 | }) 157 | } 158 | 159 | func hidePlaceholder() { 160 | UIView.transition(with: self, duration: 0.2, options: [.transitionCrossDissolve], animations: { 161 | self.mainLayer.isHidden = true 162 | self.views.forEach { $0.isHidden = false } 163 | }, completion: { _ in 164 | self.animator.stop() 165 | }) 166 | } 167 | } 168 | -------------------------------------------------------------------------------- /ios/SkeletonView/SkeletonPlaceholderMask.swift: -------------------------------------------------------------------------------- 1 | // 2 | // PlaceholderMask.swift 3 | // react-native-auto-skeleton 4 | // 5 | // Created by Oleksandr Shumihin on 30/3/25. 6 | // 7 | 8 | import Foundation 9 | 10 | final class SkeletonPlaceholderMask { 11 | weak var delegate: PlaceholderMaskDelegate? 12 | 13 | var defaultBorderRadius: CGFloat = 4.0 { 14 | didSet { 15 | applyMask() 16 | } 17 | } 18 | 19 | let maskLayer = CAShapeLayer() 20 | 21 | func applyMask() { 22 | 23 | guard let targedDelegate = delegate else { return } 24 | 25 | maskLayer.frame = targedDelegate.bounds 26 | 27 | let combinedPath = UIBezierPath() 28 | 29 | for originalView in targedDelegate.views { 30 | let convertedFrame = originalView.frame 31 | 32 | let radius = originalView.layer.cornerRadius > 0 ? originalView.layer.cornerRadius : defaultBorderRadius 33 | 34 | let path = UIBezierPath(roundedRect: convertedFrame, 35 | cornerRadius: radius) 36 | 37 | combinedPath.append(path) 38 | } 39 | 40 | maskLayer.path = combinedPath.cgPath 41 | 42 | targedDelegate.mainLayer.mask = maskLayer 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /ios/SkeletonView/SkeletonProtocols.swift: -------------------------------------------------------------------------------- 1 | // 2 | // SkeletonProtocols.swift 3 | // Pods 4 | // 5 | // Created by Oleksandr Shumihin on 30/3/25. 6 | // 7 | 8 | protocol SkeletonRenderable: AnyObject { 9 | var mainLayer: CAShapeLayer { get set } 10 | } 11 | 12 | protocol SkeletonGradientSupporting: AnyObject { 13 | var gradientColors: [UIColor] { get set } 14 | } 15 | 16 | typealias SkeletonAnimatableDelegate = SkeletonRenderable & SkeletonGradientSupporting 17 | 18 | protocol SkeletonAnimatableBase { 19 | var animatedLayer: CALayer? { get } 20 | func start() 21 | func stop() 22 | func restart() 23 | func updateBounds(bounds: CGRect) 24 | } 25 | 26 | protocol SkeletonAnimatable:SkeletonAnimatableBase { 27 | var duration: TimeInterval { get set } 28 | var delegate: SkeletonAnimatableDelegate? { get set } 29 | var animatedLayer: CALayer? { get } 30 | func start() 31 | func stop() 32 | func restart() 33 | func updateBounds(bounds: CGRect) 34 | } 35 | 36 | protocol PlaceholderMaskDelegate: UIView, SkeletonRenderable { 37 | var views: [UIView] { get set } 38 | } 39 | -------------------------------------------------------------------------------- /ios/SkeletonView/SkeletonViewFabric.swift: -------------------------------------------------------------------------------- 1 | // 2 | // SkeletonView.swift 3 | // intch_application 4 | // 5 | // Created by Oleksandr Shumihin on 21/3/25. 6 | // Copyright © 2025 Facebook. All rights reserved. 7 | // 8 | 9 | import Foundation 10 | import UIKit 11 | 12 | @objcMembers 13 | public class SkeletonViewFabric: SkeletonCore { 14 | override public func didMoveToWindow() { 15 | super.didMoveToWindow() 16 | 17 | guard let superview else { return } 18 | if self.window == nil { 19 | hidePlaceholder() 20 | return 21 | } 22 | initOriginalViews(subviews: superview.subviews) 23 | 24 | if isLoading { 25 | showPlaceholder() 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /ios/SkeletonView/SkeletonViewOldArch.swift: -------------------------------------------------------------------------------- 1 | 2 | // 3 | // SkeletonView.swift 4 | // intch_application 5 | // 6 | // Created by Oleksandr Shumihin on 21/3/25. 7 | // Copyright © 2025 Facebook. All rights reserved. 8 | // 9 | 10 | import Foundation 11 | import UIKit 12 | 13 | 14 | @objcMembers 15 | public class SkeletonViewOldArch: SkeletonCore { 16 | 17 | override public func layoutSubviews() { 18 | super.layoutSubviews() 19 | 20 | DispatchQueue.main.async { 21 | let views = self.flattenSubviews(from: self.subviews) 22 | 23 | self.initOriginalViews(subviews: views) 24 | 25 | if self.isLoading { 26 | self.showPlaceholder() 27 | } 28 | } 29 | } 30 | 31 | func flattenSubviews(from views: [UIView]) -> [UIView] { 32 | var result: [UIView] = [] 33 | 34 | for view in views { 35 | if(view.accessibilityIdentifier == Constants.IGNORE_VIEW_NAME){ 36 | continue 37 | } 38 | 39 | result.append(view) 40 | if !view.subviews.isEmpty { 41 | result.append(contentsOf: flattenSubviews(from: view.subviews)) 42 | } 43 | } 44 | 45 | return result 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-auto-skeleton", 3 | "version": "0.1.26", 4 | "description": "🚀 Automatically generates skeleton based on your existing UI layout without manual configuration.", 5 | "main": "./lib/commonjs/index.js", 6 | "module": "./lib/module/index.js", 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 | "app.plugin.js", 17 | "*.podspec", 18 | "react-native.config.js", 19 | "!ios/build", 20 | "!android/build", 21 | "!android/gradle", 22 | "!android/gradlew", 23 | "!android/gradlew.bat", 24 | "!android/local.properties", 25 | "!**/__tests__", 26 | "!**/__fixtures__", 27 | "!**/__mocks__", 28 | "!**/.*" 29 | ], 30 | "scripts": { 31 | "example": "yarn workspace react-native-auto-skeleton-example", 32 | "test": "jest", 33 | "typecheck": "tsc", 34 | "lint": "eslint \"**/*.{js,ts,tsx}\"", 35 | "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib", 36 | "prepare": "bob build", 37 | "release": "release-it" 38 | }, 39 | "keywords": [ 40 | "react-native", 41 | "ios", 42 | "android", 43 | "skeleton", 44 | "skeleton-loader", 45 | "loading-placeholder", 46 | "shimmer-effect", 47 | "react-native-skeleton", 48 | "react-native-loading", 49 | "react-native-shimmer", 50 | "react-native-placeholder", 51 | "react-native-skeleton-loader", 52 | "react-native-shimmer-placeholder", 53 | "react-native-shimmer-placeholder-view", 54 | "react-native-shimmer-placeholder-view-component", 55 | "react-native-shimmer-placeholder-component", 56 | "react-native-shimmer-placeholder-component-view", 57 | "shimmer-placeholder", 58 | "rn-skeleton", 59 | "rn-loading", 60 | "rn-shimmer", 61 | "rn-placeholder", 62 | "rn-skeleton-loader", 63 | "rn-shimmer-placeholder", 64 | "rn-shimmer-placeholder-view", 65 | "skeleton-placeholder", 66 | "skeleton-placeholder-view", 67 | "skeleton-placeholder-component", 68 | "skeleton-placeholder-component-view", 69 | "react-native-skeleton-placeholder", 70 | "react-native-placeholder-loader" 71 | ], 72 | "repository": { 73 | "type": "git", 74 | "url": "git+https://github.com/pioner92/react-native-auto-skeleton.git" 75 | }, 76 | "author": "pioner921227 (https://github.com/pioner92)", 77 | "license": "MIT", 78 | "bugs": { 79 | "url": "https://github.com/pioner92/react-native-auto-skeleton/issues" 80 | }, 81 | "homepage": "https://github.com/pioner92/react-native-auto-skeleton#readme", 82 | "publishConfig": { 83 | "registry": "https://registry.npmjs.org/" 84 | }, 85 | "devDependencies": { 86 | "@commitlint/config-conventional": "^19.6.0", 87 | "@evilmartians/lefthook": "^1.5.0", 88 | "@expo/config-plugins": "^9.0.17", 89 | "@react-native-community/cli": "15.0.1", 90 | "@react-native/eslint-config": "^0.73.1", 91 | "@release-it/conventional-changelog": "^9.0.2", 92 | "@types/jest": "^29.5.5", 93 | "@types/react": "^18.2.44", 94 | "commitlint": "^19.6.1", 95 | "del-cli": "^5.1.0", 96 | "eslint": "^8.51.0", 97 | "eslint-config-prettier": "^9.0.0", 98 | "eslint-plugin-prettier": "^5.0.1", 99 | "jest": "^29.7.0", 100 | "prettier": "^3.0.3", 101 | "react": "19.0.0", 102 | "react-native": "0.78.1", 103 | "react-native-builder-bob": "^0.36.0", 104 | "release-it": "^17.10.0", 105 | "turbo": "^1.10.7", 106 | "typescript": "^5.2.2" 107 | }, 108 | "resolutions": { 109 | "@types/react": "^18.2.44" 110 | }, 111 | "peerDependencies": { 112 | "react": "*", 113 | "react-native": "*" 114 | }, 115 | "workspaces": [ 116 | "example" 117 | ], 118 | "packageManager": "yarn@3.6.1", 119 | "jest": { 120 | "preset": "react-native", 121 | "modulePathIgnorePatterns": [ 122 | "/example/node_modules", 123 | "/lib/" 124 | ] 125 | }, 126 | "commitlint": { 127 | "extends": [ 128 | "@commitlint/config-conventional" 129 | ] 130 | }, 131 | "release-it": { 132 | "git": { 133 | "commitMessage": "chore: release ${version}", 134 | "tagName": "v${version}" 135 | }, 136 | "npm": { 137 | "publish": true 138 | }, 139 | "github": { 140 | "release": true 141 | }, 142 | "plugins": { 143 | "@release-it/conventional-changelog": { 144 | "preset": { 145 | "name": "angular" 146 | } 147 | } 148 | } 149 | }, 150 | "eslintConfig": { 151 | "root": true, 152 | "extends": [ 153 | "@react-native", 154 | "prettier" 155 | ], 156 | "rules": { 157 | "react/react-in-jsx-scope": "off", 158 | "prettier/prettier": [ 159 | "error", 160 | { 161 | "quoteProps": "consistent", 162 | "singleQuote": true, 163 | "tabWidth": 2, 164 | "trailingComma": "es5", 165 | "useTabs": false 166 | } 167 | ] 168 | } 169 | }, 170 | "eslintIgnore": [ 171 | "node_modules/", 172 | "lib/" 173 | ], 174 | "prettier": { 175 | "quoteProps": "consistent", 176 | "singleQuote": true, 177 | "tabWidth": 2, 178 | "trailingComma": "es5", 179 | "useTabs": false 180 | }, 181 | "react-native-builder-bob": { 182 | "source": "src", 183 | "output": "lib", 184 | "targets": [ 185 | "commonjs", 186 | "module", 187 | [ 188 | "typescript", 189 | { 190 | "project": "tsconfig.build.json" 191 | } 192 | ] 193 | ] 194 | }, 195 | "codegenConfig": { 196 | "name": "RNAutoSkeletonViewSpec", 197 | "type": "all", 198 | "jsSrcsDir": "src", 199 | "outputDir": { 200 | "ios": "ios/generated", 201 | "android": "android/generated" 202 | }, 203 | "android": { 204 | "javaPackageName": "com.autoskeleton" 205 | }, 206 | "includesGeneratedCode": true 207 | }, 208 | "create-react-native-library": { 209 | "languages": "kotlin-objc", 210 | "type": "fabric-view", 211 | "version": "0.48.5" 212 | } 213 | } 214 | -------------------------------------------------------------------------------- /react-native-auto-skeleton.podspec: -------------------------------------------------------------------------------- 1 | require "json" 2 | 3 | package = JSON.parse(File.read(File.join(__dir__, "package.json"))) 4 | 5 | Pod::Spec.new do |s| 6 | s.name = "react-native-auto-skeleton" 7 | s.version = package["version"] 8 | s.summary = package["description"] 9 | s.homepage = package["homepage"] 10 | s.license = package["license"] 11 | s.authors = package["author"] 12 | 13 | s.platforms = { :ios => min_ios_version_supported } 14 | s.source = { :git => "https://github.com/pioner92/react-native-auto-skeleton.git", :tag => "#{s.version}" } 15 | 16 | s.static_framework = true 17 | s.swift_version = "5.0" 18 | s.module_name = "react_native_auto_skeleton" 19 | s.source_files = "ios/**/*.{m,mm,cpp,swift}" 20 | s.private_header_files = "ios/generated/**/*.h" 21 | 22 | s.pod_target_xcconfig = { 23 | "DEFINES_MODULE" => "YES", 24 | "SWIFT_COMPILATION_MODE" => "wholemodule", 25 | "CLANG_CXX_LANGUAGE_STANDARD" => "c++17", 26 | } 27 | 28 | 29 | 30 | s.preserve_paths = [ 31 | "ios/**/*.h" 32 | ] 33 | 34 | # Use install_modules_dependencies helper to install the dependencies if React Native version >=0.71.0. 35 | # See https://github.com/facebook/react-native/blob/febf6b7f33fdb4904669f99d795eba4c0f95d7bf/scripts/cocoapods/new_architecture.rb#L79. 36 | if respond_to?(:install_modules_dependencies, true) 37 | install_modules_dependencies(s) 38 | else 39 | s.dependency "React-Core" 40 | end 41 | end 42 | -------------------------------------------------------------------------------- /react-native.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @type {import('@react-native-community/cli-types').UserDependencyConfig} 3 | */ 4 | module.exports = { 5 | dependency: { 6 | platforms: { 7 | android: { 8 | cmakeListsPath: 'generated/jni/CMakeLists.txt', 9 | }, 10 | ios: {}, 11 | }, 12 | }, 13 | }; 14 | -------------------------------------------------------------------------------- /src/AutoSkeletonIgnoreViewNativeComponent.ts: -------------------------------------------------------------------------------- 1 | import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; 2 | import type { ViewProps } from 'react-native'; 3 | 4 | interface NativeProps extends ViewProps {} 5 | 6 | export default codegenNativeComponent('AutoSkeletonIgnoreView'); 7 | -------------------------------------------------------------------------------- /src/AutoSkeletonViewNativeComponent.ts: -------------------------------------------------------------------------------- 1 | import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; 2 | import type { Float } from 'react-native/Libraries/Types/CodegenTypes'; 3 | import type { ViewProps, ColorValue } from 'react-native'; 4 | 5 | export interface NativeProps extends ViewProps { 6 | /** 7 | * Enables or disables the skeleton state. 8 | * When `true`, skeleton placeholders will be shown over eligible views. 9 | */ 10 | isLoading: boolean; 11 | 12 | /** 13 | * Duration of one shimmer animation cycle in seconds. 14 | * 15 | * - `1.0` second is the default speed (1 shimmer per second). 16 | * - Lower values will make the shimmer animate faster (e.g., `0.5` = 2 shimmers per second). 17 | * - Higher values will slow it down (e.g., `2.0` = 1 shimmer every 2 seconds). 18 | * 19 | * @default 1.0 20 | * @units seconds 21 | */ 22 | shimmerSpeed?: Float; 23 | 24 | /** 25 | * Background color for the skeleton shapes. 26 | * 27 | * @example "#E0E0E0" 28 | */ 29 | shimmerBackgroundColor?: ColorValue; 30 | 31 | /** 32 | * Gradient colors for the skeleton gradient. 33 | * 34 | * @example ["#cccccc", "#F0F0F0"] 35 | */ 36 | gradientColors?: ColorValue[]; 37 | 38 | /** 39 | * Default corner radius applied to skeleton elements that don't have an explicit `borderRadius`. 40 | * 41 | * @default 4 42 | */ 43 | defaultRadius?: Float; 44 | 45 | /** 46 | * The animation type to use for the skeleton view. 47 | * 48 | * - `gradient`: A gradient animation. 49 | * - `pulse`: A pulse animation. 50 | * - `none`: No animation. 51 | * 52 | * @default 'gradient' 53 | */ 54 | animationType?: string; 55 | } 56 | 57 | export default codegenNativeComponent('AutoSkeletonView'); 58 | -------------------------------------------------------------------------------- /src/expo-plugins/withAutoSkeleton.js: -------------------------------------------------------------------------------- 1 | module.exports = function withAutoSkeleton(config) { 2 | return config; 3 | }; 4 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | // export { default as AutoSkeletonView } from './AutoSkeletonViewNativeComponent'; 2 | export { default as AutoSkeletonIgnoreView } from './AutoSkeletonIgnoreViewNativeComponent'; 3 | import { ColorValue, Platform, processColor } from 'react-native'; 4 | import { default as AutoSkeletonView__ } from './AutoSkeletonViewNativeComponent'; 5 | import { useMemo } from 'react'; 6 | import React from 'react'; 7 | 8 | interface IProps { 9 | /** 10 | * Enables or disables the skeleton state. 11 | * When `true`, skeleton placeholders will be shown over eligible views. 12 | */ 13 | isLoading: boolean; 14 | 15 | /** 16 | * Duration of one shimmer animation cycle in seconds. 17 | * 18 | * - `1.0` second is the default speed (1 shimmer per second). 19 | * - Lower values will make the shimmer animate faster (e.g., `0.5` = 2 shimmers per second). 20 | * - Higher values will slow it down (e.g., `2.0` = 1 shimmer every 2 seconds). 21 | * 22 | * @default 1.0 23 | * @units seconds 24 | */ 25 | shimmerSpeed?: number; 26 | 27 | /** 28 | * Background color for the skeleton shapes. 29 | * 30 | * @example "#E0E0E0" 31 | */ 32 | shimmerBackgroundColor?: string; 33 | 34 | /** 35 | * Gradient colors for the skeleton gradient. 36 | * 37 | * @example ["#cccccc", "#F0F0F0"] 38 | */ 39 | gradientColors?: [string, string]; 40 | 41 | /** 42 | * Default corner radius applied to skeleton elements that don't have an explicit `borderRadius`. 43 | * 44 | * @default 4 45 | */ 46 | defaultRadius?: number; 47 | 48 | /** 49 | * The animation type to use for the skeleton view. 50 | * 51 | * - `gradient`: A gradient animation. 52 | * - `pulse`: A pulse animation. 53 | * - `none`: No animation. 54 | * 55 | * @default 'gradient' 56 | */ 57 | animationType?: 'gradient' | 'pulse' | 'none'; 58 | } 59 | 60 | const DEFAULT_GRADIENT_COLORS: ColorValue[] = ['#D3D3D3', '#FFFFFF']; 61 | const DEFAULT_BORDER_RADIUS = 4; 62 | const DEFAULT_ANIMATION_DURATION = 1.0; // seconds 63 | 64 | export const AutoSkeletonView: React.FC> = 65 | React.memo((props) => { 66 | const gColors = useMemo(() => { 67 | //@ts-ignore 68 | if (Platform.OS === 'ios' && global._IS_FABRIC === false) { 69 | return (props.gradientColors ?? DEFAULT_GRADIENT_COLORS).map((color) => 70 | processColor(color) 71 | ) as ColorValue[]; 72 | } 73 | 74 | return props.gradientColors ?? DEFAULT_GRADIENT_COLORS; 75 | }, [props.gradientColors]); 76 | 77 | return ( 78 | 85 | ); 86 | }); 87 | -------------------------------------------------------------------------------- /tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "exclude": [ 4 | "example" 5 | ] 6 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "paths": { 5 | "react-native-auto-skeleton": [ 6 | "./src/index" 7 | ] 8 | }, 9 | "allowUnreachableCode": false, 10 | "allowUnusedLabels": false, 11 | "esModuleInterop": true, 12 | "forceConsistentCasingInFileNames": true, 13 | "jsx": "react-native", 14 | "lib": [ 15 | "esnext", 16 | "DOM" 17 | ], 18 | "module": "esnext", 19 | "moduleResolution": "node", 20 | "noFallthroughCasesInSwitch": true, 21 | "noImplicitReturns": true, 22 | "noImplicitUseStrict": false, 23 | "noStrictGenericChecks": false, 24 | "noUnusedLocals": true, 25 | "noUnusedParameters": true, 26 | "resolveJsonModule": true, 27 | "skipLibCheck": true, 28 | "strict": true, 29 | "target": "esnext" 30 | }, 31 | "exclude": [ 32 | "example", 33 | "node_modules", 34 | "dist" 35 | ] 36 | } -------------------------------------------------------------------------------- /turbo.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://turbo.build/schema.json", 3 | "pipeline": { 4 | "build:android": { 5 | "env": ["ORG_GRADLE_PROJECT_newArchEnabled"], 6 | "inputs": [ 7 | "package.json", 8 | "android", 9 | "!android/build", 10 | "src/*.ts", 11 | "src/*.tsx", 12 | "example/package.json", 13 | "example/android", 14 | "!example/android/.gradle", 15 | "!example/android/build", 16 | "!example/android/app/build" 17 | ], 18 | "outputs": [] 19 | }, 20 | "build:ios": { 21 | "env": ["RCT_NEW_ARCH_ENABLED"], 22 | "inputs": [ 23 | "package.json", 24 | "*.podspec", 25 | "ios", 26 | "src/*.ts", 27 | "src/*.tsx", 28 | "example/package.json", 29 | "example/ios", 30 | "!example/ios/build", 31 | "!example/ios/Pods" 32 | ], 33 | "outputs": [] 34 | } 35 | } 36 | } 37 | --------------------------------------------------------------------------------