├── README.md ├── banking_app ├── .buckconfig ├── .eslintrc.js ├── .flowconfig ├── .gitattributes ├── .gitignore ├── .prettierrc.js ├── .watchmanconfig ├── App.js ├── __tests__ │ └── App-test.js ├── android │ ├── app │ │ ├── BUCK │ │ ├── build.gradle │ │ ├── build_defs.bzl │ │ ├── debug.keystore │ │ ├── proguard-rules.pro │ │ └── src │ │ │ ├── debug │ │ │ ├── AndroidManifest.xml │ │ │ └── java │ │ │ │ └── com │ │ │ │ └── banking_app │ │ │ │ └── ReactNativeFlipper.java │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── java │ │ │ └── com │ │ │ │ └── banking_app │ │ │ │ ├── MainActivity.java │ │ │ │ └── MainApplication.java │ │ │ └── res │ │ │ ├── mipmap-hdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-mdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ └── values │ │ │ ├── strings.xml │ │ │ └── styles.xml │ ├── build.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ └── settings.gradle ├── app.json ├── babel.config.js ├── index.js ├── ios │ ├── Podfile │ ├── banking_app-tvOS │ │ └── Info.plist │ ├── banking_app-tvOSTests │ │ └── Info.plist │ ├── banking_app.xcodeproj │ │ ├── project.pbxproj │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ ├── banking_app-tvOS.xcscheme │ │ │ └── banking_app.xcscheme │ ├── banking_app │ │ ├── AppDelegate.h │ │ ├── AppDelegate.m │ │ ├── Images.xcassets │ │ │ ├── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ │ └── Contents.json │ │ ├── Info.plist │ │ ├── LaunchScreen.storyboard │ │ └── main.m │ └── banking_appTests │ │ ├── Info.plist │ │ └── banking_appTests.m ├── metro.config.js ├── package-lock.json ├── package.json ├── src │ ├── assets │ │ ├── avatar.png │ │ ├── mastercard.jpg │ │ └── mastercard.png │ ├── components │ │ ├── NumberPad.js │ │ └── Text.js │ ├── data │ │ └── purchases.js │ └── screens │ │ ├── CardsScreen.js │ │ ├── HomeScreen.js │ │ ├── PinScreen.js │ │ ├── SendRequests.js │ │ └── TouchScreen.js └── yarn.lock ├── game_store_app ├── .buckconfig ├── .eslintrc.js ├── .flowconfig ├── .gitattributes ├── .gitignore ├── .prettierrc.js ├── .watchmanconfig ├── App.js ├── __tests__ │ └── App-test.js ├── android │ ├── app │ │ ├── BUCK │ │ ├── build.gradle │ │ ├── build_defs.bzl │ │ ├── debug.keystore │ │ ├── proguard-rules.pro │ │ └── src │ │ │ ├── debug │ │ │ ├── AndroidManifest.xml │ │ │ └── java │ │ │ │ └── com │ │ │ │ └── game_store_app │ │ │ │ └── ReactNativeFlipper.java │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── java │ │ │ └── com │ │ │ │ └── game_store_app │ │ │ │ ├── MainActivity.java │ │ │ │ └── MainApplication.java │ │ │ └── res │ │ │ ├── mipmap-hdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-mdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ └── values │ │ │ ├── strings.xml │ │ │ └── styles.xml │ ├── build.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ └── settings.gradle ├── app.json ├── babel.config.js ├── index.js ├── ios │ ├── Podfile │ ├── game_store_app-tvOS │ │ └── Info.plist │ ├── game_store_app-tvOSTests │ │ └── Info.plist │ ├── game_store_app.xcodeproj │ │ ├── project.pbxproj │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ ├── game_store_app-tvOS.xcscheme │ │ │ └── game_store_app.xcscheme │ ├── game_store_app │ │ ├── AppDelegate.h │ │ ├── AppDelegate.m │ │ ├── Images.xcassets │ │ │ ├── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ │ └── Contents.json │ │ ├── Info.plist │ │ ├── LaunchScreen.storyboard │ │ └── main.m │ └── game_store_appTests │ │ ├── Info.plist │ │ └── game_store_appTests.m ├── metro.config.js ├── package-lock.json ├── package.json ├── src │ ├── assets │ │ ├── 3on3_cover.jpg │ │ ├── avatar.png │ │ ├── screenshot_game1.jpg │ │ ├── screenshot_game2.jpg │ │ └── screenshot_game3.jpg │ ├── components │ │ ├── screens │ │ │ ├── GameScreen.js │ │ │ ├── HomeScreen.js │ │ │ ├── LiveScreen.js │ │ │ └── ProfileScreen.js │ │ └── utils │ │ │ └── Text.js │ └── data │ │ ├── Categories.js │ │ └── GameData.js └── yarn.lock └── tiktok_clone ├── .buckconfig ├── .eslintrc.js ├── .flowconfig ├── .gitattributes ├── .gitignore ├── .prettierrc.js ├── .watchmanconfig ├── App.js ├── __tests__ └── App-test.js ├── android ├── app │ ├── BUCK │ ├── build.gradle │ ├── build_defs.bzl │ ├── debug.keystore │ ├── proguard-rules.pro │ └── src │ │ ├── debug │ │ ├── AndroidManifest.xml │ │ └── java │ │ │ └── com │ │ │ └── tiktok_clone │ │ │ └── ReactNativeFlipper.java │ │ └── main │ │ ├── AndroidManifest.xml │ │ ├── java │ │ └── com │ │ │ └── tiktok_clone │ │ │ ├── MainActivity.java │ │ │ └── MainApplication.java │ │ └── res │ │ ├── mipmap-hdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-mdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xxhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xxxhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ └── values │ │ ├── strings.xml │ │ └── styles.xml ├── build.gradle ├── gradle.properties ├── gradle │ └── wrapper │ │ ├── gradle-wrapper.jar │ │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat └── settings.gradle ├── app.json ├── babel.config.js ├── index.js ├── ios ├── Podfile ├── tiktok_clone-tvOS │ └── Info.plist ├── tiktok_clone-tvOSTests │ └── Info.plist ├── tiktok_clone.xcodeproj │ ├── project.pbxproj │ └── xcshareddata │ │ └── xcschemes │ │ ├── tiktok_clone-tvOS.xcscheme │ │ └── tiktok_clone.xcscheme ├── tiktok_clone │ ├── AppDelegate.h │ ├── AppDelegate.m │ ├── Images.xcassets │ │ ├── AppIcon.appiconset │ │ │ └── Contents.json │ │ └── Contents.json │ ├── Info.plist │ ├── LaunchScreen.storyboard │ └── main.m └── tiktok_cloneTests │ ├── Info.plist │ └── tiktok_cloneTests.m ├── metro.config.js ├── package-lock.json ├── package.json └── src ├── assets └── images │ └── plus-icon.png ├── components └── Post │ ├── index.js │ └── styles.js ├── data └── posts.js ├── navigation ├── homeBottomTabNavigator.js └── index.js └── screens └── Home └── index.js /README.md: -------------------------------------------------------------------------------- 1 | ## :computer: React-Native UI Challenge :tada: :tada: 2 | ## DesignIntoCode :snail: :snail: 3 | - :rocket: serries react-native beauty UI - lambiengcode 4 | -------------------------------------------------------------------------------- /banking_app/.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /banking_app/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native-community', 4 | }; 5 | -------------------------------------------------------------------------------- /banking_app/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | ; We fork some components by platform 3 | .*/*[.]android.js 4 | 5 | ; Ignore "BUCK" generated dirs 6 | /\.buckd/ 7 | 8 | ; Ignore polyfills 9 | node_modules/react-native/Libraries/polyfills/.* 10 | 11 | ; These should not be required directly 12 | ; require from fbjs/lib instead: require('fbjs/lib/warning') 13 | node_modules/warning/.* 14 | 15 | ; Flow doesn't support platforms 16 | .*/Libraries/Utilities/LoadingView.js 17 | 18 | [untyped] 19 | .*/node_modules/@react-native-community/cli/.*/.* 20 | 21 | [include] 22 | 23 | [libs] 24 | node_modules/react-native/interface.js 25 | node_modules/react-native/flow/ 26 | 27 | [options] 28 | emoji=true 29 | 30 | esproposal.optional_chaining=enable 31 | esproposal.nullish_coalescing=enable 32 | 33 | module.file_ext=.js 34 | module.file_ext=.json 35 | module.file_ext=.ios.js 36 | 37 | munge_underscores=true 38 | 39 | module.name_mapper='^react-native/\(.*\)$' -> '/node_modules/react-native/\1' 40 | module.name_mapper='^@?[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> '/node_modules/react-native/Libraries/Image/RelativeImageStub' 41 | 42 | suppress_type=$FlowIssue 43 | suppress_type=$FlowFixMe 44 | suppress_type=$FlowFixMeProps 45 | suppress_type=$FlowFixMeState 46 | 47 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\) 48 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)?:? #[0-9]+ 49 | suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError 50 | 51 | [lints] 52 | sketchy-null-number=warn 53 | sketchy-null-mixed=warn 54 | sketchy-number=warn 55 | untyped-type-import=warn 56 | nonstrict-import=warn 57 | deprecated-type=warn 58 | unsafe-getters-setters=warn 59 | unnecessary-invariant=warn 60 | signature-verification-failure=warn 61 | deprecated-utility=error 62 | 63 | [strict] 64 | deprecated-type 65 | nonstrict-import 66 | sketchy-null 67 | unclear-type 68 | unsafe-getters-setters 69 | untyped-import 70 | untyped-type-import 71 | 72 | [version] 73 | ^0.122.0 74 | -------------------------------------------------------------------------------- /banking_app/.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | -------------------------------------------------------------------------------- /banking_app/.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | 24 | # Android/IntelliJ 25 | # 26 | build/ 27 | .idea 28 | .gradle 29 | local.properties 30 | *.iml 31 | 32 | # node.js 33 | # 34 | node_modules/ 35 | npm-debug.log 36 | yarn-error.log 37 | 38 | # BUCK 39 | buck-out/ 40 | \.buckd/ 41 | *.keystore 42 | !debug.keystore 43 | 44 | # fastlane 45 | # 46 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 47 | # screenshots whenever they are needed. 48 | # For more information about the recommended setup visit: 49 | # https://docs.fastlane.tools/best-practices/source-control/ 50 | 51 | */fastlane/report.xml 52 | */fastlane/Preview.html 53 | */fastlane/screenshots 54 | 55 | # Bundle artifact 56 | *.jsbundle 57 | 58 | # CocoaPods 59 | /ios/Pods/ 60 | -------------------------------------------------------------------------------- /banking_app/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | bracketSpacing: false, 3 | jsxBracketSameLine: true, 4 | singleQuote: true, 5 | trailingComma: 'all', 6 | }; 7 | -------------------------------------------------------------------------------- /banking_app/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /banking_app/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {NavigationContainer} from '@react-navigation/native'; 3 | import {createStackNavigator} from '@react-navigation/stack'; 4 | import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; 5 | 6 | import MaterialIcons from 'react-native-vector-icons/MaterialIcons'; 7 | 8 | import TouchScreen from './src/screens/TouchScreen'; 9 | import PinScreen from './src/screens/PinScreen'; 10 | import HomeScreen from './src/screens/HomeScreen'; 11 | import CardsScreen from './src/screens/CardsScreen'; 12 | import SendRequests from './src/screens/SendRequests'; 13 | 14 | const AppStack = createStackNavigator(); 15 | const TabStack = createBottomTabNavigator(); 16 | 17 | export default App = () => { 18 | 19 | const tabBarOptions = { 20 | showLabel: true, 21 | style: { 22 | backgroundColor: '#1e1e1e', 23 | borderTopColor: '#1e1e1e', 24 | paddingBottom: 10.0, 25 | } 26 | } 27 | 28 | const screenOptions = ({route}) => ({ 29 | tabBarIcon: ({focused}) => { 30 | let icon = ''; 31 | const color = focused ? '#559dff' : '#828282'; 32 | const size = 24; 33 | 34 | switch (route.name) { 35 | case 'CardsScreen': 36 | icon = 'credit-card'; 37 | break; 38 | 39 | case 'SendRequests': 40 | icon = 'send'; 41 | break; 42 | 43 | default: 44 | icon = 'dashboard'; 45 | break; 46 | } 47 | 48 | return ; 49 | } 50 | }) 51 | 52 | const TabStackScreens = () => { 53 | return ( 54 | 55 | 56 | 57 | 58 | 59 | ) 60 | } 61 | 62 | return ( 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | ); 71 | }; 72 | -------------------------------------------------------------------------------- /banking_app/__tests__/App-test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import 'react-native'; 6 | import React from 'react'; 7 | import App from '../App'; 8 | 9 | // Note: test renderer must be required after react-native. 10 | import renderer from 'react-test-renderer'; 11 | 12 | it('renders correctly', () => { 13 | renderer.create(); 14 | }); 15 | -------------------------------------------------------------------------------- /banking_app/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.banking_app", 39 | ) 40 | 41 | android_resource( 42 | name = "res", 43 | package = "com.banking_app", 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 | -------------------------------------------------------------------------------- /banking_app/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 | -------------------------------------------------------------------------------- /banking_app/android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/banking_app/android/app/debug.keystore -------------------------------------------------------------------------------- /banking_app/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 | -------------------------------------------------------------------------------- /banking_app/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /banking_app/android/app/src/debug/java/com/banking_app/ReactNativeFlipper.java: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its 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.banking_app; 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.ReactInstanceManager; 23 | import com.facebook.react.bridge.ReactContext; 24 | import com.facebook.react.modules.network.NetworkingModule; 25 | import okhttp3.OkHttpClient; 26 | 27 | public class ReactNativeFlipper { 28 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) { 29 | if (FlipperUtils.shouldEnableFlipper(context)) { 30 | final FlipperClient client = AndroidFlipperClient.getInstance(context); 31 | 32 | client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults())); 33 | client.addPlugin(new ReactFlipperPlugin()); 34 | client.addPlugin(new DatabasesFlipperPlugin(context)); 35 | client.addPlugin(new SharedPreferencesFlipperPlugin(context)); 36 | client.addPlugin(CrashReporterPlugin.getInstance()); 37 | 38 | NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin(); 39 | NetworkingModule.setCustomClientBuilder( 40 | new NetworkingModule.CustomClientBuilder() { 41 | @Override 42 | public void apply(OkHttpClient.Builder builder) { 43 | builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); 44 | } 45 | }); 46 | client.addPlugin(networkFlipperPlugin); 47 | client.start(); 48 | 49 | // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized 50 | // Hence we run if after all native modules have been initialized 51 | ReactContext reactContext = reactInstanceManager.getCurrentReactContext(); 52 | if (reactContext == null) { 53 | reactInstanceManager.addReactInstanceEventListener( 54 | new ReactInstanceManager.ReactInstanceEventListener() { 55 | @Override 56 | public void onReactContextInitialized(ReactContext reactContext) { 57 | reactInstanceManager.removeReactInstanceEventListener(this); 58 | reactContext.runOnNativeModulesQueueThread( 59 | new Runnable() { 60 | @Override 61 | public void run() { 62 | client.addPlugin(new FrescoFlipperPlugin()); 63 | } 64 | }); 65 | } 66 | }); 67 | } else { 68 | client.addPlugin(new FrescoFlipperPlugin()); 69 | } 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /banking_app/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 13 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /banking_app/android/app/src/main/java/com/banking_app/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.banking_app; 2 | 3 | import com.facebook.react.ReactActivity; 4 | 5 | public class MainActivity extends ReactActivity { 6 | 7 | /** 8 | * Returns the name of the main component registered from JavaScript. This is used to schedule 9 | * rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "banking_app"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /banking_app/android/app/src/main/java/com/banking_app/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.banking_app; 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.soloader.SoLoader; 11 | import java.lang.reflect.InvocationTargetException; 12 | import java.util.List; 13 | 14 | public class MainApplication extends Application implements ReactApplication { 15 | 16 | private final ReactNativeHost mReactNativeHost = 17 | new ReactNativeHost(this) { 18 | @Override 19 | public boolean getUseDeveloperSupport() { 20 | return BuildConfig.DEBUG; 21 | } 22 | 23 | @Override 24 | protected List getPackages() { 25 | @SuppressWarnings("UnnecessaryLocalVariable") 26 | List packages = new PackageList(this).getPackages(); 27 | // Packages that cannot be autolinked yet can be added manually here, for example: 28 | // packages.add(new MyReactNativePackage()); 29 | return packages; 30 | } 31 | 32 | @Override 33 | protected String getJSMainModuleName() { 34 | return "index"; 35 | } 36 | }; 37 | 38 | @Override 39 | public ReactNativeHost getReactNativeHost() { 40 | return mReactNativeHost; 41 | } 42 | 43 | @Override 44 | public void onCreate() { 45 | super.onCreate(); 46 | SoLoader.init(this, /* native exopackage */ false); 47 | initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 48 | } 49 | 50 | /** 51 | * Loads Flipper in React Native templates. Call this in the onCreate method with something like 52 | * initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 53 | * 54 | * @param context 55 | * @param reactInstanceManager 56 | */ 57 | private static void initializeFlipper( 58 | Context context, ReactInstanceManager reactInstanceManager) { 59 | if (BuildConfig.DEBUG) { 60 | try { 61 | /* 62 | We use reflection here to pick up the class that initializes Flipper, 63 | since Flipper library is not available in release mode 64 | */ 65 | Class aClass = Class.forName("com.banking_app.ReactNativeFlipper"); 66 | aClass 67 | .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class) 68 | .invoke(null, context, reactInstanceManager); 69 | } catch (ClassNotFoundException e) { 70 | e.printStackTrace(); 71 | } catch (NoSuchMethodException e) { 72 | e.printStackTrace(); 73 | } catch (IllegalAccessException e) { 74 | e.printStackTrace(); 75 | } catch (InvocationTargetException e) { 76 | e.printStackTrace(); 77 | } 78 | } 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /banking_app/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/banking_app/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /banking_app/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/banking_app/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /banking_app/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/banking_app/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /banking_app/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/banking_app/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /banking_app/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/banking_app/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /banking_app/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/banking_app/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /banking_app/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/banking_app/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /banking_app/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/banking_app/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /banking_app/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/banking_app/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /banking_app/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/banking_app/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /banking_app/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | banking_app 3 | 4 | -------------------------------------------------------------------------------- /banking_app/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /banking_app/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | ext { 5 | buildToolsVersion = "29.0.2" 6 | minSdkVersion = 16 7 | compileSdkVersion = 29 8 | targetSdkVersion = 29 9 | } 10 | repositories { 11 | google() 12 | jcenter() 13 | } 14 | dependencies { 15 | classpath("com.android.tools.build:gradle:3.5.3") 16 | // NOTE: Do not place your application dependencies here; they belong 17 | // in the individual module build.gradle files 18 | } 19 | } 20 | 21 | allprojects { 22 | repositories { 23 | mavenLocal() 24 | maven { 25 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 26 | url("$rootDir/../node_modules/react-native/android") 27 | } 28 | maven { 29 | // Android JSC is installed from npm 30 | url("$rootDir/../node_modules/jsc-android/dist") 31 | } 32 | 33 | google() 34 | jcenter() 35 | maven { url 'https://www.jitpack.io' } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /banking_app/android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx10248m -XX:MaxPermSize=256m 13 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | # 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.54.0 29 | -------------------------------------------------------------------------------- /banking_app/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/banking_app/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /banking_app/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-6.2-all.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /banking_app/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 init 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 init 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 | :init 68 | @rem Get command-line arguments, handling Windows variants 69 | 70 | if not "%OS%" == "Windows_NT" goto win9xME_args 71 | 72 | :win9xME_args 73 | @rem Slurp the command line arguments. 74 | set CMD_LINE_ARGS= 75 | set _SKIP=2 76 | 77 | :win9xME_args_slurp 78 | if "x%~1" == "x" goto execute 79 | 80 | set CMD_LINE_ARGS=%* 81 | 82 | :execute 83 | @rem Setup the command line 84 | 85 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 86 | 87 | @rem Execute Gradle 88 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 89 | 90 | :end 91 | @rem End local scope for the variables with windows NT shell 92 | if "%ERRORLEVEL%"=="0" goto mainEnd 93 | 94 | :fail 95 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 96 | rem the _cmd.exe /c_ return code! 97 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 98 | exit /b 1 99 | 100 | :mainEnd 101 | if "%OS%"=="Windows_NT" endlocal 102 | 103 | :omega 104 | -------------------------------------------------------------------------------- /banking_app/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'banking_app' 2 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 3 | include ':app' 4 | -------------------------------------------------------------------------------- /banking_app/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "banking_app", 3 | "displayName": "banking_app" 4 | } -------------------------------------------------------------------------------- /banking_app/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /banking_app/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import {AppRegistry} from 'react-native'; 6 | import App from './App'; 7 | import {name as appName} from './app.json'; 8 | 9 | AppRegistry.registerComponent(appName, () => App); 10 | -------------------------------------------------------------------------------- /banking_app/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, '10.0' 5 | 6 | target 'banking_app' do 7 | config = use_native_modules! 8 | 9 | use_react_native!(:path => config["reactNativePath"]) 10 | 11 | target 'banking_appTests' do 12 | inherit! :complete 13 | # Pods for testing 14 | end 15 | 16 | # Enables Flipper. 17 | # 18 | # Note that if you have use_frameworks! enabled, Flipper will not work and 19 | # you should disable these next few lines. 20 | use_flipper! 21 | post_install do |installer| 22 | flipper_post_install(installer) 23 | end 24 | end 25 | 26 | target 'banking_app-tvOS' do 27 | # Pods for banking_app-tvOS 28 | 29 | target 'banking_app-tvOSTests' do 30 | inherit! :search_paths 31 | # Pods for testing 32 | end 33 | end 34 | -------------------------------------------------------------------------------- /banking_app/ios/banking_app-tvOS/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | APPL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | LSRequiresIPhoneOS 24 | 25 | NSAppTransportSecurity 26 | 27 | NSExceptionDomains 28 | 29 | localhost 30 | 31 | NSExceptionAllowsInsecureHTTPLoads 32 | 33 | 34 | 35 | 36 | NSLocationWhenInUseUsageDescription 37 | 38 | UILaunchStoryboardName 39 | LaunchScreen 40 | UIRequiredDeviceCapabilities 41 | 42 | armv7 43 | 44 | UISupportedInterfaceOrientations 45 | 46 | UIInterfaceOrientationPortrait 47 | UIInterfaceOrientationLandscapeLeft 48 | UIInterfaceOrientationLandscapeRight 49 | 50 | UIViewControllerBasedStatusBarAppearance 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /banking_app/ios/banking_app-tvOSTests/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 | -------------------------------------------------------------------------------- /banking_app/ios/banking_app.xcodeproj/xcshareddata/xcschemes/banking_app-tvOS.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 | -------------------------------------------------------------------------------- /banking_app/ios/banking_app.xcodeproj/xcshareddata/xcschemes/banking_app.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 | -------------------------------------------------------------------------------- /banking_app/ios/banking_app/AppDelegate.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | @interface AppDelegate : UIResponder 5 | 6 | @property (nonatomic, strong) UIWindow *window; 7 | 8 | @end 9 | -------------------------------------------------------------------------------- /banking_app/ios/banking_app/AppDelegate.m: -------------------------------------------------------------------------------- 1 | #import "AppDelegate.h" 2 | 3 | #import 4 | #import 5 | #import 6 | 7 | #ifdef FB_SONARKIT_ENABLED 8 | #import 9 | #import 10 | #import 11 | #import 12 | #import 13 | #import 14 | 15 | static void InitializeFlipper(UIApplication *application) { 16 | FlipperClient *client = [FlipperClient sharedClient]; 17 | SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults]; 18 | [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:application withDescriptorMapper:layoutDescriptorMapper]]; 19 | [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]]; 20 | [client addPlugin:[FlipperKitReactPlugin new]]; 21 | [client addPlugin:[[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]]; 22 | [client start]; 23 | } 24 | #endif 25 | 26 | @implementation AppDelegate 27 | 28 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 29 | { 30 | #ifdef FB_SONARKIT_ENABLED 31 | InitializeFlipper(application); 32 | #endif 33 | 34 | RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions]; 35 | RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge 36 | moduleName:@"banking_app" 37 | initialProperties:nil]; 38 | 39 | rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; 40 | 41 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 42 | UIViewController *rootViewController = [UIViewController new]; 43 | rootViewController.view = rootView; 44 | self.window.rootViewController = rootViewController; 45 | [self.window makeKeyAndVisible]; 46 | return YES; 47 | } 48 | 49 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge 50 | { 51 | #if DEBUG 52 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; 53 | #else 54 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 55 | #endif 56 | } 57 | 58 | @end 59 | -------------------------------------------------------------------------------- /banking_app/ios/banking_app/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "29x29", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "29x29", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "40x40", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "40x40", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "60x60", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "60x60", 31 | "scale" : "3x" 32 | } 33 | ], 34 | "info" : { 35 | "version" : 1, 36 | "author" : "xcode" 37 | } 38 | } -------------------------------------------------------------------------------- /banking_app/ios/banking_app/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /banking_app/ios/banking_app/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | banking_app 9 | CFBundleExecutable 10 | $(EXECUTABLE_NAME) 11 | CFBundleIdentifier 12 | $(PRODUCT_BUNDLE_IDENTIFIER) 13 | CFBundleInfoDictionaryVersion 14 | 6.0 15 | CFBundleName 16 | $(PRODUCT_NAME) 17 | CFBundlePackageType 18 | APPL 19 | CFBundleShortVersionString 20 | 1.0 21 | CFBundleSignature 22 | ???? 23 | CFBundleVersion 24 | 1 25 | LSRequiresIPhoneOS 26 | 27 | NSAppTransportSecurity 28 | 29 | NSAllowsArbitraryLoads 30 | 31 | NSExceptionDomains 32 | 33 | localhost 34 | 35 | NSExceptionAllowsInsecureHTTPLoads 36 | 37 | 38 | 39 | 40 | NSLocationWhenInUseUsageDescription 41 | 42 | UILaunchStoryboardName 43 | LaunchScreen 44 | UIRequiredDeviceCapabilities 45 | 46 | armv7 47 | 48 | UISupportedInterfaceOrientations 49 | 50 | UIInterfaceOrientationPortrait 51 | UIInterfaceOrientationLandscapeLeft 52 | UIInterfaceOrientationLandscapeRight 53 | 54 | UIViewControllerBasedStatusBarAppearance 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /banking_app/ios/banking_app/LaunchScreen.storyboard: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 25 | 31 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /banking_app/ios/banking_app/main.m: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | #import "AppDelegate.h" 4 | 5 | int main(int argc, char * argv[]) { 6 | @autoreleasepool { 7 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /banking_app/ios/banking_appTests/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 | -------------------------------------------------------------------------------- /banking_app/ios/banking_appTests/banking_appTests.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 banking_appTests : XCTestCase 11 | 12 | @end 13 | 14 | @implementation banking_appTests 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(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 38 | if (level >= RCTLogLevelError) { 39 | redboxError = message; 40 | } 41 | }); 42 | #endif 43 | 44 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 45 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 46 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 47 | 48 | foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) { 49 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 50 | return YES; 51 | } 52 | return NO; 53 | }]; 54 | } 55 | 56 | #ifdef DEBUG 57 | RCTSetLogFunction(RCTDefaultLogFunction); 58 | #endif 59 | 60 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 61 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 62 | } 63 | 64 | 65 | @end 66 | -------------------------------------------------------------------------------- /banking_app/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: false, 14 | }, 15 | }), 16 | }, 17 | }; 18 | -------------------------------------------------------------------------------- /banking_app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "banking_app", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "android": "react-native run-android", 7 | "ios": "react-native run-ios", 8 | "start": "react-native start", 9 | "test": "jest", 10 | "lint": "eslint ." 11 | }, 12 | "dependencies": { 13 | "@react-native-community/masked-view": "^0.1.10", 14 | "@react-navigation/bottom-tabs": "^5.11.2", 15 | "@react-navigation/native": "^5.8.10", 16 | "@react-navigation/stack": "^5.12.8", 17 | "react": "16.13.1", 18 | "react-native": "0.63.4", 19 | "react-native-chart-kit": "^6.8.1", 20 | "react-native-gesture-handler": "^1.9.0", 21 | "react-native-reanimated": "^1.13.2", 22 | "react-native-safe-area-context": "^3.1.9", 23 | "react-native-screens": "^2.15.0", 24 | "react-native-svg": "^12.1.0", 25 | "react-native-vector-icons": "^7.1.0", 26 | "styled-components": "^5.2.1" 27 | }, 28 | "devDependencies": { 29 | "@babel/core": "7.12.9", 30 | "@babel/runtime": "7.12.5", 31 | "@react-native-community/eslint-config": "1.1.0", 32 | "babel-jest": "25.5.1", 33 | "eslint": "6.8.0", 34 | "jest": "25.5.4", 35 | "metro-react-native-babel-preset": "0.59.0", 36 | "react-test-renderer": "16.13.1" 37 | }, 38 | "jest": { 39 | "preset": "react-native" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /banking_app/src/assets/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/banking_app/src/assets/avatar.png -------------------------------------------------------------------------------- /banking_app/src/assets/mastercard.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/banking_app/src/assets/mastercard.jpg -------------------------------------------------------------------------------- /banking_app/src/assets/mastercard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/banking_app/src/assets/mastercard.png -------------------------------------------------------------------------------- /banking_app/src/components/NumberPad.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | import MaterialIcons from 'react-native-vector-icons/MaterialIcons'; 4 | 5 | import Text from '../components/Text'; 6 | 7 | export default NumberPad = ({onPress}) => { 8 | const buttons = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', 9 | 10 | ]; 11 | 12 | 13 | 14 | return ( 15 | 16 | {buttons.map((item, index) => { 17 | return ( 18 | onPress(item, index)} delayPressIn={0}> 19 | {item} 20 | 21 | ) 22 | })} 23 | 24 | ) 25 | } 26 | 27 | const KeyPad = styled.View` 28 | flex-direction: row; 29 | flex-wrap: wrap; 30 | align-items: center; 31 | justify-content: flex-end; 32 | margin: 0 30px; 33 | `; 34 | 35 | const Number = styled.TouchableOpacity` 36 | width: 64px; 37 | height: 64px; 38 | border-radius: 32px; 39 | align-items: center; 40 | justify-content: center; 41 | margin: 5px 18px; 42 | border-width: 1px; 43 | border-color: #ffffff20; 44 | `; -------------------------------------------------------------------------------- /banking_app/src/components/Text.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | export default Text = ({ ...props }) => { 5 | return {props.children} 6 | } 7 | 8 | const TextStyle = styled.Text` 9 | font-family: 'Avenir Next'; 10 | color: ${props => props.color ?? '#FFFFFF'} 11 | 12 | margin: ${(props) => props.margin ?? 0} 13 | padding: ${(props) => props.padding ?? 0} 14 | 15 | ${({ title, large, medium, small }) => { 16 | switch (true) { 17 | case title: 18 | return `font-size: 26px`; 19 | case large: 20 | return `font-size: 20px`; 21 | case medium: 22 | return `font-size: 16px`; 23 | case small: 24 | return `font-size: 13px`; 25 | 26 | default: 27 | return `font-size: 14px`; 28 | } 29 | }} 30 | 31 | ${({light, bold, heavy}) => { 32 | switch(true) { 33 | case light: 34 | return `font-weight: 200`; 35 | case bold: 36 | return `font-weight: 600`; 37 | case heavy: 38 | return `font-weight: 700`; 39 | 40 | default: 41 | return `font-weight: 400`; 42 | } 43 | }} 44 | 45 | ${({center, right}) => { 46 | switch(true) { 47 | case center: 48 | return `text-align: center`; 49 | case right: 50 | return `text-align: right`; 51 | 52 | default: 53 | return `text-align: left`; 54 | } 55 | }} 56 | `; -------------------------------------------------------------------------------- /banking_app/src/data/purchases.js: -------------------------------------------------------------------------------- 1 | export default purchaseData = [ 2 | { 3 | id: '1', 4 | product: 'Dolor Adipisicing', 5 | store: 'Nextplax', 6 | price: '$1,729,00', 7 | purchaseDate: '2020-12-02', 8 | address: '58A TanLong Street, TanDongHiep, DiAn, BinhDuong', 9 | }, 10 | { 11 | id: '2', 12 | product: 'Dolor Adipisicing', 13 | store: 'Nextplax', 14 | price: '$1,729,00', 15 | purchaseDate: '2020-12-02', 16 | address: '58A TanLong Street, TanDongHiep, DiAn, BinhDuong', 17 | }, 18 | { 19 | id: '3', 20 | product: 'Dolor Adipisicing', 21 | store: 'Nextplax', 22 | price: '$1,729,00', 23 | purchaseDate: '2020-12-02', 24 | address: '58A TanLong Street, TanDongHiep, DiAn, BinhDuong', 25 | }, 26 | { 27 | id: '4', 28 | product: 'Dolor Adipisicing', 29 | store: 'Nextplax', 30 | price: '$1,729,00', 31 | purchaseDate: '2020-12-02', 32 | address: '58A TanLong Street, TanDongHiep, DiAn, BinhDuong', 33 | }, 34 | ] -------------------------------------------------------------------------------- /banking_app/src/screens/CardsScreen.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | import Text from '../components/Text'; 5 | 6 | export default CardsScreen = () => { 7 | const myCards = [ 8 | { 9 | id: '1', 10 | color: '#5750F0', 11 | number: '7100', 12 | exp: '04/2025', 13 | logo: require('../assets/mastercard.jpg'), 14 | }, 15 | ]; 16 | 17 | const renderCard = ({item}) => ( 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | •••• •••• •••• {item.number} 26 | {item.exp} 27 | 28 | 29 | 30 | 31 | 32 | Remove 33 | 34 | 35 | Update 36 | 37 | 38 | 39 | ); 40 | 41 | return ( 42 | 43 | 44 | My Cards 45 | 46 | 47 | 48 | 49 | ); 50 | }; 51 | 52 | const Container = styled.SafeAreaView` 53 | flex: 1; 54 | background-color: #1e1e1e; 55 | `; 56 | 57 | const Cards = styled.FlatList` 58 | padding: 0 8px; 59 | margin-top: 32px; 60 | `; 61 | 62 | const CardContainer = styled.View` 63 | background-color: #292929; 64 | margin-bottom: 16px; 65 | padding: 16px; 66 | border-radius: 8px; 67 | padding: 16px; 68 | `; 69 | 70 | const CardInfo = styled.View` 71 | flex-direction: row; 72 | align-items: center; 73 | border-bottom-width: 1px; 74 | border-bottom-color: #393939; 75 | padding-bottom: 12px; 76 | margin-bottom: 12px; 77 | `; 78 | 79 | const CardLogoContainer = styled.View` 80 | width: 64px; 81 | height: 64px; 82 | border-radius: 32px; 83 | background-color: ${props => props.bgColor}; 84 | align-items: center; 85 | justify-content: center; 86 | `; 87 | 88 | const CardLogo = styled.Image` 89 | width: 32; 90 | height: 32; 91 | `; 92 | 93 | const CardDetails = styled.View` 94 | flex: 1; 95 | align-items: flex-end; 96 | `; 97 | 98 | const CardActions = styled.View` 99 | flex-direction: row; 100 | justify-content: flex-end; 101 | align-items: center; 102 | `; 103 | 104 | const Remove = styled.TouchableOpacity` 105 | margin-right: 32px; 106 | `; 107 | 108 | const Update = styled.TouchableOpacity` 109 | background-color: #3d3d3d; 110 | padding: 8px 16px; 111 | border-radius: 6px; 112 | `; 113 | -------------------------------------------------------------------------------- /banking_app/src/screens/HomeScreen.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | import Feather from 'react-native-vector-icons/Feather'; 5 | import {LineChart} from 'react-native-chart-kit'; 6 | 7 | import Text from '../components/Text'; 8 | import purchaseData from '../data/purchases'; 9 | import { Dimensions } from 'react-native'; 10 | 11 | export default HomeScreen = () => { 12 | 13 | const renderPurchase = ({item}) => { 14 | 15 | 16 | {item.product} 17 | {item.store} 18 | {item.address} 19 | 20 | {item.price} 21 | 22 | } 23 | 24 | return ( 25 | 26 |

