├── .buckconfig ├── .eslintignore ├── .eslintrc ├── .github └── workflows │ └── publish.yml ├── .gitignore ├── .husky ├── commit-msg ├── pre-commit └── pre-push ├── .npmignore ├── .prettierrc.js ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── assets ├── SingleStory.gif ├── StoryView.gif ├── banner.png ├── cube.gif ├── custom_view.png ├── default.gif ├── footer.gif ├── footer.png ├── header.png ├── multiStoryContainer.gif ├── multistory.gif ├── overlay.png ├── progressbar.gif ├── scale.gif └── stories_list.gif ├── babel.config.js ├── example ├── .bundle │ └── config ├── .eslintrc ├── .gitignore ├── .node-version ├── .prettierrc.js ├── Gemfile ├── README.md ├── android │ ├── app │ │ ├── _BUCK │ │ ├── build.gradle │ │ ├── debug.keystore │ │ ├── proguard-rules.pro │ │ └── src │ │ │ ├── debug │ │ │ ├── AndroidManifest.xml │ │ │ └── java │ │ │ │ └── com │ │ │ │ └── rnstoryview │ │ │ │ └── ReactNativeFlipper.java │ │ │ ├── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── java │ │ │ │ └── com │ │ │ │ │ └── rnstoryview │ │ │ │ │ ├── MainActivity.java │ │ │ │ │ └── MainApplication.java │ │ │ └── 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 │ │ │ └── release │ │ │ └── java │ │ │ └── com │ │ │ └── rnstoryview │ │ │ └── ReactNativeFlipper.java │ ├── build.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ └── settings.gradle ├── app.json ├── babel.config.js ├── index.js ├── ios │ ├── .xcode.env │ ├── Podfile │ ├── Podfile.lock │ ├── RNStoryView.xcodeproj │ │ ├── project.pbxproj │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ └── RNStoryView.xcscheme │ ├── RNStoryView.xcworkspace │ │ ├── contents.xcworkspacedata │ │ └── xcshareddata │ │ │ └── IDEWorkspaceChecks.plist │ ├── RNStoryView │ │ ├── AppDelegate.h │ │ ├── AppDelegate.mm │ │ ├── Images.xcassets │ │ │ ├── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ │ └── Contents.json │ │ ├── Info.plist │ │ ├── LaunchScreen.storyboard │ │ └── main.m │ └── RNStoryViewTests │ │ ├── Info.plist │ │ └── RNStoryViewTests.m ├── metro.config.js ├── package.json ├── react-native-config.js ├── src │ ├── App.tsx │ ├── assets │ │ ├── background.jpg │ │ └── index.ts │ ├── components │ │ ├── Footer.tsx │ │ ├── Header.tsx │ │ ├── Overlay.tsx │ │ ├── index.ts │ │ └── types.ts │ ├── constants │ │ ├── NavigationStrings.ts │ │ ├── Strings.ts │ │ ├── index.ts │ │ └── stories.ts │ ├── modules │ │ ├── Home │ │ │ ├── HomeScreen.tsx │ │ │ ├── styles.ts │ │ │ └── types.ts │ │ ├── MultiStory │ │ │ ├── MultiStoryScreen.tsx │ │ │ ├── index.ts │ │ │ └── styles.ts │ │ ├── Story │ │ │ ├── StoryScreen.tsx │ │ │ └── styles.ts │ │ └── index.ts │ ├── navigation │ │ └── Routes.tsx │ └── theme │ │ ├── Colors.ts │ │ ├── Metrics.ts │ │ ├── applicationStyles.ts │ │ └── index.ts └── tsconfig.json ├── jest-setup.js ├── package.json ├── src ├── assets │ ├── icons │ │ ├── close_icon.png │ │ ├── close_icon@2x.png │ │ ├── close_icon@3x.png │ │ ├── index.ts │ │ ├── send.png │ │ ├── send@2x.png │ │ └── send@3x.png │ └── index.ts ├── components │ ├── Footer │ │ ├── Footer.tsx │ │ ├── __tests__ │ │ │ ├── Footer.test.tsx │ │ │ └── __snapshots__ │ │ │ │ └── Footer.test.tsx.snap │ │ ├── index.ts │ │ ├── styles.ts │ │ └── types.ts │ ├── MultiStory │ │ ├── MultiStory.tsx │ │ ├── __tests__ │ │ │ ├── MultiStory.test.tsx │ │ │ └── __snapshots__ │ │ │ │ └── MultiStory.test.tsx.snap │ │ ├── index.ts │ │ ├── styles.ts │ │ └── types.ts │ ├── MultiStoryContainer │ │ ├── MultiStoryContainer.tsx │ │ ├── __tests__ │ │ │ ├── MultiStoryContainer.test.tsx │ │ │ └── __snapshots__ │ │ │ │ └── MultiStoryContainer.test.tsx.snap │ │ ├── hooks │ │ │ ├── index.ts │ │ │ ├── useDraggableGesture.ts │ │ │ ├── useMultiStoryContainer.ts │ │ │ └── useMultiStoryItems.ts │ │ ├── index.ts │ │ ├── styles.ts │ │ ├── types.ts │ │ └── utils │ │ │ └── StoryTransitions.ts │ ├── StoryAvatar │ │ ├── StoryAvatar.tsx │ │ ├── __tests__ │ │ │ ├── StoryAvatar.test.tsx │ │ │ └── __snapshots__ │ │ │ │ └── StoryAvatar.test.tsx.snap │ │ ├── hooks │ │ │ └── useCircleAnimation.ts │ │ ├── index.ts │ │ ├── styles.ts │ │ └── types.ts │ └── StoryView │ │ ├── Indicator.tsx │ │ ├── ProfileHeader.tsx │ │ ├── ProgressBar.tsx │ │ ├── ProgressView.tsx │ │ ├── ProgressiveImage.tsx │ │ ├── StoryContainer.tsx │ │ ├── StoryView.tsx │ │ ├── __tests__ │ │ ├── StoryView.test.tsx │ │ └── __snapshots__ │ │ │ └── StoryView.test.tsx.snap │ │ ├── hooks │ │ ├── index.ts │ │ ├── useProgressBar.ts │ │ └── useStoryContainer.ts │ │ ├── index.ts │ │ ├── styles.ts │ │ └── types.ts ├── constants │ ├── index.ts │ └── strings.ts ├── hooks │ ├── index.ts │ └── useKeyboardListener.ts ├── index.ts └── theme │ ├── Colors.ts │ ├── Metrics.ts │ └── index.ts └── tsconfig.json /.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | **/node_modules 2 | example/ 3 | lib/ 4 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["@react-native-community", "prettier"], 3 | "root": true, 4 | "rules": { 5 | "prettier/prettier": [ 6 | "error", 7 | { 8 | "quoteProps": "preserve", 9 | "singleQuote": true, 10 | "tabWidth": 2, 11 | "trailingComma": "es5", 12 | "useTabs": false 13 | } 14 | ], 15 | "no-shadow": "off", 16 | "@typescript-eslint/no-shadow": ["error"], 17 | "no-bitwise": 0, 18 | "prefer-const": "warn", 19 | "no-console": ["error", { "allow": ["warn", "error"] }] 20 | }, 21 | "globals": { 22 | "JSX": "readonly" 23 | }, 24 | "env": { 25 | "jest": true 26 | }, 27 | "plugins": ["prettier"] 28 | } 29 | -------------------------------------------------------------------------------- /.github/workflows/publish.yml: -------------------------------------------------------------------------------- 1 | name: '🚀 Publish' 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | 8 | jobs: 9 | release: 10 | name: 🚀 Publish 11 | runs-on: macos-11 12 | steps: 13 | - name: 📚 checkout 14 | uses: actions/checkout@v4 15 | - name: 🟢 node 16 | uses: actions/setup-node@v4 17 | with: 18 | node-version: 18 19 | registry-url: https://registry.npmjs.org 20 | - name: 🚀 Build & Publish 21 | run: yarn install && yarn build && yarn publish --access public 22 | env: 23 | NODE_AUTH_TOKEN: ${{secrets.NPM_AUTH_TOKEN}} 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | 24 | # Android/IntelliJ 25 | # 26 | build/ 27 | .idea 28 | .gradle 29 | local.properties 30 | *.iml 31 | 32 | # node.js 33 | # 34 | node_modules/ 35 | npm-debug.log 36 | yarn-error.log 37 | yarn.lock 38 | 39 | # BUCK 40 | buck-out/ 41 | \.buckd/ 42 | *.keystore 43 | !debug.keystore 44 | 45 | # fastlane 46 | # 47 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 48 | # screenshots whenever they are needed. 49 | # For more information about the recommended setup visit: 50 | # https://docs.fastlane.tools/best-practices/source-control/ 51 | 52 | */fastlane/report.xml 53 | */fastlane/Preview.html 54 | */fastlane/screenshots 55 | 56 | # Bundle artifact 57 | *.jsbundle 58 | 59 | # Ruby / CocoaPods 60 | /ios/Pods/ 61 | /vendor/bundle/ 62 | 63 | # generated 64 | lib 65 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | yarn commitlint --edit $1 5 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | yarn lint-staged 5 | -------------------------------------------------------------------------------- /.husky/pre-push: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | yarn build 5 | yarn test -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .github/ 2 | .husky/ 3 | example/ 4 | assets/ 5 | .eslintignore 6 | .eslintrc 7 | CONTRIBUTING.md 8 | babel.config.js 9 | .buckconfig 10 | jest-setup.js 11 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | arrowParens: 'avoid', 3 | bracketSameLine: true, 4 | bracketSpacing: true, 5 | singleQuote: true, 6 | trailingComma: 'es5' 7 | }; 8 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | We welcome code changes that improve this library or fix a problem, and please make sure to follow all best practices and test all the changes/fixes before committing and creating a pull request. 🚀 🚀 4 | 5 | ### Commiting and Pushing Changes 6 | 7 | Commit messages should be formatted as: 8 | 9 | ``` 10 | [optional scope]: 11 | 12 | [optional body] 13 | 14 | [optional footer] 15 | ``` 16 | 17 | Where type can be one of the following: 18 | 19 | - feat 20 | - fix 21 | - docs 22 | - chore 23 | - style 24 | - refactor 25 | - test 26 | 27 | and an optional scope can be a component 28 | 29 | ``` 30 | docs(StoryContainer): update contributing guide 31 | ``` 32 | 33 | ``` 34 | fix(MultiStoryContainer): story progressbar is stuck 35 | ``` 36 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Simform Solutions 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /assets/SingleStory.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-story-view/7bdbf8c9b9f76c2837955a90bab78ac1659b8357/assets/SingleStory.gif -------------------------------------------------------------------------------- /assets/StoryView.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-story-view/7bdbf8c9b9f76c2837955a90bab78ac1659b8357/assets/StoryView.gif -------------------------------------------------------------------------------- /assets/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-story-view/7bdbf8c9b9f76c2837955a90bab78ac1659b8357/assets/banner.png -------------------------------------------------------------------------------- /assets/cube.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-story-view/7bdbf8c9b9f76c2837955a90bab78ac1659b8357/assets/cube.gif -------------------------------------------------------------------------------- /assets/custom_view.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-story-view/7bdbf8c9b9f76c2837955a90bab78ac1659b8357/assets/custom_view.png -------------------------------------------------------------------------------- /assets/default.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-story-view/7bdbf8c9b9f76c2837955a90bab78ac1659b8357/assets/default.gif -------------------------------------------------------------------------------- /assets/footer.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-story-view/7bdbf8c9b9f76c2837955a90bab78ac1659b8357/assets/footer.gif -------------------------------------------------------------------------------- /assets/footer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-story-view/7bdbf8c9b9f76c2837955a90bab78ac1659b8357/assets/footer.png -------------------------------------------------------------------------------- /assets/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-story-view/7bdbf8c9b9f76c2837955a90bab78ac1659b8357/assets/header.png -------------------------------------------------------------------------------- /assets/multiStoryContainer.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-story-view/7bdbf8c9b9f76c2837955a90bab78ac1659b8357/assets/multiStoryContainer.gif -------------------------------------------------------------------------------- /assets/multistory.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-story-view/7bdbf8c9b9f76c2837955a90bab78ac1659b8357/assets/multistory.gif -------------------------------------------------------------------------------- /assets/overlay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-story-view/7bdbf8c9b9f76c2837955a90bab78ac1659b8357/assets/overlay.png -------------------------------------------------------------------------------- /assets/progressbar.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-story-view/7bdbf8c9b9f76c2837955a90bab78ac1659b8357/assets/progressbar.gif -------------------------------------------------------------------------------- /assets/scale.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-story-view/7bdbf8c9b9f76c2837955a90bab78ac1659b8357/assets/scale.gif -------------------------------------------------------------------------------- /assets/stories_list.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-story-view/7bdbf8c9b9f76c2837955a90bab78ac1659b8357/assets/stories_list.gif -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | plugins: ['react-native-reanimated/plugin'], 4 | }; 5 | -------------------------------------------------------------------------------- /example/.bundle/config: -------------------------------------------------------------------------------- 1 | BUNDLE_PATH: "vendor/bundle" 2 | BUNDLE_FORCE_RUBY_PLATFORM: 1 3 | -------------------------------------------------------------------------------- /example/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["@react-native-community", "prettier"], 3 | "rules": { 4 | "prettier/prettier": [ 5 | "error", 6 | { 7 | "quoteProps": "preserve", 8 | "singleQuote": true, 9 | "tabWidth": 2, 10 | "trailingComma": "es5", 11 | "useTabs": false 12 | } 13 | ], 14 | "no-bitwise": 0, 15 | "prefer-const": "warn", 16 | "no-console": ["error", { "allow": ["warn", "error"] }] 17 | }, 18 | "globals": { 19 | "JSX": "readonly" 20 | }, 21 | "plugins": ["prettier"] 22 | } 23 | -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | ios/.xcode.env.local 24 | 25 | 26 | # Android/IntelliJ 27 | # 28 | build/ 29 | .idea 30 | .gradle 31 | local.properties 32 | *.iml 33 | *.hprof 34 | yarn.lock 35 | .cxx/ 36 | *.keystore 37 | !debug.keystore 38 | 39 | # node.js 40 | # 41 | node_modules/ 42 | npm-debug.log 43 | yarn-error.log 44 | 45 | 46 | 47 | # fastlane 48 | # 49 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 50 | # screenshots whenever they are needed. 51 | # For more information about the recommended setup visit: 52 | # https://docs.fastlane.tools/best-practices/source-control/ 53 | 54 | **/fastlane/report.xml 55 | **/fastlane/Preview.html 56 | **/fastlane/screenshots 57 | **/fastlane/test_output 58 | 59 | 60 | # Temporary files created by Metro to check the health of the file watcher 61 | .metro-health-check* 62 | 63 | # Bundle artifact 64 | *.jsbundle 65 | 66 | # Ruby / CocoaPods 67 | /ios/Pods/ 68 | /vendor/bundle/ 69 | -------------------------------------------------------------------------------- /example/.node-version: -------------------------------------------------------------------------------- 1 | 18 2 | -------------------------------------------------------------------------------- /example/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | arrowParens: 'avoid', 3 | bracketSameLine: true, 4 | bracketSpacing: true, 5 | singleQuote: true, 6 | trailingComma: 'none', 7 | }; 8 | -------------------------------------------------------------------------------- /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 | # Cocoapods 1.15 introduced a bug which break the build. We will remove the upper 7 | # bound in the template on Cocoapods with next React Native release. 8 | gem 'cocoapods', '>= 1.13', '< 1.15' 9 | gem 'activesupport', '>= 6.1.7.3', '< 7.1.0' -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | # react-native-story-view example 2 | 3 | ## How to Run ? 4 | 5 | Steps to run the demo app in ios and android 6 | 7 | 1. Install dependencies 8 | - cd to the project directory (example) 9 | ```bash 10 | yarn 11 | ``` 12 | 2. Build and Run 13 | - Install Pod 14 | ```bash 15 | cd ios && pod install 16 | ``` 17 | - Run iOS app 18 | ```bash 19 | yarn ios 20 | ``` 21 | - Run Android app 22 | ```bash 23 | yarn android 24 | ``` 25 | -------------------------------------------------------------------------------- /example/android/app/_BUCK: -------------------------------------------------------------------------------- 1 | # To learn about Buck see [Docs](https://buckbuild.com/). 2 | # To run your application with Buck: 3 | # - install Buck 4 | # - `npm start` - to start the packager 5 | # - `cd android` 6 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"` 7 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck 8 | # - `buck install -r android/app` - compile, install and run application 9 | # 10 | 11 | load(":build_defs.bzl", "create_aar_targets", "create_jar_targets") 12 | 13 | lib_deps = [] 14 | 15 | create_aar_targets(glob(["libs/*.aar"])) 16 | 17 | create_jar_targets(glob(["libs/*.jar"])) 18 | 19 | android_library( 20 | name = "all-libs", 21 | exported_deps = lib_deps, 22 | ) 23 | 24 | android_library( 25 | name = "app-code", 26 | srcs = glob([ 27 | "src/main/java/**/*.java", 28 | ]), 29 | deps = [ 30 | ":all-libs", 31 | ":build_config", 32 | ":res", 33 | ], 34 | ) 35 | 36 | android_build_config( 37 | name = "build_config", 38 | package = "com.rnstoryview", 39 | ) 40 | 41 | android_resource( 42 | name = "res", 43 | package = "com.rnstoryview", 44 | res = "src/main/res", 45 | ) 46 | 47 | android_binary( 48 | name = "app", 49 | keystore = "//android/keystores:debug", 50 | manifest = "src/main/AndroidManifest.xml", 51 | package_type = "debug", 52 | deps = [ 53 | ":app-code", 54 | ], 55 | ) 56 | -------------------------------------------------------------------------------- /example/android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-story-view/7bdbf8c9b9f76c2837955a90bab78ac1659b8357/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 | 6 | 7 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /example/android/app/src/debug/java/com/rnstoryview/ReactNativeFlipper.java: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Meta Platforms, Inc. and affiliates. 3 | * 4 | *

