├── .buckconfig ├── .bundle └── config ├── .eslintrc.js ├── .gitignore ├── .prettierrc.js ├── .ruby-version ├── .vscode └── settings.json ├── .watchmanconfig ├── App.tsx ├── Gemfile ├── README.md ├── __tests__ └── App-test.tsx ├── android ├── app │ ├── _BUCK │ ├── build.gradle │ ├── build_defs.bzl │ ├── debug.keystore │ ├── proguard-rules.pro │ └── src │ │ ├── debug │ │ ├── AndroidManifest.xml │ │ └── java │ │ │ └── com │ │ │ └── walletapp_react │ │ │ └── ReactNativeFlipper.java │ │ └── main │ │ ├── AndroidManifest.xml │ │ ├── assets │ │ └── fonts │ │ │ ├── Lato-Bold.ttf │ │ │ └── Lato-Regular.ttf │ │ ├── java │ │ └── com │ │ │ └── walletapp_react │ │ │ ├── MainActivity.java │ │ │ ├── MainApplication.java │ │ │ └── newarchitecture │ │ │ ├── MainApplicationReactNativeHost.java │ │ │ ├── components │ │ │ └── MainComponentsRegistry.java │ │ │ └── modules │ │ │ └── MainApplicationTurboModuleManagerDelegate.java │ │ ├── jni │ │ ├── Android.mk │ │ ├── MainApplicationModuleProvider.cpp │ │ ├── MainApplicationModuleProvider.h │ │ ├── MainApplicationTurboModuleManagerDelegate.cpp │ │ ├── MainApplicationTurboModuleManagerDelegate.h │ │ ├── MainComponentsRegistry.cpp │ │ ├── MainComponentsRegistry.h │ │ └── OnLoad.cpp │ │ └── res │ │ ├── drawable │ │ └── rn_edit_text_material.xml │ │ ├── mipmap-hdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-mdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xxhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xxxhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ └── values │ │ ├── strings.xml │ │ └── styles.xml ├── build.gradle ├── gradle.properties ├── gradle │ └── wrapper │ │ ├── gradle-wrapper.jar │ │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat ├── link-assets-manifest.json └── settings.gradle ├── app.json ├── babel.config.js ├── image.d.ts ├── index.js ├── ios ├── .xcode.env ├── Podfile ├── WalletApp_React.xcodeproj │ ├── project.pbxproj │ └── xcshareddata │ │ └── xcschemes │ │ └── WalletApp_React.xcscheme ├── WalletApp_React │ ├── AppDelegate.h │ ├── AppDelegate.mm │ ├── Images.xcassets │ │ ├── AppIcon.appiconset │ │ │ └── Contents.json │ │ └── Contents.json │ ├── Info.plist │ ├── LaunchScreen.storyboard │ └── main.m ├── WalletApp_ReactTests │ ├── Info.plist │ └── WalletApp_ReactTests.m └── link-assets-manifest.json ├── metro.config.js ├── package-lock.json ├── package.json ├── react-native.config.js ├── src ├── DummyData.tsx ├── assets │ ├── adaptive-icon.png │ ├── auth │ │ ├── ic_launcher.png │ │ └── splash_logo.png │ ├── avi │ │ └── avatar.png │ ├── bgs │ │ ├── background_transparent.png │ │ └── background_v1.png │ ├── cards │ │ ├── mc.png │ │ └── visa_white.png │ ├── e-wallet-logo.png │ ├── favicon.png │ ├── fonts │ │ ├── Lato-Bold.ttf │ │ └── Lato-Regular.ttf │ ├── icon.png │ ├── icons │ │ ├── down.png │ │ └── up.png │ ├── portraits │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ └── 3.jpg │ ├── regisImage.png │ ├── screenshot │ │ ├── Balance_Page.png │ │ ├── Home_Page.png │ │ └── Welcome_Page.png │ └── splash.png ├── components │ ├── Auth │ │ └── types.ts │ ├── Balance │ │ ├── AmountSection.tsx │ │ ├── BalanceCard.tsx │ │ ├── BalanceCardSection.tsx │ │ ├── ButtonSection.tsx │ │ └── types.ts │ ├── Buttons │ │ ├── BackButton.tsx │ │ ├── RegularButton.tsx │ │ └── types.ts │ ├── Cards │ │ ├── CardItem.tsx │ │ ├── CardSection.tsx │ │ └── types.ts │ ├── Drawer │ │ ├── DrawerHome │ │ │ ├── DrawerHome.tsx │ │ │ └── style.ts │ │ └── DrawerMenu │ │ │ └── Home.tsx │ ├── Header │ │ ├── Greeting.tsx │ │ ├── Profile.tsx │ │ └── types.ts │ ├── SendMoney │ │ ├── SendMoneyItem.tsx │ │ ├── SendMoneySection.tsx │ │ └── types.ts │ ├── StockWatchlist │ │ ├── ResponsiveStockChart │ │ │ └── ResponsiveStockChart.tsx │ │ ├── StockChart │ │ │ └── StockChart.tsx │ │ └── StockInfoTable │ │ │ ├── StockInfoTable.tsx │ │ │ └── styles.ts │ ├── Texts │ │ ├── BigText.tsx │ │ ├── RegularText.tsx │ │ ├── SmallText.tsx │ │ ├── textStyles.ts │ │ └── types.tsx │ ├── Transactions │ │ ├── Transaction.tsx │ │ ├── TransactionItem.tsx │ │ ├── TransactionSection.tsx │ │ └── types.ts │ └── shared.tsx ├── config │ └── colors.tsx ├── lib │ └── getSize.ts ├── navigation │ ├── StackNavigation.tsx │ ├── Tab.routes.home.tsx │ ├── Tab.routes.register.tsx │ ├── home.routes.tsx │ └── index.tsx ├── screens │ ├── drawer │ │ └── Home │ │ │ ├── Dashboard.tsx │ │ │ └── Watchlist.tsx │ ├── stackscreens │ │ ├── Balance.tsx │ │ ├── LoginPage.tsx │ │ └── Welcome.tsx │ └── tabscreens │ │ ├── Menu │ │ ├── BalAndPos.tsx │ │ ├── Buy.tsx │ │ ├── Home.tsx │ │ ├── Quotes.tsx │ │ └── Sell.tsx │ │ └── Register │ │ ├── RegisterDocumentUpload.tsx │ │ ├── RegisterPage.tsx │ │ └── VerificationPage.tsx ├── store │ └── StateContext.tsx └── types │ └── stock.ts ├── tsconfig.json └── yarn.lock /.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /.bundle/config: -------------------------------------------------------------------------------- 1 | BUNDLE_PATH: "vendor/bundle" 2 | BUNDLE_FORCE_RUBY_PLATFORM: 1 3 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native-community', 4 | parser: '@typescript-eslint/parser', 5 | plugins: ['@typescript-eslint'], 6 | overrides: [ 7 | { 8 | files: ['*.ts', '*.tsx'], 9 | rules: { 10 | '@typescript-eslint/no-shadow': ['error'], 11 | 'no-shadow': 'off', 12 | 'no-undef': 'off', 13 | }, 14 | }, 15 | ], 16 | }; 17 | -------------------------------------------------------------------------------- /.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 | 34 | # node.js 35 | # 36 | node_modules/ 37 | npm-debug.log 38 | yarn-error.log 39 | 40 | # BUCK 41 | buck-out/ 42 | \.buckd/ 43 | *.keystore 44 | !debug.keystore 45 | 46 | # fastlane 47 | # 48 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 49 | # screenshots whenever they are needed. 50 | # For more information about the recommended setup visit: 51 | # https://docs.fastlane.tools/best-practices/source-control/ 52 | 53 | **/fastlane/report.xml 54 | **/fastlane/Preview.html 55 | **/fastlane/screenshots 56 | **/fastlane/test_output 57 | 58 | # Bundle artifact 59 | *.jsbundle 60 | 61 | # Ruby / CocoaPods 62 | /ios/Pods/ 63 | /vendor/bundle/ 64 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | arrowParens: 'avoid', 3 | bracketSameLine: true, 4 | bracketSpacing: false, 5 | singleQuote: true, 6 | trailingComma: 'all', 7 | }; 8 | -------------------------------------------------------------------------------- /.ruby-version: -------------------------------------------------------------------------------- 1 | 2.7.5 2 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "java.configuration.updateBuildConfiguration": "interactive" 3 | } -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /App.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC} from 'react'; 2 | import Navigation from './src/navigation' 3 | import { ThemeProvider, useTheme } from 'styled-components'; 4 | import { useColorScheme } from 'react-native'; 5 | import { darkTheme, lightTheme } from './src/config/colors'; 6 | 7 | 8 | const App: FC = () => { 9 | return ( 10 | 11 | ) 12 | }; 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /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.7.5' 5 | 6 | gem 'cocoapods', '~> 1.11', '>= 1.11.2' 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 |

React Native Wallet App

3 |

4 | 5 |

6 | A beautiful wallet app made using React Native CLI Typescript 7 |

