├── .DS_Store ├── .cspell.json ├── .github ├── FUNDING.yml ├── dependabot.yml ├── release-drafter.yml └── workflows │ ├── check_code.yml │ ├── deploy.yml │ ├── set_assignees.yml │ ├── set_reviewers.yml │ └── update_release_notes_draft.yml ├── .gitignore ├── .npmignore ├── .npmrc ├── .nvmrc ├── .prettierignore ├── .prettierrc.json ├── Develop ├── .bundle │ └── config ├── .eslintrc.js ├── .gitignore ├── .prettierrc.js ├── .watchmanconfig ├── App.tsx ├── Gemfile ├── Gemfile.lock ├── README.md ├── __tests__ │ └── App.test.tsx ├── android │ ├── app │ │ ├── build.gradle │ │ ├── debug.keystore │ │ ├── proguard-rules.pro │ │ └── src │ │ │ ├── debug │ │ │ └── AndroidManifest.xml │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── java │ │ │ └── com │ │ │ │ └── develop │ │ │ │ ├── MainActivity.kt │ │ │ │ └── MainApplication.kt │ │ │ └── res │ │ │ ├── drawable │ │ │ └── rn_edit_text_material.xml │ │ │ ├── mipmap-hdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-mdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ └── values │ │ │ ├── strings.xml │ │ │ └── styles.xml │ ├── build.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ └── settings.gradle ├── app.json ├── babel.config.js ├── images │ ├── horizontal.jpg │ ├── ic_close.png │ ├── ic_close@2x.png │ ├── ic_close@3x.png │ ├── small.png │ ├── small@2x.png │ ├── small@3x.png │ └── vertical.jpg ├── index.js ├── ios │ ├── .xcode.env │ ├── Develop.xcodeproj │ │ ├── project.pbxproj │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ └── Develop.xcscheme │ ├── Develop.xcworkspace │ │ └── contents.xcworkspacedata │ ├── Develop │ │ ├── AppDelegate.h │ │ ├── AppDelegate.mm │ │ ├── Images.xcassets │ │ │ ├── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ │ └── Contents.json │ │ ├── Info.plist │ │ ├── LaunchScreen.storyboard │ │ ├── PrivacyInfo.xcprivacy │ │ └── main.m │ ├── DevelopTests │ │ ├── DevelopTests.m │ │ └── Info.plist │ ├── Podfile │ └── Podfile.lock ├── jest.config.js ├── metro.config.js ├── package-lock.json ├── package.json ├── src │ ├── AnimationDuration │ │ └── index.tsx │ ├── CustomizeFooter │ │ └── index.tsx │ ├── CustomizeHeader │ │ └── index.tsx │ ├── DisableSwipeToDismiss │ │ └── index.tsx │ ├── Disabled │ │ └── index.tsx │ ├── Event │ │ └── index.tsx │ ├── ExternalLibrary │ │ └── index.tsx │ ├── Home │ │ └── index.tsx │ ├── ImageBackgroundColor │ │ └── index.tsx │ ├── ModalImageResizeMode │ │ └── index.tsx │ ├── ModalImageStyle │ │ └── index.tsx │ ├── OpenCloseModalProgrammatically │ │ └── index.tsx │ ├── OverlayBackgroundColor │ │ └── index.tsx │ ├── ParentLayout │ │ └── index.tsx │ ├── RTL │ │ └── index.tsx │ ├── RenderToHardwareTextureAndroid │ │ └── index.tsx │ ├── ResizeMode │ │ └── index.tsx │ ├── SimpleDemo │ │ └── index.tsx │ ├── TranslucentStatusBar │ │ └── index.tsx │ ├── style.ts │ └── type.ts └── tsconfig.json ├── Example ├── .bundle │ └── config ├── .eslintrc.js ├── .gitignore ├── .prettierrc.js ├── .watchmanconfig ├── App.tsx ├── Gemfile ├── Gemfile.lock ├── README.md ├── __tests__ │ └── App.test.tsx ├── android │ ├── app │ │ ├── build.gradle │ │ ├── debug.keystore │ │ ├── proguard-rules.pro │ │ └── src │ │ │ ├── debug │ │ │ └── AndroidManifest.xml │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── java │ │ │ └── com │ │ │ │ └── example │ │ │ │ ├── MainActivity.kt │ │ │ │ └── MainApplication.kt │ │ │ └── res │ │ │ ├── drawable │ │ │ └── rn_edit_text_material.xml │ │ │ ├── mipmap-hdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-mdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ └── values │ │ │ ├── strings.xml │ │ │ └── styles.xml │ ├── build.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ └── settings.gradle ├── app.json ├── babel.config.js ├── images │ ├── horizontal.jpg │ ├── ic_close.png │ ├── ic_close@2x.png │ ├── ic_close@3x.png │ ├── small.png │ ├── small@2x.png │ ├── small@3x.png │ └── vertical.jpg ├── index.js ├── ios │ ├── .xcode.env │ ├── Example.xcodeproj │ │ ├── project.pbxproj │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ └── Example.xcscheme │ ├── Example.xcworkspace │ │ └── contents.xcworkspacedata │ ├── Example │ │ ├── AppDelegate.h │ │ ├── AppDelegate.mm │ │ ├── Images.xcassets │ │ │ ├── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ │ └── Contents.json │ │ ├── Info.plist │ │ ├── LaunchScreen.storyboard │ │ ├── PrivacyInfo.xcprivacy │ │ └── main.m │ ├── ExampleTests │ │ ├── ExampleTests.m │ │ └── Info.plist │ ├── Podfile │ └── Podfile.lock ├── jest.config.js ├── metro.config.js ├── package-lock.json ├── package.json ├── src │ ├── AnimationDuration │ │ └── index.tsx │ ├── CustomizeFooter │ │ └── index.tsx │ ├── CustomizeHeader │ │ └── index.tsx │ ├── DisableSwipeToDismiss │ │ └── index.tsx │ ├── Disabled │ │ └── index.tsx │ ├── Event │ │ └── index.tsx │ ├── ExternalLibrary │ │ └── index.tsx │ ├── Home │ │ └── index.tsx │ ├── ImageBackgroundColor │ │ └── index.tsx │ ├── ModalImageResizeMode │ │ └── index.tsx │ ├── ModalImageStyle │ │ └── index.tsx │ ├── OpenCloseModalProgrammatically │ │ └── index.tsx │ ├── OverlayBackgroundColor │ │ └── index.tsx │ ├── ParentLayout │ │ └── index.tsx │ ├── RTL │ │ └── index.tsx │ ├── RenderToHardwareTextureAndroid │ │ └── index.tsx │ ├── ResizeMode │ │ └── index.tsx │ ├── SimpleDemo │ │ └── index.tsx │ ├── TranslucentStatusBar │ │ └── index.tsx │ ├── style.ts │ └── type.ts └── tsconfig.json ├── LICENSE ├── README.md ├── demo ├── custom-button.png ├── double-tap-zoom.gif ├── double-tap-zoom.mov ├── open-and-close-image-modal.gif ├── open-and-close-image-modal.mov ├── pinch-zoom-and-move.gif ├── pinch-zoom-and-move.mov ├── swipe-to-dismiss.gif └── swipe-to-dismiss.mov ├── eslint.config.js ├── lefthook.yml ├── package-lock.json ├── package.json ├── src ├── components │ ├── ImageDetail │ │ ├── components │ │ │ ├── Background │ │ │ │ └── index.tsx │ │ │ ├── DisplayImageArea │ │ │ │ └── index.tsx │ │ │ ├── Footer │ │ │ │ └── index.tsx │ │ │ ├── Header │ │ │ │ └── index.tsx │ │ │ ├── ImageArea │ │ │ │ ├── index.tsx │ │ │ │ └── utils │ │ │ │ │ └── index.ts │ │ │ └── index.ts │ │ └── index.tsx │ ├── OriginImage │ │ └── index.tsx │ └── index.ts ├── hooks │ ├── index.ts │ └── useOriginImageLayout │ │ └── index.ts ├── index.tsx └── types.ts └── tsconfig.json /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-yakuza/react-native-image-modal/b17fb1a53ac1f3b18122754970fd28b5e55d3d2b/.DS_Store -------------------------------------------------------------------------------- /.cspell.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2", 3 | "ignorePaths": [ 4 | "eslint.config.js", 5 | ".gitignore", 6 | "*.lock", 7 | "*.snap", 8 | "*.svg", 9 | "android/", 10 | "Gemfile", 11 | "ios/", 12 | "Podfile" 13 | ], 14 | "words": [ 15 | "autolabeler", 16 | "commitish", 17 | "danielchabr", 18 | "Deku", 19 | "lefthook", 20 | "Podfile", 21 | "Slashgear", 22 | "tada", 23 | "yakuza" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: [dev-yakuza] 2 | custom: ['https://www.buymeacoffee.com/j0cXhWiza'] 3 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: github-actions 4 | directory: "/" 5 | schedule: 6 | interval: weekly 7 | time: "09:00" 8 | timezone: Asia/Tokyo 9 | commit-message: 10 | prefix: 'deps' 11 | - package-ecosystem: npm 12 | directory: "/" 13 | schedule: 14 | interval: daily 15 | time: "09:00" 16 | timezone: Asia/Tokyo 17 | commit-message: 18 | prefix: 'deps' 19 | -------------------------------------------------------------------------------- /.github/release-drafter.yml: -------------------------------------------------------------------------------- 1 | name-template: "$RESOLVED_VERSION" 2 | tag-template: "$RESOLVED_VERSION" 3 | include-labels: 4 | - 'major' 5 | - 'minor' 6 | - 'patch' 7 | - 'breaking change' 8 | - 'feature' 9 | - 'bug' 10 | - 'docs' 11 | - 'deps' 12 | - 'dependencies' 13 | - 'bump' 14 | - 'chore' 15 | - 'style' 16 | - 'refactor' 17 | - 'test' 18 | - 'ci' 19 | version-resolver: 20 | major: 21 | labels: 22 | - 'major' 23 | minor: 24 | labels: 25 | - 'minor' 26 | patch: 27 | labels: 28 | - 'patch' 29 | default: patch 30 | categories: 31 | - title: '⚠️ Breaking changes' 32 | labels: 33 | - 'breaking change' 34 | - title: '🚀 Features' 35 | labels: 36 | - 'feature' 37 | - title: '🐛 Bug Fixes' 38 | labels: 39 | - 'bug' 40 | - title: '📃 Documents' 41 | labels: 42 | - 'docs' 43 | - title: '🧩 Dependency Updates' 44 | labels: 45 | - 'deps' 46 | - 'dependencies' 47 | - 'bump' 48 | - 'chore' 49 | collapse-after: 5 50 | - title: '🔬 Others' 51 | labels: 52 | - 'style' 53 | - 'refactor' 54 | - 'test' 55 | - 'ci' 56 | collapse-after: 5 57 | autolabeler: 58 | - label: 'breaking change' 59 | title: 60 | - '/!:/i' 61 | - label: 'feature' 62 | title: 63 | - '/feat:/i' 64 | - label: 'bug' 65 | title: 66 | - '/fix:/i' 67 | - label: 'style' 68 | title: 69 | - '/style:/i' 70 | - label: 'refactor' 71 | title: 72 | - '/refactor:/i' 73 | - label: 'test' 74 | title: 75 | - '/test:/i' 76 | - label: 'chore' 77 | title: 78 | - '/chore:/i' 79 | - label: 'docs' 80 | title: 81 | - '/docs:/i' 82 | - label: 'ci' 83 | title: 84 | - '/ci:/i' 85 | - label: 'dependencies' 86 | title: 87 | - '/deps:/i' 88 | - '/dependencies:/i' 89 | - '/bump:/i' 90 | commitish: main 91 | change-template: '- $TITLE @$AUTHOR (#$NUMBER)' 92 | change-title-escapes: '\<*_&' 93 | template: | 94 | $CHANGES -------------------------------------------------------------------------------- /.github/workflows/check_code.yml: -------------------------------------------------------------------------------- 1 | name: Check the source code 2 | on: 3 | pull_request: 4 | branches: 5 | - main 6 | jobs: 7 | check_code: 8 | name: Check the source code 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/checkout@v3 12 | - uses: actions/setup-node@v4.1.0 13 | with: 14 | node-version: '22.11.0' 15 | - name: Install dependencies 16 | run: npm install 17 | - name: Prettier 18 | run: npm run format 19 | - name: CSpell 20 | run: npm run cspell 21 | - name: ESLint 22 | run: npm run lint 23 | -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: Release 2 | 3 | on: 4 | push: 5 | tags: 6 | - '[0-9]+.[0-9]+.[0-9]+' 7 | 8 | jobs: 9 | release: 10 | permissions: 11 | contents: write 12 | pull-requests: write 13 | id-token: write 14 | runs-on: ubuntu-latest 15 | steps: 16 | - name: Checkout Repository 17 | uses: actions/checkout@v4 18 | with: 19 | fetch-depth: 0 20 | ref: ${{ github.ref_name }} 21 | - name: Get variables 22 | id: version 23 | run: echo "::set-output name=version::${GITHUB_REF#refs/tags/}" 24 | - name: Setup node 25 | uses: actions/setup-node@v4.1.0 26 | with: 27 | node-version: '22.11.0' 28 | registry-url: 'https://registry.npmjs.org' 29 | - name: Install dependencies 30 | run: npm install 31 | - name: Update package.json version 32 | run: npm version ${{ steps.version.outputs.version }} --no-git-tag-version --allow-same-version 33 | - name: Commit package.json 34 | run: | 35 | if [[ `git status --porcelain` ]]; then 36 | git config user.email "dev.yakuza@gmail.com" 37 | git config user.name "dev-yakuza" 38 | git add . 39 | git commit -m "chore: Release v${{ steps.version.outputs.version }}" 40 | git push origin HEAD:main -f 41 | git tag ${{ steps.version.outputs.version }} -f 42 | git push origin ${{ steps.version.outputs.version }} -f 43 | fi 44 | - run: npm publish 45 | env: 46 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 47 | # For release notes 48 | - uses: release-drafter/release-drafter@v6 49 | with: 50 | tag: ${{ steps.version.outputs.version }} 51 | name: ${{ steps.version.outputs.version }} 52 | version: ${{ steps.version.outputs.version }} 53 | publish: true 54 | env: 55 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 56 | -------------------------------------------------------------------------------- /.github/workflows/set_assignees.yml: -------------------------------------------------------------------------------- 1 | name: Set assignees 2 | 3 | on: 4 | pull_request_target: 5 | types: 6 | - opened 7 | 8 | jobs: 9 | set-assignees: 10 | name: Set assignees 11 | runs-on: ubuntu-latest 12 | timeout-minutes: 1 13 | steps: 14 | - uses: actions/checkout@v4 15 | - name: Set assignees 16 | uses: actions/github-script@v7 17 | with: 18 | github-token: ${{ secrets.GITHUB_TOKEN }} 19 | script: | 20 | const { owner, repo } = context.repo; 21 | const prNumber = context.payload.pull_request.number; 22 | 23 | const response = await github.rest.issues.get({ 24 | owner, 25 | repo, 26 | issue_number: prNumber, 27 | }) 28 | const { assignees } = response.data; 29 | 30 | if (assignees.length === 0) { 31 | let assignee = context.actor; 32 | const branchName = context.payload.pull_request.head.ref; 33 | 34 | if (branchName.startsWith('dependabot/')) { 35 | assignee = owner; 36 | } 37 | 38 | await github.rest.issues.addAssignees({ 39 | owner: owner, 40 | repo: repo, 41 | issue_number: prNumber, 42 | assignees: [assignee] 43 | }); 44 | } 45 | -------------------------------------------------------------------------------- /.github/workflows/set_reviewers.yml: -------------------------------------------------------------------------------- 1 | name: Set reviewers 2 | 3 | on: 4 | pull_request_target: 5 | types: 6 | - opened 7 | 8 | jobs: 9 | set-reviewers: 10 | name: Set reviewers 11 | runs-on: ubuntu-latest 12 | timeout-minutes: 1 13 | steps: 14 | - name: Set reviewers 15 | uses: actions/github-script@v7 16 | with: 17 | github-token: ${{ secrets.GITHUB_TOKEN }} 18 | script: | 19 | const { owner, repo } = context.repo; 20 | if(owner == 'dev-yakuza') { 21 | return; 22 | } 23 | 24 | const prNumber = context.payload.pull_request.number; 25 | const { data: assignedReviewers } = await github.rest.pulls.listRequestedReviewers({ 26 | owner, 27 | repo, 28 | pull_number: prNumber, 29 | }); 30 | 31 | if (assignedReviewers.length == 0) { 32 | const reviewers = [owner]; 33 | 34 | await github.rest.pulls.requestReviewers({ 35 | owner, 36 | repo, 37 | pull_number: prNumber, 38 | reviewers: reviewers 39 | }); 40 | } 41 | -------------------------------------------------------------------------------- /.github/workflows/update_release_notes_draft.yml: -------------------------------------------------------------------------------- 1 | name: Update Release Notes Draft 2 | 3 | on: 4 | pull_request: 5 | types: 6 | - opened 7 | - reopened 8 | - edited 9 | - synchronize 10 | 11 | permissions: 12 | contents: read 13 | 14 | jobs: 15 | update_release_notes_draft: 16 | permissions: 17 | contents: write 18 | pull-requests: write 19 | checks: write 20 | runs-on: ubuntu-latest 21 | timeout-minutes: 5 22 | steps: 23 | - name: Check PR Title 24 | uses: Slashgear/action-check-pr-title@v4.3.0 25 | with: 26 | regexp: '(feat|fix|style|refactor|test|chore|docs|ci|deps|dependencies|bump): .+' 27 | helpMessage: 'The PR Title must follow the types: feat, fix, style, refactor, test, chore, docs, ci, deps, dependencies, bump' 28 | - uses: release-drafter/release-drafter@v6 29 | env: 30 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 31 | - uses: danielchabr/pr-labels-checker@v3.3 32 | with: 33 | hasSome: breaking change,feature,bug,style,refactor,test,chore,docs,ci,dependencies 34 | githubToken: ${{ secrets.GITHUB_TOKEN }} 35 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | Develop/dist -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | Develop 3 | Example 4 | .github 5 | demo -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | legacy-peer-deps=true 2 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 22.11.0 -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | *.png 2 | *.yml 3 | .prettierignore 4 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2, 3 | "semi": false, 4 | "singleQuote": true, 5 | "jsxSingleQuote": true, 6 | "printWidth": 100 7 | } 8 | -------------------------------------------------------------------------------- /Develop/.bundle/config: -------------------------------------------------------------------------------- 1 | BUNDLE_PATH: "vendor/bundle" 2 | BUNDLE_FORCE_RUBY_PLATFORM: 1 3 | -------------------------------------------------------------------------------- /Develop/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native', 4 | }; 5 | -------------------------------------------------------------------------------- /Develop/.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 | **/.xcode.env.local 24 | 25 | # Android/IntelliJ 26 | # 27 | build/ 28 | .idea 29 | .gradle 30 | local.properties 31 | *.iml 32 | *.hprof 33 | .cxx/ 34 | *.keystore 35 | !debug.keystore 36 | 37 | # node.js 38 | # 39 | node_modules/ 40 | npm-debug.log 41 | yarn-error.log 42 | 43 | # fastlane 44 | # 45 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 46 | # screenshots whenever they are needed. 47 | # For more information about the recommended setup visit: 48 | # https://docs.fastlane.tools/best-practices/source-control/ 49 | 50 | **/fastlane/report.xml 51 | **/fastlane/Preview.html 52 | **/fastlane/screenshots 53 | **/fastlane/test_output 54 | 55 | # Bundle artifact 56 | *.jsbundle 57 | 58 | # Ruby / CocoaPods 59 | **/Pods/ 60 | /vendor/bundle/ 61 | 62 | # Temporary files created by Metro to check the health of the file watcher 63 | .metro-health-check* 64 | 65 | # testing 66 | /coverage 67 | 68 | # Yarn 69 | .yarn/* 70 | !.yarn/patches 71 | !.yarn/plugins 72 | !.yarn/releases 73 | !.yarn/sdks 74 | !.yarn/versions 75 | -------------------------------------------------------------------------------- /Develop/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | arrowParens: 'avoid', 3 | bracketSameLine: true, 4 | bracketSpacing: false, 5 | singleQuote: true, 6 | trailingComma: 'all', 7 | }; 8 | -------------------------------------------------------------------------------- /Develop/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /Develop/App.tsx: -------------------------------------------------------------------------------- 1 | import {NavigationContainer} from '@react-navigation/native'; 2 | import {createNativeStackNavigator} from '@react-navigation/native-stack'; 3 | import {Home} from './src/Home'; 4 | import {RootStackParamList} from './src/type'; 5 | import {SimpleDemo} from './src/SimpleDemo'; 6 | import {Event} from './src/Event'; 7 | import {ResizeMode} from './src/ResizeMode'; 8 | import {TranslucentStatusBar} from './src/TranslucentStatusBar'; 9 | import {ImageBackgroundColor} from './src/ImageBackgroundColor'; 10 | import {CustomizeFooter} from './src/CustomizeFooter'; 11 | import {CustomizeHeader} from './src/CustomizeHeader'; 12 | import {DisableSwipeToDismiss} from './src/DisableSwipeToDismiss'; 13 | import {OpenCloseModalProgrammatically} from './src/OpenCloseModalProgrammatically'; 14 | import {ModalImageResizeMode} from './src/ModalImageResizeMode'; 15 | import {RTL} from './src/RTL'; 16 | import {RenderToHardwareTextureAndroid} from './src/RenderToHardwareTextureAndroid'; 17 | import {OverlayBackgroundColor} from './src/OverlayBackgroundColor'; 18 | import {Disabled} from './src/Disabled'; 19 | import {ModalImageStyle} from './src/ModalImageStyle'; 20 | import {ExternalLibrary} from './src/ExternalLibrary'; 21 | import {ParentLayout} from './src/ParentLayout'; 22 | import {AnimationDuration} from './src/AnimationDuration'; 23 | 24 | const Stack = createNativeStackNavigator(); 25 | 26 | const App = () => { 27 | return ( 28 | 29 | 30 | 31 | 32 | 33 | 34 | 38 | 42 | 43 | 44 | 48 | 52 | 53 | 57 | 61 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | ); 73 | }; 74 | 75 | export default App; 76 | -------------------------------------------------------------------------------- /Develop/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 | -------------------------------------------------------------------------------- /Develop/Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | CFPropertyList (3.0.7) 5 | base64 6 | nkf 7 | rexml 8 | activesupport (7.2.2) 9 | base64 10 | benchmark (>= 0.3) 11 | bigdecimal 12 | concurrent-ruby (~> 1.0, >= 1.3.1) 13 | connection_pool (>= 2.2.5) 14 | drb 15 | i18n (>= 1.6, < 2) 16 | logger (>= 1.4.2) 17 | minitest (>= 5.1) 18 | securerandom (>= 0.3) 19 | tzinfo (~> 2.0, >= 2.0.5) 20 | addressable (2.8.7) 21 | public_suffix (>= 2.0.2, < 7.0) 22 | algoliasearch (1.27.5) 23 | httpclient (~> 2.8, >= 2.8.3) 24 | json (>= 1.5.1) 25 | atomos (0.1.3) 26 | base64 (0.2.0) 27 | benchmark (0.3.0) 28 | bigdecimal (3.1.8) 29 | claide (1.1.0) 30 | cocoapods (1.16.2) 31 | addressable (~> 2.8) 32 | claide (>= 1.0.2, < 2.0) 33 | cocoapods-core (= 1.16.2) 34 | cocoapods-deintegrate (>= 1.0.3, < 2.0) 35 | cocoapods-downloader (>= 2.1, < 3.0) 36 | cocoapods-plugins (>= 1.0.0, < 2.0) 37 | cocoapods-search (>= 1.0.0, < 2.0) 38 | cocoapods-trunk (>= 1.6.0, < 2.0) 39 | cocoapods-try (>= 1.1.0, < 2.0) 40 | colored2 (~> 3.1) 41 | escape (~> 0.0.4) 42 | fourflusher (>= 2.3.0, < 3.0) 43 | gh_inspector (~> 1.0) 44 | molinillo (~> 0.8.0) 45 | nap (~> 1.0) 46 | ruby-macho (>= 2.3.0, < 3.0) 47 | xcodeproj (>= 1.27.0, < 2.0) 48 | cocoapods-core (1.16.2) 49 | activesupport (>= 5.0, < 8) 50 | addressable (~> 2.8) 51 | algoliasearch (~> 1.0) 52 | concurrent-ruby (~> 1.1) 53 | fuzzy_match (~> 2.0.4) 54 | nap (~> 1.0) 55 | netrc (~> 0.11) 56 | public_suffix (~> 4.0) 57 | typhoeus (~> 1.0) 58 | cocoapods-deintegrate (1.0.5) 59 | cocoapods-downloader (2.1) 60 | cocoapods-plugins (1.0.0) 61 | nap 62 | cocoapods-search (1.0.1) 63 | cocoapods-trunk (1.6.0) 64 | nap (>= 0.8, < 2.0) 65 | netrc (~> 0.11) 66 | cocoapods-try (1.2.0) 67 | colored2 (3.1.2) 68 | concurrent-ruby (1.3.4) 69 | connection_pool (2.4.1) 70 | drb (2.2.1) 71 | escape (0.0.4) 72 | ethon (0.16.0) 73 | ffi (>= 1.15.0) 74 | ffi (1.17.0) 75 | fourflusher (2.3.1) 76 | fuzzy_match (2.0.4) 77 | gh_inspector (1.1.3) 78 | httpclient (2.8.3) 79 | i18n (1.14.6) 80 | concurrent-ruby (~> 1.0) 81 | json (2.7.5) 82 | logger (1.6.1) 83 | minitest (5.25.1) 84 | molinillo (0.8.0) 85 | nanaimo (0.4.0) 86 | nap (1.1.0) 87 | netrc (0.11.0) 88 | nkf (0.2.0) 89 | public_suffix (4.0.7) 90 | rexml (3.3.9) 91 | ruby-macho (2.5.1) 92 | securerandom (0.3.1) 93 | typhoeus (1.4.1) 94 | ethon (>= 0.9.0) 95 | tzinfo (2.0.6) 96 | concurrent-ruby (~> 1.0) 97 | xcodeproj (1.27.0) 98 | CFPropertyList (>= 2.3.3, < 4.0) 99 | atomos (~> 0.1.3) 100 | claide (>= 1.0.2, < 2.0) 101 | colored2 (~> 3.1) 102 | nanaimo (~> 0.4.0) 103 | rexml (>= 3.3.6, < 4.0) 104 | 105 | PLATFORMS 106 | ruby 107 | 108 | DEPENDENCIES 109 | activesupport (>= 6.1.7.5, != 7.1.0) 110 | cocoapods (>= 1.13, != 1.15.1, != 1.15.0) 111 | 112 | RUBY VERSION 113 | ruby 3.1.2p20 114 | 115 | BUNDLED WITH 116 | 2.5.9 117 | -------------------------------------------------------------------------------- /Develop/README.md: -------------------------------------------------------------------------------- 1 | This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli). 2 | 3 | # Getting Started 4 | 5 | > **Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding. 6 | 7 | ## Step 1: Start the Metro Server 8 | 9 | First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native. 10 | 11 | To start Metro, run the following command from the _root_ of your React Native project: 12 | 13 | ```bash 14 | # using npm 15 | npm start 16 | 17 | # OR using Yarn 18 | yarn start 19 | ``` 20 | 21 | ## Step 2: Start your Application 22 | 23 | Let Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app: 24 | 25 | ### For Android 26 | 27 | ```bash 28 | # using npm 29 | npm run android 30 | 31 | # OR using Yarn 32 | yarn android 33 | ``` 34 | 35 | ### For iOS 36 | 37 | ```bash 38 | # using npm 39 | npm run ios 40 | 41 | # OR using Yarn 42 | yarn ios 43 | ``` 44 | 45 | If everything is set up _correctly_, you should see your new app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator/simulator correctly. 46 | 47 | This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively. 48 | 49 | ## Step 3: Modifying your App 50 | 51 | Now that you have successfully run the app, let's modify it. 52 | 53 | 1. Open `App.tsx` in your text editor of choice and edit some lines. 54 | 2. For **Android**: Press the R key twice or select **"Reload"** from the **Developer Menu** (Ctrl + M (on Window and Linux) or Cmd ⌘ + M (on macOS)) to see your changes! 55 | 56 | For **iOS**: Hit Cmd ⌘ + R in your iOS Simulator to reload the app and see your changes! 57 | 58 | ## Congratulations! :tada: 59 | 60 | You've successfully run and modified your React Native App. :partying_face: 61 | 62 | ### Now what? 63 | 64 | - If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps). 65 | - If you're curious to learn more about React Native, check out the [Introduction to React Native](https://reactnative.dev/docs/getting-started). 66 | 67 | # Troubleshooting 68 | 69 | If you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page. 70 | 71 | # Learn More 72 | 73 | To learn more about React Native, take a look at the following resources: 74 | 75 | - [React Native Website](https://reactnative.dev) - learn more about React Native. 76 | - [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment. 77 | - [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**. 78 | - [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts. 79 | - [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native. 80 | -------------------------------------------------------------------------------- /Develop/__tests__/App.test.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import 'react-native'; 6 | import React from 'react'; 7 | import App from '../App'; 8 | 9 | // Note: import explicitly to use the types shipped with jest. 10 | import {it} from '@jest/globals'; 11 | 12 | // Note: test renderer must be required after react-native. 13 | import renderer from 'react-test-renderer'; 14 | 15 | it('renders correctly', () => { 16 | renderer.create(); 17 | }); 18 | -------------------------------------------------------------------------------- /Develop/android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-yakuza/react-native-image-modal/b17fb1a53ac1f3b18122754970fd28b5e55d3d2b/Develop/android/app/debug.keystore -------------------------------------------------------------------------------- /Develop/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 | -------------------------------------------------------------------------------- /Develop/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 9 | 10 | -------------------------------------------------------------------------------- /Develop/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /Develop/android/app/src/main/java/com/develop/MainActivity.kt: -------------------------------------------------------------------------------- 1 | package com.develop 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 = "Develop" 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 | -------------------------------------------------------------------------------- /Develop/android/app/src/main/java/com/develop/MainApplication.kt: -------------------------------------------------------------------------------- 1 | package com.develop 2 | 3 | import android.app.Application 4 | import com.facebook.react.PackageList 5 | import com.facebook.react.ReactApplication 6 | import com.facebook.react.ReactHost 7 | import com.facebook.react.ReactNativeHost 8 | import com.facebook.react.ReactPackage 9 | import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load 10 | import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost 11 | import com.facebook.react.defaults.DefaultReactNativeHost 12 | import com.facebook.soloader.SoLoader 13 | 14 | class MainApplication : Application(), ReactApplication { 15 | 16 | override val reactNativeHost: ReactNativeHost = 17 | object : DefaultReactNativeHost(this) { 18 | override fun getPackages(): List = 19 | PackageList(this).packages.apply { 20 | // Packages that cannot be autolinked yet can be added manually here, for example: 21 | // add(MyReactNativePackage()) 22 | } 23 | 24 | override fun getJSMainModuleName(): String = "index" 25 | 26 | override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG 27 | 28 | override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED 29 | override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED 30 | } 31 | 32 | override val reactHost: ReactHost 33 | get() = getDefaultReactHost(applicationContext, reactNativeHost) 34 | 35 | override fun onCreate() { 36 | super.onCreate() 37 | SoLoader.init(this, false) 38 | if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) { 39 | // If you opted-in for the New Architecture, we load the native entry point for this app. 40 | load() 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /Develop/android/app/src/main/res/drawable/rn_edit_text_material.xml: -------------------------------------------------------------------------------- 1 | 2 | 16 | 22 | 23 | 24 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /Develop/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-yakuza/react-native-image-modal/b17fb1a53ac1f3b18122754970fd28b5e55d3d2b/Develop/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /Develop/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-yakuza/react-native-image-modal/b17fb1a53ac1f3b18122754970fd28b5e55d3d2b/Develop/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /Develop/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-yakuza/react-native-image-modal/b17fb1a53ac1f3b18122754970fd28b5e55d3d2b/Develop/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /Develop/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-yakuza/react-native-image-modal/b17fb1a53ac1f3b18122754970fd28b5e55d3d2b/Develop/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /Develop/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-yakuza/react-native-image-modal/b17fb1a53ac1f3b18122754970fd28b5e55d3d2b/Develop/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /Develop/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-yakuza/react-native-image-modal/b17fb1a53ac1f3b18122754970fd28b5e55d3d2b/Develop/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /Develop/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-yakuza/react-native-image-modal/b17fb1a53ac1f3b18122754970fd28b5e55d3d2b/Develop/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /Develop/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-yakuza/react-native-image-modal/b17fb1a53ac1f3b18122754970fd28b5e55d3d2b/Develop/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /Develop/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-yakuza/react-native-image-modal/b17fb1a53ac1f3b18122754970fd28b5e55d3d2b/Develop/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /Develop/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-yakuza/react-native-image-modal/b17fb1a53ac1f3b18122754970fd28b5e55d3d2b/Develop/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /Develop/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | Develop 3 | 4 | -------------------------------------------------------------------------------- /Develop/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Develop/android/build.gradle: -------------------------------------------------------------------------------- 1 | buildscript { 2 | ext { 3 | buildToolsVersion = "34.0.0" 4 | minSdkVersion = 23 5 | compileSdkVersion = 34 6 | targetSdkVersion = 34 7 | ndkVersion = "26.1.10909125" 8 | kotlinVersion = "1.9.24" 9 | } 10 | repositories { 11 | google() 12 | mavenCentral() 13 | } 14 | dependencies { 15 | classpath("com.android.tools.build:gradle") 16 | classpath("com.facebook.react:react-native-gradle-plugin") 17 | classpath("org.jetbrains.kotlin:kotlin-gradle-plugin") 18 | } 19 | } 20 | 21 | apply plugin: "com.facebook.react.rootproject" 22 | -------------------------------------------------------------------------------- /Develop/android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx512m -XX:MaxMetaspaceSize=256m 13 | org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | # AndroidX package structure to make it clearer which packages are bundled with the 21 | # Android operating system, and which are packaged with your app's APK 22 | # https://developer.android.com/topic/libraries/support-library/androidx-rn 23 | android.useAndroidX=true 24 | 25 | # Use this property to specify which architecture you want to build. 26 | # You can also override it from the CLI using 27 | # ./gradlew -PreactNativeArchitectures=x86_64 28 | reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64 29 | 30 | # Use this property to enable support to the new architecture. 31 | # This will allow you to use TurboModules and the Fabric render in 32 | # your application. You should enable this flag either if you want 33 | # to write custom TurboModules/Fabric components OR use libraries that 34 | # are providing them. 35 | newArchEnabled=false 36 | 37 | # Use this property to enable or disable the Hermes JS engine. 38 | # If set to false, you will be using JSC instead. 39 | hermesEnabled=true 40 | -------------------------------------------------------------------------------- /Develop/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-yakuza/react-native-image-modal/b17fb1a53ac1f3b18122754970fd28b5e55d3d2b/Develop/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /Develop/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-8.8-all.zip 4 | networkTimeout=10000 5 | validateDistributionUrl=true 6 | zipStoreBase=GRADLE_USER_HOME 7 | zipStorePath=wrapper/dists 8 | -------------------------------------------------------------------------------- /Develop/android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @rem 2 | @rem Copyright 2015 the original author or authors. 3 | @rem 4 | @rem Licensed under the Apache License, Version 2.0 (the "License"); 5 | @rem you may not use this file except in compliance with the License. 6 | @rem You may obtain a copy of the License at 7 | @rem 8 | @rem https://www.apache.org/licenses/LICENSE-2.0 9 | @rem 10 | @rem Unless required by applicable law or agreed to in writing, software 11 | @rem distributed under the License is distributed on an "AS IS" BASIS, 12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | @rem See the License for the specific language governing permissions and 14 | @rem limitations under the License. 15 | @rem 16 | 17 | @if "%DEBUG%"=="" @echo off 18 | @rem ########################################################################## 19 | @rem 20 | @rem Gradle startup script for Windows 21 | @rem 22 | @rem ########################################################################## 23 | 24 | @rem Set local scope for the variables with windows NT shell 25 | if "%OS%"=="Windows_NT" setlocal 26 | 27 | set DIRNAME=%~dp0 28 | if "%DIRNAME%"=="" set DIRNAME=. 29 | @rem This is normally unused 30 | set APP_BASE_NAME=%~n0 31 | set APP_HOME=%DIRNAME% 32 | 33 | @rem Resolve any "." and ".." in APP_HOME to make it shorter. 34 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi 35 | 36 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 37 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 38 | 39 | @rem Find java.exe 40 | if defined JAVA_HOME goto findJavaFromJavaHome 41 | 42 | set JAVA_EXE=java.exe 43 | %JAVA_EXE% -version >NUL 2>&1 44 | if %ERRORLEVEL% equ 0 goto execute 45 | 46 | echo. 1>&2 47 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2 48 | echo. 1>&2 49 | echo Please set the JAVA_HOME variable in your environment to match the 1>&2 50 | echo location of your Java installation. 1>&2 51 | 52 | goto fail 53 | 54 | :findJavaFromJavaHome 55 | set JAVA_HOME=%JAVA_HOME:"=% 56 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 57 | 58 | if exist "%JAVA_EXE%" goto execute 59 | 60 | echo. 1>&2 61 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2 62 | echo. 1>&2 63 | echo Please set the JAVA_HOME variable in your environment to match the 1>&2 64 | echo location of your Java installation. 1>&2 65 | 66 | goto fail 67 | 68 | :execute 69 | @rem Setup the command line 70 | 71 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 72 | 73 | 74 | @rem Execute Gradle 75 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* 76 | 77 | :end 78 | @rem End local scope for the variables with windows NT shell 79 | if %ERRORLEVEL% equ 0 goto mainEnd 80 | 81 | :fail 82 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 83 | rem the _cmd.exe /c_ return code! 84 | set EXIT_CODE=%ERRORLEVEL% 85 | if %EXIT_CODE% equ 0 set EXIT_CODE=1 86 | if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE% 87 | exit /b %EXIT_CODE% 88 | 89 | :mainEnd 90 | if "%OS%"=="Windows_NT" endlocal 91 | 92 | :omega 93 | -------------------------------------------------------------------------------- /Develop/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 = 'Develop' 5 | include ':app' 6 | includeBuild('../node_modules/@react-native/gradle-plugin') 7 | -------------------------------------------------------------------------------- /Develop/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Develop", 3 | "displayName": "Develop" 4 | } 5 | -------------------------------------------------------------------------------- /Develop/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:@react-native/babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /Develop/images/horizontal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-yakuza/react-native-image-modal/b17fb1a53ac1f3b18122754970fd28b5e55d3d2b/Develop/images/horizontal.jpg -------------------------------------------------------------------------------- /Develop/images/ic_close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-yakuza/react-native-image-modal/b17fb1a53ac1f3b18122754970fd28b5e55d3d2b/Develop/images/ic_close.png -------------------------------------------------------------------------------- /Develop/images/ic_close@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-yakuza/react-native-image-modal/b17fb1a53ac1f3b18122754970fd28b5e55d3d2b/Develop/images/ic_close@2x.png -------------------------------------------------------------------------------- /Develop/images/ic_close@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-yakuza/react-native-image-modal/b17fb1a53ac1f3b18122754970fd28b5e55d3d2b/Develop/images/ic_close@3x.png -------------------------------------------------------------------------------- /Develop/images/small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-yakuza/react-native-image-modal/b17fb1a53ac1f3b18122754970fd28b5e55d3d2b/Develop/images/small.png -------------------------------------------------------------------------------- /Develop/images/small@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-yakuza/react-native-image-modal/b17fb1a53ac1f3b18122754970fd28b5e55d3d2b/Develop/images/small@2x.png -------------------------------------------------------------------------------- /Develop/images/small@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-yakuza/react-native-image-modal/b17fb1a53ac1f3b18122754970fd28b5e55d3d2b/Develop/images/small@3x.png -------------------------------------------------------------------------------- /Develop/images/vertical.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-yakuza/react-native-image-modal/b17fb1a53ac1f3b18122754970fd28b5e55d3d2b/Develop/images/vertical.jpg -------------------------------------------------------------------------------- /Develop/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import {AppRegistry} from 'react-native'; 6 | import App from './App'; 7 | import {name as appName} from './app.json'; 8 | 9 | AppRegistry.registerComponent(appName, () => App); 10 | -------------------------------------------------------------------------------- /Develop/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 | -------------------------------------------------------------------------------- /Develop/ios/Develop.xcodeproj/xcshareddata/xcschemes/Develop.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 | -------------------------------------------------------------------------------- /Develop/ios/Develop.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Develop/ios/Develop/AppDelegate.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | @interface AppDelegate : RCTAppDelegate 5 | 6 | @end 7 | -------------------------------------------------------------------------------- /Develop/ios/Develop/AppDelegate.mm: -------------------------------------------------------------------------------- 1 | #import "AppDelegate.h" 2 | 3 | #import 4 | 5 | @implementation AppDelegate 6 | 7 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 8 | { 9 | self.moduleName = @"Develop"; 10 | // You can add your custom initial props in the dictionary below. 11 | // They will be passed down to the ViewController used by React Native. 12 | self.initialProps = @{}; 13 | 14 | return [super application:application didFinishLaunchingWithOptions:launchOptions]; 15 | } 16 | 17 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge 18 | { 19 | return [self bundleURL]; 20 | } 21 | 22 | - (NSURL *)bundleURL 23 | { 24 | #if DEBUG 25 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"]; 26 | #else 27 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 28 | #endif 29 | } 30 | 31 | @end 32 | -------------------------------------------------------------------------------- /Develop/ios/Develop/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 | -------------------------------------------------------------------------------- /Develop/ios/Develop/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Develop/ios/Develop/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | Develop 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 | -------------------------------------------------------------------------------- /Develop/ios/Develop/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 | -------------------------------------------------------------------------------- /Develop/ios/Develop/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 | -------------------------------------------------------------------------------- /Develop/ios/Develop/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 | -------------------------------------------------------------------------------- /Develop/ios/DevelopTests/DevelopTests.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 DevelopTests : XCTestCase 11 | 12 | @end 13 | 14 | @implementation DevelopTests 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 | -------------------------------------------------------------------------------- /Develop/ios/DevelopTests/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 | -------------------------------------------------------------------------------- /Develop/ios/Podfile: -------------------------------------------------------------------------------- 1 | # Resolve react_native_pods.rb with node to allow for hoisting 2 | require Pod::Executable.execute_command('node', ['-p', 3 | 'require.resolve( 4 | "react-native/scripts/react_native_pods.rb", 5 | {paths: [process.argv[1]]}, 6 | )', __dir__]).strip 7 | 8 | platform :ios, min_ios_version_supported 9 | prepare_react_native_project! 10 | 11 | linkage = ENV['USE_FRAMEWORKS'] 12 | if linkage != nil 13 | Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green 14 | use_frameworks! :linkage => linkage.to_sym 15 | end 16 | 17 | target 'Develop' do 18 | config = use_native_modules! 19 | 20 | use_react_native!( 21 | :path => config[:reactNativePath], 22 | # An absolute path to your application root. 23 | :app_path => "#{Pod::Config.instance.installation_root}/.." 24 | ) 25 | 26 | target 'DevelopTests' do 27 | inherit! :complete 28 | # Pods for testing 29 | end 30 | 31 | post_install do |installer| 32 | # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202 33 | react_native_post_install( 34 | installer, 35 | config[:reactNativePath], 36 | :mac_catalyst_enabled => false, 37 | # :ccache_enabled => true 38 | ) 39 | end 40 | end 41 | -------------------------------------------------------------------------------- /Develop/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'react-native', 3 | }; 4 | -------------------------------------------------------------------------------- /Develop/metro.config.js: -------------------------------------------------------------------------------- 1 | const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); 2 | 3 | /** 4 | * Metro configuration 5 | * https://reactnative.dev/docs/metro 6 | * 7 | * @type {import('metro-config').MetroConfig} 8 | */ 9 | const config = {}; 10 | 11 | module.exports = mergeConfig(getDefaultConfig(__dirname), config); 12 | -------------------------------------------------------------------------------- /Develop/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Develop", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "android": "react-native run-android", 7 | "ios": "react-native run-ios", 8 | "lint": "eslint .", 9 | "start": "react-native start", 10 | "test": "jest" 11 | }, 12 | "dependencies": { 13 | "@react-native-community/cli": "^15.1.3", 14 | "@react-navigation/native": "^7.0.14", 15 | "@react-navigation/native-stack": "^7.2.0", 16 | "react": "18.3.1", 17 | "react-native": "0.76.5", 18 | "react-native-fast-image": "^8.6.3", 19 | "react-native-safe-area-context": "^5.0.0", 20 | "react-native-screens": "^4.4.0" 21 | }, 22 | "devDependencies": { 23 | "@babel/core": "^7.26.0", 24 | "@babel/preset-env": "^7.26.0", 25 | "@babel/runtime": "^7.26.0", 26 | "@react-native/babel-preset": "0.76.5", 27 | "@react-native/eslint-config": "0.76.5", 28 | "@react-native/metro-config": "0.76.5", 29 | "@react-native/typescript-config": "0.76.5", 30 | "@types/react": "^18.3.12", 31 | "@types/react-test-renderer": "^18.3.1", 32 | "babel-jest": "^29.7.0", 33 | "eslint": "^8.57.0", 34 | "jest": "^29.7.0", 35 | "prettier": "3.4.2", 36 | "react-test-renderer": "18.3.1", 37 | "typescript": "5.7.2" 38 | }, 39 | "engines": { 40 | "node": ">=18" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /Develop/src/AnimationDuration/index.tsx: -------------------------------------------------------------------------------- 1 | import {useState} from 'react'; 2 | import { 3 | LayoutChangeEvent, 4 | SafeAreaView, 5 | ScrollView, 6 | Text, 7 | View, 8 | } from 'react-native'; 9 | import ImageModal from '../../dist'; 10 | import React from 'react'; 11 | import {style} from '../style'; 12 | 13 | const AnimationDuration = () => { 14 | const [imageWidth, setImageWidth] = useState(0); 15 | 16 | return ( 17 | 18 | 19 | { 22 | setImageWidth(event.nativeEvent.layout.width); 23 | }}> 24 | Animation Duration 25 | 26 | You can set the duration of the animation when the modal is opened 27 | or closed. The default value is 100 milliseconds. 28 | 29 | - Normal: 100 milliseconds 30 | 40 | - Faster: 50 milliseconds 41 | 52 | - Slower: 500 milliseconds 53 | 64 | 65 | 66 | 67 | ); 68 | }; 69 | 70 | export {AnimationDuration}; 71 | -------------------------------------------------------------------------------- /Develop/src/CustomizeFooter/index.tsx: -------------------------------------------------------------------------------- 1 | import {useState} from 'react'; 2 | import { 3 | LayoutChangeEvent, 4 | SafeAreaView, 5 | ScrollView, 6 | Text, 7 | TouchableOpacity, 8 | View, 9 | } from 'react-native'; 10 | import ImageModal from '../../dist'; 11 | import React from 'react'; 12 | import {style} from '../style'; 13 | 14 | const CustomizeFooter = () => { 15 | const [imageWidth, setImageWidth] = useState(0); 16 | 17 | return ( 18 | 19 | 20 | { 23 | setImageWidth(event.nativeEvent.layout.width); 24 | }}> 25 | Custom close button on Footer 26 | 27 | You can set imageBackgroundColor to change the background color. 28 | 29 | ( 39 | 47 | CloseButton 48 | 49 | )} 50 | /> 51 | 52 | 53 | 54 | ); 55 | }; 56 | 57 | export {CustomizeFooter}; 58 | -------------------------------------------------------------------------------- /Develop/src/CustomizeHeader/index.tsx: -------------------------------------------------------------------------------- 1 | import {useState} from 'react'; 2 | import { 3 | LayoutChangeEvent, 4 | SafeAreaView, 5 | ScrollView, 6 | Text, 7 | TouchableOpacity, 8 | View, 9 | } from 'react-native'; 10 | import ImageModal from '../../dist'; 11 | import React from 'react'; 12 | import {style} from '../style'; 13 | 14 | const CustomizeHeader = () => { 15 | const [imageWidth, setImageWidth] = useState(0); 16 | 17 | return ( 18 | 19 | 20 | { 23 | setImageWidth(event.nativeEvent.layout.width); 24 | }}> 25 | Custom close button on Header 26 | 27 | You can set imageBackgroundColor to change the background color. 28 | 29 | ( 38 | 46 | CloseButton 47 | 48 | )} 49 | /> 50 | 51 | 52 | 53 | ); 54 | }; 55 | 56 | export {CustomizeHeader}; 57 | -------------------------------------------------------------------------------- /Develop/src/DisableSwipeToDismiss/index.tsx: -------------------------------------------------------------------------------- 1 | import {useState} from 'react'; 2 | import { 3 | LayoutChangeEvent, 4 | SafeAreaView, 5 | ScrollView, 6 | Text, 7 | View, 8 | } from 'react-native'; 9 | import ImageModal from '../../dist'; 10 | import React from 'react'; 11 | import {style} from '../style'; 12 | 13 | const DisableSwipeToDismiss = () => { 14 | const [imageWidth, setImageWidth] = useState(0); 15 | 16 | return ( 17 | 18 | 19 | { 22 | setImageWidth(event.nativeEvent.layout.width); 23 | }}> 24 | Disable swipeToDismiss 25 | 26 | You can set false to swipeToDismiss to disable swiping the modal to 27 | dismiss. 28 | 29 | 41 | 42 | 43 | 44 | ); 45 | }; 46 | 47 | export {DisableSwipeToDismiss}; 48 | -------------------------------------------------------------------------------- /Develop/src/Disabled/index.tsx: -------------------------------------------------------------------------------- 1 | import {useState} from 'react'; 2 | import { 3 | LayoutChangeEvent, 4 | SafeAreaView, 5 | ScrollView, 6 | Text, 7 | View, 8 | } from 'react-native'; 9 | import ImageModal from '../../dist'; 10 | import React from 'react'; 11 | import {style} from '../style'; 12 | 13 | const Disabled = () => { 14 | const [imageWidth, setImageWidth] = useState(0); 15 | 16 | return ( 17 | 18 | 19 | { 22 | setImageWidth(event.nativeEvent.layout.width); 23 | }}> 24 | disabled 25 | 35 | 36 | 37 | 38 | ); 39 | }; 40 | 41 | export {Disabled}; 42 | -------------------------------------------------------------------------------- /Develop/src/Event/index.tsx: -------------------------------------------------------------------------------- 1 | import {useState} from 'react'; 2 | import { 3 | LayoutChangeEvent, 4 | SafeAreaView, 5 | ScrollView, 6 | Text, 7 | View, 8 | } from 'react-native'; 9 | import ImageModal from '../../dist'; 10 | import React from 'react'; 11 | import {style} from '../style'; 12 | 13 | const Event = () => { 14 | const [imageWidth, setImageWidth] = useState(0); 15 | 16 | return ( 17 | 18 | 19 | { 22 | setImageWidth(event.nativeEvent.layout.width); 23 | }}> 24 | Event 25 | You can see the log in the terminal. 26 | console.log('onLongPressOriginImage')} 35 | onTap={() => console.log('onTap')} 36 | onDoubleTap={() => console.log('onDoubleTap')} 37 | onLongPress={() => console.log('onLongPress')} 38 | onOpen={() => console.log('onOpen')} 39 | didOpen={() => console.log('didOpen')} 40 | onMove={() => console.log('onMove')} 41 | responderRelease={() => console.log('responderRelease')} 42 | willClose={() => console.log('willClose')} 43 | onClose={() => console.log('onClose')} 44 | /> 45 | 46 | 47 | - onLongPressOriginImage{'\n'}- onTap{'\n'}- onDoubleTap{'\n'}- 48 | onLongPress{'\n'}- onOpen{'\n'}- didOpen{'\n'}- onMove{'\n'}- 49 | responderRelease{'\n'}- willClose{'\n'}- onClose 50 | 51 | 52 | 53 | 54 | 55 | ); 56 | }; 57 | 58 | export {Event}; 59 | -------------------------------------------------------------------------------- /Develop/src/ExternalLibrary/index.tsx: -------------------------------------------------------------------------------- 1 | import {useState} from 'react'; 2 | import { 3 | ImageRequireSource, 4 | LayoutChangeEvent, 5 | SafeAreaView, 6 | ScrollView, 7 | StyleProp, 8 | Text, 9 | View, 10 | } from 'react-native'; 11 | import ImageModal from '../../dist'; 12 | import React from 'react'; 13 | import {style} from '../style'; 14 | import FastImage, {ImageStyle, ResizeMode} from 'react-native-fast-image'; 15 | 16 | const ExternalLibrary = () => { 17 | const [imageWidth, setImageWidth] = useState(0); 18 | 19 | return ( 20 | 21 | 22 | { 25 | setImageWidth(event.nativeEvent.layout.width); 26 | }}> 27 | Use FastImage 28 | ( 37 | } 39 | source={source as ImageRequireSource} 40 | resizeMode={resizeMode as ResizeMode} 41 | /> 42 | )} 43 | /> 44 | 45 | 46 | 47 | ); 48 | }; 49 | 50 | export {ExternalLibrary}; 51 | -------------------------------------------------------------------------------- /Develop/src/Home/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {SafeAreaView, ScrollView, Button, View} from 'react-native'; 3 | import {RootStackParamList} from '../type'; 4 | import {NativeStackScreenProps} from '@react-navigation/native-stack'; 5 | 6 | type NavigationItem = { 7 | title: string; 8 | screen: keyof RootStackParamList; 9 | }; 10 | 11 | type RootStackProps = NativeStackScreenProps; 12 | 13 | const Home = ({navigation}: RootStackProps) => { 14 | const list: NavigationItem[] = [ 15 | { 16 | title: 'Simple Demo', 17 | screen: 'SimpleDemo', 18 | }, 19 | { 20 | title: 'Event', 21 | screen: 'Event', 22 | }, 23 | { 24 | title: 'Resize Mode', 25 | screen: 'ResizeMode', 26 | }, 27 | { 28 | title: 'Translucent Status Bar', 29 | screen: 'TranslucentStatusBar', 30 | }, 31 | { 32 | title: 'Image Background Color', 33 | screen: 'ImageBackgroundColor', 34 | }, 35 | { 36 | title: 'Customize Footer', 37 | screen: 'CustomizeFooter', 38 | }, 39 | { 40 | title: 'Customize Header', 41 | screen: 'CustomizeHeader', 42 | }, 43 | { 44 | title: 'Disable SwipeToDismiss', 45 | screen: 'DisableSwipeToDismiss', 46 | }, 47 | { 48 | title: 'Open and Close Modal Programmatically', 49 | screen: 'OpenCloseModalProgrammatically', 50 | }, 51 | { 52 | title: 'Modal Image ResizeMode', 53 | screen: 'ModalImageResizeMode', 54 | }, 55 | { 56 | title: 'RTL', 57 | screen: 'RTL', 58 | }, 59 | { 60 | title: 'RenderToHardwareTextureAndroid', 61 | screen: 'RenderToHardwareTextureAndroid', 62 | }, 63 | { 64 | title: 'Overlay Background Color', 65 | screen: 'OverlayBackgroundColor', 66 | }, 67 | { 68 | title: 'Disabled', 69 | screen: 'Disabled', 70 | }, 71 | { 72 | title: 'Modal Image Style', 73 | screen: 'ModalImageStyle', 74 | }, 75 | { 76 | title: 'External Library', 77 | screen: 'ExternalLibrary', 78 | }, 79 | { 80 | title: 'Parent Layout', 81 | screen: 'ParentLayout', 82 | }, 83 | { 84 | title: 'Animation Duration', 85 | screen: 'AnimationDuration', 86 | }, 87 | ]; 88 | return ( 89 | 90 | 91 | {list.map(({title, screen}, index) => ( 92 | 93 |