This source code is licensed under the MIT license found in the LICENSE file in the root 5 | * directory of this source tree. 6 | */ 7 | package com.rnstoryview; 8 | 9 | import android.content.Context; 10 | import com.facebook.flipper.android.AndroidFlipperClient; 11 | import com.facebook.flipper.android.utils.FlipperUtils; 12 | import com.facebook.flipper.core.FlipperClient; 13 | import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin; 14 | import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin; 15 | import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin; 16 | import com.facebook.flipper.plugins.inspector.DescriptorMapping; 17 | import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin; 18 | import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor; 19 | import com.facebook.flipper.plugins.network.NetworkFlipperPlugin; 20 | import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin; 21 | import com.facebook.react.ReactInstanceEventListener; 22 | import com.facebook.react.ReactInstanceManager; 23 | import com.facebook.react.bridge.ReactContext; 24 | import com.facebook.react.modules.network.NetworkingModule; 25 | import okhttp3.OkHttpClient; 26 | 27 | public class ReactNativeFlipper { 28 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) { 29 | if (FlipperUtils.shouldEnableFlipper(context)) { 30 | final FlipperClient client = AndroidFlipperClient.getInstance(context); 31 | 32 | client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults())); 33 | client.addPlugin(new DatabasesFlipperPlugin(context)); 34 | client.addPlugin(new SharedPreferencesFlipperPlugin(context)); 35 | client.addPlugin(CrashReporterPlugin.getInstance()); 36 | 37 | NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin(); 38 | NetworkingModule.setCustomClientBuilder( 39 | new NetworkingModule.CustomClientBuilder() { 40 | @Override 41 | public void apply(OkHttpClient.Builder builder) { 42 | builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); 43 | } 44 | }); 45 | client.addPlugin(networkFlipperPlugin); 46 | client.start(); 47 | 48 | // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized 49 | // Hence we run if after all native modules have been initialized 50 | ReactContext reactContext = reactInstanceManager.getCurrentReactContext(); 51 | if (reactContext == null) { 52 | reactInstanceManager.addReactInstanceEventListener( 53 | new ReactInstanceEventListener() { 54 | @Override 55 | public void onReactContextInitialized(ReactContext reactContext) { 56 | reactInstanceManager.removeReactInstanceEventListener(this); 57 | reactContext.runOnNativeModulesQueueThread( 58 | new Runnable() { 59 | @Override 60 | public void run() { 61 | client.addPlugin(new FrescoFlipperPlugin()); 62 | } 63 | }); 64 | } 65 | }); 66 | } else { 67 | client.addPlugin(new FrescoFlipperPlugin()); 68 | } 69 | } 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /example/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 13 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/rnstoryview/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.rnstoryview; 2 | 3 | import com.facebook.react.ReactActivity; 4 | import com.facebook.react.ReactActivityDelegate; 5 | import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint; 6 | import com.facebook.react.defaults.DefaultReactActivityDelegate; 7 | public class MainActivity extends ReactActivity { 8 | 9 | /** 10 | * Returns the name of the main component registered from JavaScript. This is used to schedule 11 | * rendering of the component. 12 | */ 13 | @Override 14 | protected String getMainComponentName() { 15 | return "RNStoryView"; 16 | } 17 | 18 | /** 19 | * Returns the instance of the {@link ReactActivityDelegate}. There the RootView is created and 20 | * you can specify the rendered you wish to use (Fabric or the older renderer). 21 | */ 22 | @Override 23 | protected ReactActivityDelegate createReactActivityDelegate() { 24 | return new DefaultReactActivityDelegate( 25 | this, 26 | getMainComponentName(), 27 | // If you opted-in for the New Architecture, we enable the Fabric Renderer. 28 | DefaultNewArchitectureEntryPoint.getFabricEnabled(), // fabricEnabled 29 | // If you opted-in for the New Architecture, we enable Concurrent React (i.e. React 18). 30 | DefaultNewArchitectureEntryPoint.getConcurrentReactEnabled() // concurrentRootEnabled 31 | ); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/rnstoryview/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.rnstoryview; 2 | 3 | import android.app.Application; 4 | import com.facebook.react.PackageList; 5 | import com.facebook.react.ReactApplication; 6 | import com.facebook.react.ReactNativeHost; 7 | import com.facebook.react.ReactPackage; 8 | import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint; 9 | import com.facebook.react.defaults.DefaultReactNativeHost; 10 | import com.facebook.soloader.SoLoader; 11 | import java.util.List; 12 | 13 | public class MainApplication extends Application implements ReactApplication { 14 | 15 | private final ReactNativeHost mReactNativeHost = 16 | new DefaultReactNativeHost(this) { 17 | @Override 18 | public boolean getUseDeveloperSupport() { 19 | return BuildConfig.DEBUG; 20 | } 21 | 22 | @Override 23 | protected List getPackages() { 24 | @SuppressWarnings("UnnecessaryLocalVariable") 25 | List packages = new PackageList(this).getPackages(); 26 | // Packages that cannot be autolinked yet can be added manually here, for example: 27 | // packages.add(new MyReactNativePackage()); 28 | return packages; 29 | } 30 | 31 | @Override 32 | protected String getJSMainModuleName() { 33 | return "index"; 34 | } 35 | 36 | @Override 37 | protected boolean isNewArchEnabled() { 38 | return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; 39 | } 40 | 41 | @Override 42 | protected Boolean isHermesEnabled() { 43 | return BuildConfig.IS_HERMES_ENABLED; 44 | } 45 | }; 46 | 47 | @Override 48 | public ReactNativeHost getReactNativeHost() { 49 | return mReactNativeHost; 50 | } 51 | 52 | @Override 53 | public void onCreate() { 54 | super.onCreate(); 55 | SoLoader.init(this, /* native exopackage */ false); 56 | if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) { 57 | // If you opted-in for the New Architecture, we load the native entry point for this app. 58 | DefaultNewArchitectureEntryPoint.load(); 59 | } 60 | ReactNativeFlipper.initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/drawable/rn_edit_text_material.xml: -------------------------------------------------------------------------------- 1 | 2 | 16 | 21 | 22 | 23 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-story-view/7bdbf8c9b9f76c2837955a90bab78ac1659b8357/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/SimformSolutionsPvtLtd/react-native-story-view/7bdbf8c9b9f76c2837955a90bab78ac1659b8357/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/SimformSolutionsPvtLtd/react-native-story-view/7bdbf8c9b9f76c2837955a90bab78ac1659b8357/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/SimformSolutionsPvtLtd/react-native-story-view/7bdbf8c9b9f76c2837955a90bab78ac1659b8357/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/SimformSolutionsPvtLtd/react-native-story-view/7bdbf8c9b9f76c2837955a90bab78ac1659b8357/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/SimformSolutionsPvtLtd/react-native-story-view/7bdbf8c9b9f76c2837955a90bab78ac1659b8357/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/SimformSolutionsPvtLtd/react-native-story-view/7bdbf8c9b9f76c2837955a90bab78ac1659b8357/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/SimformSolutionsPvtLtd/react-native-story-view/7bdbf8c9b9f76c2837955a90bab78ac1659b8357/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/SimformSolutionsPvtLtd/react-native-story-view/7bdbf8c9b9f76c2837955a90bab78ac1659b8357/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/SimformSolutionsPvtLtd/react-native-story-view/7bdbf8c9b9f76c2837955a90bab78ac1659b8357/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | RNStoryView 3 | 4 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /example/android/app/src/release/java/com/rnstoryview/ReactNativeFlipper.java: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Meta Platforms, Inc. and affiliates. 3 | * 4 | *

