├── README.md ├── package.json ├── template.config.js └── template ├── .buckconfig ├── .editorconfig ├── .eslintrc.js ├── .flowconfig ├── .gitattributes ├── .gitignore ├── .prettierrc.js ├── .watchmanconfig ├── Gemfile ├── Gemfile.lock ├── android ├── app │ ├── _BUCK │ ├── build.gradle │ ├── build_defs.bzl │ ├── debug.keystore │ ├── proguard-rules.pro │ └── src │ │ ├── debug │ │ ├── AndroidManifest.xml │ │ └── java │ │ │ └── com │ │ │ └── projectname │ │ │ └── ReactNativeFlipper.java │ │ └── main │ │ ├── AndroidManifest.xml │ │ ├── assets │ │ └── fonts │ │ │ ├── AntDesign.ttf │ │ │ ├── BR_Firma_Bold.otf │ │ │ ├── BR_Firma_Medium.otf │ │ │ ├── BR_Firma_Regular.otf │ │ │ ├── Bozon_Bold.otf │ │ │ ├── Bozon_Demi_Bold.otf │ │ │ ├── Bozon_Regular.otf │ │ │ ├── Entypo.ttf │ │ │ ├── EvilIcons.ttf │ │ │ ├── Feather.ttf │ │ │ ├── FontAwesome.ttf │ │ │ ├── FontAwesome5_Brands.ttf │ │ │ ├── FontAwesome5_Regular.ttf │ │ │ ├── FontAwesome5_Solid.ttf │ │ │ ├── Fontisto.ttf │ │ │ ├── Foundation.ttf │ │ │ ├── Ionicons.ttf │ │ │ ├── MaterialCommunityIcons.ttf │ │ │ ├── MaterialIcons.ttf │ │ │ ├── Octicons.ttf │ │ │ ├── SimpleLineIcons.ttf │ │ │ ├── Zocial.ttf │ │ │ └── icomoon.ttf │ │ ├── java │ │ └── com │ │ │ └── projectname │ │ │ ├── MainActivity.java │ │ │ └── MainApplication.java │ │ └── res │ │ ├── drawable-xhdpi │ │ └── splash_icon.png │ │ ├── drawable-xxxhdpi │ │ └── splash_icon.png │ │ ├── layout │ │ └── launch_screen.xml │ │ ├── mipmap-hdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-mdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xxhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xxxhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ └── values │ │ ├── colors.xml │ │ ├── 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 ├── configs ├── development │ └── .env ├── production │ └── .env.example └── staging │ └── .env.example ├── fastlane ├── Fastfile ├── Pluginfile ├── android │ └── Fastfile ├── icons │ ├── appIcon.psd │ ├── development.png │ ├── production.png │ └── staging.png └── ios │ └── Fastfile ├── index.js ├── ios ├── Config.xcconfig ├── File.swift ├── Podfile ├── Podfile.lock ├── ProjectName-Bridging-Header.h ├── ProjectName.xcodeproj │ ├── project.pbxproj │ └── xcshareddata │ │ └── xcschemes │ │ ├── ProjectName-Production.xcscheme │ │ ├── ProjectName-Staging.xcscheme │ │ └── ProjectName.xcscheme ├── ProjectName.xcworkspace │ ├── contents.xcworkspacedata │ └── xcshareddata │ │ └── IDEWorkspaceChecks.plist ├── ProjectName │ ├── AppDelegate.h │ ├── AppDelegate.m │ ├── Images.xcassets │ │ ├── AppIcon.appiconset │ │ │ ├── 1024.png │ │ │ ├── 120-1.png │ │ │ ├── 120.png │ │ │ ├── 180.png │ │ │ ├── 40.png │ │ │ ├── 58.png │ │ │ ├── 60.png │ │ │ ├── 80.png │ │ │ ├── 87.png │ │ │ └── Contents.json │ │ ├── Contents.json │ │ └── SplashImage.imageset │ │ │ ├── Contents.json │ │ │ ├── splash_icon-1.png │ │ │ ├── splash_icon-2.png │ │ │ └── splash_icon.png │ ├── Info.plist │ ├── LaunchScreen.storyboard │ └── main.m └── ProjectNameTests │ ├── Info.plist │ └── ProjectNameTests.m ├── metro.config.js ├── package.json ├── react-native.config.js ├── src ├── App.tsx ├── assets │ ├── fonts │ │ ├── BR_Firma_Bold.otf │ │ ├── BR_Firma_Medium.otf │ │ ├── BR_Firma_Regular.otf │ │ ├── Bozon_Bold.otf │ │ ├── Bozon_Demi_Bold.otf │ │ ├── Bozon_Regular.otf │ │ └── icomoon.ttf │ ├── icons │ │ ├── index.ts │ │ └── selection.json │ └── images │ │ ├── apple.png │ │ ├── cnn.png │ │ ├── fifa.png │ │ ├── index.ts │ │ ├── news_1.png │ │ ├── news_2.png │ │ ├── news_3.png │ │ └── splash_icon.png ├── components │ ├── Home │ │ ├── CovidNews.tsx │ │ ├── Header.tsx │ │ ├── NewsItem.tsx │ │ ├── index.ts │ │ └── types.ts │ └── base │ │ ├── ActionSheet │ │ └── index.tsx │ │ ├── AlertDialog │ │ ├── Alert.styles.ts │ │ ├── Alert.tsx │ │ └── index.tsx │ │ ├── Block │ │ ├── index.tsx │ │ └── types.ts │ │ ├── BottomMenu │ │ ├── MenuItem.tsx │ │ ├── constants.ts │ │ ├── index.tsx │ │ ├── styles.ts │ │ └── types.ts │ │ ├── Button │ │ ├── index.tsx │ │ └── types.ts │ │ ├── DateTimePicker │ │ ├── Picker.android.tsx │ │ ├── Picker.d.ts │ │ ├── Picker.ios.tsx │ │ ├── index.tsx │ │ └── types.ts │ │ ├── Form │ │ ├── DateTimePicker │ │ │ ├── index.tsx │ │ │ └── types.ts │ │ ├── FormContainer │ │ │ ├── index.tsx │ │ │ ├── styles.ts │ │ │ └── types.ts │ │ ├── FormRadio │ │ │ ├── index.tsx │ │ │ └── types.ts │ │ ├── Input │ │ │ ├── index.tsx │ │ │ └── types.ts │ │ ├── Select │ │ │ ├── index.tsx │ │ │ └── types.ts │ │ ├── Switch │ │ │ ├── index.tsx │ │ │ └── types.ts │ │ └── index.ts │ │ ├── Icon │ │ ├── index.tsx │ │ └── types.ts │ │ ├── Image │ │ ├── index.tsx │ │ └── types.ts │ │ ├── Modal │ │ ├── Modal.styles.ts │ │ └── index.tsx │ │ ├── Radio │ │ ├── index.tsx │ │ └── types.ts │ │ ├── Select │ │ ├── HeaderTitle.tsx │ │ ├── SelectItem.tsx │ │ ├── SelectPopup.tsx │ │ ├── constants.ts │ │ ├── index.tsx │ │ ├── styles.ts │ │ └── types.ts │ │ ├── Shimmer │ │ ├── index.tsx │ │ ├── styles.ts │ │ └── types.ts │ │ ├── Switch │ │ ├── index.tsx │ │ ├── styles.ts │ │ └── types.ts │ │ ├── Text │ │ ├── index.tsx │ │ └── types.ts │ │ ├── TextInput │ │ ├── index.tsx │ │ └── types.ts │ │ ├── index.ts │ │ └── utils.ts ├── hooks │ ├── index.ts │ ├── useBackHandler.ts │ ├── useMediaPicker.ts │ └── useModalController.ts ├── i18n │ ├── index.tsx │ └── resources │ │ ├── en.ts │ │ ├── index.ts │ │ └── vi.ts ├── navigation │ ├── BottomTab.tsx │ ├── NavigationServices.ts │ ├── RootStackNavigation.tsx │ ├── index.tsx │ ├── routes.ts │ └── types.ts ├── screens │ ├── BottomTab │ │ ├── Home │ │ │ ├── Home.styles.ts │ │ │ ├── index.tsx │ │ │ └── types.ts │ │ ├── Notification │ │ │ ├── data.ts │ │ │ ├── index.tsx │ │ │ └── types.ts │ │ ├── Profile │ │ │ └── index.tsx │ │ ├── Search │ │ │ ├── data.ts │ │ │ ├── index.tsx │ │ │ └── types.ts │ │ └── index.ts │ ├── Common │ │ └── index.ts │ ├── __Dev__ │ │ ├── DevMenu.tsx │ │ ├── Example │ │ │ ├── ExampleButton.tsx │ │ │ ├── ExampleDateTimePicker.tsx │ │ │ ├── ExampleIcon.tsx │ │ │ ├── ExampleImage.tsx │ │ │ ├── ExampleInput.tsx │ │ │ ├── ExampleModal.tsx │ │ │ ├── ExampleRadio.tsx │ │ │ ├── ExampleScreen.tsx │ │ │ ├── ExampleSelect.tsx │ │ │ ├── ExampleSwitch.tsx │ │ │ ├── ExampleText.tsx │ │ │ └── index.tsx │ │ └── index.ts │ └── index.ts ├── store │ ├── actions │ │ ├── authAction.ts │ │ ├── commonAction.ts │ │ ├── index.ts │ │ └── startupAction.ts │ ├── index.ts │ ├── reducers │ │ ├── authReducer.ts │ │ ├── commonReducer.ts │ │ ├── index.ts │ │ └── startupReducer.ts │ ├── sagas │ │ ├── commonSaga.ts │ │ ├── index.ts │ │ └── startupSaga.ts │ ├── selectors │ │ ├── authSelector.ts │ │ ├── commonSelector.ts │ │ ├── index.ts │ │ └── startupSelector.ts │ └── types │ │ ├── authType.ts │ │ ├── commonType.ts │ │ ├── index.ts │ │ └── startupType.ts ├── theme │ ├── colors.ts │ ├── fonts.ts │ ├── index.ts │ └── types.ts └── utils │ ├── api.ts │ ├── constants.ts │ └── helpers.ts ├── tsconfig.json └── yarn.lock /README.md: -------------------------------------------------------------------------------- 1 | # React Native boilerplate 2 | ## **NOTE:** Developing, template can change in the future. 3 | 4 | ## Quick start 5 | To create a new project using the boilerplate: 6 | ```sh 7 | npx react-native init MyApp --template https://github.com/haujs/react-native-skeleton-template.git 8 | ``` 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-boilerplate", 3 | "version": "0.1.0", 4 | "description": "React Native Boilerplate", 5 | "author": "Le Hau ", 6 | "license": "MIT", 7 | "main": "init.script.js", 8 | "scripts": { 9 | "test": "echo \"Error: no test specified\" && exit 1" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /template.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | placeholderName: 'ProjectName', 3 | titlePlaceholder: 'React Native Boilerplate', 4 | templateDir: './template' 5 | }; 6 | -------------------------------------------------------------------------------- /template/.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /template/.editorconfig: -------------------------------------------------------------------------------- 1 | # Windows files 2 | [*.bat] 3 | end_of_line = crlf 4 | -------------------------------------------------------------------------------- /template/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native-community', 4 | rules: { 5 | 'react/no-array-index-key': 0, 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /template/.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 | ; Flow doesn't support platforms 12 | .*/Libraries/Utilities/LoadingView.js 13 | 14 | [untyped] 15 | .*/node_modules/@react-native-community/cli/.*/.* 16 | 17 | [include] 18 | 19 | [libs] 20 | node_modules/react-native/interface.js 21 | node_modules/react-native/flow/ 22 | 23 | [options] 24 | emoji=true 25 | 26 | exact_by_default=true 27 | 28 | module.file_ext=.js 29 | module.file_ext=.json 30 | module.file_ext=.ios.js 31 | 32 | munge_underscores=true 33 | 34 | module.name_mapper='^react-native/\(.*\)$' -> '/node_modules/react-native/\1' 35 | 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' 36 | 37 | suppress_type=$FlowIssue 38 | suppress_type=$FlowFixMe 39 | suppress_type=$FlowFixMeProps 40 | suppress_type=$FlowFixMeState 41 | 42 | [lints] 43 | sketchy-null-number=warn 44 | sketchy-null-mixed=warn 45 | sketchy-number=warn 46 | untyped-type-import=warn 47 | nonstrict-import=warn 48 | deprecated-type=warn 49 | unsafe-getters-setters=warn 50 | unnecessary-invariant=warn 51 | signature-verification-failure=warn 52 | 53 | [strict] 54 | deprecated-type 55 | nonstrict-import 56 | sketchy-null 57 | unclear-type 58 | unsafe-getters-setters 59 | untyped-import 60 | untyped-type-import 61 | 62 | [version] 63 | ^0.149.0 -------------------------------------------------------------------------------- /template/.gitattributes: -------------------------------------------------------------------------------- 1 | # Windows files should use crlf line endings 2 | # https://help.github.com/articles/dealing-with-line-endings/ 3 | *.bat text eol=crlf 4 | -------------------------------------------------------------------------------- /template/.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 | 61 | /configs/staging/.env 62 | /configs/staging/GoogleService-Info.plist 63 | /configs/staging/google-services.json 64 | 65 | /configs/production/.env 66 | /configs/production/GoogleService-Info.plist 67 | /configs/production/google-services.json 68 | 69 | # react-native-config codegen 70 | ios/tmp.xcconfig 71 | /.env 72 | 73 | .vscode 74 | 75 | #fastlane 76 | fastlane/README.md 77 | fastlane/report.xml 78 | *.mobileprovision 79 | 80 | *.cer 81 | *.p12 -------------------------------------------------------------------------------- /template/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | bracketSpacing: false, 3 | jsxBracketSameLine: true, 4 | singleQuote: true, 5 | trailingComma: 'all', 6 | arrowParens: 'avoid', 7 | }; 8 | -------------------------------------------------------------------------------- /template/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /template/Gemfile: -------------------------------------------------------------------------------- 1 | source "https://rubygems.org" 2 | 3 | gem "fastlane" 4 | 5 | plugins_path = File.join(File.dirname(__FILE__), 'fastlane', 'Pluginfile') 6 | eval_gemfile(plugins_path) if File.exist?(plugins_path) 7 | -------------------------------------------------------------------------------- /template/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.projectname", 39 | ) 40 | 41 | android_resource( 42 | name = "res", 43 | package = "com.projectname", 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 | -------------------------------------------------------------------------------- /template/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 | -------------------------------------------------------------------------------- /template/android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/debug.keystore -------------------------------------------------------------------------------- /template/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 | -keep class com.facebook.react.turbomodule.** { *; } 12 | -keep class com.mypackage.BuildConfig { *; } 13 | 14 | -keepresources string/build_config_package 15 | 16 | -keep public class com.dylanvann.fastimage.* {*;} 17 | -keep public class com.dylanvann.fastimage.** {*;} 18 | -keep public class * implements com.bumptech.glide.module.GlideModule 19 | -keep public class * extends com.bumptech.glide.module.AppGlideModule 20 | -keep public enum com.bumptech.glide.load.ImageHeaderParser$** { 21 | **[] $VALUES; 22 | public *; 23 | } -------------------------------------------------------------------------------- /template/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template/android/app/src/debug/java/com/projectname/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.projectname; 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 | -------------------------------------------------------------------------------- /template/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 16 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /template/android/app/src/main/assets/fonts/AntDesign.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/src/main/assets/fonts/AntDesign.ttf -------------------------------------------------------------------------------- /template/android/app/src/main/assets/fonts/BR_Firma_Bold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/src/main/assets/fonts/BR_Firma_Bold.otf -------------------------------------------------------------------------------- /template/android/app/src/main/assets/fonts/BR_Firma_Medium.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/src/main/assets/fonts/BR_Firma_Medium.otf -------------------------------------------------------------------------------- /template/android/app/src/main/assets/fonts/BR_Firma_Regular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/src/main/assets/fonts/BR_Firma_Regular.otf -------------------------------------------------------------------------------- /template/android/app/src/main/assets/fonts/Bozon_Bold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/src/main/assets/fonts/Bozon_Bold.otf -------------------------------------------------------------------------------- /template/android/app/src/main/assets/fonts/Bozon_Demi_Bold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/src/main/assets/fonts/Bozon_Demi_Bold.otf -------------------------------------------------------------------------------- /template/android/app/src/main/assets/fonts/Bozon_Regular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/src/main/assets/fonts/Bozon_Regular.otf -------------------------------------------------------------------------------- /template/android/app/src/main/assets/fonts/Entypo.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/src/main/assets/fonts/Entypo.ttf -------------------------------------------------------------------------------- /template/android/app/src/main/assets/fonts/EvilIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/src/main/assets/fonts/EvilIcons.ttf -------------------------------------------------------------------------------- /template/android/app/src/main/assets/fonts/Feather.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/src/main/assets/fonts/Feather.ttf -------------------------------------------------------------------------------- /template/android/app/src/main/assets/fonts/FontAwesome.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/src/main/assets/fonts/FontAwesome.ttf -------------------------------------------------------------------------------- /template/android/app/src/main/assets/fonts/FontAwesome5_Brands.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/src/main/assets/fonts/FontAwesome5_Brands.ttf -------------------------------------------------------------------------------- /template/android/app/src/main/assets/fonts/FontAwesome5_Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/src/main/assets/fonts/FontAwesome5_Regular.ttf -------------------------------------------------------------------------------- /template/android/app/src/main/assets/fonts/FontAwesome5_Solid.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/src/main/assets/fonts/FontAwesome5_Solid.ttf -------------------------------------------------------------------------------- /template/android/app/src/main/assets/fonts/Fontisto.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/src/main/assets/fonts/Fontisto.ttf -------------------------------------------------------------------------------- /template/android/app/src/main/assets/fonts/Foundation.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/src/main/assets/fonts/Foundation.ttf -------------------------------------------------------------------------------- /template/android/app/src/main/assets/fonts/Ionicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/src/main/assets/fonts/Ionicons.ttf -------------------------------------------------------------------------------- /template/android/app/src/main/assets/fonts/MaterialCommunityIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/src/main/assets/fonts/MaterialCommunityIcons.ttf -------------------------------------------------------------------------------- /template/android/app/src/main/assets/fonts/MaterialIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/src/main/assets/fonts/MaterialIcons.ttf -------------------------------------------------------------------------------- /template/android/app/src/main/assets/fonts/Octicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/src/main/assets/fonts/Octicons.ttf -------------------------------------------------------------------------------- /template/android/app/src/main/assets/fonts/SimpleLineIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/src/main/assets/fonts/SimpleLineIcons.ttf -------------------------------------------------------------------------------- /template/android/app/src/main/assets/fonts/Zocial.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/src/main/assets/fonts/Zocial.ttf -------------------------------------------------------------------------------- /template/android/app/src/main/assets/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/src/main/assets/fonts/icomoon.ttf -------------------------------------------------------------------------------- /template/android/app/src/main/java/com/projectname/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.projectname; 2 | 3 | import android.os.Bundle; 4 | import com.facebook.react.ReactActivity; 5 | import org.devio.rn.splashscreen.SplashScreen; 6 | import com.facebook.react.ReactActivityDelegate; 7 | import com.facebook.react.ReactRootView; 8 | import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView; 9 | import android.content.Intent; 10 | import android.content.res.Configuration; 11 | 12 | public class MainActivity extends ReactActivity { 13 | 14 | /** 15 | * Returns the name of the main component registered from JavaScript. This is used to schedule 16 | * rendering of the component. 17 | */ 18 | @Override 19 | protected String getMainComponentName() { 20 | return "ProjectName"; 21 | } 22 | 23 | @Override 24 | protected void onCreate(Bundle savedInstanceState) { 25 | SplashScreen.show(this); 26 | super.onCreate(null); 27 | } 28 | 29 | @Override 30 | public void onConfigurationChanged(Configuration newConfig) { 31 | super.onConfigurationChanged(newConfig); 32 | Intent intent = new Intent("onConfigurationChanged"); 33 | intent.putExtra("newConfig", newConfig); 34 | this.sendBroadcast(intent); 35 | } 36 | 37 | @Override 38 | protected ReactActivityDelegate createReactActivityDelegate() { 39 | return new ReactActivityDelegate(this, getMainComponentName()) { 40 | @Override 41 | protected ReactRootView createRootView() { 42 | return new RNGestureHandlerEnabledRootView(MainActivity.this); 43 | } 44 | }; 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /template/android/app/src/main/java/com/projectname/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.projectname; 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 | // Reanimated Config 15 | import com.facebook.react.bridge.JSIModulePackage; 16 | import com.swmansion.reanimated.ReanimatedJSIModulePackage; 17 | // End Reanimated Config 18 | 19 | public class MainApplication extends Application implements ReactApplication { 20 | 21 | private final ReactNativeHost mReactNativeHost = 22 | new ReactNativeHost(this) { 23 | @Override 24 | public boolean getUseDeveloperSupport() { 25 | return BuildConfig.DEBUG; 26 | } 27 | 28 | @Override 29 | protected List getPackages() { 30 | @SuppressWarnings("UnnecessaryLocalVariable") 31 | List packages = new PackageList(this).getPackages(); 32 | // Packages that cannot be autolinked yet can be added manually here, for example: 33 | // packages.add(new MyReactNativePackage()); 34 | return packages; 35 | } 36 | 37 | @Override 38 | protected String getJSMainModuleName() { 39 | return "index"; 40 | } 41 | 42 | @Override 43 | protected JSIModulePackage getJSIModulePackage() { 44 | return new ReanimatedJSIModulePackage(); 45 | } 46 | }; 47 | 48 | @Override 49 | public ReactNativeHost getReactNativeHost() { 50 | return mReactNativeHost; 51 | } 52 | 53 | @Override 54 | public void onCreate() { 55 | super.onCreate(); 56 | SoLoader.init(this, /* native exopackage */ false); 57 | initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 58 | } 59 | 60 | /** 61 | * Loads Flipper in React Native templates. Call this in the onCreate method with something like 62 | * initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 63 | * 64 | * @param context 65 | * @param reactInstanceManager 66 | */ 67 | private static void initializeFlipper( 68 | Context context, ReactInstanceManager reactInstanceManager) { 69 | if (BuildConfig.DEBUG) { 70 | try { 71 | /* 72 | We use reflection here to pick up the class that initializes Flipper, 73 | since Flipper library is not available in release mode 74 | */ 75 | Class aClass = Class.forName("com.projectname.ReactNativeFlipper"); 76 | aClass 77 | .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class) 78 | .invoke(null, context, reactInstanceManager); 79 | } catch (ClassNotFoundException e) { 80 | e.printStackTrace(); 81 | } catch (NoSuchMethodException e) { 82 | e.printStackTrace(); 83 | } catch (IllegalAccessException e) { 84 | e.printStackTrace(); 85 | } catch (InvocationTargetException e) { 86 | e.printStackTrace(); 87 | } 88 | } 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /template/android/app/src/main/res/drawable-xhdpi/splash_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/src/main/res/drawable-xhdpi/splash_icon.png -------------------------------------------------------------------------------- /template/android/app/src/main/res/drawable-xxxhdpi/splash_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/src/main/res/drawable-xxxhdpi/splash_icon.png -------------------------------------------------------------------------------- /template/android/app/src/main/res/layout/launch_screen.xml: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | -------------------------------------------------------------------------------- /template/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /template/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /template/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /template/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /template/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /template/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /template/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /template/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /template/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /template/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /template/android/app/src/main/res/values/colors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | #FFFFFF 4 | 5 | -------------------------------------------------------------------------------- /template/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | ProjectName 3 | 4 | -------------------------------------------------------------------------------- /template/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /template/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 = "30.0.2" 6 | minSdkVersion = 21 7 | compileSdkVersion = 30 8 | targetSdkVersion = 30 9 | ndkVersion = "20.1.5948944" 10 | } 11 | repositories { 12 | google() 13 | mavenCentral() 14 | } 15 | dependencies { 16 | classpath("com.android.tools.build:gradle:4.2.1") 17 | // NOTE: Do not place your application dependencies here; they belong 18 | // in the individual module build.gradle files 19 | } 20 | } 21 | 22 | allprojects { 23 | repositories { 24 | mavenCentral() 25 | mavenLocal() 26 | maven { 27 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 28 | url("$rootDir/../node_modules/react-native/android") 29 | } 30 | maven { 31 | // Android JSC is installed from npm 32 | url("$rootDir/../node_modules/jsc-android/dist") 33 | } 34 | jcenter() 35 | google() 36 | maven { url 'https://www.jitpack.io' } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /template/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.93.0 29 | -------------------------------------------------------------------------------- /template/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /template/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-6.9-all.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /template/android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @rem 2 | @rem Copyright 2015 the original author or authors. 3 | @rem 4 | @rem Licensed under the Apache License, Version 2.0 (the "License"); 5 | @rem you may not use this file except in compliance with the License. 6 | @rem You may obtain a copy of the License at 7 | @rem 8 | @rem https://www.apache.org/licenses/LICENSE-2.0 9 | @rem 10 | @rem Unless required by applicable law or agreed to in writing, software 11 | @rem distributed under the License is distributed on an "AS IS" BASIS, 12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | @rem See the License for the specific language governing permissions and 14 | @rem limitations under the License. 15 | @rem 16 | 17 | @if "%DEBUG%" == "" @echo off 18 | @rem ########################################################################## 19 | @rem 20 | @rem Gradle startup script for Windows 21 | @rem 22 | @rem ########################################################################## 23 | 24 | @rem Set local scope for the variables with windows NT shell 25 | if "%OS%"=="Windows_NT" setlocal 26 | 27 | set DIRNAME=%~dp0 28 | if "%DIRNAME%" == "" set DIRNAME=. 29 | set APP_BASE_NAME=%~n0 30 | set APP_HOME=%DIRNAME% 31 | 32 | @rem Resolve any "." and ".." in APP_HOME to make it shorter. 33 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi 34 | 35 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 36 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 37 | 38 | @rem Find java.exe 39 | if defined JAVA_HOME goto findJavaFromJavaHome 40 | 41 | set JAVA_EXE=java.exe 42 | %JAVA_EXE% -version >NUL 2>&1 43 | if "%ERRORLEVEL%" == "0" goto execute 44 | 45 | echo. 46 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 47 | echo. 48 | echo Please set the JAVA_HOME variable in your environment to match the 49 | echo location of your Java installation. 50 | 51 | goto fail 52 | 53 | :findJavaFromJavaHome 54 | set JAVA_HOME=%JAVA_HOME:"=% 55 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 56 | 57 | if exist "%JAVA_EXE%" goto execute 58 | 59 | echo. 60 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 61 | echo. 62 | echo Please set the JAVA_HOME variable in your environment to match the 63 | echo location of your Java installation. 64 | 65 | goto fail 66 | 67 | :execute 68 | @rem Setup the command line 69 | 70 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 71 | 72 | 73 | @rem Execute Gradle 74 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* 75 | 76 | :end 77 | @rem End local scope for the variables with windows NT shell 78 | if "%ERRORLEVEL%"=="0" goto mainEnd 79 | 80 | :fail 81 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 82 | rem the _cmd.exe /c_ return code! 83 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 84 | exit /b 1 85 | 86 | :mainEnd 87 | if "%OS%"=="Windows_NT" endlocal 88 | 89 | :omega 90 | -------------------------------------------------------------------------------- /template/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'ProjectName' 2 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 3 | include ':app' 4 | -------------------------------------------------------------------------------- /template/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ProjectName", 3 | "displayName": "ProjectName" 4 | } -------------------------------------------------------------------------------- /template/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | env: { 4 | production: { 5 | plugins: ['transform-remove-console'], 6 | }, 7 | }, 8 | plugins: [ 9 | [ 10 | 'module-resolver', 11 | { 12 | root: ['./src'], 13 | extensions: ['.ts', '.tsx', '.js', '.json'], 14 | alias: { 15 | '@assets': './src/assets', 16 | '@components': './src/components', 17 | '@hooks': './src/hooks', 18 | '@i18n': './src/i18n', 19 | '@navigation': './src/navigation', 20 | '@screens': './src/screens', 21 | '@store': './src/store', 22 | '@theme': './src/theme', 23 | '@utils': './src/utils', 24 | }, 25 | }, 26 | ], 27 | 'react-native-reanimated/plugin', 28 | ], 29 | }; 30 | -------------------------------------------------------------------------------- /template/configs/development/.env: -------------------------------------------------------------------------------- 1 | #APP CONFIG 2 | NODE_ENV=Development 3 | APP_NAME=ProjectName 4 | APP_ID_ANDROID=com.projectname.dev 5 | APP_ID_IOS=com.projectname.dev 6 | APP_BUILD_CODE=202106251 7 | APP_VERSION=0.1.0 8 | 9 | #SERVER CONFIG 10 | API_SERVER_URL= 11 | 12 | #APP CENTER CONFIG 13 | APP_CENTER_TOKEN= 14 | OWNER_NAME= 15 | APP_NAME_ANDROID= 16 | APP_NAME_IOS= 17 | DISTRIBUTION_GROUPS= 18 | 19 | #ANDROID KEYSTORE CONFIG 20 | MYAPP_RELEASE_STORE_FILE= 21 | MYAPP_KEYSTORE_PASSWORD= 22 | MYAPP_RELEASE_KEY_ALIAS= -------------------------------------------------------------------------------- /template/configs/production/.env.example: -------------------------------------------------------------------------------- 1 | #APP CONFIG 2 | NODE_ENV=Production 3 | APP_NAME=ProjectName 4 | APP_ID_ANDROID= 5 | APP_ID_IOS= 6 | APP_BUILD_CODE= 7 | APP_VERSION= 8 | 9 | #SERVER CONFIG 10 | API_SERVER_URL= 11 | 12 | #APP CENTER CONFIG 13 | APP_CENTER_TOKEN= 14 | OWNER_NAME= 15 | APP_NAME_ANDROID= 16 | APP_NAME_IOS= 17 | DISTRIBUTION_GROUPS= 18 | 19 | #ANDROID KEYSTORE CONFIG 20 | MYAPP_RELEASE_STORE_FILE= 21 | MYAPP_KEYSTORE_PASSWORD= 22 | MYAPP_RELEASE_KEY_ALIAS= -------------------------------------------------------------------------------- /template/configs/staging/.env.example: -------------------------------------------------------------------------------- 1 | #APP CONFIG 2 | NODE_ENV=Staging 3 | APP_NAME=ProjectName 4 | APP_ID_ANDROID= 5 | APP_ID_IOS= 6 | APP_BUILD_CODE= 7 | APP_VERSION= 8 | 9 | #SERVER CONFIG 10 | API_SERVER_URL= 11 | 12 | #APP CENTER CONFIG 13 | APP_CENTER_TOKEN= 14 | OWNER_NAME= 15 | APP_NAME_ANDROID= 16 | APP_NAME_IOS= 17 | DISTRIBUTION_GROUPS= 18 | 19 | #ANDROID KEYSTORE CONFIG 20 | MYAPP_RELEASE_STORE_FILE= 21 | MYAPP_KEYSTORE_PASSWORD= 22 | MYAPP_RELEASE_KEY_ALIAS= -------------------------------------------------------------------------------- /template/fastlane/Fastfile: -------------------------------------------------------------------------------- 1 | fastlane_require 'dotenv' 2 | import './ios/Fastfile' 3 | import './android/Fastfile' 4 | 5 | desc 'Choose environments' 6 | private_lane :choose_environments do |options| 7 | platform = "ANDROID" 8 | if options[:'platform'] == "ios" then platform = "IOS" end 9 | environment_selected = UI.select("Select enviroment to build: ", ["Development", "Staging", "Production"]) 10 | default_env = "../configs/development/.env".gsub! 'development', environment_selected.downcase 11 | if File.exist?(default_env) 12 | #Load & update env file 13 | env_path = File.expand_path(default_env) 14 | Dotenv.overload env_path 15 | if UI.confirm("Do you want to update app build code?") then update_build_code(app_name: ENV["APP_NAME_#{platform.upcase}"], env_path: env_path) end 16 | Dotenv.overload env_path 17 | else 18 | UI.user_error!(".env file doesn't exist.") 19 | end 20 | end 21 | 22 | 23 | desc 'Fetch & update app build code from app center' 24 | private_lane :update_build_code do |options| 25 | current_date = Time.now.strftime("%Y%m%d") 26 | app_build_code = "#{current_date}1" 27 | version = appcenter_fetch_version_number( 28 | api_token: ENV['APP_CENTER_TOKEN'], 29 | owner_name: ENV['OWNER_NAME'], 30 | app_name: options[:'app_name'], 31 | # version: "" # optional, don't set this value to get the last upload of all versions 32 | ) 33 | build_number = version['build_number'] 34 | build_date = build_number.slice(0..build_number.length-2) 35 | num_of_build = build_number[-1,1] 36 | if build_date == current_date then 37 | app_build_code = "#{current_date}#{num_of_build.to_i + 1}" 38 | end 39 | cur_env_content = File.read(options[:'env_path']) 40 | new_env_content = cur_env_content.gsub!(/APP_BUILD_CODE\=[^\n]*/, "APP_BUILD_CODE=#{app_build_code}") 41 | File.open(options[:'env_path'], "w") {|file| file.puts new_env_content } 42 | end -------------------------------------------------------------------------------- /template/fastlane/Pluginfile: -------------------------------------------------------------------------------- 1 | # Autogenerated by fastlane 2 | # 3 | # Ensure this file is checked in to source control! 4 | 5 | gem 'fastlane-plugin-appicon' 6 | gem 'fastlane-plugin-appcenter' 7 | -------------------------------------------------------------------------------- /template/fastlane/android/Fastfile: -------------------------------------------------------------------------------- 1 | platform :android do 2 | desc 'Deploy Android App' 3 | lane :deploy do 4 | # Choose environment & update app build code 5 | choose_environments(platform: "android") 6 | # Update app icon 7 | if UI.confirm("Do you want to update app icon?") then update_icon end 8 | is_upload_appcenter = UI.confirm("Do you want to upload file to appcenter?") 9 | #Clean & export apk 10 | build_task = "assemble" 11 | if ENV['BUILD_TYPE_RELEASE'] == "Production" then build_task = "bundle" end 12 | gradle(task: 'clean', project_dir: 'android/') 13 | gradle(task: build_task, build_type: "#{ENV['BUILD_TYPE_RELEASE']}Release", project_dir: 'android/') 14 | #Upload file to appcenter 15 | if is_upload_appcenter then upload_appcenter end 16 | end 17 | 18 | desc 'Update App Icon' 19 | private_lane :update_icon do 20 | icon_path = "./fastlane/icons/#{ENV["NODE_ENV"].downcase}.png" 21 | android_appicon( 22 | appicon_image_file: icon_path, 23 | appicon_icon_types: [:launcher], 24 | appicon_path: 'android/app/src/main/res/mipmap', 25 | generate_rounded: true, 26 | ) 27 | end 28 | 29 | desc 'Upload Appcenter' 30 | private_lane :upload_appcenter do 31 | build_type_lowercase = ENV['BUILD_TYPE_RELEASE'].downcase 32 | appcenter_upload( 33 | api_token: ENV['APP_CENTER_TOKEN'], 34 | owner_name: ENV['OWNER_NAME'], 35 | app_name: ENV['APP_NAME_ANDROID'], 36 | apk: "./android/app/build/outputs/apk/#{build_type_lowercase}Release/#{ENV['APP_NAME']}-#{ENV['NODE_ENV']}.apk", 37 | destinations: ENV['DISTRIBUTION_GROUPS'], 38 | destination_type: 'group' 39 | ) 40 | end 41 | end -------------------------------------------------------------------------------- /template/fastlane/icons/appIcon.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/fastlane/icons/appIcon.psd -------------------------------------------------------------------------------- /template/fastlane/icons/development.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/fastlane/icons/development.png -------------------------------------------------------------------------------- /template/fastlane/icons/production.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/fastlane/icons/production.png -------------------------------------------------------------------------------- /template/fastlane/icons/staging.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/fastlane/icons/staging.png -------------------------------------------------------------------------------- /template/index.js: -------------------------------------------------------------------------------- 1 | import 'moment/locale/en-gb'; 2 | import 'moment/locale/vi'; 3 | import {AppRegistry} from 'react-native'; 4 | import App from './src/App'; 5 | import {name as appName} from './app.json'; 6 | 7 | AppRegistry.registerComponent(appName, () => App); 8 | -------------------------------------------------------------------------------- /template/ios/Config.xcconfig: -------------------------------------------------------------------------------- 1 | #include? "tmp.xcconfig" 2 | -------------------------------------------------------------------------------- /template/ios/File.swift: -------------------------------------------------------------------------------- 1 | // 2 | // File.swift 3 | // ProjectName 4 | // 5 | // Created by Le Hau on 18/05/2021. 6 | // 7 | 8 | import Foundation 9 | -------------------------------------------------------------------------------- /template/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, '11.0' 5 | 6 | target 'ProjectName' do 7 | config = use_native_modules! 8 | 9 | use_react_native!( 10 | :path => config[:reactNativePath], 11 | # to enable hermes on iOS, change `false` to `true` and then install pods 12 | :hermes_enabled => false 13 | ) 14 | 15 | target 'ProjectNameTests' do 16 | inherit! :complete 17 | # Pods for testing 18 | end 19 | 20 | pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text', :modular_headers => true 21 | 22 | # Enables Flipper. 23 | # 24 | # Note that if you have use_frameworks! enabled, Flipper will not work and 25 | # you should disable the next line. 26 | use_flipper! 27 | 28 | post_install do |installer| 29 | react_native_post_install(installer) 30 | installer.pods_project.build_configurations.each do |build_configuration| 31 | build_configuration.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'arm64' 32 | end 33 | end 34 | end -------------------------------------------------------------------------------- /template/ios/ProjectName-Bridging-Header.h: -------------------------------------------------------------------------------- 1 | // 2 | // Use this file to import your target's public headers that you would like to expose to Swift. 3 | // 4 | 5 | -------------------------------------------------------------------------------- /template/ios/ProjectName.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /template/ios/ProjectName.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /template/ios/ProjectName/AppDelegate.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | @interface AppDelegate : UIResponder 5 | 6 | @property (nonatomic, strong) UIWindow *window; 7 | 8 | @end 9 | -------------------------------------------------------------------------------- /template/ios/ProjectName/AppDelegate.m: -------------------------------------------------------------------------------- 1 | #import "AppDelegate.h" 2 | 3 | #import 4 | #import 5 | #import 6 | #import 7 | #import "Orientation.h" 8 | 9 | #ifdef FB_SONARKIT_ENABLED 10 | #import 11 | #import 12 | #import 13 | #import 14 | #import 15 | #import 16 | 17 | static void InitializeFlipper(UIApplication *application) { 18 | FlipperClient *client = [FlipperClient sharedClient]; 19 | SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults]; 20 | [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:application withDescriptorMapper:layoutDescriptorMapper]]; 21 | [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]]; 22 | [client addPlugin:[FlipperKitReactPlugin new]]; 23 | [client addPlugin:[[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]]; 24 | [client start]; 25 | } 26 | #endif 27 | 28 | #if RCT_DEV 29 | #import 30 | #endif 31 | 32 | @implementation AppDelegate 33 | 34 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 35 | { 36 | #ifdef FB_SONARKIT_ENABLED 37 | InitializeFlipper(application); 38 | #endif 39 | 40 | RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions]; 41 | 42 | #if RCT_DEV 43 | [bridge moduleForClass:[RCTDevLoadingView class]]; 44 | #endif 45 | 46 | RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge 47 | moduleName:@"ProjectName" 48 | initialProperties:nil]; 49 | 50 | if (@available(iOS 13.0, *)) { 51 | rootView.backgroundColor = [UIColor systemBackgroundColor]; 52 | } else { 53 | rootView.backgroundColor = [UIColor whiteColor]; 54 | } 55 | 56 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 57 | UIViewController *rootViewController = [UIViewController new]; 58 | rootViewController.view = rootView; 59 | self.window.rootViewController = rootViewController; 60 | [self.window makeKeyAndVisible]; 61 | [RNSplashScreen show]; 62 | return YES; 63 | } 64 | 65 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge 66 | { 67 | #if DEBUG 68 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; 69 | #else 70 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 71 | #endif 72 | } 73 | 74 | - (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window { 75 | return [Orientation getOrientation]; 76 | } 77 | 78 | @end 79 | -------------------------------------------------------------------------------- /template/ios/ProjectName/Images.xcassets/AppIcon.appiconset/1024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/ios/ProjectName/Images.xcassets/AppIcon.appiconset/1024.png -------------------------------------------------------------------------------- /template/ios/ProjectName/Images.xcassets/AppIcon.appiconset/120-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/ios/ProjectName/Images.xcassets/AppIcon.appiconset/120-1.png -------------------------------------------------------------------------------- /template/ios/ProjectName/Images.xcassets/AppIcon.appiconset/120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/ios/ProjectName/Images.xcassets/AppIcon.appiconset/120.png -------------------------------------------------------------------------------- /template/ios/ProjectName/Images.xcassets/AppIcon.appiconset/180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/ios/ProjectName/Images.xcassets/AppIcon.appiconset/180.png -------------------------------------------------------------------------------- /template/ios/ProjectName/Images.xcassets/AppIcon.appiconset/40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/ios/ProjectName/Images.xcassets/AppIcon.appiconset/40.png -------------------------------------------------------------------------------- /template/ios/ProjectName/Images.xcassets/AppIcon.appiconset/58.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/ios/ProjectName/Images.xcassets/AppIcon.appiconset/58.png -------------------------------------------------------------------------------- /template/ios/ProjectName/Images.xcassets/AppIcon.appiconset/60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/ios/ProjectName/Images.xcassets/AppIcon.appiconset/60.png -------------------------------------------------------------------------------- /template/ios/ProjectName/Images.xcassets/AppIcon.appiconset/80.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/ios/ProjectName/Images.xcassets/AppIcon.appiconset/80.png -------------------------------------------------------------------------------- /template/ios/ProjectName/Images.xcassets/AppIcon.appiconset/87.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/ios/ProjectName/Images.xcassets/AppIcon.appiconset/87.png -------------------------------------------------------------------------------- /template/ios/ProjectName/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "filename" : "40.png", 5 | "idiom" : "iphone", 6 | "scale" : "2x", 7 | "size" : "20x20" 8 | }, 9 | { 10 | "filename" : "60.png", 11 | "idiom" : "iphone", 12 | "scale" : "3x", 13 | "size" : "20x20" 14 | }, 15 | { 16 | "filename" : "58.png", 17 | "idiom" : "iphone", 18 | "scale" : "2x", 19 | "size" : "29x29" 20 | }, 21 | { 22 | "filename" : "87.png", 23 | "idiom" : "iphone", 24 | "scale" : "3x", 25 | "size" : "29x29" 26 | }, 27 | { 28 | "filename" : "80.png", 29 | "idiom" : "iphone", 30 | "scale" : "2x", 31 | "size" : "40x40" 32 | }, 33 | { 34 | "filename" : "120.png", 35 | "idiom" : "iphone", 36 | "scale" : "3x", 37 | "size" : "40x40" 38 | }, 39 | { 40 | "filename" : "120-1.png", 41 | "idiom" : "iphone", 42 | "scale" : "2x", 43 | "size" : "60x60" 44 | }, 45 | { 46 | "filename" : "180.png", 47 | "idiom" : "iphone", 48 | "scale" : "3x", 49 | "size" : "60x60" 50 | }, 51 | { 52 | "filename" : "1024.png", 53 | "idiom" : "ios-marketing", 54 | "scale" : "1x", 55 | "size" : "1024x1024" 56 | } 57 | ], 58 | "info" : { 59 | "author" : "xcode", 60 | "version" : 1 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /template/ios/ProjectName/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "author" : "xcode", 4 | "version" : 1 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /template/ios/ProjectName/Images.xcassets/SplashImage.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "filename" : "splash_icon.png", 5 | "idiom" : "universal", 6 | "scale" : "1x" 7 | }, 8 | { 9 | "filename" : "splash_icon-1.png", 10 | "idiom" : "universal", 11 | "scale" : "2x" 12 | }, 13 | { 14 | "filename" : "splash_icon-2.png", 15 | "idiom" : "universal", 16 | "scale" : "3x" 17 | } 18 | ], 19 | "info" : { 20 | "author" : "xcode", 21 | "version" : 1 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /template/ios/ProjectName/Images.xcassets/SplashImage.imageset/splash_icon-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/ios/ProjectName/Images.xcassets/SplashImage.imageset/splash_icon-1.png -------------------------------------------------------------------------------- /template/ios/ProjectName/Images.xcassets/SplashImage.imageset/splash_icon-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/ios/ProjectName/Images.xcassets/SplashImage.imageset/splash_icon-2.png -------------------------------------------------------------------------------- /template/ios/ProjectName/Images.xcassets/SplashImage.imageset/splash_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/ios/ProjectName/Images.xcassets/SplashImage.imageset/splash_icon.png -------------------------------------------------------------------------------- /template/ios/ProjectName/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | ja_JP 7 | CFBundleDisplayName 8 | $(APP_NAME) 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 | $(APP_VERSION) 21 | CFBundleSignature 22 | ???? 23 | CFBundleVersion 24 | $(APP_BUILD_CODE) 25 | ITSAppUsesNonExemptEncryption 26 | 27 | LSRequiresIPhoneOS 28 | 29 | NSAppTransportSecurity 30 | 31 | NSExceptionDomains 32 | 33 | localhost 34 | 35 | NSExceptionAllowsInsecureHTTPLoads 36 | 37 | 38 | 39 | 40 | NSCameraUsageDescription 41 | プロフィール写真の撮影やQRコードの読取りに利用します。 42 | NSLocationWhenInUseUsageDescription 43 | 44 | NSPhotoLibraryAddUsageDescription 45 | プロフィール写真の選択に利用します。 46 | NSPhotoLibraryUsageDescription 47 | プロフィール写真の選択に利用します。 48 | UIAppFonts 49 | 50 | AntDesign.ttf 51 | Entypo.ttf 52 | EvilIcons.ttf 53 | Feather.ttf 54 | FontAwesome.ttf 55 | FontAwesome5_Brands.ttf 56 | FontAwesome5_Regular.ttf 57 | FontAwesome5_Solid.ttf 58 | Fontisto.ttf 59 | Foundation.ttf 60 | Ionicons.ttf 61 | MaterialCommunityIcons.ttf 62 | MaterialIcons.ttf 63 | Octicons.ttf 64 | SimpleLineIcons.ttf 65 | Zocial.ttf 66 | projectname.ttf 67 | icomoon.ttf 68 | Bozon_Bold.otf 69 | Bozon_Demi_Bold.otf 70 | Bozon_Regular.otf 71 | BR_Firma_Bold.otf 72 | BR_Firma_Medium.otf 73 | BR_Firma_Regular.otf 74 | 75 | UILaunchStoryboardName 76 | LaunchScreen 77 | UIRequiredDeviceCapabilities 78 | 79 | armv7 80 | 81 | UISupportedInterfaceOrientations 82 | 83 | UIInterfaceOrientationPortrait 84 | UIInterfaceOrientationLandscapeLeft 85 | UIInterfaceOrientationLandscapeRight 86 | 87 | UIUserInterfaceStyle 88 | Light 89 | UIViewControllerBasedStatusBarAppearance 90 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /template/ios/ProjectName/LaunchScreen.storyboard: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /template/ios/ProjectName/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 | -------------------------------------------------------------------------------- /template/ios/ProjectNameTests/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 | -------------------------------------------------------------------------------- /template/ios/ProjectNameTests/ProjectNameTests.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 ProjectNameTests : XCTestCase 11 | 12 | @end 13 | 14 | @implementation ProjectNameTests 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 | -------------------------------------------------------------------------------- /template/metro.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Metro configuration for React Native 3 | * https://github.com/facebook/react-native 4 | * 5 | * @format 6 | */ 7 | 8 | module.exports = { 9 | transformer: { 10 | getTransformOptions: async () => ({ 11 | transform: { 12 | experimentalImportSupport: false, 13 | inlineRequires: true, 14 | }, 15 | }), 16 | }, 17 | }; 18 | -------------------------------------------------------------------------------- /template/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ProjectName", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "android": "npx react-native run-android", 7 | "ios": "npx react-native run-ios", 8 | "start": "react-native start", 9 | "test": "jest", 10 | "lint": "eslint . --ext .js,.jsx,.ts,.tsx", 11 | "deployAndroid": "bundle exec fastlane android deploy", 12 | "deployIos": "bundle exec fastlane ios deploy" 13 | }, 14 | "dependencies": { 15 | "@gorhom/bottom-sheet": "^4.0.3", 16 | "@gorhom/portal": "^1.0.8", 17 | "@hookform/resolvers": "^2.8.0", 18 | "@react-native-async-storage/async-storage": "^1.15.7", 19 | "@react-native-community/datetimepicker": "^3.5.2", 20 | "@react-navigation/bottom-tabs": "^6.0.5", 21 | "@react-navigation/elements": "^1.1.0", 22 | "@react-navigation/native": "^6.0.2", 23 | "@react-navigation/stack": "^6.0.7", 24 | "axios": "^0.21.4", 25 | "i18next": "^20.6.1", 26 | "immer": "^9.0.6", 27 | "lodash": "^4.17.21", 28 | "moment": "^2.29.1", 29 | "normalizr": "^3.6.1", 30 | "react": "17.0.2", 31 | "react-hook-form": "^7.11.1", 32 | "react-i18next": "^11.8.15", 33 | "react-native": "0.65.1", 34 | "react-native-config": "^1.4.2", 35 | "react-native-fast-image": "^8.3.6", 36 | "react-native-flipper": "^0.98.0", 37 | "react-native-gesture-handler": "^1.10.3", 38 | "react-native-image-crop-picker": "^0.36.2", 39 | "react-native-inappbrowser-reborn": "^3.6.3", 40 | "react-native-linear-gradient": "^2.5.6", 41 | "react-native-orientation": "^3.1.3", 42 | "react-native-reanimated": "^2.2.1", 43 | "react-native-redash": "^16.1.1", 44 | "react-native-safe-area-context": "^3.3.2", 45 | "react-native-screens": "^3.6.0", 46 | "react-native-splash-screen": "^3.2.0", 47 | "react-native-svg": "^12.1.1", 48 | "react-native-text-input-mask": "^3.1.4", 49 | "react-native-vector-icons": "^8.1.0", 50 | "react-redux": "^7.2.4", 51 | "redux": "^4.1.0", 52 | "redux-flipper": "^1.4.2", 53 | "redux-persist": "^6.0.0", 54 | "redux-persist-transform-filter": "^0.0.20", 55 | "redux-saga": "^1.1.3", 56 | "yup": "^0.32.9" 57 | }, 58 | "devDependencies": { 59 | "@babel/core": "^7.12.9", 60 | "@babel/runtime": "^7.12.5", 61 | "@react-native-community/eslint-config": "^2.0.0", 62 | "@types/jest": "^26.0.23", 63 | "@types/react": "^17.0.5", 64 | "@types/react-native": "^0.64.5", 65 | "@types/react-native-orientation": "^5.0.1", 66 | "@types/react-native-vector-icons": "^6.4.6", 67 | "@types/react-test-renderer": "^16.9.2", 68 | "babel-jest": "^26.6.3", 69 | "babel-plugin-module-resolver": "^4.1.0", 70 | "babel-plugin-transform-remove-console": "^6.9.4", 71 | "eslint": "^7.14.0", 72 | "jest": "^26.6.3", 73 | "metro-react-native-babel-preset": "^0.66.0", 74 | "react-native-codegen": "^0.0.7", 75 | "react-test-renderer": "17.0.2", 76 | "typescript": "^3.8.3" 77 | }, 78 | "resolutions": { 79 | "@types/react": "^17" 80 | }, 81 | "jest": { 82 | "preset": "react-native", 83 | "moduleFileExtensions": [ 84 | "ts", 85 | "tsx", 86 | "js", 87 | "jsx", 88 | "json", 89 | "node" 90 | ] 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /template/react-native.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | assets: ['./src/assets/fonts'], 3 | }; 4 | -------------------------------------------------------------------------------- /template/src/App.tsx: -------------------------------------------------------------------------------- 1 | import '@i18n'; 2 | import MainNavigation from '@navigation'; 3 | import {persistor, store} from '@store'; 4 | import React from 'react'; 5 | import 'react-native-gesture-handler'; 6 | import {SafeAreaProvider} from 'react-native-safe-area-context'; 7 | import {Provider} from 'react-redux'; 8 | import {PersistGate} from 'redux-persist/lib/integration/react'; 9 | 10 | const App = () => ( 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | ); 19 | 20 | export default App; 21 | -------------------------------------------------------------------------------- /template/src/assets/fonts/BR_Firma_Bold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/src/assets/fonts/BR_Firma_Bold.otf -------------------------------------------------------------------------------- /template/src/assets/fonts/BR_Firma_Medium.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/src/assets/fonts/BR_Firma_Medium.otf -------------------------------------------------------------------------------- /template/src/assets/fonts/BR_Firma_Regular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/src/assets/fonts/BR_Firma_Regular.otf -------------------------------------------------------------------------------- /template/src/assets/fonts/Bozon_Bold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/src/assets/fonts/Bozon_Bold.otf -------------------------------------------------------------------------------- /template/src/assets/fonts/Bozon_Demi_Bold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/src/assets/fonts/Bozon_Demi_Bold.otf -------------------------------------------------------------------------------- /template/src/assets/fonts/Bozon_Regular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/src/assets/fonts/Bozon_Regular.otf -------------------------------------------------------------------------------- /template/src/assets/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/src/assets/fonts/icomoon.ttf -------------------------------------------------------------------------------- /template/src/assets/icons/index.ts: -------------------------------------------------------------------------------- 1 | import AntDesign from 'react-native-vector-icons/AntDesign'; 2 | import EvilIcons from 'react-native-vector-icons/EvilIcons'; 3 | import Feather from 'react-native-vector-icons/Feather'; 4 | import FontAwesome from 'react-native-vector-icons/FontAwesome'; 5 | import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'; 6 | import Fontisto from 'react-native-vector-icons/Fontisto'; 7 | import Ionicons from 'react-native-vector-icons/Ionicons'; 8 | import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; 9 | import MaterialIcons from 'react-native-vector-icons/MaterialIcons'; 10 | import Octicons from 'react-native-vector-icons/Octicons'; 11 | import {createIconSetFromIcoMoon} from 'react-native-vector-icons'; 12 | 13 | export const CustomIcon = createIconSetFromIcoMoon( 14 | require('./selection.json'), 15 | 'icomoon', 16 | ); 17 | 18 | const Icons = { 19 | fontAwesome5: FontAwesome5, 20 | antDesign: AntDesign, 21 | feather: Feather, 22 | fontAwesome: FontAwesome, 23 | materialCommunityIcons: MaterialCommunityIcons, 24 | materialIcons: MaterialIcons, 25 | evilIcons: EvilIcons, 26 | fontisto: Fontisto, 27 | octicons: Octicons, 28 | ionicons: Ionicons, 29 | custom: CustomIcon, 30 | }; 31 | 32 | export type IconType = keyof typeof Icons; 33 | 34 | export const getIconComponent = (componentName: IconType) => 35 | Icons[componentName]; 36 | -------------------------------------------------------------------------------- /template/src/assets/images/apple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/src/assets/images/apple.png -------------------------------------------------------------------------------- /template/src/assets/images/cnn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/src/assets/images/cnn.png -------------------------------------------------------------------------------- /template/src/assets/images/fifa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/src/assets/images/fifa.png -------------------------------------------------------------------------------- /template/src/assets/images/index.ts: -------------------------------------------------------------------------------- 1 | const Images = () => { 2 | return { 3 | logo: require('./splash_icon.png'), 4 | placeholder: require('./splash_icon.png'), 5 | news1: require('./news_1.png'), 6 | news2: require('./news_2.png'), 7 | news3: require('./news_3.png'), 8 | apple: require('./apple.png'), 9 | fifa: require('./fifa.png'), 10 | cnn: require('./cnn.png'), 11 | }; 12 | }; 13 | export default Images; 14 | -------------------------------------------------------------------------------- /template/src/assets/images/news_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/src/assets/images/news_1.png -------------------------------------------------------------------------------- /template/src/assets/images/news_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/src/assets/images/news_2.png -------------------------------------------------------------------------------- /template/src/assets/images/news_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/src/assets/images/news_3.png -------------------------------------------------------------------------------- /template/src/assets/images/splash_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/howljs/react-native-skeleton-template/f6b9b7a7a2b87307cfce79bebfe2fcaa8c590625/template/src/assets/images/splash_icon.png -------------------------------------------------------------------------------- /template/src/components/Home/CovidNews.tsx: -------------------------------------------------------------------------------- 1 | import {CustomIcon} from '@assets/icons'; 2 | import {Block, Text} from '@components/base'; 3 | import {useTheme} from '@theme'; 4 | import React from 'react'; 5 | import {useTranslation} from 'react-i18next'; 6 | import {TouchableOpacity} from 'react-native'; 7 | 8 | interface CovidNewsProps { 9 | onPress?: () => void; 10 | } 11 | 12 | const CovidNews: React.FC = ({onPress}) => { 13 | const {Colors} = useTheme(); 14 | const {t} = useTranslation('Home'); 15 | 16 | return ( 17 | 18 | 24 | 31 | {t('covidNews')} 32 | 33 | {t('covidSubtitle')} 34 | 35 | 36 | 37 | 38 | 39 | ); 40 | }; 41 | 42 | export default CovidNews; 43 | -------------------------------------------------------------------------------- /template/src/components/Home/Header.tsx: -------------------------------------------------------------------------------- 1 | import {Block, Text, Image} from '@components/base'; 2 | import React from 'react'; 3 | import {CustomIcon} from '@assets/icons'; 4 | import {useTheme} from '@theme'; 5 | 6 | interface HeaderProps { 7 | avatarUrl?: string; 8 | } 9 | 10 | const Header: React.FC = ({avatarUrl}) => { 11 | const {Colors} = useTheme(); 12 | 13 | return ( 14 | 19 | 20 | 21 | 26 | Pixels 27 | 28 | 29 | News 30 | 31 | 32 | 38 | 39 | ); 40 | }; 41 | 42 | export default Header; 43 | -------------------------------------------------------------------------------- /template/src/components/Home/NewsItem.tsx: -------------------------------------------------------------------------------- 1 | import {Block, Image, Text} from '@components/base'; 2 | import Helper from '@utils/helpers'; 3 | import React from 'react'; 4 | import {useTranslation} from 'react-i18next'; 5 | import {TouchableOpacity, StyleSheet, StyleProp, ViewStyle} from 'react-native'; 6 | import {NewsItemType} from './types'; 7 | 8 | interface NewsItemProps { 9 | item: NewsItemType; 10 | isFirst?: boolean; 11 | onPress?: () => void; 12 | onPressCategory?: () => void; 13 | style?: StyleProp; 14 | } 15 | 16 | const NewsItem: React.FC = ({ 17 | item, 18 | isFirst, 19 | onPress, 20 | onPressCategory, 21 | style, 22 | }) => { 23 | const {t} = useTranslation('Home'); 24 | return ( 25 | 29 | 30 | 37 | 38 | 39 | {item.title} 40 | 41 | 42 | 43 | {t('duration', {hour: item.duration})} 44 | 45 | 50 | 53 | {item.category.title} 54 | 55 | 56 | 57 | 58 | 59 | ); 60 | }; 61 | 62 | export default NewsItem; 63 | -------------------------------------------------------------------------------- /template/src/components/Home/index.ts: -------------------------------------------------------------------------------- 1 | export {default as Header} from './Header'; 2 | export {default as CovidNews} from './CovidNews'; 3 | export {default as NewsItem} from './NewsItem'; 4 | -------------------------------------------------------------------------------- /template/src/components/Home/types.ts: -------------------------------------------------------------------------------- 1 | export interface NewsItemType { 2 | id: string; 3 | title: string; 4 | duration: number; 5 | category: { 6 | id: string; 7 | title: string; 8 | }; 9 | image: any; 10 | } 11 | -------------------------------------------------------------------------------- /template/src/components/base/AlertDialog/Alert.styles.ts: -------------------------------------------------------------------------------- 1 | import {StyleSheet} from 'react-native'; 2 | 3 | export default StyleSheet.create({ 4 | backdrop: { 5 | ...StyleSheet.absoluteFillObject, 6 | backgroundColor: '#000000', 7 | }, 8 | modalContainer: { 9 | width: '72%', 10 | borderRadius: 10, 11 | backgroundColor: '#ffffff', 12 | }, 13 | }); 14 | -------------------------------------------------------------------------------- /template/src/components/base/AlertDialog/index.tsx: -------------------------------------------------------------------------------- 1 | import {getAlertState} from '@store/selectors'; 2 | import React from 'react'; 3 | import {StyleSheet} from 'react-native'; 4 | import {useSelector} from 'react-redux'; 5 | import Block from '../Block'; 6 | import Alert from './Alert'; 7 | 8 | const AlertDialog = () => { 9 | const alerts = useSelector(getAlertState); 10 | 11 | if (alerts.length === 0) { 12 | return ; 13 | } 14 | 15 | return ( 16 | 21 | {alerts.map(item => ( 22 | 23 | ))} 24 | 25 | ); 26 | }; 27 | 28 | export default AlertDialog; 29 | -------------------------------------------------------------------------------- /template/src/components/base/Block/index.tsx: -------------------------------------------------------------------------------- 1 | import {useTheme} from '@theme'; 2 | import React from 'react'; 3 | import {StyleSheet, View} from 'react-native'; 4 | import {useSafeAreaInsets} from 'react-native-safe-area-context'; 5 | import { 6 | createDefaultStyle, 7 | handleGutter, 8 | handleInset, 9 | isNumber, 10 | isUndefined, 11 | } from '../utils'; 12 | import {BlockProps} from './types'; 13 | 14 | const Block = React.forwardRef((props, ref) => { 15 | const {Colors} = useTheme(); 16 | const safeArea = useSafeAreaInsets(); 17 | 18 | const { 19 | children, 20 | style, 21 | width, 22 | height, 23 | backgroundColor, 24 | align, 25 | justify, 26 | row, 27 | position, 28 | top, 29 | bottom, 30 | left, 31 | right, 32 | padding, 33 | margin, 34 | shadow, 35 | overflow, 36 | ...rest 37 | } = props; 38 | 39 | const blockStyles = StyleSheet.flatten([ 40 | createDefaultStyle(props), 41 | width && {width: isNumber(width) ? width : width}, 42 | height && {height: isNumber(height) ? height : height}, 43 | align && {alignItems: align}, 44 | justify && {justifyContent: justify}, 45 | row && {flexDirection: 'row'}, 46 | position && {position}, 47 | !isUndefined(top) && {top}, 48 | !isUndefined(bottom) && {bottom}, 49 | !isUndefined(left) && {left}, 50 | !isUndefined(right) && {right}, 51 | overflow && {overflow}, 52 | padding && handleGutter('padding', padding), 53 | margin && handleGutter('margin', margin), 54 | shadow && { 55 | shadowColor: '#000', 56 | shadowOffset: { 57 | width: 0, 58 | height: 2, 59 | }, 60 | shadowOpacity: 0.15, 61 | shadowRadius: 4, 62 | elevation: 3, 63 | }, 64 | handleInset(props, safeArea, padding), 65 | backgroundColor && { 66 | backgroundColor: Colors[backgroundColor] || backgroundColor, 67 | }, 68 | style, 69 | ]); 70 | 71 | return ( 72 | 73 | {children} 74 | 75 | ); 76 | }); 77 | 78 | export default Block; 79 | -------------------------------------------------------------------------------- /template/src/components/base/Block/types.ts: -------------------------------------------------------------------------------- 1 | import {FlexStyle, ViewProps, ViewStyle} from 'react-native'; 2 | import {DefaultStyleProps, SafeAreaInsetType} from '../utils'; 3 | 4 | export interface BlockProps extends DefaultStyleProps, ViewProps { 5 | /** 6 | * Width of the component 7 | */ 8 | width?: number | string; 9 | 10 | /** 11 | * Height of the component 12 | */ 13 | height?: number | string; 14 | 15 | /** 16 | * The flexible items are displayed horizontally, as a row 17 | */ 18 | row?: boolean; 19 | 20 | /** 21 | * Background color of the component - (key of Colors (theme/colors.ts) or Color keywords) 22 | */ 23 | backgroundColor?: string; 24 | 25 | /** 26 | * Describes how to align children along the cross axis of their container 27 | */ 28 | align?: FlexStyle['alignItems']; 29 | 30 | /** 31 | * Describes how to align children within the main axis of their container 32 | */ 33 | justify?: FlexStyle['justifyContent']; 34 | 35 | /** 36 | * Position in React Native is similar to regular CSS 37 | */ 38 | position?: FlexStyle['position']; 39 | 40 | /** 41 | * **top** is the number of logical pixels to offset the top edge of this component. 42 | */ 43 | top?: number | string; 44 | 45 | /** 46 | * **bottom** is the number of logical pixels to offset the top edge of this component. 47 | */ 48 | bottom?: number | string; 49 | 50 | /** 51 | * **left** is the number of logical pixels to offset the top edge of this component. 52 | */ 53 | left?: number | string; 54 | 55 | /** 56 | * **right** is the number of logical pixels to offset the top edge of this component. 57 | */ 58 | right?: number | string; 59 | 60 | /** 61 | * Render content within the safe area boundaries of a device 62 | * Example: 63 | * ``` 64 | * 67 | * ``` 68 | * or 69 | * ``` 70 | * 73 | * ``` 74 | */ 75 | inset?: SafeAreaInsetType | SafeAreaInsetType[]; 76 | 77 | /** 78 | * Enable default shadow style of component 79 | * ``` 80 | * { 81 | shadowColor: '#000', 82 | shadowOffset: { 83 | width: 0, 84 | height: 2, 85 | }, 86 | shadowOpacity: 0.15, 87 | shadowRadius: 4, 88 | elevation: 3, 89 | } 90 | * ``` 91 | */ 92 | shadow?: boolean; 93 | 94 | overflow?: ViewStyle['overflow']; 95 | 96 | ref?: any; 97 | children?: any; 98 | } 99 | -------------------------------------------------------------------------------- /template/src/components/base/BottomMenu/MenuItem.tsx: -------------------------------------------------------------------------------- 1 | import {useTheme} from '@theme'; 2 | import React from 'react'; 3 | import { 4 | Platform, 5 | StyleSheet, 6 | TouchableNativeFeedback, 7 | TouchableOpacity, 8 | } from 'react-native'; 9 | import Block from '../Block'; 10 | import IconComponent from '../Icon'; 11 | import Text from '../Text'; 12 | import {isIcon} from '../utils'; 13 | import {ITEM_HEIGHT_DEFAULT} from './constants'; 14 | import styles from './styles'; 15 | import {MenuItemProps, MenuItemType} from './types'; 16 | 17 | const MenuItem: React.FC = ({data, onPress}) => { 18 | const {Colors} = useTheme(); 19 | 20 | const _renderIcon = (icon: MenuItemType['icon']) => { 21 | if (isIcon(icon)) { 22 | return ( 23 | 33 | ); 34 | } 35 | 36 | return icon; 37 | }; 38 | 39 | const ButtonComponent = Platform.select({ 40 | android: TouchableNativeFeedback, 41 | default: TouchableOpacity, 42 | }); 43 | 44 | return ( 45 | 46 | 52 | {data.icon && _renderIcon(data.icon)} 53 | {data.label} 54 | 55 | 56 | ); 57 | }; 58 | 59 | export default MenuItem; 60 | -------------------------------------------------------------------------------- /template/src/components/base/BottomMenu/constants.ts: -------------------------------------------------------------------------------- 1 | export const ITEM_HEIGHT_DEFAULT = 45; 2 | -------------------------------------------------------------------------------- /template/src/components/base/BottomMenu/index.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | BottomSheetBackdrop, 3 | BottomSheetFlatList, 4 | BottomSheetModal, 5 | } from '@gorhom/bottom-sheet'; 6 | import {BottomMenuType} from '@store/types/commonType'; 7 | import {useTheme} from '@theme'; 8 | import React, {useCallback, useEffect, useMemo, useRef} from 'react'; 9 | import {ActivityIndicator, Keyboard} from 'react-native'; 10 | import {Easing} from 'react-native-reanimated'; 11 | import {useSafeAreaInsets} from 'react-native-safe-area-context'; 12 | import Block from '../Block'; 13 | import {ITEM_HEIGHT_DEFAULT} from './constants'; 14 | import MenuItem from './MenuItem'; 15 | import styles from './styles'; 16 | import {MenuItemType} from './types'; 17 | 18 | const BottomMenu: React.FC = props => { 19 | const bottomSheetRef = useRef(null); 20 | const {data = [], bottomSheetModalProps, isVisible = false} = props; 21 | 22 | const {Colors} = useTheme(); 23 | const {bottom: safeBottomArea, top: safeTopArea} = useSafeAreaInsets(); 24 | 25 | useEffect(() => { 26 | if (isVisible) { 27 | Keyboard.dismiss(); 28 | bottomSheetRef.current?.present(); 29 | } else { 30 | bottomSheetRef.current?.close(); 31 | } 32 | }, [isVisible]); 33 | 34 | const snapPoints = useMemo( 35 | () => [ 36 | data.length === 0 37 | ? 90 38 | : data.length * ITEM_HEIGHT_DEFAULT + safeBottomArea, 39 | ], 40 | [data.length, safeBottomArea], 41 | ); 42 | 43 | const _renderBackdrop = useCallback( 44 | backdropProps => , 45 | [], 46 | ); 47 | 48 | const _renderSelectItem = useCallback(({item}: {item: MenuItemType}) => { 49 | return ; 50 | }, []); 51 | 52 | const _keyExtractor = useCallback( 53 | (item, index) => `${item.value}_${index}`, 54 | [], 55 | ); 56 | 57 | const _getItemLayout = useCallback( 58 | (_data, index) => ({ 59 | length: ITEM_HEIGHT_DEFAULT, 60 | offset: ITEM_HEIGHT_DEFAULT * index, 61 | index, 62 | }), 63 | [], 64 | ); 65 | 66 | const _renderEmptyList = useCallback(() => { 67 | return ( 68 | 69 | 70 | 71 | ); 72 | }, [Colors.primary]); 73 | 74 | return ( 75 | 84 | 96 | 97 | ); 98 | }; 99 | 100 | export default BottomMenu; 101 | -------------------------------------------------------------------------------- /template/src/components/base/BottomMenu/styles.ts: -------------------------------------------------------------------------------- 1 | import {StyleSheet} from 'react-native'; 2 | 3 | export default StyleSheet.create({ 4 | itemIconStyle: { 5 | paddingRight: 12, 6 | }, 7 | contentStyle: {flexGrow: 1}, 8 | }); 9 | -------------------------------------------------------------------------------- /template/src/components/base/BottomMenu/types.ts: -------------------------------------------------------------------------------- 1 | import {StyleProp, ViewStyle} from 'react-native'; 2 | import {IconComponentProps} from '../utils'; 3 | 4 | export interface MenuIconItem extends IconComponentProps { 5 | containerStyle?: StyleProp; 6 | } 7 | 8 | export interface MenuItemType { 9 | label: string | number; 10 | onPress: () => void; 11 | icon?: MenuIconItem | React.ReactNode; 12 | } 13 | 14 | export interface MenuItemProps { 15 | data: MenuItemType; 16 | onPress: () => void; 17 | } 18 | -------------------------------------------------------------------------------- /template/src/components/base/Button/types.ts: -------------------------------------------------------------------------------- 1 | import {PressableProps, StyleProp, ViewStyle} from 'react-native'; 2 | import {BlockProps} from '../Block/types'; 3 | import {CommonTextProps} from '../Text/types'; 4 | import {GutterProps, IconComponentProps} from '../utils'; 5 | 6 | export type CommonButtonProps = Omit< 7 | BlockProps, 8 | 'style' | 'hitSlop' | 'children' | 'inset' 9 | >; 10 | 11 | export interface ButtonProps extends PressableProps, CommonButtonProps { 12 | /** 13 | * Label of button 14 | */ 15 | title?: string; 16 | 17 | style?: StyleProp>; 18 | /** 19 | * Background color on pressed button - (key of Colors (theme/colors.ts) or Color keywords) 20 | */ 21 | pressedBackground?: string; 22 | 23 | /** 24 | * Background color when button disabled - (key of Colors (theme/colors.ts) or Color keywords) 25 | */ 26 | disabledBackground?: string; 27 | 28 | /** 29 | * **padding** creates extra space within an component 30 | * 31 | * Default is **16** 32 | * 33 | * Example: 34 | * 35 | * ``` 36 | padding={16} 37 | //or 38 | padding={{horizontal: 16, top: 12}} 39 | ``` 40 | */ 41 | padding?: number | GutterProps; 42 | 43 | /** 44 | * Left icon 45 | */ 46 | leftIcon?: IconComponentProps | React.ReactNode; 47 | 48 | /** 49 | * Styling for view containing the left icon 50 | */ 51 | leftIconContainerStyle?: StyleProp; 52 | 53 | /** 54 | * Right icon 55 | */ 56 | rightIcon?: IconComponentProps | React.ReactNode; 57 | 58 | /** 59 | * Styling for view containing the right icon 60 | */ 61 | rightIconContainerStyle?: StyleProp; 62 | /** 63 | * Show loading icon if loading is **true** 64 | */ 65 | loading?: boolean; 66 | 67 | /** 68 | * Type of button. Default is **primary** 69 | */ 70 | type?: 'primary' | 'outline' | 'text'; 71 | 72 | /** 73 | * props for label 74 | */ 75 | titleProps?: CommonTextProps; 76 | } 77 | -------------------------------------------------------------------------------- /template/src/components/base/DateTimePicker/Picker.android.tsx: -------------------------------------------------------------------------------- 1 | import DateTimePicker, { 2 | AndroidEvent, 3 | AndroidNativeProps, 4 | } from '@react-native-community/datetimepicker'; 5 | import React from 'react'; 6 | 7 | interface PickerAndroidProps extends AndroidNativeProps { 8 | isVisible: boolean; 9 | close: () => void; 10 | show: () => void; 11 | onPressDone?: (value: Date) => void; 12 | } 13 | 14 | const PickerIos: React.FC = props => { 15 | const {isVisible, close, value, onPressDone, ...rest} = props; 16 | 17 | if (!isVisible) { 18 | return null; 19 | } 20 | 21 | const _onChange = (_e: AndroidEvent, date?: Date) => { 22 | close(); 23 | if (date) { 24 | onPressDone && onPressDone(date); 25 | } 26 | }; 27 | 28 | return ( 29 | 36 | ); 37 | }; 38 | 39 | export default PickerIos; 40 | -------------------------------------------------------------------------------- /template/src/components/base/DateTimePicker/Picker.d.ts: -------------------------------------------------------------------------------- 1 | import DefaultIos from './Picker.ios'; 2 | import * as ios from './Picker.ios'; 3 | import DefaultAndroid from './Picker.android'; 4 | import * as android from './Picker.android'; 5 | 6 | declare var _test: typeof ios; 7 | declare var _test: typeof android; 8 | 9 | declare var _testDefault: typeof DefaultIos; 10 | declare var _testDefault: typeof DefaultAndroid; 11 | 12 | export * from './Picker.ios'; 13 | export default DefaultIos; 14 | -------------------------------------------------------------------------------- /template/src/components/base/DateTimePicker/Picker.ios.tsx: -------------------------------------------------------------------------------- 1 | import {ActionSheet, Block, Button} from '@components/base'; 2 | import DateTimePicker, { 3 | IOSNativeProps, 4 | } from '@react-native-community/datetimepicker'; 5 | import {useTheme} from '@theme'; 6 | import React, {useState} from 'react'; 7 | import {useTranslation} from 'react-i18next'; 8 | import {StyleSheet} from 'react-native'; 9 | 10 | interface PickerIosProps extends IOSNativeProps { 11 | isVisible: boolean; 12 | close: () => void; 13 | show: () => void; 14 | dismiss: () => void; 15 | onPressDone?: (value: Date) => void; 16 | } 17 | 18 | const PickerIos: React.FC = props => { 19 | const {t} = useTranslation('Common'); 20 | const {Colors} = useTheme(); 21 | const {isVisible, close, value, onPressDone, dismiss, ...rest} = props; 22 | const [pickerValue, setPickerValue] = useState(value); 23 | 24 | return ( 25 | 29 | 30 | 31 | date && setPickerValue(date)} 36 | /> 37 | 38 | {!!pickerValue && ( 39 | 43 |