├── .github └── workflows │ ├── build-deploy.yml │ └── slack-payload.json ├── .gitignore ├── README.md ├── SECURITY.md ├── UXCamReactExample-Typescript ├── .bundle │ └── config ├── .eslintrc.js ├── .gitignore ├── .prettierrc.js ├── .ruby-version ├── .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 │ │ │ │ │ └── reacttypescriptsample │ │ │ │ │ ├── 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 │ │ │ └── release │ │ │ └── java │ │ │ └── com │ │ │ └── reacttypescriptsample │ │ │ └── ReactNativeFlipper.java │ ├── build.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ └── settings.gradle ├── app.json ├── assets │ ├── bug │ │ ├── bug.png │ │ └── bug@2x.png │ ├── common │ │ └── tick.png │ ├── credit-card-sample.jpg │ ├── list │ │ ├── burger.jpeg │ │ ├── cheeseCake.jpeg │ │ ├── frenchFries.jpeg │ │ ├── friedShrimp.jpeg │ │ ├── iceCream.jpeg │ │ ├── onionRings.jpeg │ │ ├── pizza.jpeg │ │ └── risotto.jpeg │ └── platecheese │ │ ├── plate_cheese.png │ │ └── plate_cheese@2x.png ├── babel.config.js ├── index.js ├── ios │ ├── .xcode.env │ ├── AppDelegate.swift │ ├── Podfile │ ├── Podfile.lock │ ├── ReactTypeScriptSample-tvOS │ │ └── Info.plist │ ├── ReactTypeScriptSample-tvOSTests │ │ └── Info.plist │ ├── ReactTypeScriptSample.xcodeproj │ │ ├── project.pbxproj │ │ ├── project.xcworkspace │ │ │ └── xcshareddata │ │ │ │ └── IDEWorkspaceChecks.plist │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ └── ReactTypeScriptSample.xcscheme │ ├── ReactTypeScriptSample.xcworkspace │ │ ├── contents.xcworkspacedata │ │ └── xcshareddata │ │ │ └── IDEWorkspaceChecks.plist │ ├── ReactTypeScriptSample │ │ ├── Images.xcassets │ │ │ ├── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ │ └── Contents.json │ │ ├── Info.plist │ │ ├── LaunchScreen.storyboard │ │ └── PrivacyInfo.xcprivacy │ └── ReactTypeScriptSampleTests │ │ ├── Info.plist │ │ └── ReactTypeScriptSampleTests.m ├── jest.config.js ├── metro.config.js ├── package.json ├── src │ ├── component │ │ ├── AppButton.tsx │ │ ├── AppText.tsx │ │ ├── Line.tsx │ │ └── Spacer.tsx │ ├── containers │ │ └── AppContainer.tsx │ ├── hooks │ │ └── appHooks.ts │ ├── navigation │ │ ├── APIStackNavigator.tsx │ │ ├── AppTabNavigator.tsx │ │ ├── AuthStackNavigator.tsx │ │ ├── HomeStackNavigator.tsx │ │ ├── SettingNavigator.tsx │ │ └── UIStackNavigator.tsx │ ├── screen │ │ ├── api │ │ │ ├── ANREventScreen.tsx │ │ │ ├── APIScreen.tsx │ │ │ ├── CrashReportingScreen.tsx │ │ │ ├── custom_events │ │ │ │ ├── KeyValueEvents.tsx │ │ │ │ ├── TagScreenName.tsx │ │ │ │ └── index.tsx │ │ │ ├── session_control │ │ │ │ ├── SchematicRecordingView.tsx │ │ │ │ └── index.tsx │ │ │ └── user_details │ │ │ │ ├── UserCustomProperty.tsx │ │ │ │ ├── UserIdentity.tsx │ │ │ │ └── index.tsx │ │ ├── auth │ │ │ ├── EnvironmentDropdown.tsx │ │ │ └── Start.tsx │ │ ├── base_screen │ │ │ └── index.tsx │ │ ├── main │ │ │ ├── HomeScreen.tsx │ │ │ ├── VideoScreen.tsx │ │ │ └── ViewOcclusionScreen.tsx │ │ ├── settings │ │ │ ├── ConfigurationsView.tsx │ │ │ ├── SettingsScreen.tsx │ │ │ └── TitleAndSwitchView.tsx │ │ └── ui │ │ │ ├── AnimationScreen.tsx │ │ │ ├── GestureTag │ │ │ ├── CornerTestScreen.tsx │ │ │ └── GestureTagScreen.tsx │ │ │ ├── MapScreen.tsx │ │ │ ├── OccludeScreen.tsx │ │ │ ├── PagerViewScreen.tsx │ │ │ ├── ScrollViewScreen.tsx │ │ │ ├── SectionListScreen.tsx │ │ │ ├── SimpleComponentScreen.tsx │ │ │ ├── SystemElementsScreen.tsx │ │ │ ├── UIOptionScreen.tsx │ │ │ └── WebViewScreen.tsx │ ├── store │ │ ├── auth │ │ │ └── reducer.ts │ │ └── store.ts │ ├── types │ │ └── environment.ts │ └── utils │ │ ├── config.ts │ │ ├── globalStyles.ts │ │ ├── helper.ts │ │ ├── images.ts │ │ ├── palette.ts │ │ └── toastConfig.tsx ├── tsconfig.json └── yarn.lock ├── UXCamReactExample ├── .buckconfig ├── .eslintrc.js ├── .flowconfig ├── .gitattributes ├── .gitignore ├── .prettierrc.js ├── .watchmanconfig ├── App.js ├── __tests__ │ └── App-test.js ├── android │ ├── app │ │ ├── BUCK │ │ ├── build.gradle │ │ ├── build_defs.bzl │ │ ├── debug.keystore │ │ ├── proguard-rules.pro │ │ └── src │ │ │ ├── debug │ │ │ └── AndroidManifest.xml │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── java │ │ │ └── com │ │ │ │ └── uxcamreactexample │ │ │ │ ├── MainActivity.java │ │ │ │ └── MainApplication.java │ │ │ └── res │ │ │ ├── mipmap-hdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-mdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ └── values │ │ │ ├── strings.xml │ │ │ └── styles.xml │ ├── build.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ └── settings.gradle ├── app.json ├── babel.config.js ├── index.js ├── ios │ ├── Gemfile │ ├── Gemfile.lock │ ├── Podfile │ ├── Podfile.lock │ ├── UXCamReactExample-tvOS │ │ └── Info.plist │ ├── UXCamReactExample-tvOSTests │ │ └── Info.plist │ ├── UXCamReactExample.xcodeproj │ │ ├── project.pbxproj │ │ ├── project.xcworkspace │ │ │ ├── contents.xcworkspacedata │ │ │ └── xcshareddata │ │ │ │ └── IDEWorkspaceChecks.plist │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ ├── UXCamReactExample-tvOS.xcscheme │ │ │ └── UXCamReactExample.xcscheme │ ├── UXCamReactExample.xcworkspace │ │ ├── contents.xcworkspacedata │ │ └── xcshareddata │ │ │ └── IDEWorkspaceChecks.plist │ ├── UXCamReactExample │ │ ├── AppDelegate.h │ │ ├── AppDelegate.m │ │ ├── Base.lproj │ │ │ └── LaunchScreen.xib │ │ ├── Images.xcassets │ │ │ ├── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ │ └── Contents.json │ │ ├── Info.plist │ │ ├── PrivacyInfo.xcprivacy │ │ └── main.m │ └── UXCamReactExampleTests │ │ ├── Info.plist │ │ └── UXCamReactExampleTests.m ├── metro.config.js ├── package.json ├── screens │ ├── HomeScreen.js │ ├── VideoScreen.js │ └── ViewOcclusionScreen.js └── yarn.lock └── uxcam-react-wrapper ├── CHANGELOG.md ├── README.md ├── RNUxcam.podspec ├── android ├── build.gradle ├── gradle │ └── wrapper │ │ ├── gradle-wrapper.jar │ │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat └── src │ ├── main │ ├── AndroidManifest.xml │ └── java │ │ └── com │ │ └── uxcam │ │ ├── RNUxViewFinder.java │ │ ├── RNUxcamModuleImpl.java │ │ └── RNUxcamPackage.java │ ├── newarch │ └── java │ │ └── com │ │ └── uxcam │ │ └── RNUxcamModule.java │ └── oldarch │ └── java │ └── com │ └── uxcam │ └── RNUxcamModule.java ├── ios └── RNUxcam │ ├── RNUxcam.h │ └── RNUxcam.mm ├── package.json └── src ├── NativeRNUxcam.ts ├── UXCam.js ├── UXCamOcclusion.tsx ├── index.d.ts ├── index.js ├── jest.config.js ├── tsconfig.json └── types.ts /.github/workflows/slack-payload.json: -------------------------------------------------------------------------------- 1 | { 2 | "text": ":rocket: UXCam React Native Plugin Released :rocket:", 3 | "blocks": [ 4 | { 5 | "type": "section", 6 | "text": { 7 | "type": "mrkdwn", 8 | "text": " UXCam React Native Plugin __PACKAGE_VERSION__ has been released.\n:rocket: UXCam React Native Plugin __PACKAGE_VERSION__ :rocket:\n:date: __RELEASE_DATE__" 9 | } 10 | }, 11 | { 12 | "type": "section", 13 | "fields": [ 14 | { 15 | "type": "mrkdwn", 16 | "text": "*CHANGELOG (Internal):*\n__CHANGELOG__" 17 | } 18 | ] 19 | }, 20 | { 21 | "type": "section", 22 | "fields": [ 23 | { 24 | "type": "mrkdwn", 25 | "text": "*SDK*\nReact Native Plugin" 26 | }, 27 | { 28 | "type": "mrkdwn", 29 | "text": "*Version*\n__PACKAGE_VERSION__" 30 | } 31 | ] 32 | } 33 | ] 34 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # OSX 3 | .DS_Store 4 | 5 | # Xcode 6 | build/ 7 | *.pbxuser 8 | !default.pbxuser 9 | *.mode1v3 10 | !default.mode1v3 11 | *.mode2v3 12 | !default.mode2v3 13 | *.perspectivev3 14 | !default.perspectivev3 15 | xcuserdata 16 | *.xccheckout 17 | *.moved-aside 18 | DerivedData 19 | *.hmap 20 | *.ipa 21 | *.xcuserstate 22 | **/.xcode.env 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 | .kotlin/ 37 | 38 | # node.js 39 | # 40 | node_modules/ 41 | npm-debug.log 42 | yarn-error.log 43 | 44 | # fastlane 45 | # 46 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 47 | # screenshots whenever they are needed. 48 | # For more information about the recommended setup visit: 49 | # https://docs.fastlane.tools/best-practices/source-control/ 50 | 51 | **/fastlane/report.xml 52 | **/fastlane/Preview.html 53 | **/fastlane/screenshots 54 | **/fastlane/test_output 55 | 56 | # Bundle artifact 57 | *.jsbundle 58 | 59 | # Ruby / CocoaPods 60 | **/Pods/ 61 | /vendor/bundle/ 62 | 63 | # Temporary files created by Metro to check the health of the file watcher 64 | .metro-health-check* 65 | 66 | # testing 67 | /coverage 68 | 69 | # Yarn 70 | .yarn/* 71 | !.yarn/patches 72 | !.yarn/plugins 73 | !.yarn/releases 74 | !.yarn/sdks 75 | !.yarn/versions 76 | 77 | 78 | # General 79 | *.log 80 | 81 | # JS 82 | node_modules/ 83 | npm-debug.log 84 | build 85 | package-lock.json 86 | 87 | # VS Code 88 | .vscode 89 | /uxcam-react-wrapper/android/.project 90 | /uxcam-react-wrapper/android/.settings/org.eclipse.buildship.core.prefs 91 | /UXCamReactExample/android/.project 92 | /UXCamReactExample/android/.settings 93 | /UXCamReactExample-Typescript/android/.project 94 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | ## Security info 2 | We try to fix any security issues we identify on our SDK across all platforms with each new release. 3 | 4 | ### Reporting issues 5 | In case we missed something, please report any security issues/suggestions on [security@uxcam.com](mailto:security@uxcam.com). -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/.bundle/config: -------------------------------------------------------------------------------- 1 | BUNDLE_PATH: "vendor/bundle" 2 | BUNDLE_FORCE_RUBY_PLATFORM: 1 3 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native', 4 | }; 5 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/.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 | # 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 | /ios/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 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | arrowParens: 'avoid', 3 | bracketSameLine: true, 4 | bracketSpacing: false, 5 | singleQuote: true, 6 | trailingComma: 'all', 7 | }; 8 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/.ruby-version: -------------------------------------------------------------------------------- 1 | 3.3.1 2 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Provider} from 'react-redux'; 3 | import {NavigationContainer} from '@react-navigation/native'; 4 | import Toast from 'react-native-toast-message'; 5 | 6 | import {store} from './src/store/store'; 7 | import AppContainer from './src/containers/AppContainer'; 8 | import {toastConfig} from './src/utils/toastConfig'; 9 | 10 | const App: React.FC = () => { 11 | return ( 12 | 13 | 14 | 15 | 16 | 17 | 18 | ); 19 | }; 20 | 21 | export default App; 22 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version 4 | ruby ">= 2.6.10" 5 | 6 | # Exclude problematic versions of cocoapods and activesupport that causes build failures. 7 | gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1' 8 | gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0' 9 | gem 'xcodeproj', '< 1.26.0' 10 | gem 'concurrent-ruby', '< 1.3.4' -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/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.0.8.4) 9 | concurrent-ruby (~> 1.0, >= 1.0.2) 10 | i18n (>= 1.6, < 2) 11 | minitest (>= 5.1) 12 | tzinfo (~> 2.0) 13 | addressable (2.8.7) 14 | public_suffix (>= 2.0.2, < 7.0) 15 | algoliasearch (1.27.5) 16 | httpclient (~> 2.8, >= 2.8.3) 17 | json (>= 1.5.1) 18 | atomos (0.1.3) 19 | base64 (0.2.0) 20 | claide (1.1.0) 21 | cocoapods (1.14.3) 22 | addressable (~> 2.8) 23 | claide (>= 1.0.2, < 2.0) 24 | cocoapods-core (= 1.14.3) 25 | cocoapods-deintegrate (>= 1.0.3, < 2.0) 26 | cocoapods-downloader (>= 2.1, < 3.0) 27 | cocoapods-plugins (>= 1.0.0, < 2.0) 28 | cocoapods-search (>= 1.0.0, < 2.0) 29 | cocoapods-trunk (>= 1.6.0, < 2.0) 30 | cocoapods-try (>= 1.1.0, < 2.0) 31 | colored2 (~> 3.1) 32 | escape (~> 0.0.4) 33 | fourflusher (>= 2.3.0, < 3.0) 34 | gh_inspector (~> 1.0) 35 | molinillo (~> 0.8.0) 36 | nap (~> 1.0) 37 | ruby-macho (>= 2.3.0, < 3.0) 38 | xcodeproj (>= 1.23.0, < 2.0) 39 | cocoapods-core (1.14.3) 40 | activesupport (>= 5.0, < 8) 41 | addressable (~> 2.8) 42 | algoliasearch (~> 1.0) 43 | concurrent-ruby (~> 1.1) 44 | fuzzy_match (~> 2.0.4) 45 | nap (~> 1.0) 46 | netrc (~> 0.11) 47 | public_suffix (~> 4.0) 48 | typhoeus (~> 1.0) 49 | cocoapods-deintegrate (1.0.5) 50 | cocoapods-downloader (2.1) 51 | cocoapods-plugins (1.0.0) 52 | nap 53 | cocoapods-search (1.0.1) 54 | cocoapods-trunk (1.6.0) 55 | nap (>= 0.8, < 2.0) 56 | netrc (~> 0.11) 57 | cocoapods-try (1.2.0) 58 | colored2 (3.1.2) 59 | concurrent-ruby (1.3.3) 60 | escape (0.0.4) 61 | ethon (0.16.0) 62 | ffi (>= 1.15.0) 63 | ffi (1.17.0) 64 | fourflusher (2.3.1) 65 | fuzzy_match (2.0.4) 66 | gh_inspector (1.1.3) 67 | httpclient (2.8.3) 68 | i18n (1.14.5) 69 | concurrent-ruby (~> 1.0) 70 | json (2.7.2) 71 | minitest (5.24.1) 72 | molinillo (0.8.0) 73 | nanaimo (0.3.0) 74 | nap (1.1.0) 75 | netrc (0.11.0) 76 | nkf (0.2.0) 77 | public_suffix (4.0.7) 78 | rexml (3.2.9) 79 | strscan 80 | ruby-macho (2.5.1) 81 | strscan (3.1.0) 82 | typhoeus (1.4.1) 83 | ethon (>= 0.9.0) 84 | tzinfo (2.0.6) 85 | concurrent-ruby (~> 1.0) 86 | xcodeproj (1.24.0) 87 | CFPropertyList (>= 2.3.3, < 4.0) 88 | atomos (~> 0.1.3) 89 | claide (>= 1.0.2, < 2.0) 90 | colored2 (~> 3.1) 91 | nanaimo (~> 0.3.0) 92 | rexml (~> 3.2.4) 93 | 94 | PLATFORMS 95 | ruby 96 | 97 | DEPENDENCIES 98 | activesupport (>= 6.1.7.5, != 7.1.0) 99 | cocoapods (>= 1.13, != 1.15.1, != 1.15.0) 100 | concurrent-ruby (< 1.3.4) 101 | xcodeproj (< 1.26.0) 102 | 103 | RUBY VERSION 104 | ruby 2.6.10p210 105 | 106 | BUNDLED WITH 107 | 2.5.9 108 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/README.md: -------------------------------------------------------------------------------- 1 | # UXCamReactExample-Typescript 2 | 3 | ### UXCam integrated sample app for react-native with typescript. 4 | 5 | This is a sample project demonstrating the use of UXCam SDK for react-native with typescript. 6 | 7 | ### Running the app 8 | 9 | - Clone the app 10 | - Get your app key from [UXCam](https://uxcam.com/) 11 | - Run `npm install` 12 | - Run the Android app using this code `react-native run-android` inside the main directory of the app 13 | - Run the iOS app using this code `react-native run-ios` inside the main directory of the app 14 | - After run app successfully. Enter `username` (Any as want to see in Dashboard) and `appkey` (your app key) and start 15 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/__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 shiped 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 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample-Typescript/android/app/debug.keystore -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/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 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 11 | 12 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/android/app/src/main/java/com/reacttypescriptsample/MainActivity.kt: -------------------------------------------------------------------------------- 1 | package com.reacttypescriptsample; 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 = "ReactTypeScriptSample" 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 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/android/app/src/main/java/com/reacttypescriptsample/MainApplication.kt: -------------------------------------------------------------------------------- 1 | package com.reacttypescriptsample; 2 | 3 | import android.app.Application 4 | import com.facebook.react.PackageList 5 | import com.facebook.react.ReactApplication 6 | import com.facebook.react.ReactHost 7 | import com.facebook.react.ReactNativeHost 8 | import com.facebook.react.ReactPackage 9 | import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load 10 | import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost 11 | import com.facebook.react.defaults.DefaultReactNativeHost 12 | import com.facebook.react.soloader.OpenSourceMergedSoMapping 13 | import com.facebook.soloader.SoLoader 14 | 15 | class MainApplication : Application(), ReactApplication { 16 | 17 | override val reactNativeHost: ReactNativeHost = 18 | object : DefaultReactNativeHost(this) { 19 | override fun getPackages(): List = 20 | PackageList(this).packages.apply { 21 | // Packages that cannot be autolinked yet can be added manually here, for example: 22 | // add(MyReactNativePackage()) 23 | } 24 | 25 | override fun getJSMainModuleName(): String = "index" 26 | 27 | override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG 28 | 29 | override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED 30 | override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED 31 | } 32 | 33 | override val reactHost: ReactHost 34 | get() = getDefaultReactHost(applicationContext, reactNativeHost) 35 | 36 | override fun onCreate() { 37 | super.onCreate() 38 | SoLoader.init(this, OpenSourceMergedSoMapping) 39 | if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) { 40 | // If you opted-in for the New Architecture, we load the native entry point for this app. 41 | load() 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/android/app/src/main/res/drawable/rn_edit_text_material.xml: -------------------------------------------------------------------------------- 1 | 2 | 16 | 21 | 22 | 23 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample-Typescript/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample-Typescript/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample-Typescript/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample-Typescript/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample-Typescript/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample-Typescript/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample-Typescript/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample-Typescript/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample-Typescript/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample-Typescript/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | ReactTypeScriptSample 3 | 4 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/android/app/src/release/java/com/reacttypescriptsample/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.reacttypescriptsample; 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 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | ext { 5 | buildToolsVersion = "35.0.0" 6 | minSdkVersion = 24 7 | compileSdkVersion = 35 8 | targetSdkVersion = 35 9 | ndkVersion = "27.1.12297006" 10 | kotlinVersion = "2.0.21" 11 | } 12 | repositories { 13 | google() 14 | mavenCentral() 15 | } 16 | dependencies { 17 | classpath("com.android.tools.build:gradle") 18 | classpath("com.facebook.react:react-native-gradle-plugin") 19 | classpath("org.jetbrains.kotlin:kotlin-gradle-plugin") 20 | } 21 | } 22 | 23 | apply plugin: "com.facebook.react.rootproject" -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/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 | 26 | # Use this property to specify which architecture you want to build. 27 | # You can also override it from the CLI using 28 | # ./gradlew -PreactNativeArchitectures=x86_64 29 | reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64 30 | 31 | # Use this property to enable support to the new architecture. 32 | # This will allow you to use TurboModules and the Fabric render in 33 | # your application. You should enable this flag either if you want 34 | # to write custom TurboModules/Fabric components OR use libraries that 35 | # are providing them. 36 | newArchEnabled=true 37 | 38 | # Use this property to enable or disable the Hermes JS engine. 39 | # If set to false, you will be using JSC instead. 40 | hermesEnabled=true 41 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample-Typescript/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-8.12-all.zip 4 | networkTimeout=10000 5 | zipStoreBase=GRADLE_USER_HOME 6 | zipStorePath=wrapper/dists 7 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @rem 2 | @rem Copyright 2015 the original author or authors. 3 | @rem 4 | @rem Licensed under the Apache License, Version 2.0 (the "License"); 5 | @rem you may not use this file except in compliance with the License. 6 | @rem You may obtain a copy of the License at 7 | @rem 8 | @rem https://www.apache.org/licenses/LICENSE-2.0 9 | @rem 10 | @rem Unless required by applicable law or agreed to in writing, software 11 | @rem distributed under the License is distributed on an "AS IS" BASIS, 12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | @rem See the License for the specific language governing permissions and 14 | @rem limitations under the License. 15 | @rem 16 | @rem SPDX-License-Identifier: Apache-2.0 17 | @rem 18 | 19 | @if "%DEBUG%"=="" @echo off 20 | @rem ########################################################################## 21 | @rem 22 | @rem Gradle startup script for Windows 23 | @rem 24 | @rem ########################################################################## 25 | 26 | @rem Set local scope for the variables with windows NT shell 27 | if "%OS%"=="Windows_NT" setlocal 28 | 29 | set DIRNAME=%~dp0 30 | if "%DIRNAME%"=="" set DIRNAME=. 31 | @rem This is normally unused 32 | set APP_BASE_NAME=%~n0 33 | set APP_HOME=%DIRNAME% 34 | 35 | @rem Resolve any "." and ".." in APP_HOME to make it shorter. 36 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi 37 | 38 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 39 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 40 | 41 | @rem Find java.exe 42 | if defined JAVA_HOME goto findJavaFromJavaHome 43 | 44 | set JAVA_EXE=java.exe 45 | %JAVA_EXE% -version >NUL 2>&1 46 | if %ERRORLEVEL% equ 0 goto execute 47 | 48 | echo. 49 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 50 | echo. 51 | echo Please set the JAVA_HOME variable in your environment to match the 52 | echo location of your Java installation. 53 | 54 | goto fail 55 | 56 | :findJavaFromJavaHome 57 | set JAVA_HOME=%JAVA_HOME:"=% 58 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 59 | 60 | if exist "%JAVA_EXE%" goto execute 61 | 62 | echo. 63 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 64 | echo. 65 | echo Please set the JAVA_HOME variable in your environment to match the 66 | echo location of your Java installation. 67 | 68 | goto fail 69 | 70 | :execute 71 | @rem Setup the command line 72 | 73 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 74 | 75 | 76 | @rem Execute Gradle 77 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* 78 | 79 | :end 80 | @rem End local scope for the variables with windows NT shell 81 | if %ERRORLEVEL% equ 0 goto mainEnd 82 | 83 | :fail 84 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 85 | rem the _cmd.exe /c_ return code! 86 | set EXIT_CODE=%ERRORLEVEL% 87 | if %EXIT_CODE% equ 0 set EXIT_CODE=1 88 | if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE% 89 | exit /b %EXIT_CODE% 90 | 91 | :mainEnd 92 | if "%OS%"=="Windows_NT" endlocal 93 | 94 | :omega 95 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/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 = 'ReactTypeScriptSample' 5 | include ':app' 6 | includeBuild('../node_modules/@react-native/gradle-plugin') 7 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ReactTypeScriptSample", 3 | "displayName": "ReactTypeScriptSample" 4 | } 5 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/assets/bug/bug.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample-Typescript/assets/bug/bug.png -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/assets/bug/bug@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample-Typescript/assets/bug/bug@2x.png -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/assets/common/tick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample-Typescript/assets/common/tick.png -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/assets/credit-card-sample.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample-Typescript/assets/credit-card-sample.jpg -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/assets/list/burger.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample-Typescript/assets/list/burger.jpeg -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/assets/list/cheeseCake.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample-Typescript/assets/list/cheeseCake.jpeg -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/assets/list/frenchFries.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample-Typescript/assets/list/frenchFries.jpeg -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/assets/list/friedShrimp.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample-Typescript/assets/list/friedShrimp.jpeg -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/assets/list/iceCream.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample-Typescript/assets/list/iceCream.jpeg -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/assets/list/onionRings.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample-Typescript/assets/list/onionRings.jpeg -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/assets/list/pizza.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample-Typescript/assets/list/pizza.jpeg -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/assets/list/risotto.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample-Typescript/assets/list/risotto.jpeg -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/assets/platecheese/plate_cheese.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample-Typescript/assets/platecheese/plate_cheese.png -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/assets/platecheese/plate_cheese@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample-Typescript/assets/platecheese/plate_cheese@2x.png -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:@react-native/babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/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 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/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 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/ios/AppDelegate.swift: -------------------------------------------------------------------------------- 1 | // 2 | // AppDelegate.swift 3 | // ReactTypeScriptSample 4 | // 5 | // Created by Ankit Karna on 26/02/2025. 6 | // 7 | 8 | import UIKit 9 | import React 10 | import React_RCTAppDelegate 11 | import ReactAppDependencyProvider 12 | 13 | @main 14 | class AppDelegate: RCTAppDelegate { 15 | override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool { 16 | self.moduleName = "ReactTypeScriptSample" 17 | self.dependencyProvider = RCTAppDependencyProvider() 18 | 19 | // You can add your custom initial props in the dictionary below. 20 | // They will be passed down to the ViewController used by React Native. 21 | self.initialProps = [:] 22 | 23 | return super.application(application, didFinishLaunchingWithOptions: launchOptions) 24 | } 25 | 26 | override func sourceURL(for bridge: RCTBridge) -> URL? { 27 | self.bundleURL() 28 | } 29 | 30 | override func bundleURL() -> URL? { 31 | #if DEBUG 32 | RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index") 33 | #else 34 | Bundle.main.url(forResource: "main", withExtension: "jsbundle") 35 | #endif 36 | } 37 | } 38 | 39 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/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 | # If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set. 12 | # because `react-native-flipper` depends on (FlipperKit,...) that will be excluded 13 | # 14 | # To fix this you can also exclude `react-native-flipper` using a `react-native.config.js` 15 | # ```js 16 | # module.exports = { 17 | # dependencies: { 18 | # ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}), 19 | # ``` 20 | 21 | linkage = ENV['USE_FRAMEWORKS'] 22 | if linkage != nil 23 | Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green 24 | use_frameworks! :linkage => linkage.to_sym 25 | end 26 | 27 | target 'ReactTypeScriptSample' do 28 | config = use_native_modules! 29 | 30 | 31 | use_react_native!( 32 | :path => config[:reactNativePath], 33 | :hermes_enabled => false 34 | ) 35 | 36 | target 'ReactTypeScriptSampleTests' do 37 | inherit! :complete 38 | # Pods for testing 39 | end 40 | 41 | post_install do |installer| 42 | # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202 43 | react_native_post_install( 44 | installer, 45 | config[:reactNativePath], 46 | :mac_catalyst_enabled => false 47 | ) 48 | end 49 | end 50 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/ios/ReactTypeScriptSample-tvOS/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 | APPL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | LSRequiresIPhoneOS 24 | 25 | NSAppTransportSecurity 26 | 27 | NSExceptionDomains 28 | 29 | localhost 30 | 31 | NSExceptionAllowsInsecureHTTPLoads 32 | 33 | 34 | 35 | 36 | NSLocationWhenInUseUsageDescription 37 | 38 | UILaunchStoryboardName 39 | LaunchScreen 40 | UIRequiredDeviceCapabilities 41 | 42 | armv7 43 | 44 | UISupportedInterfaceOrientations 45 | 46 | UIInterfaceOrientationPortrait 47 | UIInterfaceOrientationLandscapeLeft 48 | UIInterfaceOrientationLandscapeRight 49 | 50 | UIViewControllerBasedStatusBarAppearance 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/ios/ReactTypeScriptSample-tvOSTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 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 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/ios/ReactTypeScriptSample.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/ios/ReactTypeScriptSample.xcodeproj/xcshareddata/xcschemes/ReactTypeScriptSample.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 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/ios/ReactTypeScriptSample.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/ios/ReactTypeScriptSample.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/ios/ReactTypeScriptSample/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 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/ios/ReactTypeScriptSample/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/ios/ReactTypeScriptSample/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | ReactTypeScriptSample 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 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/ios/ReactTypeScriptSample/PrivacyInfo.xcprivacy: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | NSPrivacyAccessedAPITypes 6 | 7 | 8 | NSPrivacyAccessedAPIType 9 | NSPrivacyAccessedAPICategoryFileTimestamp 10 | NSPrivacyAccessedAPITypeReasons 11 | 12 | C617.1 13 | 3B52.1 14 | 15 | 16 | 17 | NSPrivacyAccessedAPIType 18 | NSPrivacyAccessedAPICategoryUserDefaults 19 | NSPrivacyAccessedAPITypeReasons 20 | 21 | CA92.1 22 | 23 | 24 | 25 | NSPrivacyAccessedAPIType 26 | NSPrivacyAccessedAPICategorySystemBootTime 27 | NSPrivacyAccessedAPITypeReasons 28 | 29 | 35F9.1 30 | 31 | 32 | 33 | NSPrivacyCollectedDataTypes 34 | 35 | NSPrivacyTracking 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/ios/ReactTypeScriptSampleTests/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 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/ios/ReactTypeScriptSampleTests/ReactTypeScriptSampleTests.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 ReactTypeScriptSampleTests : XCTestCase 11 | 12 | @end 13 | 14 | @implementation ReactTypeScriptSampleTests 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 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'react-native', 3 | }; 4 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/metro.config.js: -------------------------------------------------------------------------------- 1 | const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); 2 | 3 | /** 4 | * Metro configuration 5 | * https://facebook.github.io/metro/docs/configuration 6 | * 7 | * @type {import('@react-native/metro-config').MetroConfig} 8 | */ 9 | const config = {}; 10 | 11 | module.exports = mergeConfig(getDefaultConfig(__dirname), config); 12 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "UXCamReactExample-Typescript", 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": "npx react-native start --reset-cache", 10 | "pod-install": "cd ios && RCT_NEW_ARCH_ENABLED=1 bundle exec pod install", 11 | "test": "jest" 12 | }, 13 | "dependencies": { 14 | "@react-native-async-storage/async-storage": "^1.23.1", 15 | "@react-navigation/bottom-tabs": "7.2.0", 16 | "@react-navigation/native": "7.0.14", 17 | "@react-navigation/native-stack": "7.2.0", 18 | "@reduxjs/toolkit": "^1.9.5", 19 | "react": "19.0.0", 20 | "react-native": "0.78.0", 21 | "react-native-element-dropdown": "^2.12.2", 22 | "react-native-image-picker": "^7.2.3", 23 | "react-native-maps": "^1.20.1", 24 | "react-native-pager-view": "^6.6.1", 25 | "react-native-safe-area-context": "^5.0.0", 26 | "react-native-screens": "^4.3.0", 27 | "react-native-toast-message": "^2.2.0", 28 | "react-native-ux-cam": "../uxcam-react-wrapper", 29 | "react-native-webview": "^13.12.5", 30 | "react-redux": "^9.1.2" 31 | }, 32 | "devDependencies": { 33 | "@babel/core": "^7.25.2", 34 | "@babel/preset-env": "^7.25.3", 35 | "@babel/runtime": "^7.25.0", 36 | "@react-native-community/cli": "15.0.1", 37 | "@react-native-community/cli-platform-android": "15.0.1", 38 | "@react-native-community/cli-platform-ios": "14.1.0", 39 | "@react-native/babel-preset": "0.78.0", 40 | "@react-native/eslint-config": "0.78.0", 41 | "@react-native/metro-config": "0.78.0", 42 | "@react-native/typescript-config": "0.78.0", 43 | "@types/jest": "^29.5.13", 44 | "@types/react": "^19.0.0", 45 | "@types/react-test-renderer": "^19.0.0", 46 | "babel-jest": "^29.6.3", 47 | "eslint": "^8.19.0", 48 | "jest": "^29.6.3", 49 | "prettier": "2.8.8", 50 | "react-test-renderer": "19.0.0", 51 | "typescript": "^5.5.0" 52 | }, 53 | "engines": { 54 | "node": ">=16" 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/component/AppButton.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Pressable, 4 | TextStyle, 5 | StyleProp, 6 | StyleSheet, 7 | ViewStyle, 8 | PressableProps, 9 | } from 'react-native'; 10 | import AppText from './AppText'; 11 | import {palette} from '../utils/palette'; 12 | 13 | export interface ButtonProps extends PressableProps { 14 | containerStyle?: StyleProp; 15 | textStyle?: StyleProp; 16 | text?: string; 17 | } 18 | 19 | const AppButton: React.FC = ({ 20 | containerStyle, 21 | textStyle, 22 | text, 23 | children, 24 | ...rest 25 | }) => { 26 | const content = children || {text}; 27 | 28 | return ( 29 | 33 | {content} 34 | 35 | ); 36 | }; 37 | 38 | export default AppButton; 39 | 40 | const styles = StyleSheet.create({ 41 | button: { 42 | width: '100%', 43 | backgroundColor: palette.black, 44 | padding: 10, 45 | borderRadius: 6, 46 | justifyContent: 'center', 47 | alignItems: 'center', 48 | }, 49 | }); 50 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/component/AppText.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { 4 | TextStyle, 5 | TextProps as TextProperties, 6 | Text as RNText, 7 | StyleProp, 8 | StyleSheet, 9 | } from 'react-native'; 10 | import {palette} from '../utils/palette'; 11 | 12 | export interface TextProps extends TextProperties { 13 | style?: StyleProp; 14 | } 15 | 16 | const AppText: React.FC = ({children, ...props}) => { 17 | const {style: styleOverride, ...rest} = props; 18 | 19 | return ( 20 | 21 | {children} 22 | 23 | ); 24 | }; 25 | 26 | export default AppText; 27 | 28 | const styles = StyleSheet.create({ 29 | default: { 30 | fontSize: 16, 31 | color: palette.white, 32 | }, 33 | }); 34 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/component/Line.tsx: -------------------------------------------------------------------------------- 1 | import {View} from 'react-native'; 2 | import React from 'react'; 3 | import {palette} from '../utils/palette'; 4 | 5 | type LineProps = { 6 | width?: number; 7 | height?: number; 8 | backgroundColor?: string; 9 | }; 10 | 11 | const Line: React.FC = React.memo( 12 | ({width, height, backgroundColor = palette.darkGray}) => { 13 | return ( 14 | 21 | ); 22 | }, 23 | ); 24 | 25 | export default Line; 26 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/component/Spacer.tsx: -------------------------------------------------------------------------------- 1 | import {View} from 'react-native'; 2 | import React from 'react'; 3 | 4 | type SpacerProps = { 5 | width?: number; 6 | height?: number; 7 | }; 8 | 9 | const Spacer: React.FC = React.memo(({width, height}) => { 10 | return ( 11 | 17 | ); 18 | }); 19 | 20 | export default Spacer; 21 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/containers/AppContainer.tsx: -------------------------------------------------------------------------------- 1 | import React, {useEffect, useState} from 'react'; 2 | import {View} from 'react-native'; 3 | import AsyncStorage from '@react-native-async-storage/async-storage'; 4 | import {UXCamConfiguration} from 'react-native-ux-cam'; 5 | 6 | import {startUXCam} from '../utils/config'; 7 | import {useAppDispatch, useAppSelector} from '../hooks/appHooks'; 8 | import {start} from '../store/auth/reducer'; 9 | import AppTabNavigator from '../navigation/AppTabNavigator'; 10 | import AuthStackNavigator from '../navigation/AuthStackNavigator'; 11 | 12 | const AppContainer = () => { 13 | const [isStarted, setStarted] = useState(undefined); 14 | const appkey = useAppSelector(state => state.auth.appkey); 15 | const dispatch = useAppDispatch(); 16 | 17 | useEffect(() => { 18 | (async () => { 19 | const configuration = await AsyncStorage.getItem('configuration'); 20 | const startInfo = await AsyncStorage.getItem('startInfo'); 21 | 22 | if (configuration && startInfo) { 23 | const config: UXCamConfiguration = await JSON.parse(configuration); 24 | const startInfoObj = await JSON.parse(startInfo); 25 | 26 | setStarted(true); 27 | startUXCam(config, startInfoObj.username); 28 | dispatch( 29 | start({ 30 | appkey: startInfoObj.appkey, 31 | username: startInfoObj.username, 32 | }), 33 | ); 34 | } else { 35 | setStarted(true); 36 | } 37 | })(); 38 | }, [dispatch]); 39 | 40 | 41 | 42 | return appkey.length > 0 ? : ; 43 | }; 44 | 45 | export default AppContainer; 46 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/hooks/appHooks.ts: -------------------------------------------------------------------------------- 1 | import {useDispatch, useSelector} from 'react-redux'; 2 | import type {TypedUseSelectorHook} from 'react-redux'; 3 | 4 | import {AppDispatch, RootState} from '../store/store'; 5 | 6 | // Use throughout your app instead of plain `useDispatch` and `useSelector` 7 | export const useAppDispatch: () => AppDispatch = useDispatch; 8 | export const useAppSelector: TypedUseSelectorHook = useSelector; 9 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/navigation/APIStackNavigator.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import {createNativeStackNavigator} from '@react-navigation/native-stack'; 4 | import APIScreen from '../screen/api/APIScreen'; 5 | import CustomEventsScreen from '../screen/api/custom_events'; 6 | import UserDetailsScreen from '../screen/api/user_details'; 7 | import SessionControlScreen from '../screen/api/session_control'; 8 | import CrashReportingScreen from '../screen/api/CrashReportingScreen'; 9 | import ANREventScreen from '../screen/api/ANREventScreen'; 10 | 11 | const Stack = createNativeStackNavigator(); 12 | 13 | const APIStackNavigator = () => ( 14 | 15 | 23 | 24 | 32 | 33 | 41 | 42 | 50 | 51 | 59 | 60 | 68 | 69 | ); 70 | 71 | export default APIStackNavigator; 72 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/navigation/AppTabNavigator.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; 4 | import HomeStackNavigator from './HomeStackNavigator'; 5 | import APIStackNavigator from './APIStackNavigator'; 6 | import UIStackNavigator from './UIStackNavigator'; 7 | import SettingNavigator from './SettingNavigator'; 8 | import {palette} from '../utils/palette'; 9 | 10 | const Tab = createBottomTabNavigator(); 11 | 12 | const AppTabNavigator = () => ( 13 | 20 | 27 | 28 | 35 | 36 | 43 | 44 | 51 | 52 | ); 53 | 54 | export default AppTabNavigator; 55 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/navigation/AuthStackNavigator.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import {createNativeStackNavigator} from '@react-navigation/native-stack'; 4 | 5 | import StartScreen from '../screen/auth/Start'; 6 | 7 | const Stack = createNativeStackNavigator(); 8 | 9 | const AuthStackNavigator = () => ( 10 | 11 | 18 | 19 | ); 20 | 21 | export default AuthStackNavigator; 22 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/navigation/HomeStackNavigator.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import {createNativeStackNavigator} from '@react-navigation/native-stack'; 4 | import {HomeScreen} from '../screen/main/HomeScreen'; 5 | import ViewOcclusionScreen from '../screen/main/ViewOcclusionScreen'; 6 | import VideoScreen from '../screen/main/VideoScreen'; 7 | 8 | const Stack = createNativeStackNavigator(); 9 | 10 | const HomeStackNavigator = () => ( 11 | 12 | 20 | 28 | 36 | 37 | ); 38 | 39 | export default HomeStackNavigator; 40 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/navigation/SettingNavigator.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import {createNativeStackNavigator} from '@react-navigation/native-stack'; 4 | 5 | import SettingsScreen from '../screen/settings/SettingsScreen'; 6 | 7 | const Stack = createNativeStackNavigator(); 8 | 9 | const SettingNavigator = () => ( 10 | 11 | 18 | 19 | ); 20 | 21 | export default SettingNavigator; 22 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/navigation/UIStackNavigator.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import {createNativeStackNavigator} from '@react-navigation/native-stack'; 4 | 5 | import UIOptionScreen from '../screen/ui/UIOptionScreen'; 6 | import GestureTagScreen from '../screen/ui/GestureTag/GestureTagScreen'; 7 | import CornerTestScreen from '../screen/ui/GestureTag/CornerTestScreen'; 8 | import ScrollViewScreen from '../screen/ui/ScrollViewScreen'; 9 | import OccludeScreen from '../screen/ui/OccludeScreen'; 10 | import AnimationScreen from '../screen/ui/AnimationScreen'; 11 | import MapScreen from '../screen/ui/MapScreen'; 12 | import WebViewScreen from '../screen/ui/WebViewScreen'; 13 | import PagerViewScreen from '../screen/ui/PagerViewScreen'; 14 | import SystemElementsScreen from '../screen/ui/SystemElementsScreen'; 15 | import SectionListScreen from '../screen/ui/SectionListScreen'; 16 | import SimpleComponentScreen from '../screen/ui/SimpleComponentScreen'; 17 | 18 | const Stack = createNativeStackNavigator(); 19 | 20 | const UIStackNavigator = () => ( 21 | 22 | 29 | 30 | 38 | 39 | 47 | 48 | 56 | 57 | 65 | 66 | 74 | 75 | 83 | 84 | 92 | 93 | 101 | 102 | 110 | 111 | 119 | 120 | 128 | 129 | ); 130 | 131 | export default UIStackNavigator; 132 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/screen/api/ANREventScreen.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Keyboard, StyleSheet, TextInput, View} from 'react-native'; 3 | 4 | import BaseScreen from '../base_screen'; 5 | import AppButton from '../../component/AppButton'; 6 | import {global_styles} from '../../utils/globalStyles'; 7 | import {useNavigation} from '@react-navigation/native'; 8 | 9 | const ANREventScreen = React.memo(() => { 10 | const [freezeTime, setFreezeTime] = React.useState(''); 11 | const navigate = useNavigation(); 12 | const freezeAction = async () => { 13 | const time = freezeTime.length === 0 ? 10 : Number(freezeTime); 14 | for (let i = 0; i < time; i++) { 15 | for (let j = 0; j < 100000000; j++) {} 16 | } 17 | }; 18 | 19 | return ( 20 | 21 | 22 | 29 | 30 | { 34 | Keyboard.dismiss(); 35 | freezeAction(); 36 | }} 37 | textStyle={global_styles.buttontText} 38 | /> 39 | 40 | { 44 | navigate.goBack(); 45 | }} 46 | textStyle={global_styles.buttontText} 47 | /> 48 | 49 | 50 | ); 51 | }); 52 | 53 | export default ANREventScreen; 54 | 55 | const styles = StyleSheet.create({ 56 | container: { 57 | flex: 1, 58 | padding: 16, 59 | justifyContent: 'center', 60 | }, 61 | }); 62 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/screen/api/APIScreen.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {useNavigation} from '@react-navigation/native'; 3 | import {FlatList, StyleSheet, View} from 'react-native'; 4 | 5 | import {palette} from '../../utils/palette'; 6 | import AppButton from '../../component/AppButton'; 7 | import BaseScreen from '../base_screen'; 8 | import AppText from '../../component/AppText'; 9 | 10 | const APIScreen = React.memo(() => { 11 | const {navigate} = useNavigation(); 12 | return ( 13 | 14 | { 44 | return ( 45 | <> 46 | { 49 | navigate(item.screen as never); 50 | }}> 51 | {item.title} 52 | {item.desc} 53 | 54 | 55 | 56 | ); 57 | }} 58 | /> 59 | 60 | ); 61 | }); 62 | 63 | export default APIScreen; 64 | 65 | const styles = StyleSheet.create({ 66 | container: { 67 | flex: 1, 68 | }, 69 | button: { 70 | padding: 16, 71 | backgroundColor: palette.background, 72 | justifyContent: 'flex-start', 73 | alignItems: 'flex-start', 74 | }, 75 | title: { 76 | fontSize: 18, 77 | color: palette.black, 78 | }, 79 | desc: { 80 | fontSize: 13, 81 | color: palette.gray, 82 | marginTop: 3, 83 | }, 84 | line: { 85 | height: 0.8, 86 | backgroundColor: palette.darkGray, 87 | }, 88 | }); 89 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/screen/api/CrashReportingScreen.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {FlatList, StyleSheet} from 'react-native'; 3 | 4 | import BaseScreen from '../base_screen'; 5 | import AppButton from '../../component/AppButton'; 6 | import {palette} from '../../utils/palette'; 7 | import AppText from '../../component/AppText'; 8 | import {capitalizeFLetter} from '../../utils/helper'; 9 | 10 | enum CrashType { 11 | stackOverflow = 'stackOverflow', 12 | divideByZero = 'divideByZero', 13 | outOfMemory = 'outOfMemory', 14 | nullPointer = 'nullPointer', 15 | assertFail = 'assertFail', 16 | } 17 | 18 | const CrashReportingScreen = React.memo(() => { 19 | const crashTypes = [ 20 | CrashType.stackOverflow, 21 | CrashType.divideByZero, 22 | CrashType.outOfMemory, 23 | CrashType.nullPointer, 24 | CrashType.assertFail, 25 | ]; 26 | 27 | const onPressItem = (crashType: CrashType) => { 28 | switch (crashType) { 29 | case CrashType.stackOverflow: 30 | const fixedArray = Array(3).fill('1'); 31 | console.log(fixedArray[7]!); 32 | 33 | for (var i = 0; i < 10; i++) { 34 | fixedArray[i] = i * 10; 35 | } 36 | 37 | console.log(fixedArray); 38 | break; 39 | 40 | case CrashType.divideByZero: 41 | const x = 1n; 42 | const y = 0n; 43 | const quotient = x / y; 44 | console.log(quotient); 45 | break; 46 | 47 | case CrashType.outOfMemory: 48 | var wastedMemory: Array = [0]; 49 | let data = Array(900000000).fill(0); 50 | wastedMemory.push(...data); 51 | wastedMemory.push(...data); 52 | wastedMemory.push(...data); 53 | break; 54 | 55 | case CrashType.nullPointer: 56 | const key = 'name'; 57 | let object: any = {[key]: 'Rohit'}; 58 | object = null; 59 | console.log(object[key]!); 60 | break; 61 | 62 | case CrashType.assertFail: 63 | assert(1 === 0); 64 | } 65 | }; 66 | 67 | const assert = function (condition: boolean, message: string = '') { 68 | if (!condition) { 69 | throw Error('Assert failed: ' + (message || '')); 70 | } 71 | }; 72 | 73 | return ( 74 | 75 | { 79 | return ( 80 | { 83 | onPressItem(item); 84 | }}> 85 | {capitalizeFLetter(item)} 86 | 87 | ); 88 | }} 89 | /> 90 | 91 | ); 92 | }); 93 | 94 | export default CrashReportingScreen; 95 | 96 | const styles = StyleSheet.create({ 97 | container: { 98 | flex: 1, 99 | marginHorizontal: 10, 100 | }, 101 | button: { 102 | backgroundColor: palette.orange, 103 | marginVertical: 6, 104 | padding: 15, 105 | }, 106 | }); 107 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/screen/api/custom_events/KeyValueEvents.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {View, TextInput, StyleSheet} from 'react-native'; 3 | import {Keyboard} from 'react-native'; 4 | 5 | import AppButton from '../../../component/AppButton'; 6 | import {global_styles} from '../../../utils/globalStyles'; 7 | import {isEmpty} from '../../../utils/helper'; 8 | import {palette} from '../../../utils/palette'; 9 | import AppText from '../../../component/AppText'; 10 | import Line from '../../../component/Line'; 11 | 12 | type Props = { 13 | onPressButton: (event: string, params: any) => void; 14 | }; 15 | 16 | const KeyValueEvents: React.FC = React.memo(({onPressButton}) => { 17 | const [customEventKey, setCustomEventKey] = React.useState(''); 18 | const [key, setKey] = React.useState(''); 19 | const [value, setValue] = React.useState(''); 20 | 21 | return ( 22 | 23 | 24 | 25 | 26 | Create custom events with key-value pair 27 | 28 | 29 | 35 | 36 | 37 | 43 | 44 | 50 | 51 | { 58 | Keyboard.dismiss(); 59 | 60 | if (isEmpty(customEventKey)) { 61 | return; 62 | } 63 | 64 | if (!isEmpty(key)) { 65 | onPressButton(customEventKey, {[key]: value ?? ''}); 66 | } 67 | }} 68 | textStyle={global_styles.buttontText} 69 | /> 70 | 71 | ); 72 | }); 73 | 74 | export default KeyValueEvents; 75 | 76 | const styles = StyleSheet.create({ 77 | titleText: { 78 | color: palette.darkGray, 79 | fontSize: 17, 80 | paddingTop: 20, 81 | }, 82 | row: { 83 | flexDirection: 'row', 84 | justifyContent: 'space-between', 85 | }, 86 | keyValueInputWidth: { 87 | width: '47%', 88 | }, 89 | button: { 90 | ...global_styles.button, 91 | marginVertical: 5, 92 | backgroundColor: palette.seaSerpent, 93 | }, 94 | }); 95 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/screen/api/custom_events/TagScreenName.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {View, TextInput} from 'react-native'; 3 | import {Keyboard} from 'react-native'; 4 | 5 | import AppButton from '../../../component/AppButton'; 6 | import {global_styles} from '../../../utils/globalStyles'; 7 | import {isEmpty} from '../../../utils/helper'; 8 | import Line from '../../../component/Line'; 9 | import Spacer from '../../../component/Spacer'; 10 | 11 | type Props = { 12 | onPressButton: (screenName: string) => void; 13 | }; 14 | 15 | const TagScreenName: React.FC = React.memo(({onPressButton}) => { 16 | const [name, setName] = React.useState(''); 17 | 18 | return ( 19 | 20 | 21 | 22 | 23 | 24 | 30 | 31 | { 35 | Keyboard.dismiss(); 36 | if (!isEmpty(name)) { 37 | onPressButton(name.trim()); 38 | } 39 | }} 40 | textStyle={global_styles.buttontText} 41 | /> 42 | 43 | ); 44 | }); 45 | 46 | export default TagScreenName; 47 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/screen/api/session_control/SchematicRecordingView.tsx: -------------------------------------------------------------------------------- 1 | import React, {useEffect, useState} from 'react'; 2 | import {View, StyleSheet, Image} from 'react-native'; 3 | import {Keyboard} from 'react-native'; 4 | 5 | import AppButton from '../../../component/AppButton'; 6 | import {global_styles} from '../../../utils/globalStyles'; 7 | import AppText from '../../../component/AppText'; 8 | import {palette} from '../../../utils/palette'; 9 | import Spacer from '../../../component/Spacer'; 10 | import {images} from '../../../utils/images'; 11 | import UXCam from 'react-native-ux-cam'; 12 | 13 | const SchematicRecordingView: React.FC = React.memo(() => { 14 | const [isOptInto, setIsOptInto] = useState(true); 15 | const [reload, setReload] = useState(true); 16 | 17 | useEffect(() => { 18 | const timer = setTimeout(() => { 19 | fetchRecordingStatus(); 20 | }, 2000); 21 | return () => clearTimeout(timer); 22 | }, [reload]); 23 | 24 | async function fetchRecordingStatus() { 25 | try { 26 | const record = await UXCam.optInSchematicRecordingStatus(); 27 | setIsOptInto(record); 28 | } catch (error) { 29 | console.error(`Could not get urls: ${error}`); 30 | } 31 | } 32 | 33 | return ( 34 | 35 | Schematic recording 36 | 37 | 38 | { 47 | Keyboard.dismiss(); 48 | UXCam.optIntoSchematicRecordings(); 49 | setReload(load => !load); 50 | }}> 51 | {isOptInto && ( 52 | 57 | )} 58 | 59 | Opted In 60 | 61 | 62 | { 71 | Keyboard.dismiss(); 72 | UXCam.optOutOfSchematicRecordings(); 73 | setReload(load => !load); 74 | }}> 75 | {!isOptInto && ( 76 | 81 | )} 82 | Opt Out 83 | 84 | 85 | 86 | 87 | ); 88 | }); 89 | 90 | export default SchematicRecordingView; 91 | 92 | const styles = StyleSheet.create({ 93 | container: { 94 | flex: 1, 95 | }, 96 | row: {flexDirection: 'row', justifyContent: 'space-between'}, 97 | button: { 98 | marginVertical: 6, 99 | width: '48%', 100 | backgroundColor: palette.transparent, 101 | borderWidth: 1, 102 | marginTop: 15, 103 | flexDirection: 'row', 104 | }, 105 | tick: {width: 25, height: 25, marginRight: 5}, 106 | title: { 107 | color: palette.black, 108 | fontSize: 18, 109 | marginTop: 16, 110 | }, 111 | optOutText: { 112 | color: palette.orange, 113 | fontSize: 18, 114 | }, 115 | optInText: { 116 | color: palette.green, 117 | fontSize: 18, 118 | }, 119 | }); 120 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/screen/api/user_details/UserCustomProperty.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {View, StyleSheet, TextInput} from 'react-native'; 3 | 4 | import {palette} from '../../../utils/palette'; 5 | import AppButton from '../../../component/AppButton'; 6 | import AppText from '../../../component/AppText'; 7 | import {global_styles} from '../../../utils/globalStyles'; 8 | 9 | type Props = { 10 | onPressButton: (property: string, value: string) => void; 11 | }; 12 | 13 | const UserCustomProperty: React.FC = React.memo(({onPressButton}) => { 14 | const [property, setProperty] = React.useState(''); 15 | const [propertyValue, setPropertyValue] = React.useState(''); 16 | 17 | const isValid = !(isEmpty(property) || isEmpty(propertyValue)); 18 | 19 | function isEmpty(string: string) { 20 | return typeof string === 'string' && string.trim().length === 0; 21 | } 22 | 23 | return ( 24 | 25 | Create custom user property 26 | 32 | 33 | 39 | 40 | { 48 | onPressButton(property.trim(), propertyValue.trim()); 49 | }} 50 | textStyle={global_styles.buttontText} 51 | /> 52 | 53 | ); 54 | }); 55 | 56 | const styles = StyleSheet.create({ 57 | titleText: { 58 | color: palette.black, 59 | fontSize: 17, 60 | paddingVertical: 20, 61 | }, 62 | input: { 63 | height: 46, 64 | marginVertical: 12, 65 | padding: 10, 66 | backgroundColor: palette.alto, 67 | borderRadius: 6, 68 | color: palette.black, 69 | fontSize: 16, 70 | }, 71 | button: { 72 | backgroundColor: palette.black, 73 | height: 50, 74 | marginVertical: 12, 75 | padding: 10, 76 | borderRadius: 6, 77 | justifyContent: 'center', 78 | alignItems: 'center', 79 | }, 80 | buttontText: { 81 | color: palette.white, 82 | fontSize: 18, 83 | }, 84 | }); 85 | 86 | export default UserCustomProperty; 87 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/screen/api/user_details/UserIdentity.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {View, TextInput} from 'react-native'; 3 | import {Keyboard} from 'react-native'; 4 | 5 | import AppButton from '../../../component/AppButton'; 6 | import {global_styles} from '../../../utils/globalStyles'; 7 | import {isEmpty} from '../../../utils/helper'; 8 | 9 | type Props = { 10 | onPressButton: (identity: string) => void; 11 | }; 12 | 13 | const UserIdentity: React.FC = React.memo(({onPressButton}) => { 14 | const [identity, setIdentity] = React.useState(''); 15 | 16 | return ( 17 | 18 | 24 | 25 | { 29 | Keyboard.dismiss(); 30 | if (!isEmpty(identity)) { 31 | onPressButton(identity.trim()); 32 | } 33 | }} 34 | textStyle={global_styles.buttontText} 35 | /> 36 | 37 | ); 38 | }); 39 | 40 | export default UserIdentity; 41 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/screen/api/user_details/index.tsx: -------------------------------------------------------------------------------- 1 | import React, {useCallback} from 'react'; 2 | import {View, StyleSheet} from 'react-native'; 3 | import RNUxcam from 'react-native-ux-cam'; 4 | 5 | import UserCustomProperty from './UserCustomProperty'; 6 | import AppButton from '../../../component/AppButton'; 7 | import {palette} from '../../../utils/palette'; 8 | import BaseScreen from '../../base_screen'; 9 | import UserIdentity from './UserIdentity'; 10 | import {global_styles} from '../../../utils/globalStyles'; 11 | 12 | const UserDetailsScreen = React.memo(() => { 13 | const onPressTagCustomProperty = useCallback( 14 | (property: string, propertyValue: string) => { 15 | console.log(`New Property set => ${property}: ${propertyValue}`); 16 | RNUxcam.setUserProperty(property, propertyValue); 17 | }, 18 | [], 19 | ); 20 | 21 | const onPressUserIdentity = useCallback((identity: string) => { 22 | RNUxcam.setUserIdentity(identity); 23 | console.log('New identity =', identity); 24 | }, []); 25 | 26 | const onPressSetCompanyNameRole = useCallback(() => { 27 | let companyKey = 'Company Name'; 28 | let companyValue = 'UXCam'; 29 | RNUxcam.setUserProperty(companyKey, companyValue); 30 | console.log(`New Property set => ${companyKey}: ${companyValue}`); 31 | 32 | let roleKey = 'Role'; 33 | let roleValue = 'React Native Engineer'; 34 | RNUxcam.setUserProperty(roleKey, roleValue); 35 | console.log(`New Property set => ${roleKey}: ${roleValue}`); 36 | }, []); 37 | 38 | const onPressSetPositionLevel = useCallback(() => { 39 | RNUxcam.setUserProperty('IsSenior', 'True'); 40 | console.log('New Property set => IsSenior: True'); 41 | }, []); 42 | 43 | return ( 44 | 45 | 46 | 47 | 48 | 54 | 55 | 61 | 62 | 63 | 64 | 65 | ); 66 | }); 67 | 68 | export default UserDetailsScreen; 69 | 70 | const styles = StyleSheet.create({ 71 | container: { 72 | flex: 1, 73 | padding: 16, 74 | }, 75 | button: { 76 | ...global_styles.button, 77 | backgroundColor: palette.customBlue, 78 | }, 79 | }); 80 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/screen/auth/EnvironmentDropdown.tsx: -------------------------------------------------------------------------------- 1 | import React, {useState} from 'react'; 2 | import {StyleSheet, View} from 'react-native'; 3 | import {Dropdown} from 'react-native-element-dropdown'; 4 | import {EnvironmentType} from '../../types/environment'; 5 | import {palette} from '../../utils/palette'; 6 | 7 | export interface DropDownProps { 8 | environment: string; 9 | onSelect: (string: string) => void; 10 | } 11 | 12 | const EnvironmentDropdown: React.FC = React.memo( 13 | ({environment, onSelect}) => { 14 | const [value, setValue] = useState(environment); 15 | const [isFocus, setIsFocus] = useState(false); 16 | 17 | const data = [ 18 | {label: EnvironmentType.production, value: EnvironmentType.production}, 19 | {label: EnvironmentType.staging, value: EnvironmentType.staging}, 20 | ]; 21 | 22 | return ( 23 | 24 | setIsFocus(true)} 37 | onBlur={() => setIsFocus(false)} 38 | onChange={item => { 39 | setValue(item.value); 40 | onSelect(item.value); 41 | setIsFocus(false); 42 | }} 43 | /> 44 | 45 | ); 46 | }, 47 | ); 48 | 49 | export default EnvironmentDropdown; 50 | 51 | const styles = StyleSheet.create({ 52 | container: { 53 | paddingVertical: 12, 54 | }, 55 | dropdown: { 56 | height: 50, 57 | borderColor: palette.gray, 58 | borderWidth: 0.5, 59 | borderRadius: 8, 60 | paddingHorizontal: 12, 61 | }, 62 | icon: { 63 | marginRight: 5, 64 | }, 65 | label: { 66 | position: 'absolute', 67 | backgroundColor: palette.white, 68 | left: 22, 69 | top: 8, 70 | zIndex: 999, 71 | paddingHorizontal: 8, 72 | fontSize: 14, 73 | color: palette.black, 74 | }, 75 | placeholderStyle: { 76 | fontSize: 16, 77 | }, 78 | selectedTextStyle: { 79 | fontSize: 16, 80 | }, 81 | iconStyle: { 82 | width: 20, 83 | height: 20, 84 | }, 85 | inputSearchStyle: { 86 | height: 40, 87 | fontSize: 16, 88 | }, 89 | blackBorderColor: {borderColor: 'black'}, 90 | }); 91 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/screen/auth/Start.tsx: -------------------------------------------------------------------------------- 1 | import React, {useCallback, useEffect, useMemo} from 'react'; 2 | import {Keyboard, StyleSheet, TextInput, View} from 'react-native'; 3 | import {UXCamConfiguration} from 'react-native-ux-cam'; 4 | 5 | import EnvironmentDropdown from './EnvironmentDropdown'; 6 | import ConfigurationsView, { 7 | UXConfiguration, 8 | } from '../settings/ConfigurationsView'; 9 | import BaseScreen from '../base_screen'; 10 | 11 | import {start} from '../../store/auth/reducer'; 12 | import {EnvironmentType} from '../../types/environment'; 13 | import {startUXCam} from '../../utils/config'; 14 | import {useAppDispatch} from '../../hooks/appHooks'; 15 | import {isEmpty, setStorage} from '../../utils/helper'; 16 | import {global_styles} from '../../utils/globalStyles'; 17 | 18 | const StartScreen: React.FC = React.memo(() => { 19 | const [key, setKey] = React.useState(''); 20 | const [username, setUsername] = React.useState(''); 21 | const [isLoading, setLoading] = React.useState(false); 22 | const [environment, setEnvironment] = React.useState( 23 | EnvironmentType.production, 24 | ); 25 | const [configuration, setConfiguration] = 26 | React.useState(); 27 | 28 | const dispatch = useAppDispatch(); 29 | 30 | const isValid = useMemo(() => { 31 | return !(isEmpty(key) || isEmpty(username)); 32 | }, [key, username]); 33 | 34 | const updateAllValue = useCallback(() => { 35 | const startInfo = {appkey: key, username: username}; 36 | dispatch(start(startInfo)); 37 | setStorage('startInfo', startInfo).then(); 38 | setStorage('configuration', configuration).then(); 39 | 40 | setLoading(false); 41 | }, [key, username, configuration, dispatch]); 42 | 43 | useEffect(() => { 44 | if (!isLoading) { 45 | return; 46 | } 47 | const timer = setInterval(() => { 48 | clearInterval(timer); 49 | updateAllValue(); 50 | }, 5000); 51 | return () => { 52 | clearInterval(timer); 53 | }; 54 | // eslint-disable-next-line react-hooks/exhaustive-deps 55 | }, [isLoading]); 56 | 57 | const onPressStart = useCallback( 58 | (config: UXConfiguration) => { 59 | Keyboard.dismiss(); 60 | 61 | const updatedConfig = { 62 | userAppKey: key, 63 | enableMultiSessionRecord: config.multiSessionRecord, 64 | enableCrashHandling: config.crashHandling, 65 | enableAutomaticScreenNameTagging: config.automaticScreenNameTagging, 66 | enableAdvancedGestureRecognition: config.advancedGestureRecognition, 67 | enableNetworkLogging: false, 68 | }; 69 | 70 | setConfiguration(updatedConfig); 71 | setLoading(true); 72 | 73 | startUXCam(updatedConfig, username); 74 | }, 75 | [key, username], 76 | ); 77 | 78 | return ( 79 | 80 | 81 | 87 | 88 | 94 | 95 | 99 | 100 | 106 | 107 | 108 | ); 109 | }); 110 | 111 | export default StartScreen; 112 | 113 | const styles = StyleSheet.create({ 114 | container: {flex: 1, margin: 12}, 115 | }); 116 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/screen/base_screen/index.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC} from 'react'; 2 | import {SafeAreaView, StyleSheet, View, ViewProps} from 'react-native'; 3 | import RNUxcam from 'react-native-ux-cam'; 4 | 5 | import {palette} from '../../utils/palette'; 6 | import {useFocusEffect} from '@react-navigation/native'; 7 | 8 | interface Props extends ViewProps { 9 | screenName: string; 10 | isTransparent?: boolean; 11 | hasSafeArea?: boolean; 12 | } 13 | 14 | const BaseScreen: FC = ({ 15 | screenName, 16 | isTransparent, 17 | hasSafeArea, 18 | children, 19 | }) => { 20 | useFocusEffect(() => { 21 | if (screenName.trim().length > 0) { 22 | RNUxcam.tagScreenName(screenName); 23 | } 24 | }); 25 | 26 | return ( 27 | 32 | {hasSafeArea && } 33 | {children} 34 | 35 | ); 36 | }; 37 | 38 | export default BaseScreen; 39 | 40 | const styles = StyleSheet.create({ 41 | container: { 42 | flex: 1, 43 | }, 44 | }); 45 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/screen/main/VideoScreen.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {StyleSheet} from 'react-native'; 3 | 4 | import BaseScreen from '../base_screen'; 5 | 6 | const VideoScreen = React.memo(() => { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | }); 13 | 14 | const styles = StyleSheet.create({ 15 | video: {width: 400, height: 400}, 16 | }); 17 | 18 | export default VideoScreen; 19 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/screen/main/ViewOcclusionScreen.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {StyleSheet, Text, View} from 'react-native'; 3 | import RNUxcam from 'react-native-ux-cam'; 4 | 5 | import BaseScreen from '../base_screen'; 6 | 7 | const ViewOcclusionScreen = React.memo(() => { 8 | return ( 9 | 10 | 11 | 12 | { 14 | RNUxcam.occludeSensitiveView(label); 15 | }} 16 | style={styles.label}> 17 | {' '} 18 | {'Label hidden from UXCam'}{' '} 19 | 20 | 21 | 22 | 23 | ); 24 | }); 25 | 26 | export const styles = StyleSheet.create({ 27 | container: { 28 | flex: 1, 29 | justifyContent: 'center', 30 | alignItems: 'center', 31 | backgroundColor: '#F5FCFF', 32 | }, 33 | label: { 34 | fontSize: 18, 35 | textAlign: 'center', 36 | margin: 10, 37 | }, 38 | button: { 39 | margin: 5, 40 | }, 41 | }); 42 | 43 | export default ViewOcclusionScreen; 44 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/screen/settings/TitleAndSwitchView.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {View, StyleSheet, Switch} from 'react-native'; 3 | 4 | import AppText from '../../component/AppText'; 5 | import {palette} from '../../utils/palette'; 6 | 7 | type Props = { 8 | isEnabled?: boolean; 9 | title: string; 10 | onPressSwitch: (isEnabled: boolean) => void; 11 | }; 12 | 13 | const TitleAndSwitchView: React.FC = React.memo( 14 | ({title, onPressSwitch, isEnabled = true}) => { 15 | return ( 16 | 17 | 18 | {title} 19 | 20 | 21 | 29 | 30 | ); 31 | }, 32 | ); 33 | 34 | export default TitleAndSwitchView; 35 | 36 | const styles = StyleSheet.create({ 37 | container: { 38 | flexDirection: 'row', 39 | justifyContent: 'space-between', 40 | alignItems: 'center', 41 | marginVertical: 10, 42 | marginHorizontal: 12, 43 | }, 44 | text: { 45 | color: palette.black, 46 | fontSize: 18, 47 | }, 48 | }); 49 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/screen/ui/AnimationScreen.tsx: -------------------------------------------------------------------------------- 1 | import React, {useEffect, useRef} from 'react'; 2 | import {View, StyleSheet, Image, Animated} from 'react-native'; 3 | 4 | import {images} from '../../utils/images'; 5 | import BaseScreen from '../base_screen'; 6 | 7 | const AnimationScreen = React.memo(() => { 8 | const initXY = {x: 250, y: -60}; 9 | const midXY = {x: 250, y: 120}; 10 | const finalXY = {x: 10, y: 0}; 11 | const translateXYRef = useRef(new Animated.ValueXY(finalXY)).current; 12 | 13 | useEffect(() => { 14 | Animated.sequence([ 15 | Animated.timing(translateXYRef, { 16 | toValue: initXY, 17 | duration: 1000, 18 | useNativeDriver: true, 19 | delay: 1000, 20 | }), 21 | 22 | Animated.timing(translateXYRef, { 23 | toValue: midXY, 24 | duration: 1000, 25 | useNativeDriver: true, 26 | }), 27 | 28 | Animated.timing(translateXYRef, { 29 | toValue: finalXY, 30 | duration: 1000, 31 | useNativeDriver: true, 32 | }), 33 | ]).start(); 34 | // eslint-disable-next-line react-hooks/exhaustive-deps 35 | }, []); 36 | 37 | const animatedStyle = { 38 | transform: [ 39 | { 40 | translateX: translateXYRef.x, 41 | }, 42 | { 43 | translateY: translateXYRef.y, 44 | }, 45 | ], 46 | }; 47 | 48 | return ( 49 | 50 | 51 | 56 | 57 | 62 | 63 | 64 | ); 65 | }); 66 | 67 | const styles = StyleSheet.create({ 68 | container: { 69 | flex: 1, 70 | justifyContent: 'center', 71 | }, 72 | plateCheese: { 73 | width: '100%', 74 | height: '100%', 75 | }, 76 | bugContainer: { 77 | position: 'absolute', 78 | zIndex: 111, 79 | justifyContent: 'center', 80 | alignItems: 'center', 81 | width: 90, 82 | height: 90, 83 | left: 0, 84 | alignSelf: 'center', 85 | }, 86 | bug: { 87 | height: 90, 88 | width: 90, 89 | }, 90 | }); 91 | 92 | export default AnimationScreen; 93 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/screen/ui/GestureTag/CornerTestScreen.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {View, StyleSheet} from 'react-native'; 3 | import Toast from 'react-native-toast-message'; 4 | 5 | import AppButton from '../../../component/AppButton'; 6 | import {palette} from '../../../utils/palette'; 7 | import BaseScreen from '../../base_screen'; 8 | 9 | const CornerTestScreen = React.memo(() => { 10 | const showToast = (message: string) => { 11 | Toast.show({ 12 | type: 'customToast', 13 | text1: message, 14 | position: 'bottom', 15 | }); 16 | }; 17 | 18 | return ( 19 | 20 | 21 | 22 | { 26 | showToast('Top Left tapped'); 27 | }} 28 | /> 29 | { 33 | showToast('Top Right tapped'); 34 | }} 35 | /> 36 | 37 | 38 | 39 | { 43 | showToast('Center Left tapped'); 44 | }} 45 | /> 46 | 47 | { 51 | showToast('Center tapped'); 52 | }} 53 | /> 54 | 55 | { 59 | showToast('Center Right tapped'); 60 | }} 61 | /> 62 | 63 | 64 | 65 | { 69 | showToast('Bottom Left'); 70 | }} 71 | /> 72 | { 76 | showToast('Bottom Right'); 77 | }} 78 | /> 79 | 80 | 81 | 82 | ); 83 | }); 84 | 85 | const styles = StyleSheet.create({ 86 | container: { 87 | flex: 1, 88 | justifyContent: 'space-between', 89 | }, 90 | buttonContainer: {flexDirection: 'row', justifyContent: 'space-between'}, 91 | button: { 92 | paddingVertical: 15, 93 | backgroundColor: palette.skyBlue, 94 | width: 115, 95 | borderRadius: 0, 96 | }, 97 | greenColor: {backgroundColor: palette.pastelPurple}, 98 | yellowColor: {backgroundColor: palette.pastelPink}, 99 | blueColor: {backgroundColor: palette.pastelBlue}, 100 | }); 101 | 102 | export default CornerTestScreen; 103 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/screen/ui/GestureTag/GestureTagScreen.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {View, StyleSheet} from 'react-native'; 3 | import {useNavigation} from '@react-navigation/core'; 4 | 5 | import AppButton from '../../../component/AppButton'; 6 | import {palette} from '../../../utils/palette'; 7 | import BaseScreen from '../../base_screen'; 8 | 9 | const GestureTagScreen = () => { 10 | const {navigate} = useNavigation(); 11 | 12 | return ( 13 | 14 | 15 | { 19 | navigate('CornerTestScreen' as never); 20 | }} 21 | /> 22 | 23 | 24 | ); 25 | }; 26 | 27 | const styles = StyleSheet.create({ 28 | container: { 29 | flex: 1, 30 | padding: 12, 31 | }, 32 | button: {paddingVertical: 15, backgroundColor: palette.skyBlue}, 33 | }); 34 | 35 | export default GestureTagScreen; 36 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/screen/ui/MapScreen.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {View, StyleSheet} from 'react-native'; 3 | import MapView from 'react-native-maps'; 4 | 5 | import BaseScreen from '../base_screen'; 6 | 7 | const MapScreen = React.memo(() => { 8 | return ( 9 | 10 | 11 | 20 | 21 | 22 | ); 23 | }); 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | flex: 1, 28 | justifyContent: 'center', 29 | alignItems: 'center', 30 | backgroundColor: '#2c3e50', 31 | }, 32 | map: { 33 | ...StyleSheet.absoluteFillObject, 34 | }, 35 | }); 36 | 37 | export default MapScreen; 38 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/screen/ui/OccludeScreen.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {View, StyleSheet, Image, TextInput, ScrollView} from 'react-native'; 3 | import RNUxcam from 'react-native-ux-cam'; 4 | 5 | import {images} from '../../utils/images'; 6 | import {palette} from '../../utils/palette'; 7 | import AppButton from '../../component/AppButton'; 8 | import BaseScreen from '../base_screen'; 9 | 10 | const OccludeScreen = React.memo(() => { 11 | const [username, setUsername] = React.useState(''); 12 | const [password, setPassword] = React.useState(''); 13 | 14 | return ( 15 | 16 | 17 | 18 | 23 | 24 | 30 | 31 | { 33 | RNUxcam.occludeSensitiveView(input); 34 | }} 35 | style={styles.input} 36 | onChangeText={setPassword} 37 | placeholder="Enter password" 38 | value={password} 39 | secureTextEntry 40 | /> 41 | 42 | 43 | 44 | 45 | 46 | 54 | 55 | 63 | 64 | 72 | 73 | 74 | 75 | ); 76 | }); 77 | 78 | const styles = StyleSheet.create({ 79 | container: { 80 | flex: 1, 81 | padding: 12, 82 | }, 83 | input: { 84 | height: 46, 85 | marginVertical: 6, 86 | padding: 10, 87 | backgroundColor: palette.alto, 88 | borderRadius: 6, 89 | color: palette.black, 90 | fontSize: 16, 91 | }, 92 | card: { 93 | width: '100%', 94 | height: 220, 95 | alignSelf: 'center', 96 | borderRadius: 6, 97 | marginBottom: 12, 98 | }, 99 | button: { 100 | backgroundColor: palette.customBlue, 101 | marginTop: 5, 102 | padding: 12, 103 | }, 104 | line: { 105 | backgroundColor: palette.darkGray, 106 | height: 2, 107 | marginVertical: 15, 108 | }, 109 | marginBottom: { 110 | marginBottom: 10, 111 | }, 112 | }); 113 | 114 | export default OccludeScreen; 115 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/screen/ui/PagerViewScreen.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {StyleSheet, View} from 'react-native'; 3 | import PagerView from 'react-native-pager-view'; 4 | import AppText from '../../component/AppText'; 5 | import {palette} from '../../utils/palette'; 6 | import BaseScreen from '../base_screen'; 7 | 8 | const PagerViewScreen = React.memo(() => { 9 | return ( 10 | 11 | 12 | 13 | First page 14 | 15 | 16 | Second page 17 | 18 | 19 | Third page 20 | 21 | 22 | 23 | ); 24 | }); 25 | 26 | const styles = StyleSheet.create({ 27 | pagerView: { 28 | flex: 1, 29 | }, 30 | page_one: { 31 | backgroundColor: palette.pastelBlue, 32 | }, 33 | page_second: { 34 | backgroundColor: palette.pastelGreen, 35 | }, 36 | page_third: { 37 | backgroundColor: palette.pastelPurple, 38 | }, 39 | center: { 40 | justifyContent: 'center', 41 | alignItems: 'center', 42 | }, 43 | }); 44 | 45 | export default PagerViewScreen; 46 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/screen/ui/ScrollViewScreen.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {View, StyleSheet, ScrollView} from 'react-native'; 3 | import RNUxcam from 'react-native-ux-cam'; 4 | 5 | import {palette} from '../../utils/palette'; 6 | import AppText from '../../component/AppText'; 7 | import BaseScreen from '../base_screen'; 8 | 9 | const ScrollViewScreen = React.memo(() => { 10 | const colors = [ 11 | palette.pastelBlue, 12 | palette.pastelGreen, 13 | palette.pastelPink, 14 | palette.pastelPurple, 15 | palette.pastelYellow, 16 | palette.customBlue, 17 | ]; 18 | return ( 19 | 20 | 23 | {colors.map((color, index) => { 24 | return ( 25 | { 29 | if (index === 3) { 30 | RNUxcam.occludeSensitiveView(label); 31 | } 32 | }}> 33 | {`View ${index + 1}`} 34 | 35 | ); 36 | })} 37 | 38 | 39 | ); 40 | }); 41 | 42 | const styles = StyleSheet.create({ 43 | container: { 44 | flex: 1, 45 | }, 46 | view: { 47 | height: 200, 48 | justifyContent: 'center', 49 | alignItems: 'center', 50 | }, 51 | text: {fontSize: 18, fontWeight: '700'}, 52 | }); 53 | 54 | export default ScrollViewScreen; 55 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/screen/ui/SectionListScreen.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {StyleSheet, View, SectionList, StatusBar, Image} from 'react-native'; 3 | 4 | import {palette} from '../../utils/palette'; 5 | import AppText from '../../component/AppText'; 6 | import {images} from '../../utils/images'; 7 | import BaseScreen from '../base_screen'; 8 | 9 | const DATA = [ 10 | { 11 | title: 'Main dishes', 12 | data: [ 13 | {title: 'Pizza', image: images.pizza}, 14 | {title: 'Burger', image: images.burger}, 15 | {title: 'Risotto', image: images.risotto}, 16 | ], 17 | }, 18 | { 19 | title: 'Sides', 20 | data: [ 21 | {title: 'French Fries', image: images.frenchFries}, 22 | {title: 'Onion Rings', image: images.onionRings}, 23 | {title: 'Fried Shrimps', image: images.friedShrimp}, 24 | ], 25 | }, 26 | { 27 | title: 'Desserts', 28 | data: [ 29 | {title: 'Cheese Cake', image: images.cheeseCake}, 30 | {title: 'Ice Cream', image: images.iceCream}, 31 | ], 32 | }, 33 | ]; 34 | 35 | const SectionListScreen = React.memo(() => ( 36 | 37 | 38 | item.title + index} 41 | renderItem={({item}) => ( 42 | 43 | 48 | {item.title} 49 | 50 | )} 51 | renderSectionHeader={({section: {title}}) => ( 52 | {title} 53 | )} 54 | /> 55 | 56 | 57 | )); 58 | 59 | const styles = StyleSheet.create({ 60 | container: { 61 | flex: 1, 62 | paddingTop: StatusBar.currentHeight, 63 | }, 64 | item: { 65 | backgroundColor: palette.alto, 66 | padding: 16, 67 | marginVertical: 4, 68 | flexDirection: 'row', 69 | alignItems: 'center', 70 | }, 71 | image: { 72 | width: 100, 73 | height: 60, 74 | borderRadius: 6, 75 | marginRight: 12, 76 | }, 77 | header: { 78 | fontSize: 18, 79 | fontWeight: '600', 80 | padding: 16, 81 | backgroundColor: palette.black, 82 | }, 83 | title: { 84 | fontSize: 17, 85 | fontWeight: '500', 86 | color: palette.black, 87 | }, 88 | }); 89 | 90 | export default SectionListScreen; 91 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/screen/ui/SystemElementsScreen.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {StyleSheet, View} from 'react-native'; 3 | import AppButton from '../../component/AppButton'; 4 | import {useNavigation} from '@react-navigation/native'; 5 | import BaseScreen from '../base_screen'; 6 | 7 | const SystemElementsScreen = React.memo(() => { 8 | const navigate = useNavigation(); 9 | return ( 10 | 11 | 12 | { 16 | navigate.navigate('SimpleComponentScreen' as never); 17 | }} 18 | /> 19 | { 23 | navigate.navigate('SectionListScreen' as never); 24 | }} 25 | /> 26 | 27 | 28 | ); 29 | }); 30 | 31 | const styles = StyleSheet.create({ 32 | container: { 33 | flex: 1, 34 | marginHorizontal: 12, 35 | }, 36 | button: {padding: 15, marginVertical: 10}, 37 | }); 38 | 39 | export default SystemElementsScreen; 40 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/screen/ui/UIOptionScreen.tsx: -------------------------------------------------------------------------------- 1 | import React, {useCallback} from 'react'; 2 | import {View, StyleSheet, FlatList} from 'react-native'; 3 | import AppButton from '../../component/AppButton'; 4 | import AppText from '../../component/AppText'; 5 | import {palette} from '../../utils/palette'; 6 | import {useNavigation} from '@react-navigation/native'; 7 | import BaseScreen from '../base_screen'; 8 | 9 | type OptionType = { 10 | title: string; 11 | description: string; 12 | screenName: string; 13 | }; 14 | 15 | const UIOptionScreen = React.memo(() => { 16 | const {navigate} = useNavigation(); 17 | 18 | const options: OptionType[] = [ 19 | { 20 | title: 'Gesture/Tag Screen', 21 | description: 'Emulate different gestures for collecting gestures data', 22 | screenName: 'GestureTagScreen', 23 | }, 24 | { 25 | title: 'Scroll View', 26 | description: 'Show partial hide screen while scrolling', 27 | screenName: 'ScrollViewScreen', 28 | }, 29 | { 30 | title: 'Occlude View', 31 | description: 'Hide view with different condition as per the APIs', 32 | screenName: 'OccludeScreen', 33 | }, 34 | { 35 | title: 'Animation', 36 | description: 'Compute various animations to see it in UXCam session', 37 | screenName: 'AnimationScreen', 38 | }, 39 | { 40 | title: 'Maps', 41 | description: 'Open Google map to view map and its affect on SDK', 42 | screenName: 'MapScreen', 43 | }, 44 | { 45 | title: 'Web View', 46 | description: 'Open webView to check its scenario', 47 | screenName: 'WebViewScreen', 48 | }, 49 | { 50 | title: 'Page View', 51 | description: 'Open page view with its children', 52 | screenName: 'PagerViewScreen', 53 | }, 54 | { 55 | title: 'System Elements', 56 | description: 'Show different available system elements', 57 | screenName: 'SystemElementsScreen', 58 | }, 59 | ]; 60 | 61 | const renderItem = useCallback( 62 | ({item}: {item: OptionType}) => ( 63 | { 66 | navigate(item.screenName as never); 67 | }}> 68 | {item.title} 69 | {item.description} 70 | 71 | ), 72 | [navigate], 73 | ); 74 | 75 | return ( 76 | 77 | 78 | 84 | 85 | 86 | ); 87 | }); 88 | 89 | const styles = StyleSheet.create({ 90 | container: { 91 | paddingHorizontal: 12, 92 | }, 93 | button: { 94 | maxWidth: '100%', 95 | marginTop: 12, 96 | alignItems: 'flex-start', 97 | backgroundColor: palette.green, 98 | }, 99 | title: {fontSize: 17, fontWeight: '500', marginBottom: 5}, 100 | description: {color: palette.darkGray}, 101 | contentContainerStyle: {paddingBottom: 20}, 102 | }); 103 | 104 | export default UIOptionScreen; 105 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/screen/ui/WebViewScreen.tsx: -------------------------------------------------------------------------------- 1 | import React, {useRef, useState} from 'react'; 2 | import {StyleSheet, ActivityIndicator} from 'react-native'; 3 | import WebView from 'react-native-webview'; 4 | import BaseScreen from '../base_screen'; 5 | 6 | const WebViewScreen = React.memo(() => { 7 | const webviewRef = useRef(null); 8 | const [webViewLoading, setWebViewLoading] = useState(true); 9 | const url = 'https://developer.uxcam.com/'; 10 | 11 | function handleVideoEvents(event: any) { 12 | const eventObj = JSON.parse(event.nativeEvent.data); 13 | const message = eventObj.message; 14 | const data = eventObj.data; 15 | console.log(message, data); 16 | } 17 | 18 | return ( 19 | 20 | { 31 | setWebViewLoading(nativeEvent.loading); 32 | }} 33 | onLoadEnd={({nativeEvent}) => { 34 | setWebViewLoading(nativeEvent.loading); 35 | }} 36 | onMessage={event => handleVideoEvents(event)} 37 | /> 38 | {webViewLoading && ( 39 | 40 | )} 41 | 42 | ); 43 | }); 44 | 45 | const styles = StyleSheet.create({ 46 | webView: { 47 | flex: 1, 48 | }, 49 | indicator: {position: 'absolute', alignSelf: 'center'}, 50 | }); 51 | 52 | export default WebViewScreen; 53 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/store/auth/reducer.ts: -------------------------------------------------------------------------------- 1 | import {createAction, createSlice} from '@reduxjs/toolkit'; 2 | import type {PayloadAction} from '@reduxjs/toolkit'; 3 | 4 | export const resetState = createAction('RESET-STATE'); 5 | 6 | export interface AuthState { 7 | appkey: string; 8 | username: string; 9 | } 10 | 11 | const initialState: AuthState = { 12 | appkey: '', 13 | username: '', 14 | }; 15 | 16 | export const authSlice = createSlice({ 17 | name: 'auth', 18 | initialState, 19 | reducers: { 20 | start: (state, {payload}: PayloadAction) => { 21 | state.appkey = payload.appkey; 22 | state.username = payload.username; 23 | }, 24 | stop: state => { 25 | state.appkey = ''; 26 | state.username = ''; 27 | }, 28 | }, 29 | extraReducers: builder => { 30 | builder.addCase(resetState, () => initialState); 31 | }, 32 | }); 33 | 34 | // Action creators are generated for each case reducer function 35 | export const {start, stop} = authSlice.actions; 36 | 37 | export default authSlice.reducer; 38 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/store/store.ts: -------------------------------------------------------------------------------- 1 | import {configureStore} from '@reduxjs/toolkit'; 2 | import authReducer from './auth/reducer'; 3 | 4 | export const store = configureStore({ 5 | reducer: { 6 | auth: authReducer, 7 | }, 8 | }); 9 | 10 | // Infer the `RootState` and `AppDispatch` types from the store itself 11 | export type RootState = ReturnType; 12 | 13 | export type AppDispatch = typeof store.dispatch; 14 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/types/environment.ts: -------------------------------------------------------------------------------- 1 | export enum EnvironmentType { 2 | production = 'Production', 3 | staging = 'Staging', 4 | } 5 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/utils/config.ts: -------------------------------------------------------------------------------- 1 | import RNUxcam, {UXCamConfiguration} from 'react-native-ux-cam'; 2 | 3 | export const startUXCam = ( 4 | configuration: UXCamConfiguration, 5 | username: string, 6 | ) => { 7 | RNUxcam.optIntoSchematicRecordings(); 8 | 9 | console.log('Start UXCam API With configuration ====>> ', configuration); 10 | 11 | RNUxcam.startWithConfiguration(configuration); 12 | 13 | RNUxcam.setUserIdentity(username); 14 | 15 | RNUxcam.addVerificationListener(result => 16 | console.log(`UXCam: verificationResult: ${JSON.stringify(result)}`), 17 | ); 18 | }; 19 | 20 | export const updateConfiguration = ( 21 | configuration: UXCamConfiguration, 22 | username: string, 23 | ) => { 24 | RNUxcam.updateConfiguration(configuration); 25 | RNUxcam.setUserIdentity(username); 26 | 27 | console.log('Updated UXCam configuration ====>> ', configuration); 28 | }; 29 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/utils/globalStyles.ts: -------------------------------------------------------------------------------- 1 | import {StyleSheet} from 'react-native'; 2 | import {palette} from './palette'; 3 | 4 | export const global_styles = StyleSheet.create({ 5 | input: { 6 | height: 46, 7 | marginVertical: 12, 8 | padding: 10, 9 | backgroundColor: palette.alto, 10 | borderRadius: 6, 11 | color: palette.black, 12 | fontSize: 16, 13 | }, 14 | button: { 15 | backgroundColor: palette.black, 16 | height: 50, 17 | marginVertical: 12, 18 | padding: 10, 19 | borderRadius: 6, 20 | justifyContent: 'center', 21 | alignItems: 'center', 22 | }, 23 | buttontText: { 24 | color: palette.white, 25 | fontSize: 18, 26 | }, 27 | }); 28 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/utils/helper.ts: -------------------------------------------------------------------------------- 1 | import AsyncStorage from '@react-native-async-storage/async-storage'; 2 | 3 | export function isEmpty(string: string) { 4 | return typeof string === 'string' && string.trim().length === 0; 5 | } 6 | export const setStorage = async (akey: string, value: any) => { 7 | return await AsyncStorage.setItem(akey, JSON.stringify(value)); 8 | }; 9 | 10 | export const removeStorageValue = async (akey: string) => { 11 | await AsyncStorage.removeItem(akey); 12 | }; 13 | 14 | export function capitalizeFLetter(string: string) { 15 | return string.replace(/^./, string[0].toUpperCase()); 16 | } 17 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/utils/images.ts: -------------------------------------------------------------------------------- 1 | export const images: any = { 2 | creditCard: require('../../assets/credit-card-sample.jpg'), 3 | bug: require('../../assets/bug/bug.png'), 4 | plateCheese: require('../../assets/platecheese/plate_cheese.png'), 5 | risotto: require('../../assets/list/risotto.jpeg'), 6 | pizza: require('../../assets/list/pizza.jpeg'), 7 | friedShrimp: require('../../assets/list/friedShrimp.jpeg'), 8 | iceCream: require('../../assets/list/iceCream.jpeg'), 9 | onionRings: require('../../assets/list/onionRings.jpeg'), 10 | cheeseCake: require('../../assets/list/cheeseCake.jpeg'), 11 | frenchFries: require('../../assets/list/frenchFries.jpeg'), 12 | burger: require('../../assets/list/burger.jpeg'), 13 | tick: require('../../assets/common/tick.png'), 14 | }; 15 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/utils/palette.ts: -------------------------------------------------------------------------------- 1 | export const palette = { 2 | white: '#FFFFFF', 3 | alto: '#dcdcdc', 4 | black: '#000000', 5 | background: '#e6e6e6', 6 | gray: 'gray', 7 | darkGray: 'darkgray', 8 | error: '#a90808', 9 | transparent: 'transparent', 10 | blue: 'blue', 11 | skyBlue: '#4287f5', 12 | customBlue: '#32AAE6', 13 | green: 'green', 14 | yellow: 'yellow', 15 | orange: 'orange', 16 | pastelPink: '#FFB4B4', 17 | pastelBlue: '#083cbf', 18 | pastelGreen: '#98DAAA', 19 | pastelYellow: '#e9fa02', 20 | pastelPurple: '#CDBEEB', 21 | seaSerpent: '#5AC4BD', 22 | }; 23 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/src/utils/toastConfig.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {StyleSheet, View} from 'react-native'; 3 | import AppText from '../component/AppText'; 4 | import {palette} from './palette'; 5 | import {ToastConfig} from 'react-native-toast-message'; 6 | 7 | export const toastConfig: ToastConfig = { 8 | customToast: props => { 9 | return ( 10 | 11 | {props.text1} 12 | 13 | ); 14 | }, 15 | }; 16 | 17 | const styles = StyleSheet.create({ 18 | container: { 19 | paddingVertical: 10, 20 | backgroundColor: palette.pastelPink, 21 | paddingHorizontal: 25, 22 | borderRadius: 6, 23 | }, 24 | text: {color: palette.black, fontSize: 16}, 25 | }); 26 | -------------------------------------------------------------------------------- /UXCamReactExample-Typescript/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@react-native/typescript-config/tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /UXCamReactExample/.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /UXCamReactExample/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native-community', 4 | }; 5 | -------------------------------------------------------------------------------- /UXCamReactExample/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | ; We fork some components by platform 3 | .*/*[.]android.js 4 | 5 | ; Ignore "BUCK" generated dirs 6 | /\.buckd/ 7 | 8 | ; Ignore polyfills 9 | node_modules/react-native/Libraries/polyfills/.* 10 | 11 | ; These should not be required directly 12 | ; require from fbjs/lib instead: require('fbjs/lib/warning') 13 | node_modules/warning/.* 14 | 15 | ; Flow doesn't support platforms 16 | .*/Libraries/Utilities/LoadingView.js 17 | 18 | [untyped] 19 | .*/node_modules/@react-native-community/cli/.*/.* 20 | 21 | [include] 22 | 23 | [libs] 24 | node_modules/react-native/Libraries/react-native/react-native-interface.js 25 | node_modules/react-native/flow/ 26 | 27 | [options] 28 | emoji=true 29 | 30 | esproposal.optional_chaining=enable 31 | esproposal.nullish_coalescing=enable 32 | 33 | module.file_ext=.js 34 | module.file_ext=.json 35 | module.file_ext=.ios.js 36 | 37 | munge_underscores=true 38 | 39 | module.name_mapper='^react-native$' -> '/node_modules/react-native/Libraries/react-native/react-native-implementation' 40 | module.name_mapper='^react-native/\(.*\)$' -> '/node_modules/react-native/\1' 41 | module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> '/node_modules/react-native/Libraries/Image/RelativeImageStub' 42 | 43 | suppress_type=$FlowIssue 44 | suppress_type=$FlowFixMe 45 | suppress_type=$FlowFixMeProps 46 | suppress_type=$FlowFixMeState 47 | 48 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\) 49 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)?:? #[0-9]+ 50 | suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError 51 | 52 | [lints] 53 | sketchy-null-number=warn 54 | sketchy-null-mixed=warn 55 | sketchy-number=warn 56 | untyped-type-import=warn 57 | nonstrict-import=warn 58 | deprecated-type=warn 59 | unsafe-getters-setters=warn 60 | inexact-spread=warn 61 | unnecessary-invariant=warn 62 | signature-verification-failure=warn 63 | deprecated-utility=error 64 | 65 | [strict] 66 | deprecated-type 67 | nonstrict-import 68 | sketchy-null 69 | unclear-type 70 | unsafe-getters-setters 71 | untyped-import 72 | untyped-type-import 73 | 74 | [version] 75 | ^0.105.0 76 | -------------------------------------------------------------------------------- /UXCamReactExample/.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | -------------------------------------------------------------------------------- /UXCamReactExample/.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 | 38 | # BUCK 39 | buck-out/ 40 | \.buckd/ 41 | *.keystore 42 | !debug.keystore 43 | 44 | # fastlane 45 | # 46 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 47 | # screenshots whenever they are needed. 48 | # For more information about the recommended setup visit: 49 | # https://docs.fastlane.tools/best-practices/source-control/ 50 | 51 | */fastlane/report.xml 52 | */fastlane/Preview.html 53 | */fastlane/screenshots 54 | 55 | # Bundle artifact 56 | *.jsbundle 57 | 58 | # CocoaPods 59 | /ios/Pods/ 60 | -------------------------------------------------------------------------------- /UXCamReactExample/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | bracketSpacing: false, 3 | jsxBracketSameLine: true, 4 | singleQuote: true, 5 | trailingComma: 'all', 6 | }; 7 | -------------------------------------------------------------------------------- /UXCamReactExample/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /UXCamReactExample/App.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | * 5 | * @format 6 | * @flow 7 | */ 8 | 9 | import React, {Component} from 'react'; 10 | import {StyleSheet} from 'react-native'; 11 | import RNUxcam from 'react-native-ux-cam'; 12 | import {UXCamOcclusionType} from 'react-native-ux-cam/UXCamOcclusion'; 13 | import {NavigationContainer} from '@react-navigation/native'; 14 | import {createNativeStackNavigator} from '@react-navigation/native-stack'; 15 | import {VideoScreen} from './screens/VideoScreen.js'; 16 | import {HomeScreen} from './screens/HomeScreen.js'; 17 | import {ViewOcclusionScreen} from './screens/ViewOcclusionScreen.js'; 18 | 19 | type Props = {}; 20 | 21 | const Stack = createNativeStackNavigator(); 22 | 23 | export default class App extends Component { 24 | componentDidMount() { 25 | RNUxcam.optIntoSchematicRecordings(); 26 | const overlay = { 27 | type: UXCamOcclusionType.Overlay, 28 | color: 0x000000, 29 | }; 30 | const configuration = { 31 | userAppKey: 'YOUR UXCAM API KEY GOES HERE', 32 | enableImprovedScreenCapture: true, // for improved screen capture on Android 33 | /* 34 | disable advanced gestures if you're having issues with 35 | swipe gestures and touches during app interaction 36 | */ 37 | // enableAdvancedGestureRecognition: false, 38 | //occlusions: [overlay] 39 | }; 40 | 41 | RNUxcam.startWithConfiguration(configuration); 42 | RNUxcam.addVerificationListener((result) => 43 | console.log(`UXCam: verificationResult: ${JSON.stringify(result)}`), 44 | ); 45 | } 46 | 47 | render() { 48 | return ( 49 | 50 | 51 | 52 | 56 | 57 | 58 | 59 | ); 60 | } 61 | } 62 | 63 | export const styles = StyleSheet.create({ 64 | container: { 65 | flex: 1, 66 | justifyContent: 'center', 67 | alignItems: 'center', 68 | backgroundColor: '#F5FCFF', 69 | }, 70 | welcome: { 71 | fontSize: 20, 72 | textAlign: 'center', 73 | margin: 10, 74 | }, 75 | label: { 76 | fontSize: 18, 77 | textAlign: 'center', 78 | margin: 10, 79 | }, 80 | button: { 81 | margin: 5, 82 | }, 83 | }); 84 | -------------------------------------------------------------------------------- /UXCamReactExample/__tests__/App-test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import 'react-native'; 6 | import React from 'react'; 7 | import App from '../App'; 8 | 9 | // Note: test renderer must be required after react-native. 10 | import renderer from 'react-test-renderer'; 11 | 12 | it('renders correctly', () => { 13 | renderer.create(); 14 | }); 15 | -------------------------------------------------------------------------------- /UXCamReactExample/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.uxcamreactexample", 39 | ) 40 | 41 | android_resource( 42 | name = "res", 43 | package = "com.uxcamreactexample", 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 | -------------------------------------------------------------------------------- /UXCamReactExample/android/app/build_defs.bzl: -------------------------------------------------------------------------------- 1 | """Helper definitions to glob .aar and .jar targets""" 2 | 3 | def create_aar_targets(aarfiles): 4 | for aarfile in aarfiles: 5 | name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")] 6 | lib_deps.append(":" + name) 7 | android_prebuilt_aar( 8 | name = name, 9 | aar = aarfile, 10 | ) 11 | 12 | def create_jar_targets(jarfiles): 13 | for jarfile in jarfiles: 14 | name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")] 15 | lib_deps.append(":" + name) 16 | prebuilt_jar( 17 | name = name, 18 | binary_jar = jarfile, 19 | ) 20 | -------------------------------------------------------------------------------- /UXCamReactExample/android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample/android/app/debug.keystore -------------------------------------------------------------------------------- /UXCamReactExample/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 | -------------------------------------------------------------------------------- /UXCamReactExample/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /UXCamReactExample/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 13 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /UXCamReactExample/android/app/src/main/java/com/uxcamreactexample/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.uxcamreactexample; 2 | 3 | import com.facebook.react.ReactActivity; 4 | 5 | public class MainActivity extends ReactActivity { 6 | 7 | /** 8 | * Returns the name of the main component registered from JavaScript. This is used to schedule 9 | * rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "UXCamReactExample"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /UXCamReactExample/android/app/src/main/java/com/uxcamreactexample/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.uxcamreactexample; 2 | 3 | import android.app.Application; 4 | import android.content.Context; 5 | import com.facebook.react.PackageList; 6 | import com.facebook.react.ReactApplication; 7 | import com.imagepicker.ImagePickerPackage; 8 | import com.uxcam.RNUxcamPackage; 9 | import com.facebook.react.ReactNativeHost; 10 | import com.facebook.react.ReactPackage; 11 | import com.facebook.soloader.SoLoader; 12 | import java.lang.reflect.InvocationTargetException; 13 | import java.util.List; 14 | 15 | public class MainApplication extends Application implements ReactApplication { 16 | 17 | private final ReactNativeHost mReactNativeHost = 18 | new ReactNativeHost(this) { 19 | @Override 20 | public boolean getUseDeveloperSupport() { 21 | return BuildConfig.DEBUG; 22 | } 23 | 24 | @Override 25 | protected List getPackages() { 26 | @SuppressWarnings("UnnecessaryLocalVariable") 27 | List packages = new PackageList(this).getPackages(); 28 | // Packages that cannot be autolinked yet can be added manually here, for example: 29 | // packages.add(new MyReactNativePackage()); 30 | return packages; 31 | } 32 | 33 | @Override 34 | protected String getJSMainModuleName() { 35 | return "index"; 36 | } 37 | }; 38 | 39 | @Override 40 | public ReactNativeHost getReactNativeHost() { 41 | return mReactNativeHost; 42 | } 43 | 44 | @Override 45 | public void onCreate() { 46 | super.onCreate(); 47 | SoLoader.init(this, /* native exopackage */ false); 48 | initializeFlipper(this); // Remove this line if you don't want Flipper enabled 49 | } 50 | 51 | /** 52 | * Loads Flipper in React Native templates. 53 | * 54 | * @param context 55 | */ 56 | private static void initializeFlipper(Context context) { 57 | if (BuildConfig.DEBUG) { 58 | try { 59 | /* 60 | We use reflection here to pick up the class that initializes Flipper, 61 | since Flipper library is not available in release mode 62 | */ 63 | Class aClass = Class.forName("com.facebook.flipper.ReactNativeFlipper"); 64 | aClass.getMethod("initializeFlipper", Context.class).invoke(null, context); 65 | } catch (ClassNotFoundException e) { 66 | e.printStackTrace(); 67 | } catch (NoSuchMethodException e) { 68 | e.printStackTrace(); 69 | } catch (IllegalAccessException e) { 70 | e.printStackTrace(); 71 | } catch (InvocationTargetException e) { 72 | e.printStackTrace(); 73 | } 74 | } 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /UXCamReactExample/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /UXCamReactExample/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /UXCamReactExample/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /UXCamReactExample/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /UXCamReactExample/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /UXCamReactExample/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /UXCamReactExample/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /UXCamReactExample/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /UXCamReactExample/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /UXCamReactExample/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /UXCamReactExample/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | UXCamReactExample 3 | 4 | -------------------------------------------------------------------------------- /UXCamReactExample/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /UXCamReactExample/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | ext { 5 | buildToolsVersion = "28.0.3" 6 | minSdkVersion = 21 7 | compileSdkVersion = 33 8 | targetSdkVersion = 33 9 | } 10 | repositories { 11 | google() 12 | jcenter() 13 | } 14 | dependencies { 15 | classpath("com.android.tools.build:gradle:7.2.2") 16 | 17 | // NOTE: Do not place your application dependencies here; they belong 18 | // in the individual module build.gradle files 19 | } 20 | } 21 | 22 | allprojects { 23 | repositories { 24 | mavenLocal() 25 | maven { 26 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 27 | url("$rootDir/../node_modules/react-native/android") 28 | } 29 | maven { 30 | // Android JSC is installed from npm 31 | url("$rootDir/../node_modules/jsc-android/dist") 32 | } 33 | 34 | google() 35 | jcenter() 36 | maven { url 'https://jitpack.io' } 37 | exclusiveContent { 38 | // We get React Native's Android binaries exclusively through npm, 39 | // from a local Maven repo inside node_modules/react-native/. 40 | // (The use of exclusiveContent prevents looking elsewhere like Maven Central 41 | // and potentially getting a wrong version.) 42 | filter { 43 | includeGroup "com.facebook.react" 44 | } 45 | forRepository { 46 | maven { 47 | url "$rootDir/../node_modules/react-native/android" 48 | } 49 | } 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /UXCamReactExample/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: -Xmx10248m -XX:MaxPermSize=256m 13 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 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 | android.useAndroidX=true 21 | android.enableJetifier=true 22 | -------------------------------------------------------------------------------- /UXCamReactExample/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uxcam/react-native-ux-cam/49573e004c94900d5631978bc9861342ea61f528/UXCamReactExample/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /UXCamReactExample/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-all.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /UXCamReactExample/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 http://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 Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 33 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 34 | 35 | @rem Find java.exe 36 | if defined JAVA_HOME goto findJavaFromJavaHome 37 | 38 | set JAVA_EXE=java.exe 39 | %JAVA_EXE% -version >NUL 2>&1 40 | if "%ERRORLEVEL%" == "0" goto init 41 | 42 | echo. 43 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 44 | echo. 45 | echo Please set the JAVA_HOME variable in your environment to match the 46 | echo location of your Java installation. 47 | 48 | goto fail 49 | 50 | :findJavaFromJavaHome 51 | set JAVA_HOME=%JAVA_HOME:"=% 52 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 53 | 54 | if exist "%JAVA_EXE%" goto init 55 | 56 | echo. 57 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 58 | echo. 59 | echo Please set the JAVA_HOME variable in your environment to match the 60 | echo location of your Java installation. 61 | 62 | goto fail 63 | 64 | :init 65 | @rem Get command-line arguments, handling Windows variants 66 | 67 | if not "%OS%" == "Windows_NT" goto win9xME_args 68 | 69 | :win9xME_args 70 | @rem Slurp the command line arguments. 71 | set CMD_LINE_ARGS= 72 | set _SKIP=2 73 | 74 | :win9xME_args_slurp 75 | if "x%~1" == "x" goto execute 76 | 77 | set CMD_LINE_ARGS=%* 78 | 79 | :execute 80 | @rem Setup the command line 81 | 82 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 83 | 84 | @rem Execute Gradle 85 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 86 | 87 | :end 88 | @rem End local scope for the variables with windows NT shell 89 | if "%ERRORLEVEL%"=="0" goto mainEnd 90 | 91 | :fail 92 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 93 | rem the _cmd.exe /c_ return code! 94 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 95 | exit /b 1 96 | 97 | :mainEnd 98 | if "%OS%"=="Windows_NT" endlocal 99 | 100 | :omega 101 | -------------------------------------------------------------------------------- /UXCamReactExample/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'UXCamReactExample' 2 | include ':react-native-image-picker' 3 | project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android') 4 | include ':react-native-ux-cam' 5 | project(':react-native-ux-cam').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-ux-cam/android') 6 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 7 | include ':app' 8 | -------------------------------------------------------------------------------- /UXCamReactExample/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "UXCamReactExample", 3 | "displayName": "UXCamReactExample" 4 | } -------------------------------------------------------------------------------- /UXCamReactExample/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:@react-native/babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /UXCamReactExample/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 | -------------------------------------------------------------------------------- /UXCamReactExample/ios/Gemfile: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | source "https://rubygems.org" 4 | 5 | # gem "rails" 6 | ruby ">= 2.6.10" 7 | 8 | # Cocoapods 1.15 introduced a bug which break the build. We will remove the upper 9 | # bound in the template on Cocoapods with next React Native release. 10 | gem 'cocoapods', '>= 1.13', '< 1.15' 11 | gem 'activesupport', '>= 6.1.7.5', '< 7.1.0' -------------------------------------------------------------------------------- /UXCamReactExample/ios/Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | CFPropertyList (3.0.6) 5 | rexml 6 | activesupport (7.0.8) 7 | concurrent-ruby (~> 1.0, >= 1.0.2) 8 | i18n (>= 1.6, < 2) 9 | minitest (>= 5.1) 10 | tzinfo (~> 2.0) 11 | addressable (2.8.4) 12 | public_suffix (>= 2.0.2, < 6.0) 13 | algoliasearch (1.27.5) 14 | httpclient (~> 2.8, >= 2.8.3) 15 | json (>= 1.5.1) 16 | atomos (0.1.3) 17 | claide (1.1.0) 18 | cocoapods (1.15.2) 19 | addressable (~> 2.8) 20 | claide (>= 1.0.2, < 2.0) 21 | cocoapods-core (= 1.15.2) 22 | cocoapods-deintegrate (>= 1.0.3, < 2.0) 23 | cocoapods-downloader (>= 2.1, < 3.0) 24 | cocoapods-plugins (>= 1.0.0, < 2.0) 25 | cocoapods-search (>= 1.0.0, < 2.0) 26 | cocoapods-trunk (>= 1.6.0, < 2.0) 27 | cocoapods-try (>= 1.1.0, < 2.0) 28 | colored2 (~> 3.1) 29 | escape (~> 0.0.4) 30 | fourflusher (>= 2.3.0, < 3.0) 31 | gh_inspector (~> 1.0) 32 | molinillo (~> 0.8.0) 33 | nap (~> 1.0) 34 | ruby-macho (>= 2.3.0, < 3.0) 35 | xcodeproj (>= 1.23.0, < 2.0) 36 | cocoapods-core (1.15.2) 37 | activesupport (>= 5.0, < 8) 38 | addressable (~> 2.8) 39 | algoliasearch (~> 1.0) 40 | concurrent-ruby (~> 1.1) 41 | fuzzy_match (~> 2.0.4) 42 | nap (~> 1.0) 43 | netrc (~> 0.11) 44 | public_suffix (~> 4.0) 45 | typhoeus (~> 1.0) 46 | cocoapods-deintegrate (1.0.5) 47 | cocoapods-downloader (2.1) 48 | cocoapods-plugins (1.0.0) 49 | nap 50 | cocoapods-search (1.0.1) 51 | cocoapods-trunk (1.6.0) 52 | nap (>= 0.8, < 2.0) 53 | netrc (~> 0.11) 54 | cocoapods-try (1.2.0) 55 | colored2 (3.1.2) 56 | concurrent-ruby (1.2.3) 57 | escape (0.0.4) 58 | ethon (0.16.0) 59 | ffi (>= 1.15.0) 60 | ffi (1.15.5) 61 | fourflusher (2.3.1) 62 | fuzzy_match (2.0.4) 63 | gh_inspector (1.1.3) 64 | httpclient (2.8.3) 65 | i18n (1.14.1) 66 | concurrent-ruby (~> 1.0) 67 | json (2.6.3) 68 | minitest (5.20.0) 69 | molinillo (0.8.0) 70 | nanaimo (0.3.0) 71 | nap (1.1.0) 72 | netrc (0.11.0) 73 | public_suffix (4.0.7) 74 | rexml (3.2.5) 75 | ruby-macho (2.5.1) 76 | typhoeus (1.4.0) 77 | ethon (>= 0.9.0) 78 | tzinfo (2.0.6) 79 | concurrent-ruby (~> 1.0) 80 | xcodeproj (1.24.0) 81 | CFPropertyList (>= 2.3.3, < 4.0) 82 | atomos (~> 0.1.3) 83 | claide (>= 1.0.2, < 2.0) 84 | colored2 (~> 3.1) 85 | nanaimo (~> 0.3.0) 86 | rexml (~> 3.2.4) 87 | 88 | PLATFORMS 89 | ruby 90 | x86_64-darwin-22 91 | 92 | DEPENDENCIES 93 | cocoapods 94 | 95 | BUNDLED WITH 96 | 2.5.9 97 | -------------------------------------------------------------------------------- /UXCamReactExample/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 'UXCamReactExample' do 18 | # Adding 'use_frameworks!' creates Cyclic dependency issue with other targets 19 | # https://github.com/facebook/react-native/issues/31034 20 | #use_frameworks! 21 | 22 | config = use_native_modules! 23 | use_react_native!(:path => config[:reactNativePath], 24 | :hermes_enabled => false, 25 | ) 26 | 27 | pod 'react-native-image-picker', :path => '../node_modules/react-native-image-picker' 28 | 29 | target 'UXCamReactExampleTests' do 30 | inherit! :complete 31 | # Pods for testing 32 | end 33 | 34 | post_install do |installer| 35 | # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202 36 | react_native_post_install( 37 | installer, 38 | config[:reactNativePath], 39 | :mac_catalyst_enabled => false, 40 | # :ccache_enabled => true 41 | ) 42 | end 43 | end 44 | 45 | target 'UXCamReactExample-tvOS' do 46 | # Pods for ReactTypeScriptSample-tvOS 47 | 48 | target 'UXCamReactExample-tvOSTests' do 49 | inherit! :search_paths 50 | # Pods for testing 51 | end 52 | end 53 | -------------------------------------------------------------------------------- /UXCamReactExample/ios/UXCamReactExample-tvOS/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 | APPL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | LSRequiresIPhoneOS 24 | 25 | NSAppTransportSecurity 26 | 27 | NSExceptionDomains 28 | 29 | localhost 30 | 31 | NSExceptionAllowsInsecureHTTPLoads 32 | 33 | 34 | 35 | 36 | NSLocationWhenInUseUsageDescription 37 | 38 | UILaunchStoryboardName 39 | LaunchScreen 40 | UIRequiredDeviceCapabilities 41 | 42 | armv7 43 | 44 | UISupportedInterfaceOrientations 45 | 46 | UIInterfaceOrientationPortrait 47 | UIInterfaceOrientationLandscapeLeft 48 | UIInterfaceOrientationLandscapeRight 49 | 50 | UIViewControllerBasedStatusBarAppearance 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /UXCamReactExample/ios/UXCamReactExample-tvOSTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 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 | -------------------------------------------------------------------------------- /UXCamReactExample/ios/UXCamReactExample.xcodeproj/project.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /UXCamReactExample/ios/UXCamReactExample.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /UXCamReactExample/ios/UXCamReactExample.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /UXCamReactExample/ios/UXCamReactExample.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /UXCamReactExample/ios/UXCamReactExample/AppDelegate.h: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | #import 9 | #import 10 | 11 | @interface AppDelegate : RCTAppDelegate 12 | 13 | @end 14 | -------------------------------------------------------------------------------- /UXCamReactExample/ios/UXCamReactExample/AppDelegate.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | #import "AppDelegate.h" 9 | 10 | #import 11 | 12 | @implementation AppDelegate 13 | 14 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 15 | { 16 | self.moduleName = @"UXCamReactExample"; 17 | // You can add your custom initial props in the dictionary below. 18 | // They will be passed down to the ViewController used by React Native. 19 | self.initialProps = @{}; 20 | 21 | return [super application:application didFinishLaunchingWithOptions:launchOptions]; 22 | } 23 | 24 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge 25 | { 26 | return [self bundleURL]; 27 | } 28 | 29 | - (NSURL *)bundleURL 30 | { 31 | #if DEBUG 32 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"]; 33 | #else 34 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 35 | #endif 36 | } 37 | 38 | @end 39 | -------------------------------------------------------------------------------- /UXCamReactExample/ios/UXCamReactExample/Base.lproj/LaunchScreen.xib: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 21 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /UXCamReactExample/ios/UXCamReactExample/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "29x29", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "29x29", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "40x40", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "40x40", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "60x60", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "60x60", 31 | "scale" : "3x" 32 | } 33 | ], 34 | "info" : { 35 | "version" : 1, 36 | "author" : "xcode" 37 | } 38 | } -------------------------------------------------------------------------------- /UXCamReactExample/ios/UXCamReactExample/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /UXCamReactExample/ios/UXCamReactExample/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | UXCamReactExample 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 | 1.0 21 | CFBundleSignature 22 | ???? 23 | CFBundleVersion 24 | 1 25 | LSRequiresIPhoneOS 26 | 27 | NSAppTransportSecurity 28 | 29 | NSAllowsArbitraryLoads 30 | 31 | NSExceptionDomains 32 | 33 | localhost 34 | 35 | NSExceptionAllowsInsecureHTTPLoads 36 | 37 | 38 | 39 | 40 | NSLocationWhenInUseUsageDescription 41 | 42 | UILaunchStoryboardName 43 | LaunchScreen 44 | UIRequiredDeviceCapabilities 45 | 46 | armv7 47 | 48 | UISupportedInterfaceOrientations 49 | 50 | UIInterfaceOrientationPortrait 51 | UIInterfaceOrientationLandscapeLeft 52 | UIInterfaceOrientationLandscapeRight 53 | 54 | UIViewControllerBasedStatusBarAppearance 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /UXCamReactExample/ios/UXCamReactExample/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 | -------------------------------------------------------------------------------- /UXCamReactExample/ios/UXCamReactExample/main.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | #import 9 | 10 | #import "AppDelegate.h" 11 | 12 | int main(int argc, char * argv[]) { 13 | @autoreleasepool { 14 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /UXCamReactExample/ios/UXCamReactExampleTests/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 | -------------------------------------------------------------------------------- /UXCamReactExample/ios/UXCamReactExampleTests/UXCamReactExampleTests.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | #import 9 | #import 10 | 11 | #import 12 | #import 13 | 14 | #define TIMEOUT_SECONDS 600 15 | #define TEXT_TO_LOOK_FOR @"Welcome to React" 16 | 17 | @interface UXCamReactExampleTests : XCTestCase 18 | 19 | @end 20 | 21 | @implementation UXCamReactExampleTests 22 | 23 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test 24 | { 25 | if (test(view)) { 26 | return YES; 27 | } 28 | for (UIView *subview in [view subviews]) { 29 | if ([self findSubviewInView:subview matching:test]) { 30 | return YES; 31 | } 32 | } 33 | return NO; 34 | } 35 | 36 | - (void)testRendersWelcomeScreen 37 | { 38 | UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController]; 39 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 40 | BOOL foundElement = NO; 41 | 42 | __block NSString *redboxError = nil; 43 | #ifdef DEBUG 44 | RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 45 | if (level >= RCTLogLevelError) { 46 | redboxError = message; 47 | } 48 | }); 49 | #endif 50 | 51 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 52 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 53 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 54 | 55 | foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) { 56 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 57 | return YES; 58 | } 59 | return NO; 60 | }]; 61 | } 62 | 63 | #ifdef DEBUG 64 | RCTSetLogFunction(RCTDefaultLogFunction); 65 | #endif 66 | 67 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 68 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 69 | } 70 | 71 | 72 | @end 73 | -------------------------------------------------------------------------------- /UXCamReactExample/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 | -------------------------------------------------------------------------------- /UXCamReactExample/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "UXCamReactExample", 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 ." 11 | }, 12 | "dependencies": { 13 | "@react-navigation/native": "^6.1.17", 14 | "@react-navigation/native-stack": "^6.9.26", 15 | "react": "^18.2.0", 16 | "react-native": "^0.74.0", 17 | "react-native-image-picker": "^7.1.2", 18 | "react-native-safe-area-context": "^4.10.1", 19 | "react-native-screens": "^3.31.1", 20 | "react-native-ux-cam": "file:../uxcam-react-wrapper", 21 | "react-native-video": "6.0.0-beta.8" 22 | }, 23 | "devDependencies": { 24 | "@babel/core": "^7.20.0", 25 | "@babel/preset-env": "^7.20.0", 26 | "@babel/runtime": "^7.20.0", 27 | "@react-native/babel-preset": "0.74.81", 28 | "@react-native/metro-config": "0.74.81", 29 | "babel-jest": "^29.6.3", 30 | "eslint": "^8.19.0", 31 | "jest": "^29.6.3" 32 | }, 33 | "jest": { 34 | "preset": "react-native" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /UXCamReactExample/screens/HomeScreen.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Platform, StyleSheet, Text, View, Button} from 'react-native'; 3 | import RNUxcam from 'react-native-ux-cam'; 4 | import {launchImageLibrary} from 'react-native-image-picker'; 5 | import {styles} from '../App.js'; 6 | 7 | // Used to toggle the screen hiding 8 | var hideScreen = true; 9 | 10 | export function HomeScreen({navigation}) { 11 | let options = { 12 | title: 'Select Image', 13 | customButtons: [ 14 | {name: 'customOptionKey', title: 'Choose Photo from Custom Option'}, 15 | ], 16 | storageOptions: { 17 | skipBackup: true, 18 | path: 'images', 19 | }, 20 | }; 21 | 22 | function _handlePress(event) { 23 | // Toggle the whole screen being hidden 24 | // RNUxcam.occludeSensitiveScreen(hideScreen, hideScreen); 25 | hideScreen = !hideScreen; 26 | } 27 | 28 | function _handleEmptyPress(event) { 29 | // Just a placeholder button handler 30 | console.log('A button was pressed'); 31 | } 32 | 33 | return ( 34 | 35 | Welcome to UXCAm React Native Demo! 36 | 37 |