27 | 28 | 29 | 30 | Welcome, 31 | 32 | lambiengcode 33 | 34 | 35 |
36 | 37 | 38 | $ 1,000,000 39 | 40 | 41 | 42 | Current Balance 43 | 44 | 45 | 46 | `rgba(81, 150, 244, ${opacity})`, 70 | labelColor: () => `rgba(255, 255, 255, 0.2)`, 71 | strokeWidth: 3, 72 | }} 73 | withVerticalLines={false} 74 | withHorizontalLines={false} 75 | bezier 76 | /> 77 | 78 | 79 | 82 | 83 | Last Purchases 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | } 93 | 94 | data={purchaseData} renderItem={renderPurchase} showsVerticalScrollIndicator={false} 95 | /> 96 | 97 | ); 98 | }; 99 | 100 | const Container = styled.SafeAreaView` 101 | flex: 1; 102 | background-color: #1e1e1e; 103 | `; 104 | 105 | const Header = styled.View` 106 | flex-direction: row; 107 | align-items: center; 108 | margin: 16px 16px 32px 16px; 109 | `; 110 | 111 | const ProfilePhoto = styled.Image` 112 | width: 40px; 113 | height: 40px; 114 | border-radius: 20px; 115 | `; 116 | 117 | const Welcome = styled.View` 118 | flex: 1; 119 | padding: 0 16px; 120 | `; 121 | 122 | const Chart = styled.View` 123 | margin: 32px 0; 124 | `; 125 | 126 | const Purchases = styled.FlatList` 127 | background-color: #2c2c2c; 128 | padding: 16px; 129 | `; 130 | 131 | const TransactionsHeader = styled.View` 132 | flex-direction: row; 133 | align-items: center; 134 | justify-content: space-between; 135 | `; 136 | 137 | const SearchContainer = styled.View` 138 | background-color: #3d3d3d; 139 | flex-direction: row; 140 | align-items: center; 141 | padding: 0 8px; 142 | border-radius: 6px; 143 | margin: 16px 0; 144 | `; 145 | 146 | const Search = styled.TextInput` 147 | flex: 1; 148 | padding: 8px 16px; 149 | font-family: 'Avenir Next'; 150 | color: #dbdbdb; 151 | `; 152 | 153 | const Purchase = styled.View``; 154 | 155 | const PurchaseInfo = styled.View``; -------------------------------------------------------------------------------- /banking_app/src/screens/PinScreen.js: -------------------------------------------------------------------------------- 1 | import React, {useState, useEffect} from 'react'; 2 | import styled from 'styled-components'; 3 | import Fontisto from 'react-native-vector-icons/Fontisto'; 4 | 5 | import Text from '../components/Text'; 6 | import NumberPad from '../components/NumberPad'; 7 | 8 | export default PinScreen = ({navigation}) => { 9 | const [pinCount, setPinCount] = useState(0); 10 | const totalPins = 6; 11 | const password = []; 12 | const correct = [0, 2, 1, 2, 0, 0]; 13 | 14 | useEffect(() => { 15 | console.log(password); 16 | if (pinCount == totalPins && correct == password) { 17 | console.log(password); 18 | navigation.navigate('Tabs'); 19 | } 20 | }, [pinCount]); 21 | 22 | const renderPin = () => { 23 | const pins = []; 24 | 25 | for (let i = 1; i <= totalPins; i++) { 26 | pins.push( 27 | i <= pinCount ? ( 28 | 29 | 30 | 31 | ) : ( 32 | 33 | ), 34 | ); 35 | } 36 | 37 | return pins; 38 | }; 39 | 40 | const pressKey = (_, index) => { 41 | index != 10 ? password.push(index + 1) : password.pop(); 42 | setPinCount((prev) => { 43 | return index != 10 ? prev + 1 : prev - 1; 44 | }); 45 | }; 46 | 47 | return ( 48 | 49 | 50 | MyCash 51 | 52 | 53 | Enter your PIN code 54 | 55 | 56 | {renderPin()} 57 | 58 | 59 | Forgot PIN? 60 | 61 | 62 | navigation.navigate('TouchScreen')}> 63 | 64 | 65 | Use Touch ID 66 | 67 | 68 | 69 | 70 | 71 | ); 72 | }; 73 | 74 | const Container = styled.SafeAreaView` 75 | flex: 1; 76 | background-color: #1e1e1e; 77 | `; 78 | 79 | const AccessPin = styled.View` 80 | flex-direction: row; 81 | justify-content: space-around; 82 | margin: 32px 64px 16px 64px; 83 | `; 84 | 85 | const UseTouch = styled.TouchableOpacity` 86 | margin: 32px 0 64px 0; 87 | flex-direction: row; 88 | align-items: center; 89 | justify-content: center; 90 | `; 91 | 92 | const PinContainer = styled.View` 93 | width: 16px; 94 | height: 16px; 95 | border-radius: 8px; 96 | border-width: 1px; 97 | border-color: #5196f4; 98 | align-items: center; 99 | justify-content: center; 100 | `; 101 | 102 | const Pin = styled.View` 103 | width: 8px; 104 | height: 8px; 105 | border-radius: 4px; 106 | background-color: #5196f4; 107 | `; 108 | -------------------------------------------------------------------------------- /banking_app/src/screens/SendRequests.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | import Text from '../components/Text'; 5 | 6 | export default SendRequests = () => { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | }; 13 | 14 | const Container = styled.SafeAreaView` 15 | flex: 1; 16 | background-color: #1e1e1e; 17 | `; 18 | -------------------------------------------------------------------------------- /banking_app/src/screens/TouchScreen.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {StatusBar} from 'react-native'; 3 | import styled from 'styled-components'; 4 | import MaterialIcons from 'react-native-vector-icons/MaterialIcons'; 5 | 6 | import Text from '../components/Text'; 7 | 8 | export default TouchScreen = ({navigation}) => { 9 | return ( 10 | 11 | 12 | 13 | MyCash 14 | 15 | 16 | navigation.navigate('Tabs')} delayPressIn={0}> 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | Touch ID sensor for access to {'\n'} your MyCash account. 32 | 33 | 34 | Please very your identify{'\n'}using Touch ID 35 | 36 | 37 | navigation.navigate('PinScreen')} delayPressIn={0}> 38 | 39 | Enter Access PIN 40 | 41 | 42 | ); 43 | }; 44 | 45 | const Container = styled.SafeAreaView` 46 | flex: 1; 47 | background-color: #1e1e1e; 48 | `; 49 | 50 | const Touch = styled.TouchableOpacity` 51 | flex: 1; 52 | align-items: center; 53 | justify-content: center; 54 | `; 55 | 56 | const Circle = styled.View` 57 | background-color: ${(props) => props.bgColor}; 58 | padding: 32px; 59 | border-radius: 999px; 60 | `; 61 | 62 | const TouchButton = styled.View` 63 | background-color: #5196f4; 64 | padding: 12px; 65 | border-radius: 100px; 66 | `; 67 | 68 | const PinAccess = styled.TouchableOpacity` 69 | margin-top: 16px; 70 | padding: 16px; 71 | flex-direction: row; 72 | align-items: center; 73 | justify-content: center; 74 | `; -------------------------------------------------------------------------------- /game_store_app/.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /game_store_app/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native-community', 4 | }; 5 | -------------------------------------------------------------------------------- /game_store_app/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | ; We fork some components by platform 3 | .*/*[.]android.js 4 | 5 | ; Ignore "BUCK" generated dirs 6 | /\.buckd/ 7 | 8 | ; Ignore polyfills 9 | node_modules/react-native/Libraries/polyfills/.* 10 | 11 | ; These should not be required directly 12 | ; require from fbjs/lib instead: require('fbjs/lib/warning') 13 | node_modules/warning/.* 14 | 15 | ; Flow doesn't support platforms 16 | .*/Libraries/Utilities/LoadingView.js 17 | 18 | [untyped] 19 | .*/node_modules/@react-native-community/cli/.*/.* 20 | 21 | [include] 22 | 23 | [libs] 24 | node_modules/react-native/interface.js 25 | node_modules/react-native/flow/ 26 | 27 | [options] 28 | emoji=true 29 | 30 | esproposal.optional_chaining=enable 31 | esproposal.nullish_coalescing=enable 32 | 33 | module.file_ext=.js 34 | module.file_ext=.json 35 | module.file_ext=.ios.js 36 | 37 | munge_underscores=true 38 | 39 | module.name_mapper='^react-native/\(.*\)$' -> '/node_modules/react-native/\1' 40 | module.name_mapper='^@?[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> '/node_modules/react-native/Libraries/Image/RelativeImageStub' 41 | 42 | suppress_type=$FlowIssue 43 | suppress_type=$FlowFixMe 44 | suppress_type=$FlowFixMeProps 45 | suppress_type=$FlowFixMeState 46 | 47 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\) 48 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)?:? #[0-9]+ 49 | suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError 50 | 51 | [lints] 52 | sketchy-null-number=warn 53 | sketchy-null-mixed=warn 54 | sketchy-number=warn 55 | untyped-type-import=warn 56 | nonstrict-import=warn 57 | deprecated-type=warn 58 | unsafe-getters-setters=warn 59 | unnecessary-invariant=warn 60 | signature-verification-failure=warn 61 | deprecated-utility=error 62 | 63 | [strict] 64 | deprecated-type 65 | nonstrict-import 66 | sketchy-null 67 | unclear-type 68 | unsafe-getters-setters 69 | untyped-import 70 | untyped-type-import 71 | 72 | [version] 73 | ^0.122.0 74 | -------------------------------------------------------------------------------- /game_store_app/.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | -------------------------------------------------------------------------------- /game_store_app/.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | 24 | # Android/IntelliJ 25 | # 26 | build/ 27 | .idea 28 | .gradle 29 | local.properties 30 | *.iml 31 | 32 | # node.js 33 | # 34 | node_modules/ 35 | npm-debug.log 36 | yarn-error.log 37 | 38 | # BUCK 39 | buck-out/ 40 | \.buckd/ 41 | *.keystore 42 | !debug.keystore 43 | 44 | # fastlane 45 | # 46 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 47 | # screenshots whenever they are needed. 48 | # For more information about the recommended setup visit: 49 | # https://docs.fastlane.tools/best-practices/source-control/ 50 | 51 | */fastlane/report.xml 52 | */fastlane/Preview.html 53 | */fastlane/screenshots 54 | 55 | # Bundle artifact 56 | *.jsbundle 57 | 58 | # CocoaPods 59 | /ios/Pods/ 60 | -------------------------------------------------------------------------------- /game_store_app/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | bracketSpacing: false, 3 | jsxBracketSameLine: true, 4 | singleQuote: true, 5 | trailingComma: 'all', 6 | }; 7 | -------------------------------------------------------------------------------- /game_store_app/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /game_store_app/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Entypo from 'react-native-vector-icons/Entypo'; 3 | 4 | import {NavigationContainer} from '@react-navigation/native'; 5 | import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; 6 | import {createStackNavigator} from '@react-navigation/stack'; 7 | import styled from 'styled-components'; 8 | 9 | import HomeScreen from './src/components/screens/HomeScreen'; 10 | import LiveScreen from './src/components/screens/LiveScreen'; 11 | import ProfileScreen from './src/components/screens/ProfileScreen'; 12 | import GameScreen from './src/components/screens/GameScreen'; 13 | 14 | const AppStack = createStackNavigator(); 15 | const TabNav = createBottomTabNavigator(); 16 | 17 | const tabBarOptions = { 18 | showLabel: false, 19 | style: { 20 | backgroundColor: '#343434', 21 | borderTopColor: '#343434', 22 | paddingBottom: 20.0, 23 | paddingTop: 20.0, 24 | height: 54.0, 25 | }, 26 | }; 27 | 28 | const TabNavScreen = () => { 29 | return ( 30 | ({ 33 | tabBarIcon: ({focused}) => { 34 | let iconName; 35 | 36 | switch (route.name) { 37 | case 'HomeScreen': 38 | iconName = 'home'; 39 | break; 40 | case 'LiveScreen': 41 | iconName = 'game-controller'; 42 | break; 43 | case 'ProfileScreen': 44 | iconName = 'user'; 45 | break; 46 | 47 | default: 48 | iconName = 'home'; 49 | break; 50 | } 51 | 52 | return ( 53 | 54 | 55 | 56 | ); 57 | }, 58 | })}> 59 | 60 | 61 | 62 | 63 | ); 64 | }; 65 | 66 | export default App = () => { 67 | return ( 68 | 69 | 70 | 71 | 72 | 73 | 74 | ); 75 | }; 76 | 77 | const TabBarIconContainer = styled.View` 78 | backgroundColor: ${props => (props.focused ? '#819ee5' : '#343434')}; 79 | padding: 4px 16px; 80 | border-radius: 32px; 81 | `; 82 | -------------------------------------------------------------------------------- /game_store_app/__tests__/App-test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import 'react-native'; 6 | import React from 'react'; 7 | import App from '../App'; 8 | 9 | // Note: test renderer must be required after react-native. 10 | import renderer from 'react-test-renderer'; 11 | 12 | it('renders correctly', () => { 13 | renderer.create(); 14 | }); 15 | -------------------------------------------------------------------------------- /game_store_app/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.game_store_app", 39 | ) 40 | 41 | android_resource( 42 | name = "res", 43 | package = "com.game_store_app", 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 | -------------------------------------------------------------------------------- /game_store_app/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 | -------------------------------------------------------------------------------- /game_store_app/android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/game_store_app/android/app/debug.keystore -------------------------------------------------------------------------------- /game_store_app/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 | -------------------------------------------------------------------------------- /game_store_app/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /game_store_app/android/app/src/debug/java/com/game_store_app/ReactNativeFlipper.java: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its 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.game_store_app; 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.ReactInstanceManager; 23 | import com.facebook.react.bridge.ReactContext; 24 | import com.facebook.react.modules.network.NetworkingModule; 25 | import okhttp3.OkHttpClient; 26 | 27 | public class ReactNativeFlipper { 28 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) { 29 | if (FlipperUtils.shouldEnableFlipper(context)) { 30 | final FlipperClient client = AndroidFlipperClient.getInstance(context); 31 | 32 | client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults())); 33 | client.addPlugin(new ReactFlipperPlugin()); 34 | client.addPlugin(new DatabasesFlipperPlugin(context)); 35 | client.addPlugin(new SharedPreferencesFlipperPlugin(context)); 36 | client.addPlugin(CrashReporterPlugin.getInstance()); 37 | 38 | NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin(); 39 | NetworkingModule.setCustomClientBuilder( 40 | new NetworkingModule.CustomClientBuilder() { 41 | @Override 42 | public void apply(OkHttpClient.Builder builder) { 43 | builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); 44 | } 45 | }); 46 | client.addPlugin(networkFlipperPlugin); 47 | client.start(); 48 | 49 | // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized 50 | // Hence we run if after all native modules have been initialized 51 | ReactContext reactContext = reactInstanceManager.getCurrentReactContext(); 52 | if (reactContext == null) { 53 | reactInstanceManager.addReactInstanceEventListener( 54 | new ReactInstanceManager.ReactInstanceEventListener() { 55 | @Override 56 | public void onReactContextInitialized(ReactContext reactContext) { 57 | reactInstanceManager.removeReactInstanceEventListener(this); 58 | reactContext.runOnNativeModulesQueueThread( 59 | new Runnable() { 60 | @Override 61 | public void run() { 62 | client.addPlugin(new FrescoFlipperPlugin()); 63 | } 64 | }); 65 | } 66 | }); 67 | } else { 68 | client.addPlugin(new FrescoFlipperPlugin()); 69 | } 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /game_store_app/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 13 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /game_store_app/android/app/src/main/java/com/game_store_app/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.game_store_app; 2 | 3 | import com.facebook.react.ReactActivity; 4 | 5 | public class MainActivity extends ReactActivity { 6 | 7 | /** 8 | * Returns the name of the main component registered from JavaScript. This is used to schedule 9 | * rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "game_store_app"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /game_store_app/android/app/src/main/java/com/game_store_app/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.game_store_app; 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.soloader.SoLoader; 11 | import java.lang.reflect.InvocationTargetException; 12 | import java.util.List; 13 | 14 | public class MainApplication extends Application implements ReactApplication { 15 | 16 | private final ReactNativeHost mReactNativeHost = 17 | new ReactNativeHost(this) { 18 | @Override 19 | public boolean getUseDeveloperSupport() { 20 | return BuildConfig.DEBUG; 21 | } 22 | 23 | @Override 24 | protected List getPackages() { 25 | @SuppressWarnings("UnnecessaryLocalVariable") 26 | List packages = new PackageList(this).getPackages(); 27 | // Packages that cannot be autolinked yet can be added manually here, for example: 28 | // packages.add(new MyReactNativePackage()); 29 | return packages; 30 | } 31 | 32 | @Override 33 | protected String getJSMainModuleName() { 34 | return "index"; 35 | } 36 | }; 37 | 38 | @Override 39 | public ReactNativeHost getReactNativeHost() { 40 | return mReactNativeHost; 41 | } 42 | 43 | @Override 44 | public void onCreate() { 45 | super.onCreate(); 46 | SoLoader.init(this, /* native exopackage */ false); 47 | initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 48 | } 49 | 50 | /** 51 | * Loads Flipper in React Native templates. Call this in the onCreate method with something like 52 | * initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 53 | * 54 | * @param context 55 | * @param reactInstanceManager 56 | */ 57 | private static void initializeFlipper( 58 | Context context, ReactInstanceManager reactInstanceManager) { 59 | if (BuildConfig.DEBUG) { 60 | try { 61 | /* 62 | We use reflection here to pick up the class that initializes Flipper, 63 | since Flipper library is not available in release mode 64 | */ 65 | Class aClass = Class.forName("com.game_store_app.ReactNativeFlipper"); 66 | aClass 67 | .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class) 68 | .invoke(null, context, reactInstanceManager); 69 | } catch (ClassNotFoundException e) { 70 | e.printStackTrace(); 71 | } catch (NoSuchMethodException e) { 72 | e.printStackTrace(); 73 | } catch (IllegalAccessException e) { 74 | e.printStackTrace(); 75 | } catch (InvocationTargetException e) { 76 | e.printStackTrace(); 77 | } 78 | } 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /game_store_app/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/game_store_app/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /game_store_app/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/game_store_app/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /game_store_app/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/game_store_app/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /game_store_app/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/game_store_app/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /game_store_app/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/game_store_app/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /game_store_app/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/game_store_app/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /game_store_app/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/game_store_app/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /game_store_app/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/game_store_app/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /game_store_app/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/game_store_app/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /game_store_app/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/game_store_app/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /game_store_app/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | game_store_app 3 | 4 | -------------------------------------------------------------------------------- /game_store_app/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /game_store_app/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | ext { 5 | buildToolsVersion = "29.0.2" 6 | minSdkVersion = 16 7 | compileSdkVersion = 29 8 | targetSdkVersion = 29 9 | } 10 | repositories { 11 | google() 12 | jcenter() 13 | } 14 | dependencies { 15 | classpath("com.android.tools.build:gradle:3.5.3") 16 | // NOTE: Do not place your application dependencies here; they belong 17 | // in the individual module build.gradle files 18 | } 19 | } 20 | 21 | allprojects { 22 | repositories { 23 | mavenLocal() 24 | maven { 25 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 26 | url("$rootDir/../node_modules/react-native/android") 27 | } 28 | maven { 29 | // Android JSC is installed from npm 30 | url("$rootDir/../node_modules/jsc-android/dist") 31 | } 32 | 33 | google() 34 | jcenter() 35 | maven { url 'https://www.jitpack.io' } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /game_store_app/android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx10248m -XX:MaxPermSize=256m 13 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | # 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.54.0 29 | -------------------------------------------------------------------------------- /game_store_app/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/game_store_app/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /game_store_app/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-6.2-all.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /game_store_app/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 init 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 init 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 | :init 68 | @rem Get command-line arguments, handling Windows variants 69 | 70 | if not "%OS%" == "Windows_NT" goto win9xME_args 71 | 72 | :win9xME_args 73 | @rem Slurp the command line arguments. 74 | set CMD_LINE_ARGS= 75 | set _SKIP=2 76 | 77 | :win9xME_args_slurp 78 | if "x%~1" == "x" goto execute 79 | 80 | set CMD_LINE_ARGS=%* 81 | 82 | :execute 83 | @rem Setup the command line 84 | 85 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 86 | 87 | @rem Execute Gradle 88 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 89 | 90 | :end 91 | @rem End local scope for the variables with windows NT shell 92 | if "%ERRORLEVEL%"=="0" goto mainEnd 93 | 94 | :fail 95 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 96 | rem the _cmd.exe /c_ return code! 97 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 98 | exit /b 1 99 | 100 | :mainEnd 101 | if "%OS%"=="Windows_NT" endlocal 102 | 103 | :omega 104 | -------------------------------------------------------------------------------- /game_store_app/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'game_store_app' 2 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 3 | include ':app' 4 | -------------------------------------------------------------------------------- /game_store_app/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "game_store_app", 3 | "displayName": "game_store_app" 4 | } -------------------------------------------------------------------------------- /game_store_app/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /game_store_app/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import {AppRegistry} from 'react-native'; 6 | import App from './App'; 7 | import {name as appName} from './app.json'; 8 | 9 | AppRegistry.registerComponent(appName, () => App); 10 | -------------------------------------------------------------------------------- /game_store_app/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, '10.0' 5 | 6 | target 'game_store_app' do 7 | config = use_native_modules! 8 | 9 | use_react_native!(:path => config["reactNativePath"]) 10 | 11 | target 'game_store_appTests' do 12 | inherit! :complete 13 | # Pods for testing 14 | end 15 | 16 | # Enables Flipper. 17 | # 18 | # Note that if you have use_frameworks! enabled, Flipper will not work and 19 | # you should disable these next few lines. 20 | use_flipper! 21 | post_install do |installer| 22 | flipper_post_install(installer) 23 | end 24 | end 25 | 26 | target 'game_store_app-tvOS' do 27 | # Pods for game_store_app-tvOS 28 | 29 | target 'game_store_app-tvOSTests' do 30 | inherit! :search_paths 31 | # Pods for testing 32 | end 33 | end 34 | -------------------------------------------------------------------------------- /game_store_app/ios/game_store_app-tvOS/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | APPL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | LSRequiresIPhoneOS 24 | 25 | NSAppTransportSecurity 26 | 27 | NSExceptionDomains 28 | 29 | localhost 30 | 31 | NSExceptionAllowsInsecureHTTPLoads 32 | 33 | 34 | 35 | 36 | NSLocationWhenInUseUsageDescription 37 | 38 | UILaunchStoryboardName 39 | LaunchScreen 40 | UIRequiredDeviceCapabilities 41 | 42 | armv7 43 | 44 | UISupportedInterfaceOrientations 45 | 46 | UIInterfaceOrientationPortrait 47 | UIInterfaceOrientationLandscapeLeft 48 | UIInterfaceOrientationLandscapeRight 49 | 50 | UIViewControllerBasedStatusBarAppearance 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /game_store_app/ios/game_store_app-tvOSTests/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 | -------------------------------------------------------------------------------- /game_store_app/ios/game_store_app.xcodeproj/xcshareddata/xcschemes/game_store_app-tvOS.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 | -------------------------------------------------------------------------------- /game_store_app/ios/game_store_app.xcodeproj/xcshareddata/xcschemes/game_store_app.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 | -------------------------------------------------------------------------------- /game_store_app/ios/game_store_app/AppDelegate.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | @interface AppDelegate : UIResponder 5 | 6 | @property (nonatomic, strong) UIWindow *window; 7 | 8 | @end 9 | -------------------------------------------------------------------------------- /game_store_app/ios/game_store_app/AppDelegate.m: -------------------------------------------------------------------------------- 1 | #import "AppDelegate.h" 2 | 3 | #import 4 | #import 5 | #import 6 | 7 | #ifdef FB_SONARKIT_ENABLED 8 | #import 9 | #import 10 | #import 11 | #import 12 | #import 13 | #import 14 | 15 | static void InitializeFlipper(UIApplication *application) { 16 | FlipperClient *client = [FlipperClient sharedClient]; 17 | SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults]; 18 | [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:application withDescriptorMapper:layoutDescriptorMapper]]; 19 | [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]]; 20 | [client addPlugin:[FlipperKitReactPlugin new]]; 21 | [client addPlugin:[[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]]; 22 | [client start]; 23 | } 24 | #endif 25 | 26 | @implementation AppDelegate 27 | 28 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 29 | { 30 | #ifdef FB_SONARKIT_ENABLED 31 | InitializeFlipper(application); 32 | #endif 33 | 34 | RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions]; 35 | RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge 36 | moduleName:@"game_store_app" 37 | initialProperties:nil]; 38 | 39 | rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; 40 | 41 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 42 | UIViewController *rootViewController = [UIViewController new]; 43 | rootViewController.view = rootView; 44 | self.window.rootViewController = rootViewController; 45 | [self.window makeKeyAndVisible]; 46 | return YES; 47 | } 48 | 49 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge 50 | { 51 | #if DEBUG 52 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; 53 | #else 54 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 55 | #endif 56 | } 57 | 58 | @end 59 | -------------------------------------------------------------------------------- /game_store_app/ios/game_store_app/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "29x29", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "29x29", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "40x40", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "40x40", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "60x60", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "60x60", 31 | "scale" : "3x" 32 | } 33 | ], 34 | "info" : { 35 | "version" : 1, 36 | "author" : "xcode" 37 | } 38 | } -------------------------------------------------------------------------------- /game_store_app/ios/game_store_app/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /game_store_app/ios/game_store_app/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | game_store_app 9 | CFBundleExecutable 10 | $(EXECUTABLE_NAME) 11 | CFBundleIdentifier 12 | $(PRODUCT_BUNDLE_IDENTIFIER) 13 | CFBundleInfoDictionaryVersion 14 | 6.0 15 | CFBundleName 16 | $(PRODUCT_NAME) 17 | CFBundlePackageType 18 | APPL 19 | CFBundleShortVersionString 20 | 1.0 21 | CFBundleSignature 22 | ???? 23 | CFBundleVersion 24 | 1 25 | LSRequiresIPhoneOS 26 | 27 | NSAppTransportSecurity 28 | 29 | NSAllowsArbitraryLoads 30 | 31 | NSExceptionDomains 32 | 33 | localhost 34 | 35 | NSExceptionAllowsInsecureHTTPLoads 36 | 37 | 38 | 39 | 40 | NSLocationWhenInUseUsageDescription 41 | 42 | UILaunchStoryboardName 43 | LaunchScreen 44 | UIRequiredDeviceCapabilities 45 | 46 | armv7 47 | 48 | UISupportedInterfaceOrientations 49 | 50 | UIInterfaceOrientationPortrait 51 | UIInterfaceOrientationLandscapeLeft 52 | UIInterfaceOrientationLandscapeRight 53 | 54 | UIViewControllerBasedStatusBarAppearance 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /game_store_app/ios/game_store_app/main.m: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | #import "AppDelegate.h" 4 | 5 | int main(int argc, char * argv[]) { 6 | @autoreleasepool { 7 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /game_store_app/ios/game_store_appTests/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 | -------------------------------------------------------------------------------- /game_store_app/ios/game_store_appTests/game_store_appTests.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 game_store_appTests : XCTestCase 11 | 12 | @end 13 | 14 | @implementation game_store_appTests 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(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 38 | if (level >= RCTLogLevelError) { 39 | redboxError = message; 40 | } 41 | }); 42 | #endif 43 | 44 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 45 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 46 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 47 | 48 | foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) { 49 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 50 | return YES; 51 | } 52 | return NO; 53 | }]; 54 | } 55 | 56 | #ifdef DEBUG 57 | RCTSetLogFunction(RCTDefaultLogFunction); 58 | #endif 59 | 60 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 61 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 62 | } 63 | 64 | 65 | @end 66 | -------------------------------------------------------------------------------- /game_store_app/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: false, 14 | }, 15 | }), 16 | }, 17 | }; 18 | -------------------------------------------------------------------------------- /game_store_app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "game_store_app", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "android": "react-native run-android", 7 | "ios": "react-native run-ios", 8 | "start": "react-native start", 9 | "test": "jest", 10 | "lint": "eslint ." 11 | }, 12 | "dependencies": { 13 | "@react-native-community/masked-view": "^0.1.10", 14 | "@react-navigation/bottom-tabs": "^5.11.2", 15 | "@react-navigation/native": "^5.8.10", 16 | "@react-navigation/stack": "^5.12.8", 17 | "react": "16.13.1", 18 | "react-native": "0.63.4", 19 | "react-native-gesture-handler": "^1.9.0", 20 | "react-native-reanimated": "^1.13.2", 21 | "react-native-safe-area-context": "^3.1.9", 22 | "react-native-screens": "^2.15.0", 23 | "react-native-vector-icons": "^7.1.0", 24 | "styled-components": "^5.2.1" 25 | }, 26 | "devDependencies": { 27 | "@babel/core": "7.12.9", 28 | "@babel/runtime": "7.12.5", 29 | "@react-native-community/eslint-config": "1.1.0", 30 | "babel-jest": "25.5.1", 31 | "eslint": "6.8.0", 32 | "jest": "25.5.4", 33 | "metro-react-native-babel-preset": "0.59.0", 34 | "react-test-renderer": "16.13.1" 35 | }, 36 | "jest": { 37 | "preset": "react-native" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /game_store_app/src/assets/3on3_cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/game_store_app/src/assets/3on3_cover.jpg -------------------------------------------------------------------------------- /game_store_app/src/assets/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/game_store_app/src/assets/avatar.png -------------------------------------------------------------------------------- /game_store_app/src/assets/screenshot_game1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/game_store_app/src/assets/screenshot_game1.jpg -------------------------------------------------------------------------------- /game_store_app/src/assets/screenshot_game2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/game_store_app/src/assets/screenshot_game2.jpg -------------------------------------------------------------------------------- /game_store_app/src/assets/screenshot_game3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/game_store_app/src/assets/screenshot_game3.jpg -------------------------------------------------------------------------------- /game_store_app/src/components/screens/GameScreen.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | import Feather from 'react-native-vector-icons/Feather'; 4 | import {StatusBar} from 'react-native'; 5 | import Text from '../utils/Text'; 6 | import gameData from '../../data/GameData'; 7 | 8 | export default GameScreen = ({route, navigation}) => { 9 | const {game} = route.params; 10 | 11 | const renderStars = () => { 12 | let stars = []; 13 | 14 | for (let s = 1; s <= 5; s++) { 15 | stars.push( 16 | = s ? '#819ee5' : '#434958'} 22 | />, 23 | ); 24 | } 25 | 26 | return {stars}; 27 | }; 28 | 29 | return ( 30 | 31 | 86 | ); 87 | }; 88 | 89 | const GameContainer = styled.ScrollView` 90 | background-color: #343434; 91 | flex: 1; 92 | `; 93 | 94 | const GameArtContainer = styled.View` 95 | position: relative; 96 | `; 97 | 98 | const GameArt = styled.Image` 99 | height: 280px; 100 | width: 100%; 101 | border-bottom-right-radius: 32px; 102 | border-bottom-left-radius: 32px; 103 | resize-mode: cover; 104 | `; 105 | 106 | const BackButton = styled.TouchableOpacity` 107 | position: absolute; 108 | top: 32px; 109 | left: 16px; 110 | `; 111 | 112 | const GameInfoContainer = styled.View` 113 | flex-direction: row; 114 | align-items: center; 115 | padding: 16px 0px; 116 | margin: 8px 16px; 117 | `; 118 | 119 | const GameThumbContainer = styled.View` 120 | shadow-color: #000000; 121 | shadow-offset: 1px 1px; 122 | shadow-opacity: 0.5; 123 | shadow-radius: 2px; 124 | `; 125 | 126 | const GameThumb = styled.Image` 127 | width: 80px; 128 | height: 80px; 129 | border-radius: 16px; 130 | resize-mode: cover; 131 | `; 132 | 133 | const GameInfo = styled.View` 134 | width: 0; 135 | flex-grow: 1; 136 | margin: 0 8px 0 16px; 137 | `; 138 | 139 | const Download = styled.View` 140 | background-color: #819ee5; 141 | width: 40px; 142 | height: 40px; 143 | border-radius: 20px; 144 | align-items: center; 145 | justify-content: center; 146 | `; 147 | 148 | const GameStatsContainer = styled.View` 149 | flex-direction: row; 150 | justify-content: space-between; 151 | margin: 0 16px; 152 | `; 153 | 154 | const Stars = styled.View` 155 | flex-direction: row; 156 | `; 157 | 158 | const ScreenShotsContainer = styled.View` 159 | margin: 8px 0; 160 | `; 161 | 162 | const ScreenShots = styled.ScrollView``; 163 | 164 | const ScreenShotContainer = styled.View` 165 | padding: 16px; 166 | shadow-color: #000000; 167 | shadow-offset: 1px 1px; 168 | shadow-opacity: 0.5; 169 | shadow-radius: 5px; 170 | `; 171 | 172 | const ScreenShot = styled.Image` 173 | height: 100px; 174 | width: 150px; 175 | border-radius: 12px; 176 | resize-mode: cover; 177 | `; 178 | 179 | const Description = styled(Text)` 180 | margin: 20px 16px; 181 | line-height: 22px; 182 | `; -------------------------------------------------------------------------------- /game_store_app/src/components/screens/HomeScreen.js: -------------------------------------------------------------------------------- 1 | import React, {useState, useRef} from 'react'; 2 | import styled from 'styled-components'; 3 | import {StatusBar} from 'react-native'; 4 | 5 | import Text from '../utils/Text'; 6 | import categoryList from '../../data/Categories'; 7 | import games from '../../data/GameData'; 8 | 9 | export default HomeScreen = ({navigation}) => { 10 | const [selectedCategory, setSelectedCategory] = useState('All'); 11 | const gamesRef = useRef(); 12 | 13 | const changeCategory = (category) => { 14 | gamesRef.current.scrollToOffset({x: 0, y: 0}); 15 | setSelectedCategory(category); 16 | }; 17 | 18 | const GameItem = (game) => { 19 | return ( 20 | navigation.navigate('GameScreen', {game: game})}> 21 | 22 | 23 | 24 | 25 | 26 | {game.title} 27 | 28 | {game.teaser} 29 | 30 | 31 | 32 | ); 33 | }; 34 | 35 | return ( 36 | 37 | 38 | 39 |