8 | 9 | ## App Showcase 10 | 11 |
12 | 1.png 13 | 2.png 14 | 3.png 15 |
16 | 17 | ## Acknowledgements 18 | 19 | - [React Native CLI](https://reactnative.dev/docs/getting-started) 20 | - [Styled Components](https://styled-components.com/) 21 | - [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/) 22 | - [React Native BottomSheet](https://github.com/osdnk/react-native-reanimated-bottom-sheet) 23 | 24 | ## Run Locally 25 | 26 | Clone the project 27 | 28 | ```bash 29 | git clone https://github.com/ekoprassetyo/react-native-walletApp.git 30 | ``` 31 | 32 | Go to the project directory 33 | 34 | ```bash 35 | cd react-native-walletApp 36 | ``` 37 | 38 | Install dependencies 39 | 40 | ```bash 41 | npm install 42 | ``` 43 | 44 | Start android 45 | 46 | ```bash 47 | npx react-native run-android 48 | ``` 49 | -------------------------------------------------------------------------------- /__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: 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 | -------------------------------------------------------------------------------- /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.walletapp_react", 39 | ) 40 | 41 | android_resource( 42 | name = "res", 43 | package = "com.walletapp_react", 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 | -------------------------------------------------------------------------------- /android/app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: "com.android.application" 2 | apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" 3 | 4 | import com.android.build.OutputFile 5 | 6 | /** 7 | * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets 8 | * and bundleReleaseJsAndAssets). 9 | * These basically call `react-native bundle` with the correct arguments during the Android build 10 | * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the 11 | * bundle directly from the development server. Below you can see all the possible configurations 12 | * and their defaults. If you decide to add a configuration block, make sure to add it before the 13 | * `apply from: "../../node_modules/react-native/react.gradle"` line. 14 | * 15 | * project.ext.react = [ 16 | * // the name of the generated asset file containing your JS bundle 17 | * bundleAssetName: "index.android.bundle", 18 | * 19 | * // the entry file for bundle generation. If none specified and 20 | * // "index.android.js" exists, it will be used. Otherwise "index.js" is 21 | * // default. Can be overridden with ENTRY_FILE environment variable. 22 | * entryFile: "index.android.js", 23 | * 24 | * // https://reactnative.dev/docs/performance#enable-the-ram-format 25 | * bundleCommand: "ram-bundle", 26 | * 27 | * // whether to bundle JS and assets in debug mode 28 | * bundleInDebug: false, 29 | * 30 | * // whether to bundle JS and assets in release mode 31 | * bundleInRelease: true, 32 | * 33 | * // whether to bundle JS and assets in another build variant (if configured). 34 | * // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants 35 | * // The configuration property can be in the following formats 36 | * // 'bundleIn${productFlavor}${buildType}' 37 | * // 'bundleIn${buildType}' 38 | * // bundleInFreeDebug: true, 39 | * // bundleInPaidRelease: true, 40 | * // bundleInBeta: true, 41 | * 42 | * // whether to disable dev mode in custom build variants (by default only disabled in release) 43 | * // for example: to disable dev mode in the staging build type (if configured) 44 | * devDisabledInStaging: true, 45 | * // The configuration property can be in the following formats 46 | * // 'devDisabledIn${productFlavor}${buildType}' 47 | * // 'devDisabledIn${buildType}' 48 | * 49 | * // the root of your project, i.e. where "package.json" lives 50 | * root: "../../", 51 | * 52 | * // where to put the JS bundle asset in debug mode 53 | * jsBundleDirDebug: "$buildDir/intermediates/assets/debug", 54 | * 55 | * // where to put the JS bundle asset in release mode 56 | * jsBundleDirRelease: "$buildDir/intermediates/assets/release", 57 | * 58 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 59 | * // require('./image.png')), in debug mode 60 | * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug", 61 | * 62 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 63 | * // require('./image.png')), in release mode 64 | * resourcesDirRelease: "$buildDir/intermediates/res/merged/release", 65 | * 66 | * // by default the gradle tasks are skipped if none of the JS files or assets change; this means 67 | * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to 68 | * // date; if you have any other folders that you want to ignore for performance reasons (gradle 69 | * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/ 70 | * // for example, you might want to remove it from here. 71 | * inputExcludes: ["android/**", "ios/**"], 72 | * 73 | * // override which node gets called and with what additional arguments 74 | * nodeExecutableAndArgs: ["node"], 75 | * 76 | * // supply additional arguments to the packager 77 | * extraPackagerArgs: [] 78 | * ] 79 | */ 80 | 81 | project.ext.react = [ 82 | enableHermes: false, // clean and rebuild if changing 83 | ] 84 | 85 | apply from: "../../node_modules/react-native/react.gradle" 86 | 87 | /** 88 | * Set this to true to create two separate APKs instead of one: 89 | * - An APK that only works on ARM devices 90 | * - An APK that only works on x86 devices 91 | * The advantage is the size of the APK is reduced by about 4MB. 92 | * Upload all the APKs to the Play Store and people will download 93 | * the correct one based on the CPU architecture of their device. 94 | */ 95 | def enableSeparateBuildPerCPUArchitecture = false 96 | 97 | /** 98 | * Run Proguard to shrink the Java bytecode in release builds. 99 | */ 100 | def enableProguardInReleaseBuilds = false 101 | 102 | /** 103 | * The preferred build flavor of JavaScriptCore. 104 | * 105 | * For example, to use the international variant, you can use: 106 | * `def jscFlavor = 'org.webkit:android-jsc-intl:+'` 107 | * 108 | * The international variant includes ICU i18n library and necessary data 109 | * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that 110 | * give correct results when using with locales other than en-US. Note that 111 | * this variant is about 6MiB larger per architecture than default. 112 | */ 113 | def jscFlavor = 'org.webkit:android-jsc:+' 114 | 115 | /** 116 | * Whether to enable the Hermes VM. 117 | * 118 | * This should be set on project.ext.react and that value will be read here. If it is not set 119 | * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode 120 | * and the benefits of using Hermes will therefore be sharply reduced. 121 | */ 122 | def enableHermes = project.ext.react.get("enableHermes", false); 123 | 124 | /** 125 | * Architectures to build native code for. 126 | */ 127 | def reactNativeArchitectures() { 128 | def value = project.getProperties().get("reactNativeArchitectures") 129 | return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"] 130 | } 131 | 132 | android { 133 | ndkVersion rootProject.ext.ndkVersion 134 | 135 | compileSdkVersion rootProject.ext.compileSdkVersion 136 | 137 | defaultConfig { 138 | applicationId "com.walletapp_react" 139 | minSdkVersion rootProject.ext.minSdkVersion 140 | targetSdkVersion rootProject.ext.targetSdkVersion 141 | versionCode 1 142 | versionName "1.0" 143 | buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString() 144 | 145 | if (isNewArchitectureEnabled()) { 146 | // We configure the NDK build only if you decide to opt-in for the New Architecture. 147 | externalNativeBuild { 148 | ndkBuild { 149 | arguments "APP_PLATFORM=android-21", 150 | "APP_STL=c++_shared", 151 | "NDK_TOOLCHAIN_VERSION=clang", 152 | "GENERATED_SRC_DIR=$buildDir/generated/source", 153 | "PROJECT_BUILD_DIR=$buildDir", 154 | "REACT_ANDROID_DIR=$rootDir/../node_modules/react-native/ReactAndroid", 155 | "REACT_ANDROID_BUILD_DIR=$rootDir/../node_modules/react-native/ReactAndroid/build", 156 | "NODE_MODULES_DIR=$rootDir/../node_modules" 157 | cFlags "-Wall", "-Werror", "-fexceptions", "-frtti", "-DWITH_INSPECTOR=1" 158 | cppFlags "-std=c++17" 159 | // Make sure this target name is the same you specify inside the 160 | // src/main/jni/Android.mk file for the `LOCAL_MODULE` variable. 161 | targets "walletapp_react_appmodules" 162 | } 163 | } 164 | if (!enableSeparateBuildPerCPUArchitecture) { 165 | ndk { 166 | abiFilters (*reactNativeArchitectures()) 167 | } 168 | } 169 | } 170 | } 171 | 172 | if (isNewArchitectureEnabled()) { 173 | // We configure the NDK build only if you decide to opt-in for the New Architecture. 174 | externalNativeBuild { 175 | ndkBuild { 176 | path "$projectDir/src/main/jni/Android.mk" 177 | } 178 | } 179 | def reactAndroidProjectDir = project(':ReactAndroid').projectDir 180 | def packageReactNdkDebugLibs = tasks.register("packageReactNdkDebugLibs", Copy) { 181 | dependsOn(":ReactAndroid:packageReactNdkDebugLibsForBuck") 182 | from("$reactAndroidProjectDir/src/main/jni/prebuilt/lib") 183 | into("$buildDir/react-ndk/exported") 184 | } 185 | def packageReactNdkReleaseLibs = tasks.register("packageReactNdkReleaseLibs", Copy) { 186 | dependsOn(":ReactAndroid:packageReactNdkReleaseLibsForBuck") 187 | from("$reactAndroidProjectDir/src/main/jni/prebuilt/lib") 188 | into("$buildDir/react-ndk/exported") 189 | } 190 | afterEvaluate { 191 | // If you wish to add a custom TurboModule or component locally, 192 | // you should uncomment this line. 193 | // preBuild.dependsOn("generateCodegenArtifactsFromSchema") 194 | preDebugBuild.dependsOn(packageReactNdkDebugLibs) 195 | preReleaseBuild.dependsOn(packageReactNdkReleaseLibs) 196 | 197 | // Due to a bug inside AGP, we have to explicitly set a dependency 198 | // between configureNdkBuild* tasks and the preBuild tasks. 199 | // This can be removed once this is solved: https://issuetracker.google.com/issues/207403732 200 | configureNdkBuildRelease.dependsOn(preReleaseBuild) 201 | configureNdkBuildDebug.dependsOn(preDebugBuild) 202 | reactNativeArchitectures().each { architecture -> 203 | tasks.findByName("configureNdkBuildDebug[${architecture}]")?.configure { 204 | dependsOn("preDebugBuild") 205 | } 206 | tasks.findByName("configureNdkBuildRelease[${architecture}]")?.configure { 207 | dependsOn("preReleaseBuild") 208 | } 209 | } 210 | } 211 | } 212 | 213 | splits { 214 | abi { 215 | reset() 216 | enable enableSeparateBuildPerCPUArchitecture 217 | universalApk false // If true, also generate a universal APK 218 | include (*reactNativeArchitectures()) 219 | } 220 | } 221 | signingConfigs { 222 | debug { 223 | storeFile file('debug.keystore') 224 | storePassword 'android' 225 | keyAlias 'androiddebugkey' 226 | keyPassword 'android' 227 | } 228 | } 229 | buildTypes { 230 | debug { 231 | signingConfig signingConfigs.debug 232 | } 233 | release { 234 | // Caution! In production, you need to generate your own keystore file. 235 | // see https://reactnative.dev/docs/signed-apk-android. 236 | signingConfig signingConfigs.debug 237 | minifyEnabled enableProguardInReleaseBuilds 238 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 239 | } 240 | } 241 | 242 | // applicationVariants are e.g. debug, release 243 | applicationVariants.all { variant -> 244 | variant.outputs.each { output -> 245 | // For each separate APK per architecture, set a unique version code as described here: 246 | // https://developer.android.com/studio/build/configure-apk-splits.html 247 | // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc. 248 | def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4] 249 | def abi = output.getFilter(OutputFile.ABI) 250 | if (abi != null) { // null for the universal-debug, universal-release variants 251 | output.versionCodeOverride = 252 | defaultConfig.versionCode * 1000 + versionCodes.get(abi) 253 | } 254 | 255 | } 256 | } 257 | } 258 | 259 | dependencies { 260 | implementation fileTree(dir: "libs", include: ["*.jar"]) 261 | 262 | //noinspection GradleDynamicVersion 263 | implementation "com.facebook.react:react-native:+" // From node_modules 264 | 265 | implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0" 266 | 267 | debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") { 268 | exclude group:'com.facebook.fbjni' 269 | } 270 | 271 | debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") { 272 | exclude group:'com.facebook.flipper' 273 | exclude group:'com.squareup.okhttp3', module:'okhttp' 274 | } 275 | 276 | debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") { 277 | exclude group:'com.facebook.flipper' 278 | } 279 | 280 | if (enableHermes) { 281 | //noinspection GradleDynamicVersion 282 | implementation("com.facebook.react:hermes-engine:+") { // From node_modules 283 | exclude group:'com.facebook.fbjni' 284 | } 285 | } else { 286 | implementation jscFlavor 287 | } 288 | } 289 | 290 | if (isNewArchitectureEnabled()) { 291 | // If new architecture is enabled, we let you build RN from source 292 | // Otherwise we fallback to a prebuilt .aar bundled in the NPM package. 293 | // This will be applied to all the imported transtitive dependency. 294 | configurations.all { 295 | resolutionStrategy.dependencySubstitution { 296 | substitute(module("com.facebook.react:react-native")) 297 | .using(project(":ReactAndroid")) 298 | .because("On New Architecture we're building React Native from source") 299 | substitute(module("com.facebook.react:hermes-engine")) 300 | .using(project(":ReactAndroid:hermes-engine")) 301 | .because("On New Architecture we're building Hermes from source") 302 | } 303 | } 304 | } 305 | 306 | // Run this once to be able to run the application with BUCK 307 | // puts all compile dependencies into folder libs for BUCK to use 308 | task copyDownloadableDepsToLibs(type: Copy) { 309 | from configurations.implementation 310 | into 'libs' 311 | } 312 | 313 | apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project) 314 | 315 | def isNewArchitectureEnabled() { 316 | // To opt-in for the New Architecture, you can either: 317 | // - Set `newArchEnabled` to true inside the `gradle.properties` file 318 | // - Invoke gradle with `-newArchEnabled=true` 319 | // - Set an environment variable `ORG_GRADLE_PROJECT_newArchEnabled=true` 320 | return project.hasProperty("newArchEnabled") && project.newArchEnabled == "true" 321 | } 322 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/android/app/debug.keystore -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /android/app/src/debug/java/com/walletapp_react/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.walletapp_react; 8 | 9 | import android.content.Context; 10 | import com.facebook.flipper.android.AndroidFlipperClient; 11 | import com.facebook.flipper.android.utils.FlipperUtils; 12 | import com.facebook.flipper.core.FlipperClient; 13 | import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin; 14 | import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin; 15 | import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin; 16 | import com.facebook.flipper.plugins.inspector.DescriptorMapping; 17 | import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin; 18 | import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor; 19 | import com.facebook.flipper.plugins.network.NetworkFlipperPlugin; 20 | import com.facebook.flipper.plugins.react.ReactFlipperPlugin; 21 | import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin; 22 | import com.facebook.react.ReactInstanceEventListener; 23 | import com.facebook.react.ReactInstanceManager; 24 | import com.facebook.react.bridge.ReactContext; 25 | import com.facebook.react.modules.network.NetworkingModule; 26 | import okhttp3.OkHttpClient; 27 | 28 | public class ReactNativeFlipper { 29 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) { 30 | if (FlipperUtils.shouldEnableFlipper(context)) { 31 | final FlipperClient client = AndroidFlipperClient.getInstance(context); 32 | 33 | client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults())); 34 | client.addPlugin(new ReactFlipperPlugin()); 35 | client.addPlugin(new DatabasesFlipperPlugin(context)); 36 | client.addPlugin(new SharedPreferencesFlipperPlugin(context)); 37 | client.addPlugin(CrashReporterPlugin.getInstance()); 38 | 39 | NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin(); 40 | NetworkingModule.setCustomClientBuilder( 41 | new NetworkingModule.CustomClientBuilder() { 42 | @Override 43 | public void apply(OkHttpClient.Builder builder) { 44 | builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); 45 | } 46 | }); 47 | client.addPlugin(networkFlipperPlugin); 48 | client.start(); 49 | 50 | // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized 51 | // Hence we run if after all native modules have been initialized 52 | ReactContext reactContext = reactInstanceManager.getCurrentReactContext(); 53 | if (reactContext == null) { 54 | reactInstanceManager.addReactInstanceEventListener( 55 | new ReactInstanceEventListener() { 56 | @Override 57 | public void onReactContextInitialized(ReactContext reactContext) { 58 | reactInstanceManager.removeReactInstanceEventListener(this); 59 | reactContext.runOnNativeModulesQueueThread( 60 | new Runnable() { 61 | @Override 62 | public void run() { 63 | client.addPlugin(new FrescoFlipperPlugin()); 64 | } 65 | }); 66 | } 67 | }); 68 | } else { 69 | client.addPlugin(new FrescoFlipperPlugin()); 70 | } 71 | } 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 13 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Lato-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/android/app/src/main/assets/fonts/Lato-Bold.ttf -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/Lato-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/android/app/src/main/assets/fonts/Lato-Regular.ttf -------------------------------------------------------------------------------- /android/app/src/main/java/com/walletapp_react/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.walletapp_react; 2 | 3 | import com.facebook.react.ReactActivity; 4 | import com.facebook.react.ReactActivityDelegate; 5 | import com.facebook.react.ReactRootView; 6 | 7 | public class MainActivity extends ReactActivity { 8 | 9 | /** 10 | * Returns the name of the main component registered from JavaScript. This is used to schedule 11 | * rendering of the component. 12 | */ 13 | @Override 14 | protected String getMainComponentName() { 15 | return "WalletApp_React"; 16 | } 17 | 18 | /** 19 | * Returns the instance of the {@link ReactActivityDelegate}. There the RootView is created and 20 | * you can specify the renderer you wish to use - the new renderer (Fabric) or the old renderer 21 | * (Paper). 22 | */ 23 | @Override 24 | protected ReactActivityDelegate createReactActivityDelegate() { 25 | return new MainActivityDelegate(this, getMainComponentName()); 26 | } 27 | 28 | public static class MainActivityDelegate extends ReactActivityDelegate { 29 | public MainActivityDelegate(ReactActivity activity, String mainComponentName) { 30 | super(activity, mainComponentName); 31 | } 32 | 33 | @Override 34 | protected ReactRootView createRootView() { 35 | ReactRootView reactRootView = new ReactRootView(getContext()); 36 | // If you opted-in for the New Architecture, we enable the Fabric Renderer. 37 | reactRootView.setIsFabric(BuildConfig.IS_NEW_ARCHITECTURE_ENABLED); 38 | return reactRootView; 39 | } 40 | 41 | @Override 42 | protected boolean isConcurrentRootEnabled() { 43 | // If you opted-in for the New Architecture, we enable Concurrent Root (i.e. React 18). 44 | // More on this on https://reactjs.org/blog/2022/03/29/react-v18.html 45 | return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /android/app/src/main/java/com/walletapp_react/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.walletapp_react; 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.facebook.react.ReactInstanceManager; 8 | import com.facebook.react.ReactNativeHost; 9 | import com.facebook.react.ReactPackage; 10 | import com.facebook.react.config.ReactFeatureFlags; 11 | import com.facebook.soloader.SoLoader; 12 | import com.walletapp_react.newarchitecture.MainApplicationReactNativeHost; 13 | import java.lang.reflect.InvocationTargetException; 14 | import java.util.List; 15 | 16 | public class MainApplication extends Application implements ReactApplication { 17 | 18 | private final ReactNativeHost mReactNativeHost = 19 | new ReactNativeHost(this) { 20 | @Override 21 | public boolean getUseDeveloperSupport() { 22 | return BuildConfig.DEBUG; 23 | } 24 | 25 | @Override 26 | protected List getPackages() { 27 | @SuppressWarnings("UnnecessaryLocalVariable") 28 | List packages = new PackageList(this).getPackages(); 29 | // Packages that cannot be autolinked yet can be added manually here, for example: 30 | // packages.add(new MyReactNativePackage()); 31 | return packages; 32 | } 33 | 34 | @Override 35 | protected String getJSMainModuleName() { 36 | return "index"; 37 | } 38 | }; 39 | 40 | private final ReactNativeHost mNewArchitectureNativeHost = 41 | new MainApplicationReactNativeHost(this); 42 | 43 | @Override 44 | public ReactNativeHost getReactNativeHost() { 45 | if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) { 46 | return mNewArchitectureNativeHost; 47 | } else { 48 | return mReactNativeHost; 49 | } 50 | } 51 | 52 | @Override 53 | public void onCreate() { 54 | super.onCreate(); 55 | // If you opted-in for the New Architecture, we enable the TurboModule system 56 | ReactFeatureFlags.useTurboModules = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; 57 | SoLoader.init(this, /* native exopackage */ false); 58 | initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 59 | } 60 | 61 | /** 62 | * Loads Flipper in React Native templates. Call this in the onCreate method with something like 63 | * initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 64 | * 65 | * @param context 66 | * @param reactInstanceManager 67 | */ 68 | private static void initializeFlipper( 69 | Context context, ReactInstanceManager reactInstanceManager) { 70 | if (BuildConfig.DEBUG) { 71 | try { 72 | /* 73 | We use reflection here to pick up the class that initializes Flipper, 74 | since Flipper library is not available in release mode 75 | */ 76 | Class aClass = Class.forName("com.walletapp_react.ReactNativeFlipper"); 77 | aClass 78 | .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class) 79 | .invoke(null, context, reactInstanceManager); 80 | } catch (ClassNotFoundException e) { 81 | e.printStackTrace(); 82 | } catch (NoSuchMethodException e) { 83 | e.printStackTrace(); 84 | } catch (IllegalAccessException e) { 85 | e.printStackTrace(); 86 | } catch (InvocationTargetException e) { 87 | e.printStackTrace(); 88 | } 89 | } 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /android/app/src/main/java/com/walletapp_react/newarchitecture/MainApplicationReactNativeHost.java: -------------------------------------------------------------------------------- 1 | package com.walletapp_react.newarchitecture; 2 | 3 | import android.app.Application; 4 | import androidx.annotation.NonNull; 5 | import com.facebook.react.PackageList; 6 | import com.facebook.react.ReactInstanceManager; 7 | import com.facebook.react.ReactNativeHost; 8 | import com.facebook.react.ReactPackage; 9 | import com.facebook.react.ReactPackageTurboModuleManagerDelegate; 10 | import com.facebook.react.bridge.JSIModulePackage; 11 | import com.facebook.react.bridge.JSIModuleProvider; 12 | import com.facebook.react.bridge.JSIModuleSpec; 13 | import com.facebook.react.bridge.JSIModuleType; 14 | import com.facebook.react.bridge.JavaScriptContextHolder; 15 | import com.facebook.react.bridge.ReactApplicationContext; 16 | import com.facebook.react.bridge.UIManager; 17 | import com.facebook.react.fabric.ComponentFactory; 18 | import com.facebook.react.fabric.CoreComponentsRegistry; 19 | import com.facebook.react.fabric.FabricJSIModuleProvider; 20 | import com.facebook.react.fabric.ReactNativeConfig; 21 | import com.facebook.react.uimanager.ViewManagerRegistry; 22 | import com.walletapp_react.BuildConfig; 23 | import com.walletapp_react.newarchitecture.components.MainComponentsRegistry; 24 | import com.walletapp_react.newarchitecture.modules.MainApplicationTurboModuleManagerDelegate; 25 | import java.util.ArrayList; 26 | import java.util.List; 27 | 28 | /** 29 | * A {@link ReactNativeHost} that helps you load everything needed for the New Architecture, both 30 | * TurboModule delegates and the Fabric Renderer. 31 | * 32 | *