This source code is licensed under the MIT license found in the LICENSE file in the root 5 | * directory of this source tree. 6 | */ 7 | package com.rnstoryview; 8 | 9 | import android.content.Context; 10 | import com.facebook.react.ReactInstanceManager; 11 | 12 | /** 13 | * Class responsible of loading Flipper inside your React Native application. This is the release 14 | * flavor of it so it's empty as we don't want to load Flipper. 15 | */ 16 | public class ReactNativeFlipper { 17 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) { 18 | // Do nothing as we don't want to initialize Flipper on Release. 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /example/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | buildscript { 3 | ext { 4 | buildToolsVersion = "33.0.0" 5 | minSdkVersion = 21 6 | compileSdkVersion = 33 7 | targetSdkVersion = 33 8 | 9 | // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP. 10 | ndkVersion = "23.1.7779620" 11 | } 12 | repositories { 13 | google() 14 | mavenCentral() 15 | } 16 | dependencies { 17 | classpath("com.android.tools.build:gradle:7.3.1") 18 | classpath("com.facebook.react:react-native-gradle-plugin") 19 | } 20 | } 21 | allprojects { 22 | repositories { 23 | google() 24 | mavenCentral() 25 | maven { url 'https://jitpack.io' } 26 | jcenter() 27 | } 28 | } -------------------------------------------------------------------------------- /example/android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx512m -XX:MaxMetaspaceSize=256m 13 | org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | # AndroidX package structure to make it clearer which packages are bundled with the 21 | # Android operating system, and which are packaged with your app's APK 22 | # https://developer.android.com/topic/libraries/support-library/androidx-rn 23 | android.useAndroidX=true 24 | # Automatically convert third-party libraries to use AndroidX 25 | android.enableJetifier=true 26 | 27 | # Version of flipper SDK to use with React Native 28 | FLIPPER_VERSION=0.125.0 29 | 30 | # Use this property to specify which architecture you want to build. 31 | # You can also override it from the CLI using 32 | # ./gradlew -PreactNativeArchitectures=x86_64 33 | reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64 34 | 35 | # Use this property to enable support to the new architecture. 36 | # This will allow you to use TurboModules and the Fabric render in 37 | # your application. You should enable this flag either if you want 38 | # to write custom TurboModules/Fabric components OR use libraries that 39 | # are providing them. 40 | newArchEnabled=false 41 | 42 | # Use this property to enable or disable the Hermes JS engine. 43 | # If set to false, you will be using JSC instead. 44 | hermesEnabled=true 45 | -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-story-view/7bdbf8c9b9f76c2837955a90bab78ac1659b8357/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-7.5.1-all.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /example/android/gradlew: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | # 4 | # Copyright © 2015-2021 the original authors. 5 | # 6 | # Licensed under the Apache License, Version 2.0 (the "License"); 7 | # you may not use this file except in compliance with the License. 8 | # You may obtain a copy of the License at 9 | # 10 | # https://www.apache.org/licenses/LICENSE-2.0 11 | # 12 | # Unless required by applicable law or agreed to in writing, software 13 | # distributed under the License is distributed on an "AS IS" BASIS, 14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | # See the License for the specific language governing permissions and 16 | # limitations under the License. 17 | # 18 | 19 | ############################################################################## 20 | # 21 | # Gradle start up script for POSIX generated by Gradle. 22 | # 23 | # Important for running: 24 | # 25 | # (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is 26 | # noncompliant, but you have some other compliant shell such as ksh or 27 | # bash, then to run this script, type that shell name before the whole 28 | # command line, like: 29 | # 30 | # ksh Gradle 31 | # 32 | # Busybox and similar reduced shells will NOT work, because this script 33 | # requires all of these POSIX shell features: 34 | # * functions; 35 | # * expansions «$var», «${var}», «${var:-default}», «${var+SET}», 36 | # «${var#prefix}», «${var%suffix}», and «$( cmd )»; 37 | # * compound commands having a testable exit status, especially «case»; 38 | # * various built-in commands including «command», «set», and «ulimit». 39 | # 40 | # Important for patching: 41 | # 42 | # (2) This script targets any POSIX shell, so it avoids extensions provided 43 | # by Bash, Ksh, etc; in particular arrays are avoided. 44 | # 45 | # The "traditional" practice of packing multiple parameters into a 46 | # space-separated string is a well documented source of bugs and security 47 | # problems, so this is (mostly) avoided, by progressively accumulating 48 | # options in "$@", and eventually passing that to Java. 49 | # 50 | # Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS, 51 | # and GRADLE_OPTS) rely on word-splitting, this is performed explicitly; 52 | # see the in-line comments for details. 53 | # 54 | # There are tweaks for specific operating systems such as AIX, CygWin, 55 | # Darwin, MinGW, and NonStop. 56 | # 57 | # (3) This script is generated from the Groovy template 58 | # https://github.com/gradle/gradle/blob/master/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt 59 | # within the Gradle project. 60 | # 61 | # You can find Gradle at https://github.com/gradle/gradle/. 62 | # 63 | ############################################################################## 64 | 65 | # Attempt to set APP_HOME 66 | 67 | # Resolve links: $0 may be a link 68 | app_path=$0 69 | 70 | # Need this for daisy-chained symlinks. 71 | while 72 | APP_HOME=${app_path%"${app_path##*/}"} # leaves a trailing /; empty if no leading path 73 | [ -h "$app_path" ] 74 | do 75 | ls=$( ls -ld "$app_path" ) 76 | link=${ls#*' -> '} 77 | case $link in #( 78 | /*) app_path=$link ;; #( 79 | *) app_path=$APP_HOME$link ;; 80 | esac 81 | done 82 | 83 | APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit 84 | 85 | APP_NAME="Gradle" 86 | APP_BASE_NAME=${0##*/} 87 | 88 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 89 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' 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 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 137 | 138 | Please set the JAVA_HOME variable in your environment to match the 139 | location of your Java installation." 140 | fi 141 | 142 | # Increase the maximum file descriptors if we can. 143 | if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then 144 | case $MAX_FD in #( 145 | max*) 146 | MAX_FD=$( ulimit -H -n ) || 147 | warn "Could not query maximum file descriptor limit" 148 | esac 149 | case $MAX_FD in #( 150 | '' | soft) :;; #( 151 | *) 152 | ulimit -n "$MAX_FD" || 153 | warn "Could not set maximum file descriptor limit to $MAX_FD" 154 | esac 155 | fi 156 | 157 | # Collect all arguments for the java command, stacking in reverse order: 158 | # * args from the command line 159 | # * the main class name 160 | # * -classpath 161 | # * -D...appname settings 162 | # * --module-path (only if needed) 163 | # * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables. 164 | 165 | # For Cygwin or MSYS, switch paths to Windows format before running java 166 | if "$cygwin" || "$msys" ; then 167 | APP_HOME=$( cygpath --path --mixed "$APP_HOME" ) 168 | CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" ) 169 | 170 | JAVACMD=$( cygpath --unix "$JAVACMD" ) 171 | 172 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 173 | for arg do 174 | if 175 | case $arg in #( 176 | -*) false ;; # don't mess with options #( 177 | /?*) t=${arg#/} t=/${t%%/*} # looks like a POSIX filepath 178 | [ -e "$t" ] ;; #( 179 | *) false ;; 180 | esac 181 | then 182 | arg=$( cygpath --path --ignore --mixed "$arg" ) 183 | fi 184 | # Roll the args list around exactly as many times as the number of 185 | # args, so each arg winds up back in the position where it started, but 186 | # possibly modified. 187 | # 188 | # NB: a `for` loop captures its iteration list before it begins, so 189 | # changing the positional parameters here affects neither the number of 190 | # iterations, nor the values presented in `arg`. 191 | shift # remove old arg 192 | set -- "$@" "$arg" # push replacement arg 193 | done 194 | fi 195 | 196 | # Collect all arguments for the java command; 197 | # * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of 198 | # shell script including quotes and variable substitutions, so put them in 199 | # double quotes to make sure that they get re-expanded; and 200 | # * put everything else in single quotes, so that it's not re-expanded. 201 | 202 | set -- \ 203 | "-Dorg.gradle.appname=$APP_BASE_NAME" \ 204 | -classpath "$CLASSPATH" \ 205 | org.gradle.wrapper.GradleWrapperMain \ 206 | "$@" 207 | 208 | # Use "xargs" to parse quoted args. 209 | # 210 | # With -n1 it outputs one arg per line, with the quotes and backslashes removed. 211 | # 212 | # In Bash we could simply go: 213 | # 214 | # readarray ARGS < <( xargs -n1 <<<"$var" ) && 215 | # set -- "${ARGS[@]}" "$@" 216 | # 217 | # but POSIX shell has neither arrays nor command substitution, so instead we 218 | # post-process each arg (as a line of input to sed) to backslash-escape any 219 | # character that might be a shell metacharacter, then use eval to reverse 220 | # that process (while maintaining the separation between arguments), and wrap 221 | # the whole thing up as a single "set" statement. 222 | # 223 | # This will of course break if any of these variables contains a newline or 224 | # an unmatched quote. 225 | # 226 | 227 | eval "set -- $( 228 | printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" | 229 | xargs -n1 | 230 | sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' | 231 | tr '\n' ' ' 232 | )" '"$@"' 233 | 234 | exec "$JAVACMD" "$@" 235 | -------------------------------------------------------------------------------- /example/android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @rem 2 | @rem Copyright 2015 the original author or authors. 3 | @rem 4 | @rem Licensed under the Apache License, Version 2.0 (the "License"); 5 | @rem you may not use this file except in compliance with the License. 6 | @rem You may obtain a copy of the License at 7 | @rem 8 | @rem https://www.apache.org/licenses/LICENSE-2.0 9 | @rem 10 | @rem Unless required by applicable law or agreed to in writing, software 11 | @rem distributed under the License is distributed on an "AS IS" BASIS, 12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | @rem See the License for the specific language governing permissions and 14 | @rem limitations under the License. 15 | @rem 16 | 17 | @if "%DEBUG%" == "" @echo off 18 | @rem ########################################################################## 19 | @rem 20 | @rem Gradle startup script for Windows 21 | @rem 22 | @rem ########################################################################## 23 | 24 | @rem Set local scope for the variables with windows NT shell 25 | if "%OS%"=="Windows_NT" setlocal 26 | 27 | set DIRNAME=%~dp0 28 | if "%DIRNAME%" == "" set DIRNAME=. 29 | set APP_BASE_NAME=%~n0 30 | set APP_HOME=%DIRNAME% 31 | 32 | @rem Resolve any "." and ".." in APP_HOME to make it shorter. 33 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi 34 | 35 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 36 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 37 | 38 | @rem Find java.exe 39 | if defined JAVA_HOME goto findJavaFromJavaHome 40 | 41 | set JAVA_EXE=java.exe 42 | %JAVA_EXE% -version >NUL 2>&1 43 | if "%ERRORLEVEL%" == "0" goto execute 44 | 45 | echo. 46 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 47 | echo. 48 | echo Please set the JAVA_HOME variable in your environment to match the 49 | echo location of your Java installation. 50 | 51 | goto fail 52 | 53 | :findJavaFromJavaHome 54 | set JAVA_HOME=%JAVA_HOME:"=% 55 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 56 | 57 | if exist "%JAVA_EXE%" goto execute 58 | 59 | echo. 60 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 61 | echo. 62 | echo Please set the JAVA_HOME variable in your environment to match the 63 | echo location of your Java installation. 64 | 65 | goto fail 66 | 67 | :execute 68 | @rem Setup the command line 69 | 70 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 71 | 72 | 73 | @rem Execute Gradle 74 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* 75 | 76 | :end 77 | @rem End local scope for the variables with windows NT shell 78 | if "%ERRORLEVEL%"=="0" goto mainEnd 79 | 80 | :fail 81 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 82 | rem the _cmd.exe /c_ return code! 83 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 84 | exit /b 1 85 | 86 | :mainEnd 87 | if "%OS%"=="Windows_NT" endlocal 88 | 89 | :omega 90 | -------------------------------------------------------------------------------- /example/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'RNStoryView' 2 | include ':react-native-gesture-handler' 3 | project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android') 4 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 5 | include ':app' 6 | includeBuild('../node_modules/react-native-gradle-plugin') 7 | 8 | 9 | -------------------------------------------------------------------------------- /example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "RNStoryView", 3 | "displayName": "RNStoryView" 4 | } -------------------------------------------------------------------------------- /example/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | plugins: ['react-native-reanimated/plugin'] 4 | }; 5 | -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import { AppRegistry } from 'react-native'; 6 | import { name as appName } from './app.json'; 7 | import App from './src/App'; 8 | 9 | AppRegistry.registerComponent(appName, () => App); 10 | -------------------------------------------------------------------------------- /example/ios/.xcode.env: -------------------------------------------------------------------------------- 1 | # This `.xcode.env` file is versioned and is used to source the environment 2 | # used when running script phases inside Xcode. 3 | # To customize your local environment, you can create an `.xcode.env.local` 4 | # file that is not versioned. 5 | 6 | # NODE_BINARY variable contains the PATH to the node executable. 7 | # 8 | # Customize the NODE_BINARY variable here. 9 | # For example, to use nvm with brew, add the following line 10 | # . "$(brew --prefix nvm)/nvm.sh" --no-use 11 | export NODE_BINARY=$(command -v node) 12 | -------------------------------------------------------------------------------- /example/ios/Podfile: -------------------------------------------------------------------------------- 1 | ENV['USE_HERMES'] = '0' 2 | require_relative '../node_modules/react-native/scripts/react_native_pods' 3 | require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules' 4 | 5 | platform :ios, min_ios_version_supported 6 | prepare_react_native_project! 7 | 8 | # If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set. 9 | # because `react-native-flipper` depends on (FlipperKit,...) that will be excluded 10 | # 11 | # To fix this you can also exclude `react-native-flipper` using a `react-native.config.js` 12 | # ```js 13 | # module.exports = { 14 | # dependencies: { 15 | # ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}), 16 | # ``` 17 | flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled 18 | 19 | linkage = ENV['USE_FRAMEWORKS'] 20 | if linkage != nil 21 | Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green 22 | use_frameworks! :linkage => linkage.to_sym 23 | end 24 | 25 | target 'RNStoryView' do 26 | config = use_native_modules! 27 | 28 | # Flags change depending on the env values. 29 | flags = get_default_flags() 30 | 31 | use_react_native!( 32 | :path => config[:reactNativePath], 33 | # Hermes is now enabled by default. Disable by setting this flag to false. 34 | # Upcoming versions of React Native may rely on get_default_flags(), but 35 | # we make it explicit here to aid in the React Native upgrade process. 36 | :hermes_enabled => flags[:hermes_enabled], 37 | :fabric_enabled => flags[:fabric_enabled], 38 | # Enables Flipper. 39 | # 40 | # Note that if you have use_frameworks! enabled, Flipper will not work and 41 | # you should disable the next line. 42 | :flipper_configuration => flipper_config, 43 | # An absolute path to your application root. 44 | :app_path => "#{Pod::Config.instance.installation_root}/.." 45 | ) 46 | 47 | pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler' 48 | 49 | target 'RNStoryViewTests' do 50 | inherit! :complete 51 | # Pods for testing 52 | end 53 | 54 | 55 | 56 | post_install do |installer| 57 | react_native_post_install( 58 | installer, 59 | # Set `mac_catalyst_enabled` to `true` in order to apply patches 60 | # necessary for Mac Catalyst builds 61 | :mac_catalyst_enabled => false 62 | ) 63 | __apply_Xcode_12_5_M1_post_install_workaround(installer) 64 | end 65 | end 66 | -------------------------------------------------------------------------------- /example/ios/RNStoryView.xcodeproj/xcshareddata/xcschemes/RNStoryView.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/RNStoryView.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /example/ios/RNStoryView.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /example/ios/RNStoryView/AppDelegate.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | @interface AppDelegate : RCTAppDelegate 5 | 6 | @end 7 | -------------------------------------------------------------------------------- /example/ios/RNStoryView/AppDelegate.mm: -------------------------------------------------------------------------------- 1 | #import "AppDelegate.h" 2 | 3 | 4 | #import 5 | 6 | 7 | @implementation AppDelegate 8 | 9 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 10 | { 11 | self.moduleName = @"RNStoryView"; 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 | 20 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge 21 | { 22 | #if DEBUG 23 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"]; 24 | #else 25 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 26 | #endif 27 | } 28 | 29 | /// This method controls whether the `concurrentRoot`feature of React18 is turned on or off. 30 | /// 31 | /// @see: https://reactjs.org/blog/2022/03/29/react-v18.html 32 | /// @note: This requires to be rendering on Fabric (i.e. on the New Architecture). 33 | /// @return: `true` if the `concurrentRoot` feature is enabled. Otherwise, it returns `false`. 34 | - (BOOL)concurrentRootEnabled 35 | { 36 | return true; 37 | } 38 | 39 | 40 | 41 | @end 42 | -------------------------------------------------------------------------------- /example/ios/RNStoryView/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/RNStoryView/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /example/ios/RNStoryView/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | RNStoryView 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 | NSExceptionDomains 30 | 31 | localhost 32 | 33 | NSExceptionAllowsInsecureHTTPLoads 34 | 35 | 36 | 37 | 38 | NSLocationWhenInUseUsageDescription 39 | 40 | UILaunchStoryboardName 41 | LaunchScreen 42 | UIRequiredDeviceCapabilities 43 | 44 | armv7 45 | 46 | UISupportedInterfaceOrientations 47 | 48 | UIInterfaceOrientationPortrait 49 | UIInterfaceOrientationLandscapeLeft 50 | UIInterfaceOrientationLandscapeRight 51 | 52 | UIViewControllerBasedStatusBarAppearance 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /example/ios/RNStoryView/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/RNStoryView/main.m: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | #import "AppDelegate.h" 4 | 5 | int main(int argc, char *argv[]) 6 | { 7 | @autoreleasepool { 8 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /example/ios/RNStoryViewTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /example/ios/RNStoryViewTests/RNStoryViewTests.m: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | #import 5 | #import 6 | 7 | #define TIMEOUT_SECONDS 600 8 | #define TEXT_TO_LOOK_FOR @"Welcome to React" 9 | 10 | @interface RNStoryViewTests : XCTestCase 11 | 12 | @end 13 | 14 | @implementation RNStoryViewTests 15 | 16 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL (^)(UIView *view))test 17 | { 18 | if (test(view)) { 19 | return YES; 20 | } 21 | for (UIView *subview in [view subviews]) { 22 | if ([self findSubviewInView:subview matching:test]) { 23 | return YES; 24 | } 25 | } 26 | return NO; 27 | } 28 | 29 | - (void)testRendersWelcomeScreen 30 | { 31 | UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController]; 32 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 33 | BOOL foundElement = NO; 34 | 35 | __block NSString *redboxError = nil; 36 | #ifdef DEBUG 37 | RCTSetLogFunction( 38 | ^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 39 | if (level >= RCTLogLevelError) { 40 | redboxError = message; 41 | } 42 | }); 43 | #endif 44 | 45 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 46 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 47 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 48 | 49 | foundElement = [self findSubviewInView:vc.view 50 | matching:^BOOL(UIView *view) { 51 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 52 | return YES; 53 | } 54 | return NO; 55 | }]; 56 | } 57 | 58 | #ifdef DEBUG 59 | RCTSetLogFunction(RCTDefaultLogFunction); 60 | #endif 61 | 62 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 63 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 64 | } 65 | 66 | @end 67 | -------------------------------------------------------------------------------- /example/metro.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Metro configuration for React Native 3 | * https://github.com/facebook/react-native 4 | * 5 | * @format 6 | */ 7 | 8 | const path = require('path') 9 | const exclusionList = require('metro-config/src/defaults/exclusionList') 10 | 11 | const moduleRoot = path.resolve(__dirname, '..') 12 | 13 | module.exports = { 14 | watchFolders: [moduleRoot], 15 | resolver: { 16 | extraNodeModules: { 17 | react: path.resolve(__dirname, 'node_modules/react'), 18 | 'react-native': path.resolve(__dirname, 'node_modules/react-native'), 19 | }, 20 | blockList: exclusionList([ 21 | new RegExp(`${moduleRoot}/node_modules/react/.*`), 22 | new RegExp(`${moduleRoot}/node_modules/react-native/.*`), 23 | ]), 24 | }, 25 | transformer: { 26 | getTransformOptions: async () => ({ 27 | transform: { 28 | experimentalImportSupport: false, 29 | inlineRequires: true, 30 | }, 31 | }), 32 | }, 33 | } 34 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rnstoryview", 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 | "test": "jest", 10 | "lint": "eslint . --ext .js,.jsx,.ts,.tsx" 11 | }, 12 | "dependencies": { 13 | "@react-navigation/native": "^6.0.11", 14 | "@react-navigation/native-stack": "^6.7.0", 15 | "@shopify/flash-list": "^1.6.4", 16 | "lodash": "^4.17.21", 17 | "patch-package": "^6.4.7", 18 | "react": "18.2.0", 19 | "react-native": "0.71.16", 20 | "react-native-gesture-handler": "2.13.4", 21 | "react-native-reanimated": "3.5.4", 22 | "react-native-safe-area-context": "^4.3.1", 23 | "react-native-screens": "^3.15.0", 24 | "react-native-video": "^5", 25 | "react-native-video-cache-control": "^1.2.2" 26 | }, 27 | "devDependencies": { 28 | "@babel/core": "^7.12.9", 29 | "@babel/runtime": "^7.12.5", 30 | "@react-native-community/eslint-config": "^3.0.1", 31 | "@types/jest": "^27.4.0", 32 | "@types/lodash": "^4.17.0", 33 | "@types/react-native": "^0.67.3", 34 | "@types/react-test-renderer": "^17.0.1", 35 | "@typescript-eslint/eslint-plugin": "^5.17.0", 36 | "@typescript-eslint/parser": "^5.17.0", 37 | "babel-jest": "^27.4.6", 38 | "eslint": "^7.32.0", 39 | "eslint-plugin-simple-import-sort": "^7.0.0", 40 | "jest": "^27.4.7", 41 | "metro-react-native-babel-preset": "^0.67.0", 42 | "react-test-renderer": "17.0.2", 43 | "typescript": "^4.6.4" 44 | }, 45 | "resolutions": { 46 | "@types/react": "^18.0.9" 47 | }, 48 | "jest": { 49 | "preset": "react-native", 50 | "moduleFileExtensions": [ 51 | "ts", 52 | "tsx", 53 | "js", 54 | "jsx", 55 | "json", 56 | "node" 57 | ] 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /example/react-native-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | project: { 3 | ios: {}, 4 | android: {} 5 | }, 6 | 7 | dependencies: { 8 | 'react-native-video': { 9 | platforms: { 10 | android: { 11 | sourceDir: '../node_modules/react-native-video/android-exoplayer' 12 | } 13 | } 14 | } 15 | } 16 | }; 17 | -------------------------------------------------------------------------------- /example/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { LogBox, View } from 'react-native'; 3 | import Routes from './navigation/Routes'; 4 | import { styles } from './theme'; 5 | 6 | LogBox.ignoreLogs([ 7 | "ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'." 8 | ]); 9 | 10 | const App = () => { 11 | return ( 12 | 13 | 14 | 15 | ); 16 | }; 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /example/src/assets/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimformSolutionsPvtLtd/react-native-story-view/7bdbf8c9b9f76c2837955a90bab78ac1659b8357/example/src/assets/background.jpg -------------------------------------------------------------------------------- /example/src/assets/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | background: require('./background.jpg') 3 | }; 4 | -------------------------------------------------------------------------------- /example/src/components/Footer.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Alert, Keyboard } from 'react-native'; 3 | import { Footer as StoryFooter } from 'react-native-story-view'; 4 | import { Strings } from '../constants'; 5 | import { FooterProps } from './types'; 6 | 7 | const Footer = ({ userStories, story, progressIndex }: FooterProps) => ( 8 | { 10 | Alert.alert( 11 | `${Strings.messageSent} ${userStories?.username} id ${ 12 | story?.[progressIndex!].id 13 | }` 14 | ); 15 | Keyboard.dismiss(); 16 | }} 17 | /> 18 | ); 19 | 20 | export default Footer; 21 | -------------------------------------------------------------------------------- /example/src/components/Header.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ProfileHeader } from 'react-native-story-view'; 3 | import { HeaderProps } from './types'; 4 | 5 | const Header = ({ userStories, multiStoryRef, ...props }: HeaderProps) => ( 6 | { 11 | multiStoryRef?.current?.close?.(); 12 | }} 13 | {...props} 14 | /> 15 | ); 16 | 17 | export default Header; 18 | -------------------------------------------------------------------------------- /example/src/components/Overlay.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Linking, StyleSheet, Text, TouchableOpacity } from 'react-native'; 3 | import { Colors } from '../theme'; 4 | import { OverlayType } from './types'; 5 | 6 | const Overlay = ({ item }: OverlayType) => ( 7 | { 10 | if (item.link) { 11 | Linking.openURL(item.link); 12 | } 13 | }}> 14 | View More... 15 | 16 | ); 17 | 18 | export default Overlay; 19 | 20 | const styles = StyleSheet.create({ 21 | overlayView: { 22 | padding: 10, 23 | backgroundColor: Colors.darkGrey, 24 | borderRadius: 10 25 | }, 26 | overlayText: { 27 | color: Colors.white 28 | } 29 | }); 30 | -------------------------------------------------------------------------------- /example/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Header } from './Header'; 2 | export { default as Footer } from './Footer'; 3 | export { default as Overlay } from './Overlay'; 4 | -------------------------------------------------------------------------------- /example/src/components/types.ts: -------------------------------------------------------------------------------- 1 | import { RefObject } from 'react'; 2 | import type { 3 | MultiStoryRef, 4 | UserProps, 5 | CallbackProps, 6 | StoryType 7 | } from '../../../src'; 8 | 9 | export interface HeaderProps extends Partial, UserProps { 10 | multiStoryRef?: RefObject | null; 11 | } 12 | 13 | export interface FooterProps extends Partial {} 14 | 15 | export interface OverlayType { 16 | item: StoryType; 17 | } -------------------------------------------------------------------------------- /example/src/constants/NavigationStrings.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | HOME: 'Home', 3 | STORY_SCREEN: 'Single Story', 4 | MULTI_STORY_SCREEN: 'Multi Story' 5 | }; 6 | -------------------------------------------------------------------------------- /example/src/constants/Strings.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | Story: 'Story Screen', 3 | MultiStory: 'Multi Story Screen', 4 | album: 'Album Stories', 5 | messageSent: 'Message sent to' 6 | }; 7 | -------------------------------------------------------------------------------- /example/src/constants/index.ts: -------------------------------------------------------------------------------- 1 | import stories from './stories'; 2 | import NavigationStrings from './NavigationStrings'; 3 | import Strings from './Strings'; 4 | 5 | export { stories, NavigationStrings, Strings }; 6 | -------------------------------------------------------------------------------- /example/src/constants/stories.ts: -------------------------------------------------------------------------------- 1 | const stories = [ 2 | { 3 | id: 1, 4 | username: 'Alan', 5 | title: 'Albums', 6 | profile: 7 | 'https://banner2.cleanpng.com/20190606/xch/kisspng-faded-music-mask-disc-jockey-darkside-5cf8dd7baf38c5.5844290115598134997177.jpg', 8 | stories: [ 9 | { 10 | id: 1, 11 | url: 'https://i1.sndcdn.com/artworks-IrhmhgPltsdrwMu8-thZohQ-t500x500.jpg', 12 | type: 'image', 13 | duration: 3, 14 | isReadMore: true, 15 | storyId: 1, 16 | isSeen: false, 17 | showOverlay: true, 18 | link: 'https:google.com' 19 | }, 20 | { 21 | id: 2, 22 | url: 'https://i.pinimg.com/originals/8e/27/58/8e2758477b11d7c44d8defe9bf08ffb6.jpg', 23 | type: 'image', 24 | duration: 4, 25 | isReadMore: true, 26 | storyId: 1, 27 | isSeen: false 28 | }, 29 | { 30 | id: 3, 31 | url: 'https://vfss.b-cdn.net/library/A/Alan-Walker-Status-Video/Hindi_Alan-Walker-Full-Screen.mp4', 32 | type: 'video', 33 | duration: 15, 34 | isReadMore: true, 35 | storyId: 1, 36 | isSeen: false 37 | } 38 | ] 39 | }, 40 | { 41 | id: 2, 42 | username: 'Weekend', 43 | profile: 44 | 'https://sosugary.com/wp-content/uploads/2022/01/TheWeeknd_001.jpg', 45 | title: 'Album Launch', 46 | stories: [ 47 | { 48 | id: 0, 49 | url: 'https://i.scdn.co/image/ab67616d0000b273e7f02e8d0f955f39758186ae', 50 | type: 'image', 51 | duration: 5, 52 | isReadMore: true, 53 | storyId: 2, 54 | isSeen: false 55 | }, 56 | { 57 | id: 1, 58 | url: 'https://static.wixstatic.com/media/f7b73f_4749adcf2ece4708889c960d1da3fda6~mv2_d_1800_1800_s_2.png/v1/fill/w_1800,h_1800,al_c,q_90/file.jpg', 59 | type: 'image', 60 | duration: 10, 61 | isReadMore: true, 62 | storyId: 2, 63 | isSeen: false 64 | } 65 | ] 66 | }, 67 | { 68 | id: 3, 69 | username: 'Selena', 70 | profile: 71 | 'https://assets.teenvogue.com/photos/589dcce16d33d9e97bc045d2/16:9/w_2560%2Cc_limit/GettyImages-587593904.jpg', 72 | title: 'Albums', 73 | stories: [ 74 | { 75 | id: 0, 76 | url: 'https://img.freepik.com/free-photo/sliver-metallic-color-sport-car-driving-with-high-speed-road_114579-4029.jpg', 77 | type: 'image', 78 | duration: 5, 79 | isReadMore: true, 80 | storyId: 3, 81 | isSeen: false 82 | }, 83 | { 84 | id: 1, 85 | url: 'https://img.freepik.com/free-photo/beautiful-countryside-road-greenery-forests_181624-5399.jpg', 86 | type: 'image', 87 | duration: 10, 88 | isReadMore: true, 89 | storyId: 3, 90 | isSeen: false 91 | } 92 | ] 93 | }, 94 | { 95 | id: 4, 96 | username: 'Shakira', 97 | profile: 98 | 'https://ichef.bbci.co.uk/news/976/cpsprodpb/9A9B/production/_116497593_gettyimages-971720370.jpg', 99 | title: 'Albums', 100 | stories: [ 101 | { 102 | id: 0, 103 | url: 'https://img.freepik.com/free-photo/fresh-pink-blossoms-adorn-budding-cherry-tree-generated-by-ai_188544-10349.jpg', 104 | type: 'image', 105 | duration: 5, 106 | isReadMore: true, 107 | storyId: 4, 108 | isSeen: false 109 | }, 110 | { 111 | id: 1, 112 | url: 'https://img.freepik.com/free-photo/cosmos-flowers_1373-83.jpg', 113 | type: 'image', 114 | duration: 10, 115 | isReadMore: true, 116 | storyId: 4, 117 | isSeen: false 118 | } 119 | ] 120 | }, 121 | { 122 | id: 5, 123 | username: "K'naan", 124 | profile: 'https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg', 125 | title: 'Single Album', 126 | stories: [ 127 | { 128 | id: 0, 129 | url: 'https://videocdn.cdnpk.net/joy/content/video/free/video0467/large_preview/_import_615435000f6eb2.81789495.mp4?filename=1109603_1080p_4k_2k_3840x2160.mp4', 130 | type: 'video', 131 | duration: 20, 132 | isReadMore: true, 133 | storyId: 5, 134 | isSeen: false 135 | } 136 | ] 137 | } 138 | ]; 139 | 140 | export default stories; 141 | -------------------------------------------------------------------------------- /example/src/modules/Home/HomeScreen.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { useNavigation } from '@react-navigation/native'; 3 | import { Text, View, Pressable } from 'react-native'; 4 | import { NavigationStrings, Strings } from '../../constants'; 5 | import styles from './styles'; 6 | import { NavProps } from './types'; 7 | 8 | const HomeScreen = () => { 9 | const navigation = useNavigation(); 10 | 11 | return ( 12 | 13 | 16 | navigation.navigate(NavigationStrings.MULTI_STORY_SCREEN) 17 | }> 18 | {Strings.MultiStory} 19 | 20 | navigation.navigate(NavigationStrings.STORY_SCREEN)}> 23 | {Strings.Story} 24 | 25 | 26 | ); 27 | }; 28 | 29 | export default HomeScreen; 30 | -------------------------------------------------------------------------------- /example/src/modules/Home/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | import { verticalScale, moderateScale, Colors } from '../../theme'; 3 | 4 | const styles = StyleSheet.create({ 5 | container: { 6 | flex: 1, 7 | paddingHorizontal: moderateScale(10), 8 | paddingTop: verticalScale(20) 9 | }, 10 | button: { 11 | borderRadius: 10, 12 | backgroundColor: Colors.blue, 13 | width: '100%', 14 | padding: moderateScale(10), 15 | alignContent: 'center', 16 | justifyContent: 'center', 17 | marginTop: verticalScale(40) 18 | }, 19 | text: { 20 | alignSelf: 'center', 21 | color: Colors.white, 22 | fontWeight: 'bold' 23 | } 24 | }); 25 | 26 | export default styles; 27 | -------------------------------------------------------------------------------- /example/src/modules/Home/types.ts: -------------------------------------------------------------------------------- 1 | interface NavProps { 2 | navigate: (args: string) => void; 3 | } 4 | 5 | export { NavProps }; 6 | -------------------------------------------------------------------------------- /example/src/modules/MultiStory/MultiStoryScreen.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef, useState } from 'react'; 2 | import { 3 | ImageBackground, 4 | View, 5 | Text, 6 | TouchableOpacity, 7 | Linking 8 | } from 'react-native'; 9 | import { 10 | type MultiStoryRef, 11 | Indicator, 12 | MultiStory, 13 | TransitionMode, 14 | StoryType 15 | } from 'react-native-story-view'; 16 | import { stories, Strings } from '../../constants'; 17 | import { Header, Footer, Overlay } from '../../components'; 18 | import { Colors } from '../../theme'; 19 | import Images from '../../assets'; 20 | import styles from './styles'; 21 | 22 | const MultiStoryScreen = () => { 23 | const multiStoryRef = useRef(null); 24 | const [userStories, setUserStories] = useState( 25 | JSON.parse(JSON.stringify(stories)) 26 | ); 27 | 28 | const onStoryClose = (viewedStories?: Array) => { 29 | if (viewedStories == null || viewedStories == undefined) return; 30 | const stories = [...userStories]; 31 | userStories.map((_: any, index: number) => { 32 | userStories[index].stories.map((_: any, subIndex: number) => { 33 | stories[index].stories[subIndex].isSeen = 34 | viewedStories[index][subIndex]; 35 | }); 36 | }); 37 | setUserStories([...stories]); 38 | }; 39 | 40 | return ( 41 | 45 | 46 | {Strings.album} 47 | } 51 | ref={multiStoryRef} 52 | /* callback after multi story is closed 53 | `viewedStories` contains multi dimension array of booleans whether story is seen or not 54 | */ 55 | onComplete={onStoryClose} 56 | avatarProps={{ 57 | viewedStoryContainerStyle: { 58 | borderColor: Colors.lightGrey 59 | } 60 | }} 61 | overlayViewPostion={'top'} 62 | renderOverlayView={(item: StoryType) => } 63 | storyContainerProps={{ 64 | renderHeaderComponent: ({ userStories }) => ( 65 |

66 | ), 67 | renderFooterComponent: ({ userStories, story, progressIndex }) => ( 68 |