40 | 41 | Hello{' '} 42 | 43 | {' '} 44 | lambiengcode 45 | 46 | {`\n`} 47 | 48 | Best game for today 49 | 50 | 51 | 52 | 53 |
54 | 55 | 56 | {categoryList.map((category, index) => { 57 | return ( 58 | changeCategory(category)}> 59 | 61 | {category} 62 | 63 | {selectedCategory === category && } 64 | 65 | ); 66 | })} 67 | 68 | 69 | { 71 | return ( 72 | game.category.includes(selectedCategory) || 73 | selectedCategory === 'All' 74 | ); 75 | })} 76 | keyExtractor={(item) => String(item.id)} 77 | renderItem={({item}) => GameItem(item)} 78 | ref={gamesRef}> 79 | 80 | ); 81 | }; 82 | 83 | const Container = styled.SafeAreaView` 84 | flex: 1; 85 | background-color: #343434; 86 | `; 87 | 88 | const Header = styled.View` 89 | flex-direction: row; 90 | background-color: #343434; 91 | justify-content: space-between; 92 | margin: 16px 32px 0px 32px; 93 | `; 94 | 95 | const Avatar = styled.Image` 96 | width: 40px; 97 | height: 40px; 98 | border-radius: 20px; 99 | `; 100 | 101 | const Categories = styled.ScrollView` 102 | margin-top: 32px; 103 | `; 104 | 105 | const Category = styled.TouchableOpacity` 106 | align-items: center; 107 | margin: 0 16px; 108 | height: 32px; 109 | `; 110 | 111 | const CategoryName = styled(Text)` 112 | color: ${(props) => (props.selected ? '#819ee5' : '#9a9a9a')}; 113 | font-weight: ${(props) => (props.selected ? '700' : '500')}; 114 | `; 115 | 116 | const CategoryDot = styled.View` 117 | height: 6px; 118 | width: 6px; 119 | border-radius: 3px; 120 | background-color: #819ee5; 121 | `; 122 | 123 | const Games = styled.FlatList` 124 | margin-top: 32px; 125 | `; 126 | 127 | const Game = styled.TouchableOpacity` 128 | margin-bottom: 32px; 129 | `; 130 | 131 | const GameCover = styled.Image` 132 | height: 300px; 133 | width: 100%; 134 | `; 135 | 136 | const GameInfo = styled.View` 137 | margin: -50px 16px 0 16px; /* flow: bot - right - top - left*/ 138 | padding: 16px; 139 | border-radius: 12px; 140 | flex-direction: row; 141 | align-items: center; 142 | `; 143 | 144 | const GameImage = styled.Image` 145 | width: 50px; 146 | height: 40px; 147 | border-radius: 8px; 148 | `; 149 | 150 | const GameTitle = styled.View` 151 | margin: 0px 28px; 152 | `; -------------------------------------------------------------------------------- /game_store_app/src/components/screens/LiveScreen.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {View, Text,} from 'react-native'; 3 | 4 | export default LiveScreen = () => { 5 | return ( 6 | 7 | Profile 8 | 9 | ) 10 | } -------------------------------------------------------------------------------- /game_store_app/src/components/screens/ProfileScreen.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {View, Text,} from 'react-native'; 3 | 4 | export default ProfileScreen = () => { 5 | return ( 6 | 7 | Profile 8 | 9 | ) 10 | } -------------------------------------------------------------------------------- /game_store_app/src/components/utils/Text.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | export default Text = ({ ...props }) => { 5 | return {props.children} 6 | } 7 | 8 | const TextStyle = styled.Text` 9 | font-family: 'Avenir Next'; 10 | color: ${props => props.color ?? '#FFFFFF'} 11 | 12 | ${({ title, large, medium, small }) => { 13 | switch (true) { 14 | case title: 15 | return `font-size: 32px`; 16 | case large: 17 | return `font-size: 20px`; 18 | case medium: 19 | return `font-size: 16px`; 20 | case small: 21 | return `font-size: 13px`; 22 | 23 | default: 24 | return `font-size: 14px`; 25 | } 26 | }} 27 | 28 | ${({light, bold, heavy}) => { 29 | switch(true) { 30 | case light: 31 | return `font-weight: 200`; 32 | case bold: 33 | return `font-weight: 600`; 34 | case heavy: 35 | return `font-weight: 700`; 36 | 37 | default: 38 | return `font-weight: 400`; 39 | } 40 | }} 41 | 42 | ${({center, right}) => { 43 | switch(true) { 44 | case center: 45 | return `text-align: center`; 46 | case right: 47 | return `text-align: right`; 48 | 49 | default: 50 | return `text-align: left`; 51 | } 52 | }} 53 | `; -------------------------------------------------------------------------------- /game_store_app/src/data/Categories.js: -------------------------------------------------------------------------------- 1 | export default categoryList = [ 2 | 'All', 'Action', 'Adventure', 'Casual', 'Indie', 'Multiplayer', 'Racing', 'RPG', 'Simulator', 'Sports', 'Strategy', 3 | ]; -------------------------------------------------------------------------------- /game_store_app/src/data/GameData.js: -------------------------------------------------------------------------------- 1 | export default games = [ 2 | { 3 | id: 1, 4 | title: '3on3 FreeStyle: Rebound', 5 | teaser: 'A basketball 3 on 3 games, short game have 5 min and you\'ll feed so fun with two another friends.', 6 | description: '3on3 FreeStyle: Rebound allows players to work with their teammates to pull off rim-shaking slam dunks, awe-inspiring alley-oops, flashy no-look passes, and clutch outside shots which breaks the heart of the opposing team in competitive games filled with the joy and energy of street basketball.', 7 | rating: 4.2, 8 | category: ['Indie', 'Sports'], 9 | age: '12+', 10 | cover: require('../assets/avatar.png'), 11 | screenshots: [ 12 | require('../assets/avatar.png'), 13 | require('../assets/avatar.png'), 14 | require('../assets/avatar.png'), 15 | require('../assets/avatar.png'), 16 | ], 17 | backgroundColor: '#824571', 18 | }, 19 | { 20 | id: 2, 21 | title: '3on3 Freestyle', 22 | teaser: 'A basketball 3 on 3 games, short game have 5 min and you\'ll feed so fun with two another friends.', 23 | description: '3on3 FreeStyle: Rebound allows players to work with their teammates to pull off rim-shaking slam dunks, awe-inspiring alley-oops, flashy no-look passes, and clutch outside shots which breaks the heart of the opposing team in competitive games filled with the joy and energy of street basketball.', 24 | rating: 5.0, 25 | category: ['Indie', 'Sports'], 26 | age: '12+', 27 | cover: require('../assets/3on3_cover.jpg'), 28 | screenshots: [ 29 | require('../assets/screenshot_game1.jpg'), 30 | require('../assets/screenshot_game2.jpg'), 31 | require('../assets/screenshot_game3.jpg'), 32 | ], 33 | backgroundColor: '#824571', 34 | }, 35 | { 36 | id: 3, 37 | title: '3on3 Freestyle', 38 | teaser: 'A basketball 3 on 3 games, short game have 5 min and you\'ll feed so fun with two another friends.', 39 | description: 'Publish at 2 years ago, this game have a smaill size. You can play this game on also pc. Okay download now...', 40 | rating: 5.0, 41 | category: ['Indie', 'Sport'], 42 | age: '12+', 43 | cover: require('../assets/avatar.png'), 44 | screenshots: [ 45 | require('../assets/avatar.png'), 46 | require('../assets/avatar.png'), 47 | require('../assets/avatar.png'), 48 | require('../assets/avatar.png'), 49 | ], 50 | backgroundColor: '#824571', 51 | }, 52 | { 53 | id: 4, 54 | title: '3on3 Freestyle', 55 | teaser: 'A basketball 3 on 3 games, short game have 5 min and you\'ll feed so fun with two another friends.', 56 | description: 'Publish at 2 years ago, this game have a smaill size. You can play this game on also pc. Okay download now...', 57 | rating: 5.0, 58 | category: ['Indie', 'Sports'], 59 | age: '12+', 60 | cover: require('../assets/avatar.png'), 61 | screenshots: [ 62 | require('../assets/avatar.png'), 63 | require('../assets/avatar.png'), 64 | require('../assets/avatar.png'), 65 | require('../assets/avatar.png'), 66 | ], 67 | backgroundColor: '#824571', 68 | } 69 | ]; -------------------------------------------------------------------------------- /tiktok_clone/.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /tiktok_clone/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native-community', 4 | }; 5 | -------------------------------------------------------------------------------- /tiktok_clone/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | ; We fork some components by platform 3 | .*/*[.]android.js 4 | 5 | ; Ignore "BUCK" generated dirs 6 | /\.buckd/ 7 | 8 | ; Ignore polyfills 9 | node_modules/react-native/Libraries/polyfills/.* 10 | 11 | ; These should not be required directly 12 | ; require from fbjs/lib instead: require('fbjs/lib/warning') 13 | node_modules/warning/.* 14 | 15 | ; Flow doesn't support platforms 16 | .*/Libraries/Utilities/LoadingView.js 17 | 18 | [untyped] 19 | .*/node_modules/@react-native-community/cli/.*/.* 20 | 21 | [include] 22 | 23 | [libs] 24 | node_modules/react-native/interface.js 25 | node_modules/react-native/flow/ 26 | 27 | [options] 28 | emoji=true 29 | 30 | esproposal.optional_chaining=enable 31 | esproposal.nullish_coalescing=enable 32 | 33 | module.file_ext=.js 34 | module.file_ext=.json 35 | module.file_ext=.ios.js 36 | 37 | munge_underscores=true 38 | 39 | module.name_mapper='^react-native/\(.*\)$' -> '/node_modules/react-native/\1' 40 | module.name_mapper='^@?[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> '/node_modules/react-native/Libraries/Image/RelativeImageStub' 41 | 42 | suppress_type=$FlowIssue 43 | suppress_type=$FlowFixMe 44 | suppress_type=$FlowFixMeProps 45 | suppress_type=$FlowFixMeState 46 | 47 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\) 48 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)?:? #[0-9]+ 49 | suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError 50 | 51 | [lints] 52 | sketchy-null-number=warn 53 | sketchy-null-mixed=warn 54 | sketchy-number=warn 55 | untyped-type-import=warn 56 | nonstrict-import=warn 57 | deprecated-type=warn 58 | unsafe-getters-setters=warn 59 | unnecessary-invariant=warn 60 | signature-verification-failure=warn 61 | deprecated-utility=error 62 | 63 | [strict] 64 | deprecated-type 65 | nonstrict-import 66 | sketchy-null 67 | unclear-type 68 | unsafe-getters-setters 69 | untyped-import 70 | untyped-type-import 71 | 72 | [version] 73 | ^0.122.0 74 | -------------------------------------------------------------------------------- /tiktok_clone/.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | -------------------------------------------------------------------------------- /tiktok_clone/.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | 24 | # Android/IntelliJ 25 | # 26 | build/ 27 | .idea 28 | .gradle 29 | local.properties 30 | *.iml 31 | 32 | # node.js 33 | # 34 | node_modules/ 35 | npm-debug.log 36 | yarn-error.log 37 | 38 | # BUCK 39 | buck-out/ 40 | \.buckd/ 41 | *.keystore 42 | !debug.keystore 43 | 44 | # fastlane 45 | # 46 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 47 | # screenshots whenever they are needed. 48 | # For more information about the recommended setup visit: 49 | # https://docs.fastlane.tools/best-practices/source-control/ 50 | 51 | */fastlane/report.xml 52 | */fastlane/Preview.html 53 | */fastlane/screenshots 54 | 55 | # Bundle artifact 56 | *.jsbundle 57 | 58 | # CocoaPods 59 | /ios/Pods/ 60 | -------------------------------------------------------------------------------- /tiktok_clone/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | bracketSpacing: false, 3 | jsxBracketSameLine: true, 4 | singleQuote: true, 5 | trailingComma: 'all', 6 | }; 7 | -------------------------------------------------------------------------------- /tiktok_clone/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /tiktok_clone/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import 'react-native-gesture-handler'; 3 | import {StatusBar, SafeAreaView} from 'react-native'; 4 | 5 | 6 | import Navigation from './src/navigation/index'; 7 | import Home from './src/screens/Home/index'; 8 | 9 | export default App = () => { 10 | return ( 11 | <> 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | }; 19 | -------------------------------------------------------------------------------- /tiktok_clone/__tests__/App-test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import 'react-native'; 6 | import React from 'react'; 7 | import App from '../App'; 8 | 9 | // Note: test renderer must be required after react-native. 10 | import renderer from 'react-test-renderer'; 11 | 12 | it('renders correctly', () => { 13 | renderer.create(); 14 | }); 15 | -------------------------------------------------------------------------------- /tiktok_clone/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.tiktok_clone", 39 | ) 40 | 41 | android_resource( 42 | name = "res", 43 | package = "com.tiktok_clone", 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 | -------------------------------------------------------------------------------- /tiktok_clone/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 | -------------------------------------------------------------------------------- /tiktok_clone/android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/tiktok_clone/android/app/debug.keystore -------------------------------------------------------------------------------- /tiktok_clone/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 | -------------------------------------------------------------------------------- /tiktok_clone/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /tiktok_clone/android/app/src/debug/java/com/tiktok_clone/ReactNativeFlipper.java: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its 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.tiktok_clone; 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.ReactInstanceManager; 23 | import com.facebook.react.bridge.ReactContext; 24 | import com.facebook.react.modules.network.NetworkingModule; 25 | import okhttp3.OkHttpClient; 26 | 27 | public class ReactNativeFlipper { 28 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) { 29 | if (FlipperUtils.shouldEnableFlipper(context)) { 30 | final FlipperClient client = AndroidFlipperClient.getInstance(context); 31 | 32 | client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults())); 33 | client.addPlugin(new ReactFlipperPlugin()); 34 | client.addPlugin(new DatabasesFlipperPlugin(context)); 35 | client.addPlugin(new SharedPreferencesFlipperPlugin(context)); 36 | client.addPlugin(CrashReporterPlugin.getInstance()); 37 | 38 | NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin(); 39 | NetworkingModule.setCustomClientBuilder( 40 | new NetworkingModule.CustomClientBuilder() { 41 | @Override 42 | public void apply(OkHttpClient.Builder builder) { 43 | builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); 44 | } 45 | }); 46 | client.addPlugin(networkFlipperPlugin); 47 | client.start(); 48 | 49 | // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized 50 | // Hence we run if after all native modules have been initialized 51 | ReactContext reactContext = reactInstanceManager.getCurrentReactContext(); 52 | if (reactContext == null) { 53 | reactInstanceManager.addReactInstanceEventListener( 54 | new ReactInstanceManager.ReactInstanceEventListener() { 55 | @Override 56 | public void onReactContextInitialized(ReactContext reactContext) { 57 | reactInstanceManager.removeReactInstanceEventListener(this); 58 | reactContext.runOnNativeModulesQueueThread( 59 | new Runnable() { 60 | @Override 61 | public void run() { 62 | client.addPlugin(new FrescoFlipperPlugin()); 63 | } 64 | }); 65 | } 66 | }); 67 | } else { 68 | client.addPlugin(new FrescoFlipperPlugin()); 69 | } 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /tiktok_clone/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 13 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /tiktok_clone/android/app/src/main/java/com/tiktok_clone/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.tiktok_clone; 2 | 3 | import com.facebook.react.ReactActivity; 4 | 5 | public class MainActivity extends ReactActivity { 6 | 7 | /** 8 | * Returns the name of the main component registered from JavaScript. This is used to schedule 9 | * rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "tiktok_clone"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /tiktok_clone/android/app/src/main/java/com/tiktok_clone/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.tiktok_clone; 2 | 3 | import com.brentvatne.react.ReactVideoPackage; 4 | import android.app.Application; 5 | import android.content.Context; 6 | import com.facebook.react.PackageList; 7 | import com.facebook.react.ReactApplication; 8 | import com.facebook.react.ReactInstanceManager; 9 | import com.facebook.react.ReactNativeHost; 10 | import com.facebook.react.ReactPackage; 11 | import com.facebook.soloader.SoLoader; 12 | import java.lang.reflect.InvocationTargetException; 13 | import java.util.List; 14 | 15 | public class MainApplication extends Application implements ReactApplication { 16 | 17 | private final ReactNativeHost mReactNativeHost = 18 | new ReactNativeHost(this) { 19 | @Override 20 | public boolean getUseDeveloperSupport() { 21 | return BuildConfig.DEBUG; 22 | } 23 | 24 | @Override 25 | protected List getPackages() { 26 | @SuppressWarnings("UnnecessaryLocalVariable") 27 | List packages = new PackageList(this).getPackages(); 28 | // Packages that cannot be autolinked yet can be added manually here, for example: 29 | // packages.add(new MyReactNativePackage()); 30 | return packages; 31 | } 32 | 33 | @Override 34 | protected String getJSMainModuleName() { 35 | return "index"; 36 | } 37 | }; 38 | 39 | @Override 40 | public ReactNativeHost getReactNativeHost() { 41 | return mReactNativeHost; 42 | } 43 | 44 | @Override 45 | public void onCreate() { 46 | super.onCreate(); 47 | SoLoader.init(this, /* native exopackage */ false); 48 | initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 49 | } 50 | 51 | /** 52 | * Loads Flipper in React Native templates. Call this in the onCreate method with something like 53 | * initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 54 | * 55 | * @param context 56 | * @param reactInstanceManager 57 | */ 58 | private static void initializeFlipper( 59 | Context context, ReactInstanceManager reactInstanceManager) { 60 | if (BuildConfig.DEBUG) { 61 | try { 62 | /* 63 | We use reflection here to pick up the class that initializes Flipper, 64 | since Flipper library is not available in release mode 65 | */ 66 | Class aClass = Class.forName("com.tiktok_clone.ReactNativeFlipper"); 67 | aClass 68 | .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class) 69 | .invoke(null, context, reactInstanceManager); 70 | } catch (ClassNotFoundException e) { 71 | e.printStackTrace(); 72 | } catch (NoSuchMethodException e) { 73 | e.printStackTrace(); 74 | } catch (IllegalAccessException e) { 75 | e.printStackTrace(); 76 | } catch (InvocationTargetException e) { 77 | e.printStackTrace(); 78 | } 79 | } 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /tiktok_clone/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/tiktok_clone/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /tiktok_clone/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/tiktok_clone/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /tiktok_clone/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/tiktok_clone/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /tiktok_clone/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/tiktok_clone/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /tiktok_clone/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/tiktok_clone/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /tiktok_clone/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/tiktok_clone/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /tiktok_clone/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/tiktok_clone/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /tiktok_clone/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/tiktok_clone/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /tiktok_clone/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/tiktok_clone/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /tiktok_clone/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/tiktok_clone/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /tiktok_clone/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | tiktok_clone 3 | 4 | -------------------------------------------------------------------------------- /tiktok_clone/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /tiktok_clone/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | ext { 5 | buildToolsVersion = "29.0.2" 6 | minSdkVersion = 21 7 | compileSdkVersion = 29 8 | targetSdkVersion = 29 9 | } 10 | repositories { 11 | google() 12 | jcenter() 13 | } 14 | dependencies { 15 | classpath("com.android.tools.build:gradle:3.5.3") 16 | // NOTE: Do not place your application dependencies here; they belong 17 | // in the individual module build.gradle files 18 | } 19 | } 20 | 21 | allprojects { 22 | repositories { 23 | mavenLocal() 24 | maven { 25 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 26 | url("$rootDir/../node_modules/react-native/android") 27 | } 28 | maven { 29 | // Android JSC is installed from npm 30 | url("$rootDir/../node_modules/jsc-android/dist") 31 | } 32 | 33 | google() 34 | jcenter() 35 | maven { url 'https://www.jitpack.io' } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /tiktok_clone/android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx10248m -XX:MaxPermSize=256m 13 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | # 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.54.0 29 | -------------------------------------------------------------------------------- /tiktok_clone/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/tiktok_clone/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /tiktok_clone/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-6.2-all.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /tiktok_clone/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 init 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 init 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 | :init 68 | @rem Get command-line arguments, handling Windows variants 69 | 70 | if not "%OS%" == "Windows_NT" goto win9xME_args 71 | 72 | :win9xME_args 73 | @rem Slurp the command line arguments. 74 | set CMD_LINE_ARGS= 75 | set _SKIP=2 76 | 77 | :win9xME_args_slurp 78 | if "x%~1" == "x" goto execute 79 | 80 | set CMD_LINE_ARGS=%* 81 | 82 | :execute 83 | @rem Setup the command line 84 | 85 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 86 | 87 | @rem Execute Gradle 88 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 89 | 90 | :end 91 | @rem End local scope for the variables with windows NT shell 92 | if "%ERRORLEVEL%"=="0" goto mainEnd 93 | 94 | :fail 95 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 96 | rem the _cmd.exe /c_ return code! 97 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 98 | exit /b 1 99 | 100 | :mainEnd 101 | if "%OS%"=="Windows_NT" endlocal 102 | 103 | :omega 104 | -------------------------------------------------------------------------------- /tiktok_clone/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'tiktok_clone' 2 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 3 | include ':app' 4 | -------------------------------------------------------------------------------- /tiktok_clone/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tiktok_clone", 3 | "displayName": "tiktok_clone" 4 | } -------------------------------------------------------------------------------- /tiktok_clone/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /tiktok_clone/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import {AppRegistry} from 'react-native'; 6 | import App from './App'; 7 | import {name as appName} from './app.json'; 8 | 9 | AppRegistry.registerComponent(appName, () => App); 10 | -------------------------------------------------------------------------------- /tiktok_clone/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, '10.0' 5 | 6 | target 'tiktok_clone' do 7 | config = use_native_modules! 8 | 9 | use_react_native!(:path => config["reactNativePath"]) 10 | 11 | target 'tiktok_cloneTests' do 12 | inherit! :complete 13 | # Pods for testing 14 | end 15 | 16 | # Enables Flipper. 17 | # 18 | # Note that if you have use_frameworks! enabled, Flipper will not work and 19 | # you should disable these next few lines. 20 | use_flipper! 21 | post_install do |installer| 22 | flipper_post_install(installer) 23 | end 24 | end 25 | 26 | target 'tiktok_clone-tvOS' do 27 | # Pods for tiktok_clone-tvOS 28 | 29 | target 'tiktok_clone-tvOSTests' do 30 | inherit! :search_paths 31 | # Pods for testing 32 | end 33 | end 34 | -------------------------------------------------------------------------------- /tiktok_clone/ios/tiktok_clone-tvOS/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | APPL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | LSRequiresIPhoneOS 24 | 25 | NSAppTransportSecurity 26 | 27 | NSExceptionDomains 28 | 29 | localhost 30 | 31 | NSExceptionAllowsInsecureHTTPLoads 32 | 33 | 34 | 35 | 36 | NSLocationWhenInUseUsageDescription 37 | 38 | UILaunchStoryboardName 39 | LaunchScreen 40 | UIRequiredDeviceCapabilities 41 | 42 | armv7 43 | 44 | UISupportedInterfaceOrientations 45 | 46 | UIInterfaceOrientationPortrait 47 | UIInterfaceOrientationLandscapeLeft 48 | UIInterfaceOrientationLandscapeRight 49 | 50 | UIViewControllerBasedStatusBarAppearance 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /tiktok_clone/ios/tiktok_clone-tvOSTests/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 | -------------------------------------------------------------------------------- /tiktok_clone/ios/tiktok_clone.xcodeproj/xcshareddata/xcschemes/tiktok_clone-tvOS.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 | -------------------------------------------------------------------------------- /tiktok_clone/ios/tiktok_clone.xcodeproj/xcshareddata/xcschemes/tiktok_clone.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 | -------------------------------------------------------------------------------- /tiktok_clone/ios/tiktok_clone/AppDelegate.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | @interface AppDelegate : UIResponder 5 | 6 | @property (nonatomic, strong) UIWindow *window; 7 | 8 | @end 9 | -------------------------------------------------------------------------------- /tiktok_clone/ios/tiktok_clone/AppDelegate.m: -------------------------------------------------------------------------------- 1 | #import "AppDelegate.h" 2 | 3 | #import 4 | #import 5 | #import 6 | 7 | #ifdef FB_SONARKIT_ENABLED 8 | #import 9 | #import 10 | #import 11 | #import 12 | #import 13 | #import 14 | 15 | static void InitializeFlipper(UIApplication *application) { 16 | FlipperClient *client = [FlipperClient sharedClient]; 17 | SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults]; 18 | [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:application withDescriptorMapper:layoutDescriptorMapper]]; 19 | [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]]; 20 | [client addPlugin:[FlipperKitReactPlugin new]]; 21 | [client addPlugin:[[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]]; 22 | [client start]; 23 | } 24 | #endif 25 | 26 | @implementation AppDelegate 27 | 28 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 29 | { 30 | #ifdef FB_SONARKIT_ENABLED 31 | InitializeFlipper(application); 32 | #endif 33 | 34 | RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions]; 35 | RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge 36 | moduleName:@"tiktok_clone" 37 | initialProperties:nil]; 38 | 39 | rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; 40 | 41 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 42 | UIViewController *rootViewController = [UIViewController new]; 43 | rootViewController.view = rootView; 44 | self.window.rootViewController = rootViewController; 45 | [self.window makeKeyAndVisible]; 46 | return YES; 47 | } 48 | 49 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge 50 | { 51 | #if DEBUG 52 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; 53 | #else 54 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 55 | #endif 56 | } 57 | 58 | @end 59 | -------------------------------------------------------------------------------- /tiktok_clone/ios/tiktok_clone/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "29x29", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "29x29", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "40x40", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "40x40", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "60x60", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "60x60", 31 | "scale" : "3x" 32 | } 33 | ], 34 | "info" : { 35 | "version" : 1, 36 | "author" : "xcode" 37 | } 38 | } -------------------------------------------------------------------------------- /tiktok_clone/ios/tiktok_clone/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /tiktok_clone/ios/tiktok_clone/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | tiktok_clone 9 | CFBundleExecutable 10 | $(EXECUTABLE_NAME) 11 | CFBundleIdentifier 12 | $(PRODUCT_BUNDLE_IDENTIFIER) 13 | CFBundleInfoDictionaryVersion 14 | 6.0 15 | CFBundleName 16 | $(PRODUCT_NAME) 17 | CFBundlePackageType 18 | APPL 19 | CFBundleShortVersionString 20 | 1.0 21 | CFBundleSignature 22 | ???? 23 | CFBundleVersion 24 | 1 25 | LSRequiresIPhoneOS 26 | 27 | NSAppTransportSecurity 28 | 29 | NSAllowsArbitraryLoads 30 | 31 | NSExceptionDomains 32 | 33 | localhost 34 | 35 | NSExceptionAllowsInsecureHTTPLoads 36 | 37 | 38 | 39 | 40 | NSLocationWhenInUseUsageDescription 41 | 42 | UILaunchStoryboardName 43 | LaunchScreen 44 | UIRequiredDeviceCapabilities 45 | 46 | armv7 47 | 48 | UISupportedInterfaceOrientations 49 | 50 | UIInterfaceOrientationPortrait 51 | UIInterfaceOrientationLandscapeLeft 52 | UIInterfaceOrientationLandscapeRight 53 | 54 | UIViewControllerBasedStatusBarAppearance 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /tiktok_clone/ios/tiktok_clone/LaunchScreen.storyboard: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 25 | 31 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /tiktok_clone/ios/tiktok_clone/main.m: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | #import "AppDelegate.h" 4 | 5 | int main(int argc, char * argv[]) { 6 | @autoreleasepool { 7 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /tiktok_clone/ios/tiktok_cloneTests/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 | -------------------------------------------------------------------------------- /tiktok_clone/ios/tiktok_cloneTests/tiktok_cloneTests.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 tiktok_cloneTests : XCTestCase 11 | 12 | @end 13 | 14 | @implementation tiktok_cloneTests 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(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 38 | if (level >= RCTLogLevelError) { 39 | redboxError = message; 40 | } 41 | }); 42 | #endif 43 | 44 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 45 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 46 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 47 | 48 | foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) { 49 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 50 | return YES; 51 | } 52 | return NO; 53 | }]; 54 | } 55 | 56 | #ifdef DEBUG 57 | RCTSetLogFunction(RCTDefaultLogFunction); 58 | #endif 59 | 60 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 61 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 62 | } 63 | 64 | 65 | @end 66 | -------------------------------------------------------------------------------- /tiktok_clone/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: false, 14 | }, 15 | }), 16 | }, 17 | }; 18 | -------------------------------------------------------------------------------- /tiktok_clone/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tiktok_clone", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "android": "react-native run-android", 7 | "ios": "react-native run-ios", 8 | "start": "react-native start", 9 | "test": "jest", 10 | "lint": "eslint ." 11 | }, 12 | "dependencies": { 13 | "@react-native-community/masked-view": "^0.1.10", 14 | "@react-navigation/bottom-tabs": "^5.11.2", 15 | "@react-navigation/native": "^5.8.10", 16 | "@react-navigation/stack": "^5.12.8", 17 | "react": "16.13.1", 18 | "react-native": "0.63.4", 19 | "react-native-gesture-handler": "^1.9.0", 20 | "react-native-reanimated": "^1.13.2", 21 | "react-native-safe-area-context": "^3.1.9", 22 | "react-native-screens": "^2.16.1", 23 | "react-native-vector-icons": "^7.1.0", 24 | "react-native-video": "^5.1.0-alpha8" 25 | }, 26 | "devDependencies": { 27 | "@babel/core": "7.12.10", 28 | "@babel/runtime": "7.12.5", 29 | "@react-native-community/eslint-config": "1.1.0", 30 | "babel-jest": "25.5.1", 31 | "eslint": "6.8.0", 32 | "jest": "25.5.4", 33 | "metro-react-native-babel-preset": "0.59.0", 34 | "react-test-renderer": "16.13.1" 35 | }, 36 | "jest": { 37 | "preset": "react-native" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /tiktok_clone/src/assets/images/plus-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lambiengcode/react-native-ui-sandbox/0f31ca995c167e656e5feb3ddd575e006204c853/tiktok_clone/src/assets/images/plus-icon.png -------------------------------------------------------------------------------- /tiktok_clone/src/components/Post/index.js: -------------------------------------------------------------------------------- 1 | import React, {useState} from 'react'; 2 | import {View, TouchableWithoutFeedback, Text, Image, TouchableOpacity} from 'react-native'; 3 | 4 | import Video from 'react-native-video'; 5 | import styles from './styles'; 6 | 7 | import Entypo from 'react-native-vector-icons/Entypo'; 8 | import AntDesign from 'react-native-vector-icons/AntDesign'; 9 | import FontAwesome from 'react-native-vector-icons/FontAwesome'; 10 | import Fontisto from 'react-native-vector-icons/Fontisto'; 11 | 12 | const Post = (props) => { 13 | const [post, setPost] = useState(props.post); 14 | const [isLiked, setIsLiked] = useState(false); 15 | 16 | const [paused, setPaused] = useState(false); 17 | 18 | const onPlayPausePress = () => { 19 | setPaused(!paused); 20 | }; 21 | 22 | const onLikePress = () => { 23 | setIsLiked(!isLiked); 24 | setPost({ 25 | ...post, 26 | likes: isLiked ? post.likes - 1 : post.likes + 1, 27 | }); 28 | } 29 | 30 | onloadstart = () => { 31 | onPlayPausePress(false); 32 | } 33 | 34 | onsuspend = () => { 35 | onPlayPausePress(true); 36 | } 37 | 38 | onended = () => { 39 | onPlayPausePress(true); 40 | } 41 | 42 | return ( 43 | 44 | 45 | 46 | 96 | 97 | 98 | ); 99 | }; 100 | 101 | export default Post; 102 | -------------------------------------------------------------------------------- /tiktok_clone/src/components/Post/styles.js: -------------------------------------------------------------------------------- 1 | import {StyleSheet, Dimensions} from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | container: { 5 | width: '100%', 6 | height: Dimensions.get('window').height - 22, 7 | }, 8 | videPlayButton: { 9 | position: 'absolute', 10 | top: 0, 11 | left: 0, 12 | bottom: 0, 13 | right: 0, 14 | zIndex: 100, 15 | }, 16 | video: { 17 | position: 'absolute', 18 | top: 0, 19 | left: 0, 20 | bottom: 0, 21 | right: 0, 22 | }, 23 | uiContainer: { 24 | height: '100%', 25 | justifyContent: 'flex-end', 26 | }, 27 | bottomContainer: { 28 | padding: 10, 29 | flexDirection: 'row', 30 | justifyContent: 'space-between', 31 | alignItems: 'flex-end', 32 | }, 33 | handle: { 34 | color: '#fff', 35 | fontSize: 16, 36 | fontWeight: '700', 37 | marginBottom: 10, 38 | }, 39 | description: { 40 | color: '#fff', 41 | fontSize: 16, 42 | fontWeight: '300', 43 | marginBottom: 10, 44 | }, 45 | songRow: { 46 | flexDirection: 'row', 47 | alignItems: 'center', 48 | }, 49 | songName: { 50 | color: '#fff', 51 | fontSize: 16, 52 | marginLeft: 5, 53 | }, 54 | 55 | songImage: { 56 | width: 50, 57 | height: 50, 58 | borderRadius: 25, 59 | borderWidth: 5, 60 | borderColor: '#4c4c4c', 61 | }, 62 | 63 | // right container 64 | rightContainer: { 65 | alignSelf: 'flex-end', 66 | height: 300, 67 | justifyContent: 'space-between', 68 | marginRight: 5, 69 | }, 70 | profilePicture: { 71 | width: 50, 72 | height: 50, 73 | borderRadius: 25, 74 | borderWidth: 2, 75 | borderColor: '#fff', 76 | }, 77 | 78 | iconContainer: { 79 | alignItems: 'center', 80 | }, 81 | statsLabel: { 82 | color: '#fff', 83 | fontSize: 16, 84 | fontWeight: '600', 85 | marginTop: 5, 86 | }, 87 | }); 88 | 89 | export default styles; -------------------------------------------------------------------------------- /tiktok_clone/src/data/posts.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | id: 'p1', 4 | videoUri: 5 | 'https://d8vywknz0hvjw.cloudfront.net/fitenium-media-prod/videos/45fee890-a74f-11ea-8725-311975ea9616/proccessed_720.mp4', 6 | user: { 7 | id: 'u1', 8 | username: 'lambiengcode', 9 | imageUri: 10 | 'https://avatars2.githubusercontent.com/u/60530946?s=460&u=e342f079ed3571122e21b42eedd0ae251a9d91ce&v=4', 11 | }, 12 | description: 'Blackjack - @Soobin', 13 | songName: 'Backjack - Soobin ft Goku', 14 | songImage: 15 | 'https://avatars2.githubusercontent.com/u/60530946?s=460&u=e342f079ed3571122e21b42eedd0ae251a9d91ce&v=4', 16 | likes: 529, 17 | comments: 249, 18 | shares: 192, 19 | }, 20 | { 21 | id: 'p2', 22 | videoUri: 23 | 'https://d8vywknz0hvjw.cloudfront.net/fitenium-media-prod/videos/45fee890-a74f-11ea-8725-311975ea9616/proccessed_720.mp4', 24 | user: { 25 | id: 'u1', 26 | username: 'lambiengcode', 27 | imageUri: 28 | 'https://avatars2.githubusercontent.com/u/60530946?s=460&u=e342f079ed3571122e21b42eedd0ae251a9d91ce&v=4', 29 | }, 30 | description: 'Blackjack - @Soobin', 31 | songName: 'Backjack - Soobin ft Goku', 32 | songImage: 33 | 'https://avatars2.githubusercontent.com/u/60530946?s=460&u=e342f079ed3571122e21b42eedd0ae251a9d91ce&v=4', 34 | likes: 529, 35 | comments: 249, 36 | shares: 192, 37 | }, 38 | { 39 | id: 'p3', 40 | videoUri: 41 | 'https://d8vywknz0hvjw.cloudfront.net/fitenium-media-prod/videos/45fee890-a74f-11ea-8725-311975ea9616/proccessed_720.mp4', 42 | user: { 43 | id: 'u1', 44 | username: 'lambiengcode', 45 | imageUri: 46 | 'https://avatars2.githubusercontent.com/u/60530946?s=460&u=e342f079ed3571122e21b42eedd0ae251a9d91ce&v=4', 47 | }, 48 | description: 'Blackjack - @Soobin', 49 | songName: 'Backjack - Soobin ft Goku', 50 | songImage: 51 | 'https://avatars2.githubusercontent.com/u/60530946?s=460&u=e342f079ed3571122e21b42eedd0ae251a9d91ce&v=4', 52 | likes: 529, 53 | comments: 249, 54 | shares: 192, 55 | }, 56 | ]; 57 | -------------------------------------------------------------------------------- /tiktok_clone/src/navigation/homeBottomTabNavigator.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Image, Text} from 'react-native'; 3 | import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; 4 | import Home from '../screens/Home/index'; 5 | 6 | import Entypo from 'react-native-vector-icons/Entypo'; 7 | import AntDesign from 'react-native-vector-icons/AntDesign'; 8 | import Ionicons from 'react-native-vector-icons/Ionicons'; 9 | 10 | const Tab = createBottomTabNavigator(); 11 | 12 | export default HomeBottomTabNavigator = () => { 13 | return ( 14 | 30 | ( 35 | 36 | ), 37 | }} 38 | /> 39 | ( 44 | 45 | ), 46 | }} 47 | /> 48 | ( 53 | 60 | ), 61 | tabBarLabel: () => null, 62 | }} 63 | /> 64 | ( 69 | 74 | ), 75 | }} 76 | /> 77 | ( 82 | 83 | ), 84 | }} 85 | /> 86 | 87 | ); 88 | }; 89 | -------------------------------------------------------------------------------- /tiktok_clone/src/navigation/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import {NavigationContainer} from '@react-navigation/native'; 4 | import { createStackNavigator } from '@react-navigation/stack'; 5 | import HomeBottomTabNavigator from './homeBottomTabNavigator'; 6 | import Home from '../screens/Home/index'; 7 | 8 | const Stack = createStackNavigator(); 9 | 10 | export default Navigation = () => { 11 | return ( 12 | 13 | 18 | 19 | 27 | 28 | 29 | ); 30 | }; -------------------------------------------------------------------------------- /tiktok_clone/src/screens/Home/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {FlatList, View, Dimensions} from 'react-native'; 3 | import Post from '../../components/Post'; 4 | 5 | import posts from '../../data/posts'; 6 | 7 | const Home = () => { 8 | return ( 9 | 10 | } 13 | showsVerticalScrollIndicator={false} 14 | snapToInterval={Dimensions.get('window').height - 22} 15 | decelerationRate={'fast'} 16 | /> 17 | 18 | ); 19 | }; 20 | 21 | export default Home; --------------------------------------------------------------------------------