Please note that this class is used ONLY if you opt-in for the New Architecture (see the 33 | * `newArchEnabled` property). Is ignored otherwise. 34 | */ 35 | public class MainApplicationReactNativeHost extends ReactNativeHost { 36 | public MainApplicationReactNativeHost(Application application) { 37 | super(application); 38 | } 39 | 40 | @Override 41 | public boolean getUseDeveloperSupport() { 42 | return BuildConfig.DEBUG; 43 | } 44 | 45 | @Override 46 | protected List getPackages() { 47 | List packages = new PackageList(this).getPackages(); 48 | // Packages that cannot be autolinked yet can be added manually here, for example: 49 | // packages.add(new MyReactNativePackage()); 50 | // TurboModules must also be loaded here providing a valid TurboReactPackage implementation: 51 | // packages.add(new TurboReactPackage() { ... }); 52 | // If you have custom Fabric Components, their ViewManagers should also be loaded here 53 | // inside a ReactPackage. 54 | return packages; 55 | } 56 | 57 | @Override 58 | protected String getJSMainModuleName() { 59 | return "index"; 60 | } 61 | 62 | @NonNull 63 | @Override 64 | protected ReactPackageTurboModuleManagerDelegate.Builder 65 | getReactPackageTurboModuleManagerDelegateBuilder() { 66 | // Here we provide the ReactPackageTurboModuleManagerDelegate Builder. This is necessary 67 | // for the new architecture and to use TurboModules correctly. 68 | return new MainApplicationTurboModuleManagerDelegate.Builder(); 69 | } 70 | 71 | @Override 72 | protected JSIModulePackage getJSIModulePackage() { 73 | return new JSIModulePackage() { 74 | @Override 75 | public List getJSIModules( 76 | final ReactApplicationContext reactApplicationContext, 77 | final JavaScriptContextHolder jsContext) { 78 | final List specs = new ArrayList<>(); 79 | 80 | // Here we provide a new JSIModuleSpec that will be responsible of providing the 81 | // custom Fabric Components. 82 | specs.add( 83 | new JSIModuleSpec() { 84 | @Override 85 | public JSIModuleType getJSIModuleType() { 86 | return JSIModuleType.UIManager; 87 | } 88 | 89 | @Override 90 | public JSIModuleProvider getJSIModuleProvider() { 91 | final ComponentFactory componentFactory = new ComponentFactory(); 92 | CoreComponentsRegistry.register(componentFactory); 93 | 94 | // Here we register a Components Registry. 95 | // The one that is generated with the template contains no components 96 | // and just provides you the one from React Native core. 97 | MainComponentsRegistry.register(componentFactory); 98 | 99 | final ReactInstanceManager reactInstanceManager = getReactInstanceManager(); 100 | 101 | ViewManagerRegistry viewManagerRegistry = 102 | new ViewManagerRegistry( 103 | reactInstanceManager.getOrCreateViewManagers(reactApplicationContext)); 104 | 105 | return new FabricJSIModuleProvider( 106 | reactApplicationContext, 107 | componentFactory, 108 | ReactNativeConfig.DEFAULT_CONFIG, 109 | viewManagerRegistry); 110 | } 111 | }); 112 | return specs; 113 | } 114 | }; 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /android/app/src/main/java/com/walletapp_react/newarchitecture/components/MainComponentsRegistry.java: -------------------------------------------------------------------------------- 1 | package com.walletapp_react.newarchitecture.components; 2 | 3 | import com.facebook.jni.HybridData; 4 | import com.facebook.proguard.annotations.DoNotStrip; 5 | import com.facebook.react.fabric.ComponentFactory; 6 | import com.facebook.soloader.SoLoader; 7 | 8 | /** 9 | * Class responsible to load the custom Fabric Components. This class has native methods and needs a 10 | * corresponding C++ implementation/header file to work correctly (already placed inside the jni/ 11 | * folder for you). 12 | * 13 | *

Please note that this class is used ONLY if you opt-in for the New Architecture (see the 14 | * `newArchEnabled` property). Is ignored otherwise. 15 | */ 16 | @DoNotStrip 17 | public class MainComponentsRegistry { 18 | static { 19 | SoLoader.loadLibrary("fabricjni"); 20 | } 21 | 22 | @DoNotStrip private final HybridData mHybridData; 23 | 24 | @DoNotStrip 25 | private native HybridData initHybrid(ComponentFactory componentFactory); 26 | 27 | @DoNotStrip 28 | private MainComponentsRegistry(ComponentFactory componentFactory) { 29 | mHybridData = initHybrid(componentFactory); 30 | } 31 | 32 | @DoNotStrip 33 | public static MainComponentsRegistry register(ComponentFactory componentFactory) { 34 | return new MainComponentsRegistry(componentFactory); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /android/app/src/main/java/com/walletapp_react/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate.java: -------------------------------------------------------------------------------- 1 | package com.walletapp_react.newarchitecture.modules; 2 | 3 | import com.facebook.jni.HybridData; 4 | import com.facebook.react.ReactPackage; 5 | import com.facebook.react.ReactPackageTurboModuleManagerDelegate; 6 | import com.facebook.react.bridge.ReactApplicationContext; 7 | import com.facebook.soloader.SoLoader; 8 | import java.util.List; 9 | 10 | /** 11 | * Class responsible to load the TurboModules. This class has native methods and needs a 12 | * corresponding C++ implementation/header file to work correctly (already placed inside the jni/ 13 | * folder for you). 14 | * 15 | *

Please note that this class is used ONLY if you opt-in for the New Architecture (see the 16 | * `newArchEnabled` property). Is ignored otherwise. 17 | */ 18 | public class MainApplicationTurboModuleManagerDelegate 19 | extends ReactPackageTurboModuleManagerDelegate { 20 | 21 | private static volatile boolean sIsSoLibraryLoaded; 22 | 23 | protected MainApplicationTurboModuleManagerDelegate( 24 | ReactApplicationContext reactApplicationContext, List packages) { 25 | super(reactApplicationContext, packages); 26 | } 27 | 28 | protected native HybridData initHybrid(); 29 | 30 | native boolean canCreateTurboModule(String moduleName); 31 | 32 | public static class Builder extends ReactPackageTurboModuleManagerDelegate.Builder { 33 | protected MainApplicationTurboModuleManagerDelegate build( 34 | ReactApplicationContext context, List packages) { 35 | return new MainApplicationTurboModuleManagerDelegate(context, packages); 36 | } 37 | } 38 | 39 | @Override 40 | protected synchronized void maybeLoadOtherSoLibraries() { 41 | if (!sIsSoLibraryLoaded) { 42 | // If you change the name of your application .so file in the Android.mk file, 43 | // make sure you update the name here as well. 44 | SoLoader.loadLibrary("walletapp_react_appmodules"); 45 | sIsSoLibraryLoaded = true; 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /android/app/src/main/jni/Android.mk: -------------------------------------------------------------------------------- 1 | THIS_DIR := $(call my-dir) 2 | 3 | include $(REACT_ANDROID_DIR)/Android-prebuilt.mk 4 | 5 | # If you wish to add a custom TurboModule or Fabric component in your app you 6 | # will have to include the following autogenerated makefile. 7 | # include $(GENERATED_SRC_DIR)/codegen/jni/Android.mk 8 | include $(CLEAR_VARS) 9 | 10 | LOCAL_PATH := $(THIS_DIR) 11 | 12 | # You can customize the name of your application .so file here. 13 | LOCAL_MODULE := walletapp_react_appmodules 14 | 15 | LOCAL_C_INCLUDES := $(LOCAL_PATH) 16 | LOCAL_SRC_FILES := $(wildcard $(LOCAL_PATH)/*.cpp) 17 | LOCAL_EXPORT_C_INCLUDES := $(LOCAL_PATH) 18 | 19 | # If you wish to add a custom TurboModule or Fabric component in your app you 20 | # will have to uncomment those lines to include the generated source 21 | # files from the codegen (placed in $(GENERATED_SRC_DIR)/codegen/jni) 22 | # 23 | # LOCAL_C_INCLUDES += $(GENERATED_SRC_DIR)/codegen/jni 24 | # LOCAL_SRC_FILES += $(wildcard $(GENERATED_SRC_DIR)/codegen/jni/*.cpp) 25 | # LOCAL_EXPORT_C_INCLUDES += $(GENERATED_SRC_DIR)/codegen/jni 26 | 27 | # Here you should add any native library you wish to depend on. 28 | LOCAL_SHARED_LIBRARIES := \ 29 | libfabricjni \ 30 | libfbjni \ 31 | libfolly_runtime \ 32 | libglog \ 33 | libjsi \ 34 | libreact_codegen_rncore \ 35 | libreact_debug \ 36 | libreact_nativemodule_core \ 37 | libreact_render_componentregistry \ 38 | libreact_render_core \ 39 | libreact_render_debug \ 40 | libreact_render_graphics \ 41 | librrc_view \ 42 | libruntimeexecutor \ 43 | libturbomodulejsijni \ 44 | libyoga 45 | 46 | LOCAL_CFLAGS := -DLOG_TAG=\"ReactNative\" -fexceptions -frtti -std=c++17 -Wall 47 | 48 | include $(BUILD_SHARED_LIBRARY) 49 | -------------------------------------------------------------------------------- /android/app/src/main/jni/MainApplicationModuleProvider.cpp: -------------------------------------------------------------------------------- 1 | #include "MainApplicationModuleProvider.h" 2 | 3 | #include 4 | 5 | namespace facebook { 6 | namespace react { 7 | 8 | std::shared_ptr MainApplicationModuleProvider( 9 | const std::string moduleName, 10 | const JavaTurboModule::InitParams ¶ms) { 11 | // Here you can provide your own module provider for TurboModules coming from 12 | // either your application or from external libraries. The approach to follow 13 | // is similar to the following (for a library called `samplelibrary`: 14 | // 15 | // auto module = samplelibrary_ModuleProvider(moduleName, params); 16 | // if (module != nullptr) { 17 | // return module; 18 | // } 19 | // return rncore_ModuleProvider(moduleName, params); 20 | return rncore_ModuleProvider(moduleName, params); 21 | } 22 | 23 | } // namespace react 24 | } // namespace facebook 25 | -------------------------------------------------------------------------------- /android/app/src/main/jni/MainApplicationModuleProvider.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | 3 | #include 4 | #include 5 | 6 | #include 7 | 8 | namespace facebook { 9 | namespace react { 10 | 11 | std::shared_ptr MainApplicationModuleProvider( 12 | const std::string moduleName, 13 | const JavaTurboModule::InitParams ¶ms); 14 | 15 | } // namespace react 16 | } // namespace facebook 17 | -------------------------------------------------------------------------------- /android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.cpp: -------------------------------------------------------------------------------- 1 | #include "MainApplicationTurboModuleManagerDelegate.h" 2 | #include "MainApplicationModuleProvider.h" 3 | 4 | namespace facebook { 5 | namespace react { 6 | 7 | jni::local_ref 8 | MainApplicationTurboModuleManagerDelegate::initHybrid( 9 | jni::alias_ref) { 10 | return makeCxxInstance(); 11 | } 12 | 13 | void MainApplicationTurboModuleManagerDelegate::registerNatives() { 14 | registerHybrid({ 15 | makeNativeMethod( 16 | "initHybrid", MainApplicationTurboModuleManagerDelegate::initHybrid), 17 | makeNativeMethod( 18 | "canCreateTurboModule", 19 | MainApplicationTurboModuleManagerDelegate::canCreateTurboModule), 20 | }); 21 | } 22 | 23 | std::shared_ptr 24 | MainApplicationTurboModuleManagerDelegate::getTurboModule( 25 | const std::string name, 26 | const std::shared_ptr jsInvoker) { 27 | // Not implemented yet: provide pure-C++ NativeModules here. 28 | return nullptr; 29 | } 30 | 31 | std::shared_ptr 32 | MainApplicationTurboModuleManagerDelegate::getTurboModule( 33 | const std::string name, 34 | const JavaTurboModule::InitParams ¶ms) { 35 | return MainApplicationModuleProvider(name, params); 36 | } 37 | 38 | bool MainApplicationTurboModuleManagerDelegate::canCreateTurboModule( 39 | std::string name) { 40 | return getTurboModule(name, nullptr) != nullptr || 41 | getTurboModule(name, {.moduleName = name}) != nullptr; 42 | } 43 | 44 | } // namespace react 45 | } // namespace facebook 46 | -------------------------------------------------------------------------------- /android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.h: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | 4 | #include 5 | #include 6 | 7 | namespace facebook { 8 | namespace react { 9 | 10 | class MainApplicationTurboModuleManagerDelegate 11 | : public jni::HybridClass< 12 | MainApplicationTurboModuleManagerDelegate, 13 | TurboModuleManagerDelegate> { 14 | public: 15 | // Adapt it to the package you used for your Java class. 16 | static constexpr auto kJavaDescriptor = 17 | "Lcom/walletapp_react/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate;"; 18 | 19 | static jni::local_ref initHybrid(jni::alias_ref); 20 | 21 | static void registerNatives(); 22 | 23 | std::shared_ptr getTurboModule( 24 | const std::string name, 25 | const std::shared_ptr jsInvoker) override; 26 | std::shared_ptr getTurboModule( 27 | const std::string name, 28 | const JavaTurboModule::InitParams ¶ms) override; 29 | 30 | /** 31 | * Test-only method. Allows user to verify whether a TurboModule can be 32 | * created by instances of this class. 33 | */ 34 | bool canCreateTurboModule(std::string name); 35 | }; 36 | 37 | } // namespace react 38 | } // namespace facebook 39 | -------------------------------------------------------------------------------- /android/app/src/main/jni/MainComponentsRegistry.cpp: -------------------------------------------------------------------------------- 1 | #include "MainComponentsRegistry.h" 2 | 3 | #include 4 | #include 5 | #include 6 | #include 7 | 8 | namespace facebook { 9 | namespace react { 10 | 11 | MainComponentsRegistry::MainComponentsRegistry(ComponentFactory *delegate) {} 12 | 13 | std::shared_ptr 14 | MainComponentsRegistry::sharedProviderRegistry() { 15 | auto providerRegistry = CoreComponentsRegistry::sharedProviderRegistry(); 16 | 17 | // Custom Fabric Components go here. You can register custom 18 | // components coming from your App or from 3rd party libraries here. 19 | // 20 | // providerRegistry->add(concreteComponentDescriptorProvider< 21 | // AocViewerComponentDescriptor>()); 22 | return providerRegistry; 23 | } 24 | 25 | jni::local_ref 26 | MainComponentsRegistry::initHybrid( 27 | jni::alias_ref, 28 | ComponentFactory *delegate) { 29 | auto instance = makeCxxInstance(delegate); 30 | 31 | auto buildRegistryFunction = 32 | [](EventDispatcher::Weak const &eventDispatcher, 33 | ContextContainer::Shared const &contextContainer) 34 | -> ComponentDescriptorRegistry::Shared { 35 | auto registry = MainComponentsRegistry::sharedProviderRegistry() 36 | ->createComponentDescriptorRegistry( 37 | {eventDispatcher, contextContainer}); 38 | 39 | auto mutableRegistry = 40 | std::const_pointer_cast(registry); 41 | 42 | mutableRegistry->setFallbackComponentDescriptor( 43 | std::make_shared( 44 | ComponentDescriptorParameters{ 45 | eventDispatcher, contextContainer, nullptr})); 46 | 47 | return registry; 48 | }; 49 | 50 | delegate->buildRegistryFunction = buildRegistryFunction; 51 | return instance; 52 | } 53 | 54 | void MainComponentsRegistry::registerNatives() { 55 | registerHybrid({ 56 | makeNativeMethod("initHybrid", MainComponentsRegistry::initHybrid), 57 | }); 58 | } 59 | 60 | } // namespace react 61 | } // namespace facebook 62 | -------------------------------------------------------------------------------- /android/app/src/main/jni/MainComponentsRegistry.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | 3 | #include 4 | #include 5 | #include 6 | #include 7 | 8 | namespace facebook { 9 | namespace react { 10 | 11 | class MainComponentsRegistry 12 | : public facebook::jni::HybridClass { 13 | public: 14 | // Adapt it to the package you used for your Java class. 15 | constexpr static auto kJavaDescriptor = 16 | "Lcom/walletapp_react/newarchitecture/components/MainComponentsRegistry;"; 17 | 18 | static void registerNatives(); 19 | 20 | MainComponentsRegistry(ComponentFactory *delegate); 21 | 22 | private: 23 | static std::shared_ptr 24 | sharedProviderRegistry(); 25 | 26 | static jni::local_ref initHybrid( 27 | jni::alias_ref, 28 | ComponentFactory *delegate); 29 | }; 30 | 31 | } // namespace react 32 | } // namespace facebook 33 | -------------------------------------------------------------------------------- /android/app/src/main/jni/OnLoad.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include "MainApplicationTurboModuleManagerDelegate.h" 3 | #include "MainComponentsRegistry.h" 4 | 5 | JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM *vm, void *) { 6 | return facebook::jni::initialize(vm, [] { 7 | facebook::react::MainApplicationTurboModuleManagerDelegate:: 8 | registerNatives(); 9 | facebook::react::MainComponentsRegistry::registerNatives(); 10 | }); 11 | } 12 | -------------------------------------------------------------------------------- /android/app/src/main/res/drawable/rn_edit_text_material.xml: -------------------------------------------------------------------------------- 1 | 2 | 16 | 21 | 22 | 23 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | WalletApp_React 3 | 4 | -------------------------------------------------------------------------------- /android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /android/build.gradle: -------------------------------------------------------------------------------- 1 | import org.apache.tools.ant.taskdefs.condition.Os 2 | 3 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 4 | 5 | buildscript { 6 | ext { 7 | buildToolsVersion = "31.0.0" 8 | minSdkVersion = 21 9 | compileSdkVersion = 31 10 | targetSdkVersion = 31 11 | 12 | if (System.properties['os.arch'] == "aarch64") { 13 | // For M1 Users we need to use the NDK 24 which added support for aarch64 14 | ndkVersion = "24.0.8215888" 15 | } else { 16 | // Otherwise we default to the side-by-side NDK version from AGP. 17 | ndkVersion = "21.4.7075529" 18 | } 19 | } 20 | repositories { 21 | google() 22 | mavenCentral() 23 | } 24 | dependencies { 25 | classpath("com.android.tools.build:gradle:7.1.1") 26 | classpath("com.facebook.react:react-native-gradle-plugin") 27 | classpath("de.undercouch:gradle-download-task:5.0.1") 28 | // NOTE: Do not place your application dependencies here; they belong 29 | // in the individual module build.gradle files 30 | } 31 | } 32 | 33 | allprojects { 34 | repositories { 35 | maven { 36 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 37 | url("$rootDir/../node_modules/react-native/android") 38 | } 39 | maven { 40 | // Android JSC is installed from npm 41 | url("$rootDir/../node_modules/jsc-android/dist") 42 | } 43 | mavenCentral { 44 | // We don't want to fetch react-native from Maven Central as there are 45 | // older versions over there. 46 | content { 47 | excludeGroup "com.facebook.react" 48 | } 49 | } 50 | google() 51 | maven { url 'https://www.jitpack.io' } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx512m -XX:MaxMetaspaceSize=256m 13 | org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | # AndroidX package structure to make it clearer which packages are bundled with the 21 | # Android operating system, and which are packaged with your app's APK 22 | # https://developer.android.com/topic/libraries/support-library/androidx-rn 23 | android.useAndroidX=true 24 | # Automatically convert third-party libraries to use AndroidX 25 | android.enableJetifier=true 26 | 27 | # Version of flipper SDK to use with React Native 28 | FLIPPER_VERSION=0.125.0 29 | 30 | # Use this property to specify which architecture you want to build. 31 | # You can also override it from the CLI using 32 | # ./gradlew -PreactNativeArchitectures=x86_64 33 | reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64 34 | 35 | # Use this property to enable support to the new architecture. 36 | # This will allow you to use TurboModules and the Fabric render in 37 | # your application. You should enable this flag either if you want 38 | # to write custom TurboModules/Fabric components OR use libraries that 39 | # are providing them. 40 | newArchEnabled=false 41 | -------------------------------------------------------------------------------- /android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-7.3.3-all.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /android/gradlew: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | # 4 | # Copyright © 2015-2021 the original authors. 5 | # 6 | # Licensed under the Apache License, Version 2.0 (the "License"); 7 | # you may not use this file except in compliance with the License. 8 | # You may obtain a copy of the License at 9 | # 10 | # https://www.apache.org/licenses/LICENSE-2.0 11 | # 12 | # Unless required by applicable law or agreed to in writing, software 13 | # distributed under the License is distributed on an "AS IS" BASIS, 14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | # See the License for the specific language governing permissions and 16 | # limitations under the License. 17 | # 18 | 19 | ############################################################################## 20 | # 21 | # Gradle start up script for POSIX generated by Gradle. 22 | # 23 | # Important for running: 24 | # 25 | # (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is 26 | # noncompliant, but you have some other compliant shell such as ksh or 27 | # bash, then to run this script, type that shell name before the whole 28 | # command line, like: 29 | # 30 | # ksh Gradle 31 | # 32 | # Busybox and similar reduced shells will NOT work, because this script 33 | # requires all of these POSIX shell features: 34 | # * functions; 35 | # * expansions «$var», «${var}», «${var:-default}», «${var+SET}», 36 | # «${var#prefix}», «${var%suffix}», and «$( cmd )»; 37 | # * compound commands having a testable exit status, especially «case»; 38 | # * various built-in commands including «command», «set», and «ulimit». 39 | # 40 | # Important for patching: 41 | # 42 | # (2) This script targets any POSIX shell, so it avoids extensions provided 43 | # by Bash, Ksh, etc; in particular arrays are avoided. 44 | # 45 | # The "traditional" practice of packing multiple parameters into a 46 | # space-separated string is a well documented source of bugs and security 47 | # problems, so this is (mostly) avoided, by progressively accumulating 48 | # options in "$@", and eventually passing that to Java. 49 | # 50 | # Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS, 51 | # and GRADLE_OPTS) rely on word-splitting, this is performed explicitly; 52 | # see the in-line comments for details. 53 | # 54 | # There are tweaks for specific operating systems such as AIX, CygWin, 55 | # Darwin, MinGW, and NonStop. 56 | # 57 | # (3) This script is generated from the Groovy template 58 | # https://github.com/gradle/gradle/blob/master/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt 59 | # within the Gradle project. 60 | # 61 | # You can find Gradle at https://github.com/gradle/gradle/. 62 | # 63 | ############################################################################## 64 | 65 | # Attempt to set APP_HOME 66 | 67 | # Resolve links: $0 may be a link 68 | app_path=$0 69 | 70 | # Need this for daisy-chained symlinks. 71 | while 72 | APP_HOME=${app_path%"${app_path##*/}"} # leaves a trailing /; empty if no leading path 73 | [ -h "$app_path" ] 74 | do 75 | ls=$( ls -ld "$app_path" ) 76 | link=${ls#*' -> '} 77 | case $link in #( 78 | /*) app_path=$link ;; #( 79 | *) app_path=$APP_HOME$link ;; 80 | esac 81 | done 82 | 83 | APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit 84 | 85 | APP_NAME="Gradle" 86 | APP_BASE_NAME=${0##*/} 87 | 88 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 89 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' 90 | 91 | # Use the maximum available, or set MAX_FD != -1 to use that value. 92 | MAX_FD=maximum 93 | 94 | warn () { 95 | echo "$*" 96 | } >&2 97 | 98 | die () { 99 | echo 100 | echo "$*" 101 | echo 102 | exit 1 103 | } >&2 104 | 105 | # OS specific support (must be 'true' or 'false'). 106 | cygwin=false 107 | msys=false 108 | darwin=false 109 | nonstop=false 110 | case "$( uname )" in #( 111 | CYGWIN* ) cygwin=true ;; #( 112 | Darwin* ) darwin=true ;; #( 113 | MSYS* | MINGW* ) msys=true ;; #( 114 | NONSTOP* ) nonstop=true ;; 115 | esac 116 | 117 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 118 | 119 | 120 | # Determine the Java command to use to start the JVM. 121 | if [ -n "$JAVA_HOME" ] ; then 122 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 123 | # IBM's JDK on AIX uses strange locations for the executables 124 | JAVACMD=$JAVA_HOME/jre/sh/java 125 | else 126 | JAVACMD=$JAVA_HOME/bin/java 127 | fi 128 | if [ ! -x "$JAVACMD" ] ; then 129 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 130 | 131 | Please set the JAVA_HOME variable in your environment to match the 132 | location of your Java installation." 133 | fi 134 | else 135 | JAVACMD=java 136 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 137 | 138 | Please set the JAVA_HOME variable in your environment to match the 139 | location of your Java installation." 140 | fi 141 | 142 | # Increase the maximum file descriptors if we can. 143 | if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then 144 | case $MAX_FD in #( 145 | max*) 146 | MAX_FD=$( ulimit -H -n ) || 147 | warn "Could not query maximum file descriptor limit" 148 | esac 149 | case $MAX_FD in #( 150 | '' | soft) :;; #( 151 | *) 152 | ulimit -n "$MAX_FD" || 153 | warn "Could not set maximum file descriptor limit to $MAX_FD" 154 | esac 155 | fi 156 | 157 | # Collect all arguments for the java command, stacking in reverse order: 158 | # * args from the command line 159 | # * the main class name 160 | # * -classpath 161 | # * -D...appname settings 162 | # * --module-path (only if needed) 163 | # * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables. 164 | 165 | # For Cygwin or MSYS, switch paths to Windows format before running java 166 | if "$cygwin" || "$msys" ; then 167 | APP_HOME=$( cygpath --path --mixed "$APP_HOME" ) 168 | CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" ) 169 | 170 | JAVACMD=$( cygpath --unix "$JAVACMD" ) 171 | 172 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 173 | for arg do 174 | if 175 | case $arg in #( 176 | -*) false ;; # don't mess with options #( 177 | /?*) t=${arg#/} t=/${t%%/*} # looks like a POSIX filepath 178 | [ -e "$t" ] ;; #( 179 | *) false ;; 180 | esac 181 | then 182 | arg=$( cygpath --path --ignore --mixed "$arg" ) 183 | fi 184 | # Roll the args list around exactly as many times as the number of 185 | # args, so each arg winds up back in the position where it started, but 186 | # possibly modified. 187 | # 188 | # NB: a `for` loop captures its iteration list before it begins, so 189 | # changing the positional parameters here affects neither the number of 190 | # iterations, nor the values presented in `arg`. 191 | shift # remove old arg 192 | set -- "$@" "$arg" # push replacement arg 193 | done 194 | fi 195 | 196 | # Collect all arguments for the java command; 197 | # * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of 198 | # shell script including quotes and variable substitutions, so put them in 199 | # double quotes to make sure that they get re-expanded; and 200 | # * put everything else in single quotes, so that it's not re-expanded. 201 | 202 | set -- \ 203 | "-Dorg.gradle.appname=$APP_BASE_NAME" \ 204 | -classpath "$CLASSPATH" \ 205 | org.gradle.wrapper.GradleWrapperMain \ 206 | "$@" 207 | 208 | # Use "xargs" to parse quoted args. 209 | # 210 | # With -n1 it outputs one arg per line, with the quotes and backslashes removed. 211 | # 212 | # In Bash we could simply go: 213 | # 214 | # readarray ARGS < <( xargs -n1 <<<"$var" ) && 215 | # set -- "${ARGS[@]}" "$@" 216 | # 217 | # but POSIX shell has neither arrays nor command substitution, so instead we 218 | # post-process each arg (as a line of input to sed) to backslash-escape any 219 | # character that might be a shell metacharacter, then use eval to reverse 220 | # that process (while maintaining the separation between arguments), and wrap 221 | # the whole thing up as a single "set" statement. 222 | # 223 | # This will of course break if any of these variables contains a newline or 224 | # an unmatched quote. 225 | # 226 | 227 | eval "set -- $( 228 | printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" | 229 | xargs -n1 | 230 | sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' | 231 | tr '\n' ' ' 232 | )" '"$@"' 233 | 234 | exec "$JAVACMD" "$@" 235 | -------------------------------------------------------------------------------- /android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @rem 2 | @rem Copyright 2015 the original author or authors. 3 | @rem 4 | @rem Licensed under the Apache License, Version 2.0 (the "License"); 5 | @rem you may not use this file except in compliance with the License. 6 | @rem You may obtain a copy of the License at 7 | @rem 8 | @rem https://www.apache.org/licenses/LICENSE-2.0 9 | @rem 10 | @rem Unless required by applicable law or agreed to in writing, software 11 | @rem distributed under the License is distributed on an "AS IS" BASIS, 12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | @rem See the License for the specific language governing permissions and 14 | @rem limitations under the License. 15 | @rem 16 | 17 | @if "%DEBUG%" == "" @echo off 18 | @rem ########################################################################## 19 | @rem 20 | @rem Gradle startup script for Windows 21 | @rem 22 | @rem ########################################################################## 23 | 24 | @rem Set local scope for the variables with windows NT shell 25 | if "%OS%"=="Windows_NT" setlocal 26 | 27 | set DIRNAME=%~dp0 28 | if "%DIRNAME%" == "" set DIRNAME=. 29 | set APP_BASE_NAME=%~n0 30 | set APP_HOME=%DIRNAME% 31 | 32 | @rem Resolve any "." and ".." in APP_HOME to make it shorter. 33 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi 34 | 35 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 36 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 37 | 38 | @rem Find java.exe 39 | if defined JAVA_HOME goto findJavaFromJavaHome 40 | 41 | set JAVA_EXE=java.exe 42 | %JAVA_EXE% -version >NUL 2>&1 43 | if "%ERRORLEVEL%" == "0" goto execute 44 | 45 | echo. 46 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 47 | echo. 48 | echo Please set the JAVA_HOME variable in your environment to match the 49 | echo location of your Java installation. 50 | 51 | goto fail 52 | 53 | :findJavaFromJavaHome 54 | set JAVA_HOME=%JAVA_HOME:"=% 55 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 56 | 57 | if exist "%JAVA_EXE%" goto execute 58 | 59 | echo. 60 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 61 | echo. 62 | echo Please set the JAVA_HOME variable in your environment to match the 63 | echo location of your Java installation. 64 | 65 | goto fail 66 | 67 | :execute 68 | @rem Setup the command line 69 | 70 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 71 | 72 | 73 | @rem Execute Gradle 74 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* 75 | 76 | :end 77 | @rem End local scope for the variables with windows NT shell 78 | if "%ERRORLEVEL%"=="0" goto mainEnd 79 | 80 | :fail 81 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 82 | rem the _cmd.exe /c_ return code! 83 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 84 | exit /b 1 85 | 86 | :mainEnd 87 | if "%OS%"=="Windows_NT" endlocal 88 | 89 | :omega 90 | -------------------------------------------------------------------------------- /android/link-assets-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "migIndex": 1, 3 | "data": [ 4 | { 5 | "path": "src/assets/fonts/Lato-Bold.ttf", 6 | "sha1": "d67fee08c79a82ce375ab9629ae5a903da8bb321" 7 | }, 8 | { 9 | "path": "src/assets/fonts/Lato-Regular.ttf", 10 | "sha1": "83dc5921761a7c3d1ee7badba3fc7e1e1f5ed803" 11 | } 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'WalletApp_React' 2 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 3 | include ':app' 4 | includeBuild('../node_modules/react-native-gradle-plugin') 5 | 6 | if (settings.hasProperty("newArchEnabled") && settings.newArchEnabled == "true") { 7 | include(":ReactAndroid") 8 | project(":ReactAndroid").projectDir = file('../node_modules/react-native/ReactAndroid') 9 | include(":ReactAndroid:hermes-engine") 10 | project(":ReactAndroid:hermes-engine").projectDir = file('../node_modules/react-native/ReactAndroid/hermes-engine') 11 | } 12 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "WalletApp_React", 3 | "displayName": "WalletApp_React" 4 | } -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | plugins: ['react-native-reanimated/plugin'] 4 | }; 5 | -------------------------------------------------------------------------------- /image.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.png' { 2 | const content: any; 3 | export = content; 4 | } 5 | 6 | declare module '*.jpg' { 7 | const content: any; 8 | export = content; 9 | } 10 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import { AppRegistry } from 'react-native'; 2 | import App from './App'; 3 | import {name as appName} from './app.json'; 4 | 5 | AppRegistry.registerComponent(appName, () => App); 6 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /ios/Podfile: -------------------------------------------------------------------------------- 1 | require_relative '../node_modules/react-native/scripts/react_native_pods' 2 | require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules' 3 | 4 | platform :ios, '12.4' 5 | install! 'cocoapods', :deterministic_uuids => false 6 | 7 | production = ENV["PRODUCTION"] == "1" 8 | 9 | target 'WalletApp_React' do 10 | config = use_native_modules! 11 | 12 | # Flags change depending on the env values. 13 | flags = get_default_flags() 14 | 15 | use_react_native!( 16 | :path => config[:reactNativePath], 17 | # to enable hermes on iOS, change `false` to `true` and then install pods 18 | :production => production, 19 | :hermes_enabled => flags[:hermes_enabled], 20 | :fabric_enabled => flags[:fabric_enabled], 21 | :flipper_configuration => FlipperConfiguration.enabled, 22 | # An absolute path to your application root. 23 | :app_path => "#{Pod::Config.instance.installation_root}/.." 24 | ) 25 | 26 | target 'WalletApp_ReactTests' do 27 | inherit! :complete 28 | # Pods for testing 29 | end 30 | 31 | post_install do |installer| 32 | react_native_post_install(installer) 33 | __apply_Xcode_12_5_M1_post_install_workaround(installer) 34 | end 35 | end 36 | -------------------------------------------------------------------------------- /ios/WalletApp_React.xcodeproj/xcshareddata/xcschemes/WalletApp_React.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 | -------------------------------------------------------------------------------- /ios/WalletApp_React/AppDelegate.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | @interface AppDelegate : UIResponder 5 | 6 | @property (nonatomic, strong) UIWindow *window; 7 | 8 | @end 9 | -------------------------------------------------------------------------------- /ios/WalletApp_React/AppDelegate.mm: -------------------------------------------------------------------------------- 1 | #import "AppDelegate.h" 2 | 3 | #import 4 | #import 5 | #import 6 | 7 | #import 8 | 9 | #if RCT_NEW_ARCH_ENABLED 10 | #import 11 | #import 12 | #import 13 | #import 14 | #import 15 | #import 16 | 17 | #import 18 | 19 | static NSString *const kRNConcurrentRoot = @"concurrentRoot"; 20 | 21 | @interface AppDelegate () { 22 | RCTTurboModuleManager *_turboModuleManager; 23 | RCTSurfacePresenterBridgeAdapter *_bridgeAdapter; 24 | std::shared_ptr _reactNativeConfig; 25 | facebook::react::ContextContainer::Shared _contextContainer; 26 | } 27 | @end 28 | #endif 29 | 30 | @implementation AppDelegate 31 | 32 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 33 | { 34 | RCTAppSetupPrepareApp(application); 35 | 36 | RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions]; 37 | 38 | #if RCT_NEW_ARCH_ENABLED 39 | _contextContainer = std::make_shared(); 40 | _reactNativeConfig = std::make_shared(); 41 | _contextContainer->insert("ReactNativeConfig", _reactNativeConfig); 42 | _bridgeAdapter = [[RCTSurfacePresenterBridgeAdapter alloc] initWithBridge:bridge contextContainer:_contextContainer]; 43 | bridge.surfacePresenter = _bridgeAdapter.surfacePresenter; 44 | #endif 45 | 46 | NSDictionary *initProps = [self prepareInitialProps]; 47 | UIView *rootView = RCTAppSetupDefaultRootView(bridge, @"WalletApp_React", initProps); 48 | 49 | if (@available(iOS 13.0, *)) { 50 | rootView.backgroundColor = [UIColor systemBackgroundColor]; 51 | } else { 52 | rootView.backgroundColor = [UIColor whiteColor]; 53 | } 54 | 55 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 56 | UIViewController *rootViewController = [UIViewController new]; 57 | rootViewController.view = rootView; 58 | self.window.rootViewController = rootViewController; 59 | [self.window makeKeyAndVisible]; 60 | return YES; 61 | } 62 | 63 | /// This method controls whether the `concurrentRoot`feature of React18 is turned on or off. 64 | /// 65 | /// @see: https://reactjs.org/blog/2022/03/29/react-v18.html 66 | /// @note: This requires to be rendering on Fabric (i.e. on the New Architecture). 67 | /// @return: `true` if the `concurrentRoot` feture is enabled. Otherwise, it returns `false`. 68 | - (BOOL)concurrentRootEnabled 69 | { 70 | // Switch this bool to turn on and off the concurrent root 71 | return true; 72 | } 73 | 74 | - (NSDictionary *)prepareInitialProps 75 | { 76 | NSMutableDictionary *initProps = [NSMutableDictionary new]; 77 | 78 | #ifdef RCT_NEW_ARCH_ENABLED 79 | initProps[kRNConcurrentRoot] = @([self concurrentRootEnabled]); 80 | #endif 81 | 82 | return initProps; 83 | } 84 | 85 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge 86 | { 87 | #if DEBUG 88 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"]; 89 | #else 90 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 91 | #endif 92 | } 93 | 94 | #if RCT_NEW_ARCH_ENABLED 95 | 96 | #pragma mark - RCTCxxBridgeDelegate 97 | 98 | - (std::unique_ptr)jsExecutorFactoryForBridge:(RCTBridge *)bridge 99 | { 100 | _turboModuleManager = [[RCTTurboModuleManager alloc] initWithBridge:bridge 101 | delegate:self 102 | jsInvoker:bridge.jsCallInvoker]; 103 | return RCTAppSetupDefaultJsExecutorFactory(bridge, _turboModuleManager); 104 | } 105 | 106 | #pragma mark RCTTurboModuleManagerDelegate 107 | 108 | - (Class)getModuleClassFromName:(const char *)name 109 | { 110 | return RCTCoreModulesClassProvider(name); 111 | } 112 | 113 | - (std::shared_ptr)getTurboModule:(const std::string &)name 114 | jsInvoker:(std::shared_ptr)jsInvoker 115 | { 116 | return nullptr; 117 | } 118 | 119 | - (std::shared_ptr)getTurboModule:(const std::string &)name 120 | initParams: 121 | (const facebook::react::ObjCTurboModule::InitParams &)params 122 | { 123 | return nullptr; 124 | } 125 | 126 | - (id)getModuleInstanceFromClass:(Class)moduleClass 127 | { 128 | return RCTAppSetupDefaultModuleFromClass(moduleClass); 129 | } 130 | 131 | #endif 132 | 133 | @end 134 | -------------------------------------------------------------------------------- /ios/WalletApp_React/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 | -------------------------------------------------------------------------------- /ios/WalletApp_React/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /ios/WalletApp_React/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | WalletApp_React 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 | 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 | UIAppFonts 55 | 56 | Lato-Bold.ttf 57 | Lato-Regular.ttf 58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /ios/WalletApp_React/LaunchScreen.storyboard: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /ios/WalletApp_React/main.m: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | #import "AppDelegate.h" 4 | 5 | int main(int argc, char *argv[]) 6 | { 7 | @autoreleasepool { 8 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /ios/WalletApp_ReactTests/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 | -------------------------------------------------------------------------------- /ios/WalletApp_ReactTests/WalletApp_ReactTests.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 WalletApp_ReactTests : XCTestCase 11 | 12 | @end 13 | 14 | @implementation WalletApp_ReactTests 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 | -------------------------------------------------------------------------------- /ios/link-assets-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "migIndex": 1, 3 | "data": [ 4 | { 5 | "path": "src/assets/fonts/Lato-Bold.ttf", 6 | "sha1": "d67fee08c79a82ce375ab9629ae5a903da8bb321" 7 | }, 8 | { 9 | "path": "src/assets/fonts/Lato-Regular.ttf", 10 | "sha1": "83dc5921761a7c3d1ee7badba3fc7e1e1f5ed803" 11 | } 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /metro.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Metro configuration for React Native 3 | * https://github.com/facebook/react-native 4 | * 5 | * @format 6 | */ 7 | 8 | module.exports = { 9 | transformer: { 10 | getTransformOptions: async () => ({ 11 | transform: { 12 | experimentalImportSupport: false, 13 | inlineRequires: true, 14 | }, 15 | }), 16 | }, 17 | }; 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "WalletApp_React", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "android": "react-native run-android", 7 | "ios": "react-native run-ios", 8 | "start": "react-native start", 9 | "test": "jest", 10 | "lint": "eslint . --ext .js,.jsx,.ts,.tsx" 11 | }, 12 | "dependencies": { 13 | "@react-navigation/bottom-tabs": "^6.4.1", 14 | "@react-navigation/drawer": "^6.5.3", 15 | "@react-navigation/native": "^6.0.14", 16 | "@react-navigation/native-stack": "^6.9.2", 17 | "@react-navigation/stack": "^6.3.5", 18 | "d3-scale": "^4.0.2", 19 | "date-fns": "^2.29.3", 20 | "jetifier": "^2.0.0", 21 | "react": "18.0.0", 22 | "react-native": "0.69.5", 23 | "react-native-animated-numbers": "^0.4.1", 24 | "react-native-bottomsheet-reanimated": "^0.3.1", 25 | "react-native-gesture-handler": "^2.8.0", 26 | "react-native-ionicons": "^4.6.5", 27 | "react-native-modal": "^13.0.1", 28 | "react-native-reanimated": "^2.13.0", 29 | "react-native-responsive-fontsize": "^0.5.1", 30 | "react-native-responsive-linechart": "^5.7.1", 31 | "react-native-responsive-screen": "^1.4.2", 32 | "react-native-safe-area-context": "^4.4.1", 33 | "react-native-screens": "^3.18.2", 34 | "react-native-svg": "^13.6.0", 35 | "react-native-svg-charts": "^5.4.0", 36 | "react-native-vector-icons": "^9.2.0", 37 | "reanimated-bottom-sheet": "^1.0.0-alpha.22", 38 | "styled-components": "^5.3.6" 39 | }, 40 | "devDependencies": { 41 | "@babel/core": "^7.12.9", 42 | "@babel/runtime": "^7.12.5", 43 | "@react-native-community/eslint-config": "^2.0.0", 44 | "@tsconfig/react-native": "^2.0.2", 45 | "@types/jest": "^29.2.3", 46 | "@types/node": "^18.11.9", 47 | "@types/react": "^18.0.25", 48 | "@types/react-native": "^0.70.6", 49 | "@types/react-native-svg-charts": "^5.0.12", 50 | "@types/react-native-vector-icons": "^6.4.12", 51 | "@types/react-test-renderer": "^18.0.0", 52 | "@types/styled-components": "^5.1.26", 53 | "@types/styled-components-react-native": "^5.2.0", 54 | "@typescript-eslint/eslint-plugin": "^5.29.0", 55 | "@typescript-eslint/parser": "^5.29.0", 56 | "babel-jest": "^26.6.3", 57 | "eslint": "^7.32.0", 58 | "jest": "^26.6.3", 59 | "metro-react-native-babel-preset": "^0.70.3", 60 | "react-test-renderer": "18.0.0", 61 | "typescript": "^4.9.3" 62 | }, 63 | "jest": { 64 | "preset": "react-native", 65 | "moduleFileExtensions": [ 66 | "ts", 67 | "tsx", 68 | "js", 69 | "jsx", 70 | "json", 71 | "node" 72 | ] 73 | }, 74 | "resolutions": { 75 | "react-native-gesture-handler": "^2.8.0" 76 | } 77 | 78 | } 79 | -------------------------------------------------------------------------------- /react-native.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | project: { 3 | ios:{}, 4 | android:{} 5 | }, 6 | assets:['./src/assets/fonts'], 7 | dependencies: { 8 | 'react-native-vector-icons': { 9 | platforms: { 10 | ios: null, 11 | android: null, 12 | }, 13 | }, 14 | }, 15 | } -------------------------------------------------------------------------------- /src/DummyData.tsx: -------------------------------------------------------------------------------- 1 | import logo1 from './assets/cards/mc.png' 2 | import logo2 from './assets/cards/visa_white.png' 3 | 4 | import potrait1 from './assets/portraits/1.jpg' 5 | import potrait2 from './assets/portraits/2.jpg' 6 | import potrait3 from './assets/portraits/3.jpg' 7 | 8 | import { colors } from './config/colors' 9 | 10 | export const data = [ 11 | { 12 | id: 1, 13 | accountNo: "123456789", 14 | balance: 10000, 15 | alias: "Work Related", 16 | logo: logo1, 17 | }, 18 | { 19 | id: 2, 20 | accountNo: "987654321", 21 | balance: 200000, 22 | alias: "Personal Work", 23 | logo: logo2, 24 | }, 25 | { 26 | id: 3, 27 | accountNo: "987654587", 28 | balance: 300000, 29 | alias: "School Fees", 30 | logo: logo2, 31 | }, 32 | ]; 33 | 34 | export const transactions = [ 35 | { 36 | id: 1, 37 | amount: "-$ 15000", 38 | date: "12/12/2020", 39 | title: "Travel", 40 | subtitle: "Garuda Indonesia", 41 | art: { 42 | background: colors.accent, 43 | icon: "airplane", 44 | }, 45 | }, 46 | { 47 | id: 2, 48 | amount: "-$ 400", 49 | date: "12/12/2020", 50 | title: "Taxi", 51 | subtitle: "Blue Bird", 52 | art: { 53 | background: colors.tertiary, 54 | icon: "car", 55 | }, 56 | }, 57 | { 58 | id: 3, 59 | amount: "-$ 1000", 60 | date: "12/12/2020", 61 | title: "Shopping", 62 | subtitle: "Shopee", 63 | art: { 64 | background: colors.primary, 65 | icon: "cart", 66 | }, 67 | }, 68 | ]; 69 | 70 | export const sendMoney = [ 71 | { 72 | id: 1, 73 | amount: "$ 1000", 74 | name: "Tejo", 75 | background: colors.tertiary, 76 | image: potrait1, 77 | }, 78 | { 79 | id: 2, 80 | amount: "$ 2000", 81 | name: "Surti", 82 | background: colors.accent, 83 | image: potrait2, 84 | }, 85 | { 86 | id: 3, 87 | amount: "$ 3000", 88 | name: "Anto", 89 | background: colors.primary, 90 | image: potrait3, 91 | }, 92 | ]; 93 | -------------------------------------------------------------------------------- /src/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/src/assets/adaptive-icon.png -------------------------------------------------------------------------------- /src/assets/auth/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/src/assets/auth/ic_launcher.png -------------------------------------------------------------------------------- /src/assets/auth/splash_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/src/assets/auth/splash_logo.png -------------------------------------------------------------------------------- /src/assets/avi/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/src/assets/avi/avatar.png -------------------------------------------------------------------------------- /src/assets/bgs/background_transparent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/src/assets/bgs/background_transparent.png -------------------------------------------------------------------------------- /src/assets/bgs/background_v1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/src/assets/bgs/background_v1.png -------------------------------------------------------------------------------- /src/assets/cards/mc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/src/assets/cards/mc.png -------------------------------------------------------------------------------- /src/assets/cards/visa_white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/src/assets/cards/visa_white.png -------------------------------------------------------------------------------- /src/assets/e-wallet-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/src/assets/e-wallet-logo.png -------------------------------------------------------------------------------- /src/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/src/assets/favicon.png -------------------------------------------------------------------------------- /src/assets/fonts/Lato-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/src/assets/fonts/Lato-Bold.ttf -------------------------------------------------------------------------------- /src/assets/fonts/Lato-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/src/assets/fonts/Lato-Regular.ttf -------------------------------------------------------------------------------- /src/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/src/assets/icon.png -------------------------------------------------------------------------------- /src/assets/icons/down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/src/assets/icons/down.png -------------------------------------------------------------------------------- /src/assets/icons/up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/src/assets/icons/up.png -------------------------------------------------------------------------------- /src/assets/portraits/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/src/assets/portraits/1.jpg -------------------------------------------------------------------------------- /src/assets/portraits/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/src/assets/portraits/2.jpg -------------------------------------------------------------------------------- /src/assets/portraits/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/src/assets/portraits/3.jpg -------------------------------------------------------------------------------- /src/assets/regisImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/src/assets/regisImage.png -------------------------------------------------------------------------------- /src/assets/screenshot/Balance_Page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/src/assets/screenshot/Balance_Page.png -------------------------------------------------------------------------------- /src/assets/screenshot/Home_Page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/src/assets/screenshot/Home_Page.png -------------------------------------------------------------------------------- /src/assets/screenshot/Welcome_Page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/src/assets/screenshot/Welcome_Page.png -------------------------------------------------------------------------------- /src/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekoprassetyo/react-native-walletApp/e111d0937b160dccbb9494c9762095d3b50b0d9f/src/assets/splash.png -------------------------------------------------------------------------------- /src/components/Auth/types.ts: -------------------------------------------------------------------------------- 1 | export interface LoginProps { 2 | username?: string; 3 | email?: string; 4 | password: string; 5 | } 6 | 7 | export interface RegisterProps { 8 | username: string; 9 | email: string; 10 | password: string; 11 | address: string 12 | } -------------------------------------------------------------------------------- /src/components/Balance/AmountSection.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC} from 'react'; 2 | import styled from 'styled-components/native'; 3 | import RegularText from '../Texts/RegularText'; 4 | import SmallText from '../Texts/SmallText'; 5 | import { AmountProps } from './types'; 6 | import { colors } from '../../config/colors'; 7 | 8 | const AmountSectionBackground = styled.View` 9 | width: 100%; 10 | flex: 1; 11 | padding-top: 5px; 12 | align-items: center; 13 | `; 14 | 15 | const AmountSection: FC = ({ balance }) => { 16 | return ( 17 | 18 | Total Balance 19 | $ {balance} 20 | 21 | 22 | ) 23 | } 24 | 25 | export default AmountSection; -------------------------------------------------------------------------------- /src/components/Balance/BalanceCard.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC} from 'react'; 2 | import styled from 'styled-components/native'; 3 | import {colors} from '../../config/colors'; 4 | import RegularText from '../Texts/RegularText'; 5 | import {BalanceCardProps} from './types'; 6 | import {View} from 'react-native'; 7 | import SmallText from '../Texts/SmallText'; 8 | import Background from '../../assets/bgs/background_transparent.png'; 9 | 10 | const CardBackground = styled.ImageBackground` 11 | height: 75%; 12 | width: 100%; 13 | resize-mode: cover; 14 | background-color: ${colors.tertiary}; 15 | border-radius: 25px; 16 | overflow: hidden; 17 | `; 18 | 19 | const TouchableView = styled.View` 20 | flex: 1; 21 | justify-content: space-between; 22 | align-items: center; 23 | padding: 30px; 24 | `; 25 | 26 | const CardRow = styled.View` 27 | flex-direction: row; 28 | justify-content: space-between; 29 | align-items: center; 30 | width: 100%; 31 | `; 32 | 33 | const Logo = styled.Image` 34 | width: 100%; 35 | height: 80%; 36 | resize-mode: contain; 37 | flex: 1; 38 | `; 39 | 40 | const BalanceCard: FC = ({accountNo, balance, logo}) => { 41 | return ( 42 | 43 | 44 | 45 | 46 | {accountNo} 47 | 48 | 49 | 50 | 51 | 52 | Account Balance 53 | 54 | 55 | $ {balance} 56 | 57 | 58 | 59 | 60 | 61 | 62 | ); 63 | }; 64 | 65 | export default BalanceCard; 66 | -------------------------------------------------------------------------------- /src/components/Balance/BalanceCardSection.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC} from 'react'; 2 | import styled from 'styled-components/native'; 3 | import { colors } from '../../config/colors'; 4 | import BalanceCard from './BalanceCard'; 5 | import { BalanceCardProps } from './types'; 6 | 7 | const BalanceCardSectionBackground = styled.View` 8 | flex: 2; 9 | align-items: center; 10 | width: 100%; 11 | `; 12 | 13 | const BalanceCardSection : FC = ( props ) => { 14 | return( 15 | 16 | 17 | 18 | ) 19 | } 20 | 21 | export default BalanceCardSection; -------------------------------------------------------------------------------- /src/components/Balance/ButtonSection.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC} from 'react'; 2 | import styled from 'styled-components/native'; 3 | import RegularButton from '../Buttons/RegularButton'; 4 | import { colors } from '../../config/colors'; 5 | import Icon from 'react-native-vector-icons/Ionicons' 6 | import { useNavigation } from '@react-navigation/native'; 7 | import { Props as BalanceProps } from '../../screens/stackscreens/Balance'; 8 | 9 | 10 | const ButtonSectionBackground = styled.View` 11 | width: 100%; 12 | align-items: center; 13 | flex: 1; 14 | `; 15 | 16 | const ButtonSection: FC = () => { 17 | const navigation = useNavigation(); 18 | 19 | return ( 20 | 21 | navigation.goBack()}> 22 | Cancel 23 | 24 | 25 | ) 26 | } 27 | 28 | export default ButtonSection; -------------------------------------------------------------------------------- /src/components/Balance/types.ts: -------------------------------------------------------------------------------- 1 | import { CardProps } from '../Cards/types'; 2 | export interface AmountProps { 3 | balance: number; 4 | } 5 | 6 | export interface BalanceCardProps extends CardProps {}; -------------------------------------------------------------------------------- /src/components/Buttons/BackButton.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC} from 'react'; 2 | import { useNavigation } from '@react-navigation/native'; 3 | import styled from 'styled-components/native'; 4 | import { RectButton } from 'react-native-gesture-handler'; 5 | import { RFValue } from 'react-native-responsive-fontsize'; 6 | import { colors } from '../../config/colors'; 7 | import Icon from 'react-native-vector-icons/FontAwesome' 8 | 9 | const ContainerBackButton = styled(RectButton)` 10 | width: ${RFValue(40)}px; 11 | height: ${RFValue(40)}px; 12 | background-color: ${colors.graydark}; 13 | border-radius: 10px 14 | 15 | align-items: center; 16 | justify-content: center; 17 | `; 18 | 19 | const IconBackButton = styled(Icon)` 20 | color: ${colors.graydark} 21 | `; 22 | 23 | export const BackButton: FC = () => { 24 | const navigation = useNavigation(); 25 | 26 | const handleBack = () => { 27 | navigation.goBack(); 28 | } 29 | 30 | return( 31 | 44 | 45 | 46 | ) 47 | } 48 | -------------------------------------------------------------------------------- /src/components/Buttons/RegularButton.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC} from 'react'; 2 | import styled from 'styled-components/native'; 3 | 4 | import { colors } from '../../config/colors'; 5 | import RegularText from '../Texts/RegularText'; 6 | import { ButtonProps } from './types'; 7 | import textStyles from '../Texts/textStyles'; 8 | 9 | const ButtonView = styled.TouchableOpacity` 10 | background-color: ${colors.primary}; 11 | padding: 20px; 12 | border-radius: 25px; 13 | width: 100%; 14 | align-items: center; 15 | `; 16 | 17 | 18 | const RegularButton: FC = ({ 19 | btnStyle, 20 | children, 21 | onPress, 22 | textStyle, 23 | }) => { 24 | return ( 25 | 26 | {children} 27 | 28 | ); 29 | } 30 | 31 | export default RegularButton; -------------------------------------------------------------------------------- /src/components/Buttons/types.ts: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {TextStyle, ViewStyle, StyleProp, GestureResponderEvent, } from 'react-native'; 3 | 4 | 5 | export interface ButtonProps { 6 | btnStyle?: StyleProp; 7 | textStyle?: StyleProp; 8 | onPress?: (event: GestureResponderEvent) => void | undefined; 9 | children: React.ReactNode; 10 | } -------------------------------------------------------------------------------- /src/components/Cards/CardItem.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC} from 'react'; 2 | import styled from 'styled-components/native'; 3 | import {colors} from '../../config/colors'; 4 | import {ScreenWidth, Container} from '../shared'; 5 | import {CardProps} from './types'; 6 | import RegularText from '../Texts/RegularText'; 7 | import SmallText from '../Texts/SmallText'; 8 | import {View} from 'react-native'; 9 | import {useNavigation} from '@react-navigation/native'; 10 | 11 | import background from '../../assets/bgs/background_transparent.png'; 12 | import {Props as HomeProps} from '../../screens/tabscreens/Menu/Home'; 13 | 14 | const CardBackground = styled.ImageBackground` 15 | max-height: 85%; 16 | width: ${ScreenWidth * 0.67}px; 17 | resize-mode: cover; 18 | background-color: ${colors.tertiary}; 19 | border-radius: 25px; 20 | margin-right: 25px; 21 | overflow: hidden; 22 | background-size: cover; 23 | `; 24 | 25 | const CardTouchable = styled.TouchableHighlight` 26 | height: 100%; 27 | border-radius: 25px; 28 | `; 29 | 30 | const TouchableView = styled.View` 31 | flex: 1; 32 | justify-content: space-between; 33 | align-items: center; 34 | padding: 30px; 35 | `; 36 | 37 | const CardRow = styled.View` 38 | flex-direction: row; 39 | justify-content: space-between; 40 | align-items: center; 41 | width: 100%; 42 | `; 43 | 44 | const Logo = styled.Image` 45 | width: 100%; 46 | height: 88%; 47 | resize-mode: contain; 48 | flex: 1; 49 | `; 50 | 51 | const CardItem: FC = props => { 52 | const navigation = useNavigation(); 53 | 54 | const handlePress = () => { 55 | navigation.navigate('Balance', {...props}); 56 | }; 57 | 58 | return ( 59 | <> 60 | 61 | 62 | 63 | 64 | 65 | {props.accountNo} 66 | 67 | 68 | 69 | 70 | 71 | Account Balance 72 | 73 | 74 | $ {props.balance} 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | ); 84 | }; 85 | 86 | export default CardItem; 87 | -------------------------------------------------------------------------------- /src/components/Cards/CardSection.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC} from 'react'; 2 | import styled from 'styled-components/native'; 3 | import CardItem from './CardItem'; 4 | import { CardSectionProps } from './types'; 5 | 6 | const CardList = styled.FlatList` 7 | flex: 1; 8 | width: 100%; 9 | padding-left: 25px; 10 | padding-bottom: 15px; 11 | `; 12 | 13 | const CardSection: FC = ({ data }) => { 14 | return ( 15 | id.toString()} 21 | renderItem={({ item }: any) => } 22 | /> 23 | ) 24 | } 25 | 26 | export default CardSection; -------------------------------------------------------------------------------- /src/components/Cards/types.ts: -------------------------------------------------------------------------------- 1 | import {ImageSourcePropType} from 'react-native'; 2 | 3 | export interface CardProps { 4 | id: number; 5 | accountNo: string; 6 | balance: number; 7 | alias?: string; 8 | logo: ImageSourcePropType; 9 | } 10 | 11 | export interface CardSectionProps { 12 | data: Array; 13 | } 14 | -------------------------------------------------------------------------------- /src/components/Drawer/DrawerHome/DrawerHome.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC} from 'react'; 2 | import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; 3 | import {Container} from './style'; 4 | import {TouchableOpacity} from 'react-native-gesture-handler'; 5 | import {colors} from '../../../config/colors'; 6 | import RegularText from '../../Texts/RegularText'; 7 | 8 | interface CustomDrawerProps { 9 | navigation: any; 10 | state: any; 11 | } 12 | 13 | const drawerMenuHome = [ 14 | {link: 'Dashboard', icon: 'chart-box-outline'}, 15 | {link: 'Detail', icon: 'expand-all-outline'}, 16 | {link: 'Watchlist', icon: 'cash-minus'}, 17 | ]; 18 | 19 | const DrawerHome: FC = ({navigation, state}) => { 20 | return ( 21 | <> 22 | {drawerMenuHome?.map((item, index) => ( 23 | 24 | { 26 | if (state?.index !== index) { 27 | return navigation.navigate(item?.link); 28 | } 29 | }} 30 | style={{ 31 | flexDirection: 'row', 32 | alignItems: 'center', 33 | paddingHorizontal: 10, 34 | paddingVertical: 8, 35 | borderRadius: 5, 36 | backgroundColor: 37 | state?.index === index ? colors.graylight : colors.white, 38 | }}> 39 | 45 | 46 | {item?.link} 47 | 48 | 49 | 50 | ))} 51 | 52 | ); 53 | }; 54 | 55 | export default DrawerHome; 56 | -------------------------------------------------------------------------------- /src/components/Drawer/DrawerHome/style.ts: -------------------------------------------------------------------------------- 1 | import styled from "styled-components/native"; 2 | 3 | export const Container = styled.View` 4 | margin-horizontal: 10px; 5 | marginVertical: 8px; 6 | `; -------------------------------------------------------------------------------- /src/components/Drawer/DrawerMenu/Home.tsx: -------------------------------------------------------------------------------- 1 | import {DrawerContentScrollView, DrawerItem} from '@react-navigation/drawer'; 2 | import React, {FC} from 'react'; 3 | import RegularText from '../../Texts/RegularText'; 4 | import {colors} from '../../../config/colors'; 5 | import {useNavigation} from '@react-navigation/native'; 6 | 7 | const HomeContent: FC = () => { 8 | const navigation = useNavigation(); 9 | 10 | return ( 11 | 12 | Dashboard} 14 | // @ts-ignore 15 | onPress={() => navigation.navigate('Dashboard')} 16 | /> 17 | Watchlist} 19 | // @ts-ignore 20 | onPress={() => navigation.navigate('Watchlist')} 21 | /> 22 | 23 | ); 24 | }; 25 | 26 | export default HomeContent; 27 | -------------------------------------------------------------------------------- /src/components/Header/Greeting.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC} from 'react'; 2 | import styled from 'styled-components/native'; 3 | import RegularText from '../Texts/RegularText'; 4 | import SmallText from '../Texts/SmallText'; 5 | import {GreetingProps} from './types'; 6 | import {colors} from '../../config/colors'; 7 | 8 | const StyledView = styled.View` 9 | flex: 1; 10 | flex-direction: column; 11 | justify-content: center; 12 | `; 13 | 14 | const Greeting: FC = ({ 15 | mainText, 16 | subText, 17 | mainTextStyle, 18 | subTextStyle, 19 | }) => { 20 | return ( 21 | 22 | 30 | {mainText} 31 | 32 | 40 | {subText} 41 | 42 | 43 | ); 44 | }; 45 | 46 | export default Greeting; 47 | -------------------------------------------------------------------------------- /src/components/Header/Profile.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC} from 'react'; 2 | import styled from 'styled-components/native'; 3 | import {ProfileProps} from './types'; 4 | 5 | const StyledView = styled.TouchableOpacity` 6 | flex-direction: column; 7 | width: 45px; 8 | height: 45px; 9 | border-radius: 15px; 10 | `; 11 | 12 | const StyledImage = styled.Image` 13 | width: 100%; 14 | height: 100%; 15 | border-radius: 15px; 16 | resize-mode: cover; 17 | `; 18 | 19 | const Profile: FC = ({ 20 | image, 21 | imageContainerStyle, 22 | imageStyle, 23 | onPress, 24 | }) => { 25 | return ( 26 | 27 | 28 | 29 | ); 30 | }; 31 | 32 | export default Profile; 33 | -------------------------------------------------------------------------------- /src/components/Header/types.ts: -------------------------------------------------------------------------------- 1 | import { StyleProp, TextStyle, ImageSourcePropType, GestureResponderEvent, ImageStyle, ViewStyle } from 'react-native'; 2 | 3 | export interface GreetingProps { 4 | mainText: string; 5 | subText: string; 6 | mainTextStyle?: StyleProp; 7 | subTextStyle?: StyleProp; 8 | } 9 | 10 | export interface ProfileProps { 11 | image: ImageSourcePropType; 12 | onPress?: ((event: GestureResponderEvent) => void) | undefined; 13 | imageStyle?: StyleProp; 14 | imageContainerStyle?: StyleProp; 15 | } -------------------------------------------------------------------------------- /src/components/SendMoney/SendMoneyItem.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC} from 'react'; 2 | import styled from 'styled-components/native'; 3 | import {colors} from '../../config/colors'; 4 | import Profile from '../Header/Profile'; 5 | import {ScreenWidth} from '../shared'; 6 | import RegularText from '../Texts/RegularText'; 7 | import SmallText from '../Texts/SmallText'; 8 | import {SendMoneyProps} from './types'; 9 | 10 | const SendMoneyItemContainer = styled.TouchableHighlight` 11 | height: 130px; 12 | width: ${ScreenWidth * 0.27}px; 13 | padding: 10px; 14 | border-radius: 15px; 15 | justify-content: space-around; 16 | margin: 0px 10px 10px 0px; 17 | `; 18 | 19 | const SendMoneyItem: FC = ({ 20 | background, 21 | image, 22 | name, 23 | amount, 24 | }) => { 25 | return ( 26 | console.log(`Sending ${amount} to ${name}`)}> 30 | <> 31 | 32 | {name} 33 | {amount} 34 | 35 | 36 | ); 37 | }; 38 | 39 | export default SendMoneyItem; 40 | -------------------------------------------------------------------------------- /src/components/SendMoney/SendMoneySection.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC, useRef} from 'react'; 2 | import styled from 'styled-components/native'; 3 | import {colors} from '../../config/colors'; 4 | import RegularText from '../Texts/RegularText'; 5 | import SmallText from '../Texts/SmallText'; 6 | import SendMoneyItem from './SendMoneyItem'; 7 | import {SendMoneySectionProps} from './types'; 8 | import BottomSheet from 'reanimated-bottom-sheet'; 9 | 10 | const SendMoneySectionBackground = styled.View` 11 | max-width: 100%; 12 | padding-top: 10px; 13 | background-color: ${colors.white}; 14 | `; 15 | 16 | const SendMoneyRow = styled.View` 17 | flex-direction: row; 18 | justify-content: space-between; 19 | align-items: center; 20 | width: 100%; 21 | padding-horizontal: 25px; 22 | margin-bottom: 5px; 23 | `; 24 | 25 | const SendMoneyList = styled.FlatList` 26 | width: 100%; 27 | flex: auto; 28 | min-height 80%; 29 | padding-horizontal: 25px; 30 | `; 31 | 32 | const TextButton = styled.TouchableOpacity``; 33 | 34 | const SendMoneySection: FC = ({data}) => { 35 | const sheetRef = useRef(null); 36 | const renderContent = () => { 37 | return ( 38 | 39 | 40 | 41 | Send money to 42 | 43 | 44 | 45 | +Add 46 | 47 | 48 | 49 | id.toString()} 56 | renderItem={({item}: any) => } 57 | /> 58 | 59 | ); 60 | }; 61 | 62 | return ( 63 | 71 | ) 72 | }; 73 | 74 | export default SendMoneySection; 75 | -------------------------------------------------------------------------------- /src/components/SendMoney/types.ts: -------------------------------------------------------------------------------- 1 | import { ImageSourcePropType } from 'react-native'; 2 | export interface SendMoneyProps { 3 | id: number; 4 | name: string; 5 | amount: string; 6 | background: string; 7 | image: ImageSourcePropType; 8 | } 9 | 10 | export interface SendMoneySectionProps { 11 | data: Array; 12 | } -------------------------------------------------------------------------------- /src/components/StockWatchlist/ResponsiveStockChart/ResponsiveStockChart.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC} from 'react'; 2 | import {FlatList, Text, View} from 'react-native'; 3 | import {RenderItemProps, StockObjInfo} from '../../../types/stock'; 4 | import {colors} from '../../../config/colors'; 5 | import { 6 | Chart, 7 | VerticalAxis, 8 | Area, 9 | Line, 10 | Tooltip, 11 | HorizontalAxis, 12 | } from 'react-native-responsive-linechart'; 13 | 14 | interface ResponsiveStockChartProps { 15 | StockObjInfo: StockObjInfo; 16 | setTimePeriod: any; 17 | min: any; 18 | max: any; 19 | timePeriod: string; 20 | dateMap: any; 21 | stockData: any; 22 | } 23 | 24 | interface MapObj { 25 | [i: string]: string; 26 | } 27 | 28 | interface timeToDaysMap { 29 | [index: string]: number; 30 | } 31 | 32 | const timeToDaysMap: timeToDaysMap = { 33 | ['1D']: 1, 34 | ['1W']: 5, 35 | ['1M']: 21, 36 | ['3M']: 63, 37 | ['6M']: 126, 38 | ['1Y']: 252, 39 | ['2Y']: 504, 40 | }; 41 | 42 | const ResponsiveStockChart: FC = ({ 43 | StockObjInfo, 44 | dateMap, 45 | max, 46 | min, 47 | setTimePeriod, 48 | stockData, 49 | timePeriod, 50 | }) => { 51 | const renderItem = ({item}: RenderItemProps) => { 52 | const onTextPress = () => { 53 | setTimePeriod(item); 54 | }; 55 | 56 | return ( 57 | 70 | 73 | {item} 74 | 75 | 76 | ); 77 | }; 78 | 79 | return ( 80 | <> 81 | {stockData.length > 0 && ( 82 | <> 83 | item} 88 | style={{flexGrow: 0}} 89 | /> 90 | 105 | 106 | )} 107 | 108 | ); 109 | }; 110 | 111 | export default ResponsiveStockChart; 112 | -------------------------------------------------------------------------------- /src/components/StockWatchlist/StockChart/StockChart.tsx: -------------------------------------------------------------------------------- 1 | import React, {useEffect, useState} from 'react'; 2 | import {Circle} from 'react-native-svg'; 3 | import * as dateFns from 'date-fns'; 4 | import * as scale from 'd3-scale'; 5 | import {colors} from '../../../config/colors'; 6 | import {AreaChart, LineChart, Grid, XAxis} from 'react-native-svg-charts'; 7 | import {data} from '../../../DummyData'; 8 | 9 | const StockChart = ({data}: any) => { 10 | const [stockData, setStockData] = useState([]); 11 | 12 | useEffect(() => { 13 | const stockDataArr: any[] = []; 14 | for (let [key, value] of Object.entries(data)) { 15 | //@ts-ignore 16 | let newPrice = Math.floor(parseInt(value['close']), 2); 17 | 18 | const newObj = { 19 | date: dateFns.format(new Date(key), 'MMM-dd'), 20 | price: newPrice, 21 | }; 22 | 23 | newObj.price && stockDataArr.unshift(newObj); 24 | } 25 | setStockData(stockDataArr.slice(70, 100)); 26 | }, [data]); 27 | 28 | const Decorator = ({x, y, stockData}: any) => { 29 | //@ts-ignore 30 | return stockData.map((value, index) => ( 31 | 39 | )); 40 | }; 41 | 42 | return ( 43 | 48 | item.price}> 55 | 60 | 61 | { 75 | if (index % 2 != 0) { 76 | return stockData[index].date; 77 | } else { 78 | return ''; 79 | } 80 | }} 81 | /> 82 | 83 | ); 84 | }; 85 | 86 | export default StockChart; 87 | -------------------------------------------------------------------------------- /src/components/StockWatchlist/StockInfoTable/StockInfoTable.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC} from 'react'; 2 | import {StockObjInfo} from '../../../types/stock'; 3 | import { 4 | Container, 5 | StyledTouchable, 6 | ViewTextContainer, 7 | TextLabel, 8 | TextStyled, 9 | } from './styles'; 10 | import {ScrollView, View} from 'react-native'; 11 | 12 | const StockInfoTable: FC = ({latestData, stockObjectInfo}) => { 13 | return ( 14 | 15 | 23 | 24 | 25 | 26 | Open 27 | {latestData.open} 28 | 29 | 30 | High 31 | {latestData.high} 32 | 33 | 34 | Low 35 | {latestData.low} 36 | 37 | 38 | 39 | 40 | Vol 41 | {latestData.volume} 42 | 43 | 44 | P/E 45 | {latestData.companyOverview['PERatio']} 46 | 47 | 48 | Mkt Cap. 49 | 50 | {Math.floor( 51 | latestData.companyOverview['MarketCapitalization'] / 52 | 1000000000, 53 | )} 54 | B 55 | 56 | 57 | 58 | 59 | 60 | 52W H 61 | 62 | {latestData.companyOverview['52WeekHigh']} 63 | 64 | 65 | 66 | 52W L 67 | {latestData.companyOverview['52WeekLow']} 68 | 69 | 70 | 200DMA 71 | 72 | {Math.floor(latestData.companyOverview['200DayMovingAverage'])} 73 | 74 | 75 | 76 | 77 | 78 | 79 | ); 80 | }; 81 | 82 | export default StockInfoTable; 83 | -------------------------------------------------------------------------------- /src/components/StockWatchlist/StockInfoTable/styles.ts: -------------------------------------------------------------------------------- 1 | import {colors} from './../../../config/colors'; 2 | import styled from 'styled-components/native'; 3 | 4 | export const Container = styled.View` 5 | display: flex; 6 | flex-direction: row; 7 | width: 100%; 8 | `; 9 | 10 | export const StyledTouchable = styled.TouchableOpacity` 11 | display: flex; 12 | flex-direction: row; 13 | `; 14 | 15 | export const ViewTextContainer = styled.Text` 16 | display: flex; 17 | flex-direction: row; 18 | height: 25px; 19 | justify-content: space-between; 20 | margin-end: 55px; 21 | `; 22 | 23 | export const TextStyled = styled.Text` 24 | color: white; 25 | font-weight: bold; 26 | font-size: 12; 27 | `; 28 | 29 | export const TextLabel = styled.Text` 30 | color: ${colors.smokeGrey}; 31 | font-weight: bold; 32 | font-size: 12px, 33 | padding-end: 25; 34 | `; 35 | -------------------------------------------------------------------------------- /src/components/Texts/BigText.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC} from 'react'; 2 | import styled from 'styled-components/native'; 3 | 4 | import {colors} from '../../config/colors'; 5 | import {TextProps} from './types'; 6 | 7 | const StyledText = styled.Text` 8 | color: ${colors.gray}; 9 | font-size: 35px; 10 | text-align: left; 11 | font-family: Lato-Bold; 12 | `; 13 | 14 | const BigText: FC = ({textStyles, children}) => { 15 | return {children}; 16 | }; 17 | 18 | export default BigText; 19 | -------------------------------------------------------------------------------- /src/components/Texts/RegularText.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components/native'; 3 | 4 | import {colors} from '../../config/colors'; 5 | import textStyles from './textStyles'; 6 | import {StyledTextProps, TextProps, MyTextProps, getFont} from './types'; 7 | 8 | const StyledText = styled.Text` 9 | color: ${colors.gray}; 10 | ${(props: StyledTextProps) => textStyles(props)} 11 | font-family: Lato-Regular; 12 | `; 13 | 14 | const RegularText = (props: MyTextProps) => { 15 | const {bold, weight} = props; 16 | 17 | const font = getFont({ 18 | isBold: bold || weight === '700', 19 | weight: weight ? Number(weight) : 0, 20 | }); 21 | 22 | return ( 23 | 24 | {props.children} 25 | 26 | ); 27 | }; 28 | 29 | export default RegularText; 30 | -------------------------------------------------------------------------------- /src/components/Texts/SmallText.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC} from 'react'; 2 | import styled from 'styled-components/native'; 3 | 4 | import { colors } from '../../config/colors'; 5 | import { TextProps } from './types'; 6 | 7 | const StyledText = styled.Text` 8 | color: ${colors.gray}; 9 | font-size: 13px; 10 | text-align: left; 11 | font-family: Lato-Regular; 12 | `; 13 | 14 | const SmallText: FC = ({ textStyles, children }) => { 15 | return {children} 16 | } 17 | 18 | export default SmallText; -------------------------------------------------------------------------------- /src/components/Texts/textStyles.ts: -------------------------------------------------------------------------------- 1 | import {getWidth, getFontSize} from '../../lib/getSize'; 2 | import {colors} from '../../config/colors'; 3 | import {TextProps} from './types'; 4 | 5 | const textStyles = (props: TextProps) => { 6 | return ` 7 | color: ${props.color ? props.color : colors.graydark}; 8 | font-size: 16px; 9 | line-height: ${ 10 | props.lineHeight 11 | ? `${getFontSize(props.lineHeight)}` 12 | : `${getFontSize(16)}` 13 | }; 14 | letter-spacing: ${props.letterSpacing ? props.letterSpacing : '0.2px'}; 15 | background-color: transparent; 16 | ${props.size && `font-size: ${getFontSize(props.size)}`}; 17 | ${props.center && `text-align: center`}; 18 | ${props.right && `text-align: right`}; 19 | ${props.left && `text-align: left`}; 20 | ${props.marg && `margin: ${props.marg}`}; 21 | ${props.pad && `padding: ${props.pad}`}; 22 | ${props.wid && `width: ${getWidth(props.wid)}`}; 23 | ${props.spacing && `letter-spacing: ${props.spacing}`}; 24 | ${props.textTransform && `text-transform: ${props.textTransform}`}; 25 | ${ 26 | props.textDecorationLine && 27 | `text-decoration-line: ${props.textDecorationLine}` 28 | }; 29 | `; 30 | }; 31 | export default textStyles; 32 | -------------------------------------------------------------------------------- /src/components/Texts/types.tsx: -------------------------------------------------------------------------------- 1 | import {ReactNode} from 'react'; 2 | import {StyleProp, TextStyle, GestureResponderEvent} from 'react-native'; 3 | 4 | export interface TextProps { 5 | color?: string; 6 | lineHeight?: string; 7 | letterSpacing?: string; 8 | size?: string; 9 | center?: string; 10 | right?: string; 11 | left?: string; 12 | marg?: string; 13 | pad?: string; 14 | wid?: string; 15 | spacing?: string; 16 | textTransform?: string; 17 | textDecorationLine?: string; 18 | textStyles?: StyleProp; 19 | children?: ReactNode; 20 | } 21 | 22 | export interface FontProps { 23 | weight?: number; 24 | isBold?: boolean; 25 | } 26 | 27 | export interface StyledTextProps extends TextProps { 28 | font: string; 29 | } 30 | 31 | export interface MyTextProps extends TextProps { 32 | bold?: boolean; 33 | weight?: string; 34 | onClick?: (event: GestureResponderEvent) => void | undefined; 35 | children: ReactNode; 36 | } 37 | 38 | export const getFont = ({weight, isBold}: FontProps) => { 39 | // get font type 40 | const type = 'Quicksand-'; 41 | 42 | // switch between weights 43 | let font = type; 44 | switch (true) { 45 | case isBold: 46 | font = `${type}Bold`; 47 | break; 48 | 49 | case weight && weight < 400: 50 | font = `${type}Light`; 51 | break; 52 | 53 | case weight === 400: 54 | font = `${type}Regular`; 55 | break; 56 | 57 | case weight && weight < 700: 58 | font = `${type}SemiBold`; 59 | break; 60 | 61 | default: 62 | font = `${type}Regular`; 63 | } 64 | 65 | return font; 66 | }; 67 | -------------------------------------------------------------------------------- /src/components/Transactions/Transaction.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC} from 'react'; 2 | import styled from 'styled-components/native'; 3 | import { TransactionItemProps } from './types'; 4 | import Icon from 'react-native-vector-icons/Ionicons'; 5 | import { colors } from '../../config/colors'; 6 | 7 | const StyledView = styled.View` 8 | height: 45px; 9 | width: 45px; 10 | border-radius: 10px; 11 | justify-content: center; 12 | align-items: center; 13 | `; 14 | 15 | 16 | const Transaction: FC = ({ background, icon }) => { 17 | return ( 18 | 19 | 20 | 21 | ) 22 | } 23 | 24 | export default Transaction; -------------------------------------------------------------------------------- /src/components/Transactions/TransactionItem.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC} from 'react'; 2 | import {TransactionProps} from './types'; 3 | import styled from 'styled-components/native'; 4 | import {View} from 'react-native'; 5 | import RegularText from '../Texts/RegularText'; 6 | import SmallText from '../Texts/SmallText'; 7 | import {colors} from '../../config/colors'; 8 | import Transaction from './Transaction'; 9 | 10 | const TransactionRow = styled.View` 11 | flex-direction: row; 12 | justify-content: space-between; 13 | align-items: center; 14 | width: 100%; 15 | margin-bottom: 25px; 16 | `; 17 | 18 | const LeftView = styled.View` 19 | flex-direction: row; 20 | align-items: center; 21 | justify-content: flex-start; 22 | height: 100%; 23 | flex: 2; 24 | `; 25 | 26 | const RightView = styled.View` 27 | flex: 1; 28 | `; 29 | 30 | const TransactionItem: FC = ({ 31 | amount, 32 | art, 33 | date, 34 | subtitle, 35 | title, 36 | }) => { 37 | return ( 38 | 39 | 40 | 41 | 42 | 48 | {title} 49 | 50 | 51 | {subtitle} 52 | 53 | 54 | 55 | 56 | 62 | {amount} 63 | 64 | {date} 65 | 66 | 67 | ); 68 | }; 69 | 70 | export default TransactionItem; 71 | -------------------------------------------------------------------------------- /src/components/Transactions/TransactionSection.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC} from 'react'; 2 | import styled from 'styled-components/native'; 3 | import RegularText from '../Texts/RegularText'; 4 | import {colors} from '../../config/colors'; 5 | import SmallText from '../Texts/SmallText'; 6 | import {TransactionSectionProps} from './types'; 7 | import TransactionItem from './TransactionItem'; 8 | 9 | const TransactionSectionBackground = styled.View` 10 | width: 100%; 11 | padding-horizontal: 25px; 12 | flex: 2; 13 | `; 14 | 15 | const TransactionRow = styled.View` 16 | flex-direction: row; 17 | justify-content: space-between; 18 | align-items: center; 19 | width: 100%; 20 | margin-bottom: 10px; 21 | `; 22 | 23 | const TransactionList = styled.FlatList` 24 | width: 100%; 25 | `; 26 | 27 | const TransactionSection: FC = ({data}) => { 28 | return ( 29 | 30 | 31 | 32 | Transactions 33 | 34 | Recent 35 | 36 | id.toString()} 41 | renderItem={({item}: any) => } 42 | /> 43 | 44 | ); 45 | }; 46 | 47 | export default TransactionSection; 48 | -------------------------------------------------------------------------------- /src/components/Transactions/types.ts: -------------------------------------------------------------------------------- 1 | export interface TransactionProps { 2 | id: number; 3 | title: string; 4 | subtitle: string; 5 | amount: string; 6 | date: string; 7 | art: { 8 | icon: string; 9 | background: string; 10 | }; 11 | } 12 | 13 | export interface TransactionSectionProps { 14 | data: Array; 15 | } 16 | 17 | export interface TransactionItemProps { 18 | icon: any; 19 | background: string; 20 | } -------------------------------------------------------------------------------- /src/components/shared.tsx: -------------------------------------------------------------------------------- 1 | import { Dimensions } from "react-native"; 2 | import styled from "styled-components/native"; 3 | import { colors } from "../config/colors" 4 | 5 | export const Container = styled.View` 6 | flex: 1; 7 | background-color: ${colors.graylight}; 8 | align-items: center; 9 | justify-content: center; 10 | `; 11 | 12 | export const ScreenWidth = Dimensions.get("screen").width; 13 | export const ScreenHeight = Dimensions.get("screen").height; -------------------------------------------------------------------------------- /src/config/colors.tsx: -------------------------------------------------------------------------------- 1 | export const colors = { 2 | white: '#fff', 3 | primary: '#ef835d', 4 | secondary: '#2c365a', 5 | tertiary: '#85c6d8', 6 | gray: '#d1d5db', 7 | graylight: '#f3f4f6', 8 | graydark: '#4b5563', 9 | accent: '#fbcd77', 10 | red: '#E74C3C', 11 | green: '#47c466', 12 | codGrey: '#1D1D1D', 13 | smokeGrey: '#7C8484', 14 | }; 15 | 16 | export const darkTheme = { 17 | background: '#1A1A1A', 18 | foreground: '#FAFAFA', 19 | }; 20 | 21 | export const lightTheme = { 22 | background: '#FAFAFA', 23 | foreground: '#1A1A1A', 24 | }; 25 | -------------------------------------------------------------------------------- /src/lib/getSize.ts: -------------------------------------------------------------------------------- 1 | import { 2 | widthPercentageToDP, 3 | heightPercentageToDP, 4 | } from 'react-native-responsive-screen'; 5 | import {RFValue} from 'react-native-responsive-fontsize'; 6 | 7 | const removePx = (size: number | string) => { 8 | let tempSize = size.toString(); 9 | if (typeof size === 'string' && tempSize.includes('px')) { 10 | tempSize = tempSize.replace('px', ''); 11 | } 12 | 13 | return tempSize; 14 | }; 15 | 16 | const getWidth = (width: number | string) => { 17 | return `${widthPercentageToDP(removePx(width))}px`; 18 | }; 19 | 20 | const getHeight = (height: number | string) => { 21 | return `${heightPercentageToDP(removePx(height))}px`; 22 | }; 23 | 24 | const getFontSize = (size: number | string) => { 25 | return `${RFValue(Number(removePx(size)))}px`; 26 | }; 27 | 28 | export {getWidth, getHeight, getFontSize}; 29 | -------------------------------------------------------------------------------- /src/navigation/StackNavigation.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC} from 'react'; 2 | import { 3 | NavigationContainer, 4 | useTheme, 5 | DefaultTheme, 6 | DarkTheme, 7 | } from '@react-navigation/native'; 8 | import {createStackNavigator} from '@react-navigation/stack'; 9 | import Welcome from '../screens/stackscreens/Welcome'; 10 | // import {colors} from '../config/colors'; 11 | import Profile from '../components/Header/Profile'; 12 | 13 | import Avatar from '../assets/avi/avatar.png'; 14 | import Greeting from '../components/Header/Greeting'; 15 | import {CardProps} from '../components/Cards/types'; 16 | import Balance from '../screens/stackscreens/Balance'; 17 | import Icon from 'react-native-vector-icons/Ionicons'; 18 | import {useColorScheme} from 'react-native'; 19 | import LoginPage from '../screens/stackscreens/LoginPage'; 20 | import AppTabRoutesRegister from './Tab.routes.register'; 21 | import AppTabRoutesHome from './Tab.routes.home'; 22 | import DrawerHomeRoute from './home.routes'; 23 | import {createNativeStackNavigator} from '@react-navigation/native-stack'; 24 | 25 | export type RootParamList = { 26 | Welcome: undefined; 27 | Home: undefined; 28 | Balance: CardProps; 29 | LoginPage: undefined; 30 | RegisterPage: undefined; 31 | }; 32 | 33 | const {Navigator, Screen, Group} = createNativeStackNavigator(); 34 | 35 | const StackNavigation: FC = () => { 36 | const {colors} = useTheme(); 37 | 38 | return ( 39 | <> 40 | ( 47 | 53 | ), 54 | }}> 55 | 56 | 61 | 66 | 67 | ({ 71 | headerTitleAlign: 'center', 72 | headerBackImage: () => ( 73 | 74 | ), 75 | headerLeftContainerStyle: { 76 | paddingLeft: 0, 77 | }, 78 | })} 79 | /> 80 | 81 | 82 | 83 | 88 | 89 | ( 94 | 99 | ), 100 | headerLeft: () => null, 101 | }} 102 | /> 103 | 104 | 105 | 106 | ); 107 | }; 108 | 109 | export default StackNavigation; 110 | -------------------------------------------------------------------------------- /src/navigation/Tab.routes.home.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC} from 'react'; 2 | import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; 3 | import RegisterPage from '../screens/tabscreens/Register/RegisterPage'; 4 | import {colors} from '../config/colors'; 5 | import HomeIcon from 'react-native-vector-icons/AntDesign'; 6 | import Home from '../screens/tabscreens/Menu/Home'; 7 | import Quotes from '../screens/tabscreens/Menu/Quotes'; 8 | import Buy from '../screens/tabscreens/Menu/Buy'; 9 | import Sell from '../screens/tabscreens/Menu/Sell'; 10 | import BalAndPos from '../screens/tabscreens/Menu/BalAndPos'; 11 | 12 | const {Navigator, Screen} = createBottomTabNavigator(); 13 | 14 | const AppTabRoutesHome: FC = () => { 15 | return ( 16 | 17 | { 22 | return ( 23 | 28 | ); 29 | }, 30 | headerShown: false, 31 | }} 32 | /> 33 | { 38 | return ( 39 | 44 | ); 45 | }, 46 | headerShown: false, 47 | }} 48 | /> 49 | { 54 | return ( 55 | 60 | ); 61 | }, 62 | headerShown: false, 63 | }} 64 | /> 65 | { 70 | return ( 71 | 76 | ); 77 | }, 78 | headerShown: false, 79 | }} 80 | /> 81 | { 86 | return ( 87 | 92 | ); 93 | }, 94 | headerShown: false, 95 | }} 96 | /> 97 | 98 | ); 99 | }; 100 | 101 | export default AppTabRoutesHome; 102 | -------------------------------------------------------------------------------- /src/navigation/Tab.routes.register.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC} from 'react'; 2 | import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; 3 | import RegisterPage from '../screens/tabscreens/Register/RegisterPage'; 4 | import RegisterDocumentUpload from '../screens/tabscreens/Register/RegisterDocumentUpload'; 5 | import DocumentIcon from 'react-native-vector-icons/FontAwesome'; 6 | import FormIcon from 'react-native-vector-icons/AntDesign'; 7 | import VerificationIcon from 'react-native-vector-icons/MaterialIcons'; 8 | import {colors} from '../config/colors'; 9 | import VerificationPage from '../screens/tabscreens/Register/VerificationPage'; 10 | 11 | const {Navigator, Screen} = createBottomTabNavigator(); 12 | 13 | const AppTabRoutesRegister: FC = () => { 14 | return ( 15 | 16 | , 21 | headerShown: false, 22 | }} 23 | /> 24 | , 29 | headerShown: false, 30 | }} 31 | /> 32 | ( 37 | 38 | ), 39 | headerShown: false, 40 | }} 41 | /> 42 | 43 | ); 44 | }; 45 | 46 | export default AppTabRoutesRegister; 47 | -------------------------------------------------------------------------------- /src/navigation/home.routes.tsx: -------------------------------------------------------------------------------- 1 | import {createDrawerNavigator} from '@react-navigation/drawer'; 2 | import React from 'react'; 3 | import {colors} from '../config/colors'; 4 | import Quotes from '../screens/tabscreens/Menu/Quotes'; 5 | import AppTabRoutesHome from './Tab.routes.home'; 6 | import HomeContent from '../components/Drawer/DrawerMenu/Home'; 7 | import StackNavigation from './StackNavigation'; 8 | import DrawerHome from '../components/Drawer/DrawerHome/DrawerHome'; 9 | 10 | const {Navigator, Screen} = createDrawerNavigator(); 11 | 12 | const DrawerHomeNavigation = () => { 13 | return ( 14 | }> 27 | null, 32 | drawerItemStyle: {display: 'none'}, 33 | drawerIcon: () => null, 34 | }} 35 | /> 36 | 37 | ); 38 | }; 39 | 40 | export default DrawerHomeNavigation; 41 | -------------------------------------------------------------------------------- /src/navigation/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import { NavigationContainer } from '@react-navigation/native'; 3 | import DrawerHomeNavigation from './home.routes'; 4 | import StackNavigation from './StackNavigation'; 5 | 6 | 7 | const Routes: FC = () => { 8 | return ( 9 | 10 | 11 | 12 | ); 13 | } 14 | 15 | export default Routes; -------------------------------------------------------------------------------- /src/screens/drawer/Home/Dashboard.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {View, Text} from 'react-native'; 3 | 4 | const Dashboard = () => { 5 | return ( 6 | 7 | Dashboard Page 8 | 9 | ); 10 | }; 11 | 12 | export default Dashboard; 13 | -------------------------------------------------------------------------------- /src/screens/drawer/Home/Watchlist.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {View, Text} from 'react-native'; 3 | 4 | const Watchlist = () => { 5 | return ( 6 | 7 | Watchlist Page 8 | 9 | ); 10 | }; 11 | 12 | export default Watchlist; 13 | -------------------------------------------------------------------------------- /src/screens/stackscreens/Balance.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC} from 'react'; 2 | import styled from 'styled-components/native'; 3 | import { StackScreenProps } from '@react-navigation/stack'; 4 | import { RootParamList } from '../../navigation/StackNavigation'; 5 | import { Container } from '../../components/shared'; 6 | import { colors } from '../../config/colors'; 7 | import AmountSection from '../../components/Balance/AmountSection'; 8 | import BalanceCardSection from '../../components/Balance/BalanceCardSection'; 9 | import ButtonSection from '../../components/Balance/ButtonSection'; 10 | 11 | export type Props = StackScreenProps 12 | 13 | const BalanceContainer = styled(Container)` 14 | background-color: ${colors.graylight}; 15 | width: 100%; 16 | padding: 25px; 17 | flex: 1; 18 | `; 19 | 20 | const Balance: FC = ({ route }) => { 21 | return ( 22 | 23 | 24 | 25 | 26 | 27 | ) 28 | } 29 | 30 | export default Balance; -------------------------------------------------------------------------------- /src/screens/stackscreens/LoginPage.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC, useState} from 'react'; 2 | import styled from 'styled-components/native'; 3 | import {colors} from '../../config/colors'; 4 | import login from '../assets/loginImage.png'; 5 | import login2 from '../../assets/auth/splash_logo.png'; 6 | import RegularButton from '../../components/Buttons/RegularButton'; 7 | import SmallText from '../../components/Texts/SmallText'; 8 | import {useNavigation} from '@react-navigation/native'; 9 | import {TouchableOpacity} from 'react-native-gesture-handler'; 10 | import BigText from '../../components/Texts/BigText'; 11 | import Icon from 'react-native-vector-icons/FontAwesome'; 12 | 13 | const LoginPageBackground = styled.View` 14 | background-color: ${colors.graylight} 15 | width: 100%; 16 | flex: 1; 17 | justify-content: center; 18 | `; 19 | 20 | const TopImage = styled.Image` 21 | max-width: 100%; 22 | max-height: 50%; 23 | background-size: auto; 24 | `; 25 | 26 | const InputText = styled.TextInput` 27 | border-color: ${colors.tertiary}; 28 | height: 40px; 29 | margin: 15px; 30 | border-width: 1px; 31 | padding: 10px; 32 | border-radius: 15px; 33 | `; 34 | 35 | const BottomSection = styled.View` 36 | width: 100%; 37 | padding: 0px 30px; 38 | flex: 1; 39 | `; 40 | 41 | const ContactSection = styled.View` 42 | width: 100%; 43 | flex: 3; 44 | min-height: 100%; 45 | flex-direction: row; 46 | margin-top: 10px; 47 | align-items: flex-start; 48 | `; 49 | 50 | const LoginPage: FC = () => { 51 | const [username, setUsername] = useState(null); 52 | const [password, setPassword] = useState(null); 53 | 54 | const handleChangeUsername = (username: string) => { 55 | setUsername(username); 56 | }; 57 | 58 | const handleChangePassword = (password: string) => { 59 | setPassword(password); 60 | }; 61 | 62 | const navigation = useNavigation(); 63 | 64 | console.log(username, 'username'); 65 | console.log(password, 'password'); 66 | 67 | return ( 68 | 69 | 70 | 71 | {' '} 72 | Login{' '} 73 | 74 | 78 | 83 | 84 | navigation.navigate('Home')}> 88 | Login 89 | 90 | navigation.navigate('RegisterPage')}> 91 | 93 | Don't have an account ? Click Here for Register Online 94 | 95 | 96 | 97 | {' '} 98 | Follow our social media for updates{' '} 99 | 100 | 101 | 102 | 108 | 109 | 110 | 116 | 117 | 118 | 124 | 125 | 126 | 127 | 128 | ); 129 | }; 130 | 131 | export default LoginPage; 132 | -------------------------------------------------------------------------------- /src/screens/stackscreens/Welcome.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC} from 'react'; 2 | import styled from 'styled-components/native'; 3 | import {Container} from '../../components/shared'; 4 | import {colors} from '../../config/colors'; 5 | import BigText from '../../components/Texts/BigText'; 6 | 7 | import background from '../../assets/bgs/background_v1.png'; 8 | import logo from '../../assets/e-wallet-logo.png'; 9 | 10 | import RegularText from '../../components/Texts/RegularText'; 11 | import RegularButton from '../../components/Buttons/RegularButton'; 12 | import {StackScreenProps} from '@react-navigation/stack'; 13 | import {View} from 'react-native'; 14 | import {useNavigation} from '@react-navigation/native'; 15 | 16 | const WelcomeContainer = styled(Container)` 17 | background-color: ${colors.secondary}; 18 | position: relative; 19 | justify-content: space-between; 20 | width: 100%; 21 | height: 100%; 22 | `; 23 | 24 | const LogoImage = styled.Image` 25 | width: 50%; 26 | height: 90%; 27 | background-color: ${colors.tertiary}; 28 | border-radius: 45px; 29 | resize-mode: stretch; 30 | background-size: cover; 31 | `; 32 | 33 | const TopImage = styled.Image` 34 | width: 100%; 35 | height: 100%; 36 | resize-mode: stretch; 37 | background-size: cover; 38 | `; 39 | 40 | const TopSection = styled.View` 41 | width: 100%; 42 | max-height: 50%; 43 | flex: 1; 44 | `; 45 | 46 | const BottomSection = styled.View` 47 | width: 100%; 48 | padding: 25px; 49 | flex: 1; 50 | `; 51 | 52 | const Welcome: FC = ({ navigation }: any) => { 53 | // const navigation = useNavigation(); 54 | 55 | return ( 56 | 57 | 58 | 59 | 60 | 61 | 67 | 68 | Best way to track your money. 69 | 70 | 71 | 72 | 73 | We help you to manage your money and track your expenses. 74 | 75 | navigation.navigate('LoginPage')} 77 | textStyle={{fontWeight: 'bold'}}> 78 | Get Started 79 | 80 | 81 | 82 | ); 83 | }; 84 | 85 | export default Welcome; 86 | -------------------------------------------------------------------------------- /src/screens/tabscreens/Menu/BalAndPos.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC} from 'react'; 2 | import styled from 'styled-components/native'; 3 | import { colors } from '../../../config/colors'; 4 | import { Text } from 'react-native'; 5 | 6 | const BalAndPosContainer = styled.ScrollView` 7 | flex: 1; 8 | background-color: ${colors.graylight}; 9 | `; 10 | 11 | const BalAndPos: FC = () => { 12 | return ( 13 | 14 | 15 | BalAndPos Page 16 | 17 | 18 | ) 19 | } 20 | 21 | export default BalAndPos; -------------------------------------------------------------------------------- /src/screens/tabscreens/Menu/Buy.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC} from 'react'; 2 | import styled from 'styled-components/native'; 3 | import { colors } from '../../../config/colors'; 4 | import { Text } from 'react-native'; 5 | 6 | const BuyContainer = styled.ScrollView` 7 | flex: 1; 8 | background-color: ${colors.graylight}; 9 | `; 10 | 11 | const Buy: FC = () => { 12 | return ( 13 | 14 | 15 | Buy Page 16 | 17 | 18 | ) 19 | } 20 | 21 | export default Buy; -------------------------------------------------------------------------------- /src/screens/tabscreens/Menu/Home.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC} from 'react'; 2 | import styled from 'styled-components/native'; 3 | import {colors} from '../../../config/colors'; 4 | import {RootParamList} from '../../../navigation/StackNavigation'; 5 | import CardSection from '../../../components/Cards/CardSection'; 6 | 7 | import TransactionSection from '../../../components/Transactions/TransactionSection'; 8 | import SendMoneySection from '../../../components/SendMoney/SendMoneySection'; 9 | import {data, sendMoney, transactions} from '../../../DummyData'; 10 | import {BottomTabScreenProps} from '@react-navigation/bottom-tabs'; 11 | 12 | // export type Props = BottomTabScreenProps; 13 | 14 | 15 | const HomeContainer = styled.View` 16 | background-color: ${colors.graylight}; 17 | flex: 1; 18 | width: 100%; 19 | `; 20 | 21 | const Home: FC = () => { 22 | return ( 23 | 24 | 25 | 26 | 27 | 28 | ); 29 | }; 30 | 31 | export default Home; 32 | -------------------------------------------------------------------------------- /src/screens/tabscreens/Menu/Quotes.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC} from 'react'; 2 | import styled from 'styled-components/native'; 3 | import {colors} from '../../../config/colors'; 4 | import { Text, View } from 'react-native'; 5 | import { 6 | Area, 7 | Chart, 8 | HorizontalAxis, 9 | Line, 10 | VerticalAxis, 11 | } from 'react-native-responsive-linechart'; 12 | import { AreaChart, Grid, XAxis } from 'react-native-svg-charts'; 13 | import * as scale from 'd3-scale'; 14 | import * as shape from 'd3-shape' 15 | import * as dateFns from 'date-fns'; 16 | 17 | const QuotesContainer = styled.ScrollView` 18 | flex: 1; 19 | background-color: ${colors.graylight}; 20 | `; 21 | 22 | const Quotes: FC = () => { 23 | const data = [ 24 | { 25 | value: 50, 26 | date: dateFns.setHours(new Date(2022, 0, 0), 6), 27 | }, 28 | { 29 | value: 10, 30 | date: dateFns.setHours(new Date(2022, 0, 0), 9), 31 | }, 32 | { 33 | value: 150, 34 | date: dateFns.setHours(new Date(2022, 0, 0), 15), 35 | }, 36 | { 37 | value: 10, 38 | date: dateFns.setHours(new Date(2022, 0, 0), 18), 39 | }, 40 | { 41 | value: 100, 42 | date: dateFns.setHours(new Date(2022, 0, 0), 21), 43 | }, 44 | { 45 | value: 20, 46 | date: dateFns.setHours(new Date(2022, 0, 0), 24), 47 | }, 48 | ] 49 | 50 | return ( 51 | 52 | item.value } 56 | //@ts-ignore 57 | xAccessor={ ({ item }) => item.date } 58 | xScale={ scale.scaleTime } 59 | contentInset={{ top: 10, bottom: 10 }} 60 | svg={{ fill: 'rgba(134, 134, 244, 0.5)' }} 61 | curve={ shape.curveLinear } 62 | > 63 | 64 | 65 | item.date } 76 | scale={ scale.scaleTime } 77 | numberOfTicks={ 6 } 78 | style={{ marginHorizontal: -15, height: 20 }} 79 | contentInset={{ left: 10, right: 25 }} 80 | formatLabel={ (value) => dateFns.format(value, 'MM/dd') } 81 | /> 82 | 83 | ) 84 | }; 85 | 86 | export default Quotes; 87 | -------------------------------------------------------------------------------- /src/screens/tabscreens/Menu/Sell.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC} from 'react'; 2 | import styled from 'styled-components/native'; 3 | import { colors } from '../../../config/colors'; 4 | import { Text } from 'react-native'; 5 | 6 | const SellContainer = styled.ScrollView` 7 | flex: 1; 8 | background-color: ${colors.graylight}; 9 | `; 10 | 11 | const Sell: FC = () => { 12 | return ( 13 | 14 | 15 | Sell Page 16 | 17 | 18 | ) 19 | } 20 | 21 | export default Sell; -------------------------------------------------------------------------------- /src/screens/tabscreens/Register/RegisterDocumentUpload.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC} from 'react'; 2 | import styled from 'styled-components/native'; 3 | import {colors} from '../../../config/colors'; 4 | import register from '../../../assets/regisImage.png'; 5 | 6 | const RegisterDocumentBackground = styled.View` 7 | background-color = ${colors.graylight} 8 | width: 100% 9 | flex: 1; 10 | align-items: center; 11 | `; 12 | 13 | const TopImage = styled.Image` 14 | width: 100%; 15 | height: 100%; 16 | background-size: cover; 17 | `; 18 | 19 | const TopSection = styled.View` 20 | width: 100%; 21 | max-height: 100%; 22 | flex: 1; 23 | `; 24 | 25 | const RegisterDocumentUpload: FC = () => { 26 | return ( 27 | 28 | 29 | 30 | 31 | 32 | ); 33 | }; 34 | 35 | export default RegisterDocumentUpload; 36 | -------------------------------------------------------------------------------- /src/screens/tabscreens/Register/RegisterPage.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC, useState} from 'react'; 2 | import styled from 'styled-components/native'; 3 | import register from '../../../assets/regisImage.png'; 4 | import { colors } from '../../../config/colors'; 5 | import BigText from '../../../components/Texts/BigText'; 6 | import RegularButton from '../../../components/Buttons/RegularButton'; 7 | 8 | const RegisterPageBackground = styled.View` 9 | background-color: ${colors.graylight} 10 | width: 100%; 11 | flex: 1; 12 | justify-content: center; 13 | `; 14 | 15 | const TopImage = styled.Image` 16 | width: 100%; 17 | height: 100%;r 18 | background-size: cover; 19 | `; 20 | 21 | const InputText = styled.TextInput` 22 | border-color: ${colors.tertiary}; 23 | height: 40px; 24 | margin: 15px; 25 | border-width: 1px; 26 | padding: 10px; 27 | border-radius: 15px; 28 | `; 29 | 30 | const TopSection = styled.View` 31 | width: 100%; 32 | max-height: 100%; 33 | flex: 1; 34 | `; 35 | 36 | const BottomSection = styled.View` 37 | width: 100%; 38 | margin-top: 130px; 39 | padding: 25px; 40 | flex: 1; 41 | `; 42 | 43 | const RegisterPage: FC = () => { 44 | const [fullname, setFullname] = useState(null); 45 | const [email, setEmail] = useState(null); 46 | const [password, setPassword] = useState(null); 47 | 48 | const handleChangeFullname = (fullname: string) => { 49 | setFullname(fullname); 50 | }; 51 | 52 | const handleChangeEmail = (email: string) => { 53 | setEmail(email); 54 | }; 55 | 56 | const handleChangePassword = (password: string) => { 57 | setPassword(password); 58 | }; 59 | 60 | console.log(email, 'email'); 61 | console.log(password, 'password'); 62 | console.log(fullname, 'fullname'); 63 | 64 | return ( 65 | 66 | 67 | 68 | 69 | {' '} 70 | Register{' '} 71 | 72 | 73 | 74 | 79 | 80 | 81 | {}}> 85 | Register 86 | 87 | 88 | 89 | ); 90 | }; 91 | 92 | export default RegisterPage; 93 | -------------------------------------------------------------------------------- /src/screens/tabscreens/Register/VerificationPage.tsx: -------------------------------------------------------------------------------- 1 | import React, {FC} from 'react'; 2 | import styled from 'styled-components/native'; 3 | import {colors} from '../../../config/colors'; 4 | import register from '../../../assets/regisImage.png'; 5 | 6 | const VerificationPageBackground = styled.View` 7 | background-color: ${colors.graylight} 8 | width: 100%; 9 | flex: 1; 10 | justify-content: center; 11 | `; 12 | 13 | const TopImage = styled.Image` 14 | width: 100%; 15 | height: 100%; 16 | background-size: cover; 17 | `; 18 | 19 | const VerificationPage = () => { 20 | return ( 21 | 22 | 23 | 24 | ); 25 | }; 26 | 27 | export default VerificationPage; 28 | -------------------------------------------------------------------------------- /src/store/StateContext.tsx: -------------------------------------------------------------------------------- 1 | import React, {createContext, useState} from 'react'; 2 | import {ReactNode} from 'react'; 3 | 4 | export const StateContext = createContext({ 5 | initial: 0, 6 | value: 0, 7 | tooltipVisible: false, 8 | handleStartWith: (number: number) => {}, 9 | handleValue: (number: number) => {}, 10 | handleTooltip: (state: boolean) => {}, 11 | }) 12 | 13 | function StateContextProvider({children}: {children: ReactNode}) { 14 | const [startWith, setStartWith] = useState(0) 15 | const [changed, setChanged] = useState(0) 16 | const [tooltip, setTooltip] = useState(false) 17 | 18 | function handleStartWith(number: number) { 19 | setStartWith(number) 20 | } 21 | 22 | function handleValue(number: number) { 23 | setChanged(number) 24 | } 25 | 26 | function handleTooltip(state: boolean) { 27 | setTooltip(state) 28 | } 29 | 30 | const value = { 31 | initial: startWith, 32 | value: changed, 33 | tooltipVisible: tooltip, 34 | handleStartWith: handleStartWith, 35 | handleValue: handleValue, 36 | handleTooltip: handleTooltip, 37 | } 38 | 39 | return {children} 40 | } 41 | 42 | export default StateContextProvider -------------------------------------------------------------------------------- /src/types/stock.ts: -------------------------------------------------------------------------------- 1 | export interface MyObject { 2 | x: string; 3 | y: string; 4 | meta: string; 5 | } 6 | 7 | export interface filteredOptions { 8 | symbol?: string; 9 | name: string; 10 | type: string; 11 | region: string; 12 | marketOpen: string; 13 | marketClose: string; 14 | timezone: string; 15 | currency: string; 16 | matchScore: string; 17 | price?: string; 18 | filteredOptions?: object; 19 | companyOverview?: object; 20 | length: number; 21 | } 22 | 23 | export interface StockObjInfo { 24 | currency: string; 25 | marketClose: string; 26 | marketOpen: string; 27 | marketSource: string; 28 | name: string; 29 | region: string; 30 | symbol: string; 31 | timezone: string; 32 | type: string; 33 | price: string; 34 | [propName: string]: any; // string index signature - allow us to have extra properties 35 | } 36 | 37 | export interface BestMatchesInfo { 38 | matchScore: string; 39 | region: string; 40 | } 41 | 42 | export interface RenderItemProps { 43 | item: string; 44 | } 45 | 46 | export interface SearchBarProps {} -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | // prettier-ignore 2 | { 3 | "extends": "@tsconfig/react-native/tsconfig.json", /* Recommended React Native TSConfig base */ 4 | "compilerOptions": { 5 | /* Visit https://aka.ms/tsconfig.json to read more about this file */ 6 | 7 | /* Completeness */ 8 | "skipLibCheck": true, 9 | "types": ["jest", "styled-components-react-native"], /* Skip type checking all .d.ts files. */ 10 | } 11 | } 12 | --------------------------------------------------------------------------------