@brightlayer-ui/react-native-template-blank-typescript 2.1.0-beta.0 → 3.0.0-alpha.0

package/README.md

@@ -2,14 +2,14 @@
 
 ![npm (scoped)](https://img.shields.io/npm/v/@brightlayer-ui/react-native-template-blank-typescript?color=%23007bc1&label=%40brightlayer-ui%2Freact-native-template-blank-typescript)
 
-This is an official Brightlayer UI template used internally by the [Brightlayer UI CLI](https://www.npmjs.com/package/@brightlayer-ui/cli).
+
 
 This template installs the basic Brightlayer UI libraries for themes and components and configures the application to use them. It includes a simple placeholder screen that you can replace with your own application content.
 
 ## Usage
-This template can be used with the Brightlayer UI CLI:
+To create a new project using the Blank Template simply run :
 ```sh
-npx -p @brightlayer-ui/cli blui new react-native --name=myapp --cli=rnc --language=ts --template=blank
+npx react-native init MyApp --template @brightlayer-ui/react-native-template-blank-typescript
 ```
 
 ## Project Structure

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@brightlayer-ui/react-native-template-blank-typescript",
-    "version": "2.1.0-beta.0",
+    "version": "3.0.0-alpha.0",
     "author": "brightlayer-ui <brightlayer-ui@eaton.com>",
     "keywords": [
         "react native",
@@ -12,7 +12,7 @@
     "description": "The base template for React Native projects created with the Brightlayer UI CLI.",
     "repository": {
         "type": "git",
-        "url": "https://github.com/brightlayer-ui/react-native-cli-templates.git"
+        "url": "https://github.com/etn-ccis/blui-react-native-cli-templates.git"
     },
     "scripts": {
         "publish:package": "set npm_config_yes=true && npx -p @brightlayer-ui/publish blui-publish",
@@ -23,6 +23,6 @@
         "node": ">=10"
     },
     "bugs": {
-        "url": "https://github.com/brightlayer-ui/react-native-cli-templates/issues"
+        "url": "https://github.com/etn-ccis/blui-react-native-cli-templates/issues"
     }
 }

package/template/.bundle/config

@@ -0,0 +1,2 @@
+BUNDLE_PATH: "vendor/bundle"
+BUNDLE_FORCE_RUBY_PLATFORM: 1

package/template/.eslintrc.js

@@ -0,0 +1,57 @@
+module.exports = {
+    root: true,
+    parser: '@typescript-eslint/parser',
+    extends: ['@brightlayer-ui/eslint-config/tsx'],
+    parserOptions: {
+        project: './tsconfig.json',
+    },
+    plugins: ['react-hooks'],
+    rules: {
+        'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
+        'react-hooks/exhaustive-deps': 'warn', // Checks effect dependencies
+        'react/display-name': 'off',
+        '@typescript-eslint/naming-convention': [
+            'error',
+            {
+                selector: 'default',
+                format: ['camelCase', 'PascalCase'],
+            },
+            {
+                selector: 'variable',
+                format: ['camelCase', 'UPPER_CASE', 'PascalCase'],
+            },
+            {
+                selector: 'property',
+                format: ['camelCase', 'UPPER_CASE', 'PascalCase'],
+            },
+            {
+                selector: 'property',
+                format: null,
+                modifiers: ['requiresQuotes'],
+            },
+            {
+                selector: 'enumMember',
+                format: ['UPPER_CASE'],
+            },
+            {
+                selector: 'parameter',
+                format: ['camelCase'],
+                leadingUnderscore: 'allow',
+            },
+            {
+                selector: 'memberLike',
+                modifiers: ['private'],
+                format: ['camelCase'],
+                leadingUnderscore: 'require',
+            },
+            {
+                selector: 'typeLike',
+                format: ['PascalCase'],
+            },
+            {
+                selector: 'import',
+                format: ['camelCase', 'PascalCase'],
+            },
+        ],
+    },
+};

package/template/.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+    arrowParens: 'avoid',
+    bracketSameLine: true,
+    bracketSpacing: false,
+    singleQuote: true,
+    trailingComma: 'all',
+};

package/template/.watchmanconfig

@@ -0,0 +1 @@
+{}

package/template/App.tsx

@@ -16,16 +16,15 @@ import {
     View,
     Animated,
     Easing,
+    Image,
 } from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
-import { Button, Divider, Provider as ThemeProvider, useTheme } from 'react-native-paper';
-import * as BLUIThemes from '@brightlayer-ui/react-native-themes';
-import { Body1, Header, H4 } from '@brightlayer-ui/react-native-components';
-import { Theme } from 'react-native-paper/lib/typescript/types';
-import Logo from './assets/images/Logo.svg';
+import { Button, Divider, Text, Provider as ThemeProvider } from 'react-native-paper';
+import { ExtendedTheme, useExtendedTheme, blue } from '@brightlayer-ui/react-native-themes';
+import { Header } from '@brightlayer-ui/react-native-components';
 
 const styles = (
-    theme: Theme
+    theme: ExtendedTheme
 ): StyleSheet.NamedStyles<{
     content: ViewStyle;
     pxbLogoWrapper: ViewStyle;
@@ -63,14 +62,14 @@ const styles = (
             marginVertical: 24,
         },
         openURLButtonText: {
-            color: theme.colors.text,
+            color: theme.colors.primary,
             padding: 8,
         },
     });
 
 const OpenURLButton = (props: any): JSX.Element => {
     const { url, title } = props;
-    const theme = useTheme();
+    const theme = useExtendedTheme();
     const defaultStyles = styles(theme);
 
     const handlePress = useCallback(async () => {
@@ -89,7 +88,7 @@ const OpenURLButton = (props: any): JSX.Element => {
 };
 
 const App = (): JSX.Element => {
-    const theme = useTheme();
+    const theme = useExtendedTheme();
     const defaultStyles = styles(theme);
     const spinValue = new Animated.Value(0);
 
@@ -108,22 +107,30 @@ const App = (): JSX.Element => {
     });
 
     return (
-        <ThemeProvider theme={BLUIThemes.blue}>
+        <ThemeProvider theme={blue}>
             <SafeAreaProvider>
                 <Header title={'Brightlayer UI React Native'} />
                 <SafeAreaView style={defaultStyles.content}>
                     <ScrollView>
                         <View style={defaultStyles.pxbLogoWrapper}>
                             <Animated.View style={[defaultStyles.pxbLogo, { transform: [{ rotate: spin }] }]}>
-                                <Logo height={100} width={100} fill={'#007bc1'} />
+                                <Image source={require('./assets/images/Logo.png')} />
                             </Animated.View>
                         </View>
-                        <H4 style={defaultStyles.title}>
-                            Welcome to Brightlayer <H4 color={'primary'}>UI</H4>.
-                        </H4>
-                        <Body1 style={defaultStyles.subtitle}>
-                            Edit <Body1 style={defaultStyles.bold}>App.tsx</Body1> and save to reload.
-                        </Body1>
+                        <Text variant={'headlineLarge'} style={defaultStyles.title}>
+                            Welcome to Brightlayer{' '}
+                            <Text variant={'headlineLarge'} style={{ fontSize: 34, color: theme.colors.primary }}>
+                                UI
+                            </Text>
+                            .
+                        </Text>
+                        <Text variant={'bodyLarge'} style={defaultStyles.subtitle}>
+                            Edit{' '}
+                            <Text variant={'bodyLarge'} style={defaultStyles.bold}>
+                                App.tsx
+                            </Text>{' '}
+                            and save to reload.
+                        </Text>
                         <Divider style={defaultStyles.divider} />
                         <OpenURLButton
                             title={'Brightlayer UI Documentation'}
@@ -141,10 +148,10 @@ const App = (): JSX.Element => {
                             title={'React Native Component Library'}
                             url={'https://brightlayer-ui-components.github.io/react-native/'}
                         />
-                        <OpenURLButton title={'Visit Us on GitHub'} url={'https://github.com/brightlayer-ui'} />
+                        <OpenURLButton title={'Visit Us on GitHub'} url={'https://github.com/etn-ccis?q=blui'} />
                         <OpenURLButton
                             title={'Design Pattern Source on GitHub'}
-                            url={'https://github.com/brightlayer-ui/react-native-design-patterns'}
+                            url={'https://github.com/etn-ccis/blui-react-native-design-patterns'}
                         />
                         <OpenURLButton title={'Release Roadmap'} url={'https://brightlayer-ui.github.io/roadmap'} />
                         <OpenURLButton

package/template/Gemfile

@@ -0,0 +1,9 @@
+source 'https://rubygems.org'
+
+# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
+ruby ">= 2.6.10"
+
+# Cocoapods 1.15 introduced a bug which break the build. We will remove the upper
+# bound in the template on Cocoapods with next React Native release.
+gem 'cocoapods', '>= 1.13', '< 1.15'
+gem 'activesupport', '>= 6.1.7.5', '< 7.1.0'

package/template/Gemfile.lock

@@ -0,0 +1,105 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    CFPropertyList (3.0.7)
+      base64
+      nkf
+      rexml
+    activesupport (6.1.7.7)
+      concurrent-ruby (~> 1.0, >= 1.0.2)
+      i18n (>= 1.6, < 2)
+      minitest (>= 5.1)
+      tzinfo (~> 2.0)
+      zeitwerk (~> 2.3)
+    addressable (2.8.6)
+      public_suffix (>= 2.0.2, < 6.0)
+    algoliasearch (1.27.5)
+      httpclient (~> 2.8, >= 2.8.3)
+      json (>= 1.5.1)
+    atomos (0.1.3)
+    base64 (0.2.0)
+    claide (1.1.0)
+    cocoapods (1.14.3)
+      addressable (~> 2.8)
+      claide (>= 1.0.2, < 2.0)
+      cocoapods-core (= 1.14.3)
+      cocoapods-deintegrate (>= 1.0.3, < 2.0)
+      cocoapods-downloader (>= 2.1, < 3.0)
+      cocoapods-plugins (>= 1.0.0, < 2.0)
+      cocoapods-search (>= 1.0.0, < 2.0)
+      cocoapods-trunk (>= 1.6.0, < 2.0)
+      cocoapods-try (>= 1.1.0, < 2.0)
+      colored2 (~> 3.1)
+      escape (~> 0.0.4)
+      fourflusher (>= 2.3.0, < 3.0)
+      gh_inspector (~> 1.0)
+      molinillo (~> 0.8.0)
+      nap (~> 1.0)
+      ruby-macho (>= 2.3.0, < 3.0)
+      xcodeproj (>= 1.23.0, < 2.0)
+    cocoapods-core (1.14.3)
+      activesupport (>= 5.0, < 8)
+      addressable (~> 2.8)
+      algoliasearch (~> 1.0)
+      concurrent-ruby (~> 1.1)
+      fuzzy_match (~> 2.0.4)
+      nap (~> 1.0)
+      netrc (~> 0.11)
+      public_suffix (~> 4.0)
+      typhoeus (~> 1.0)
+    cocoapods-deintegrate (1.0.5)
+    cocoapods-downloader (2.1)
+    cocoapods-plugins (1.0.0)
+      nap
+    cocoapods-search (1.0.1)
+    cocoapods-trunk (1.6.0)
+      nap (>= 0.8, < 2.0)
+      netrc (~> 0.11)
+    cocoapods-try (1.2.0)
+    colored2 (3.1.2)
+    concurrent-ruby (1.2.3)
+    escape (0.0.4)
+    ethon (0.16.0)
+      ffi (>= 1.15.0)
+    ffi (1.16.3)
+    fourflusher (2.3.1)
+    fuzzy_match (2.0.4)
+    gh_inspector (1.1.3)
+    httpclient (2.8.3)
+    i18n (1.14.5)
+      concurrent-ruby (~> 1.0)
+    json (2.7.2)
+    minitest (5.22.3)
+    molinillo (0.8.0)
+    nanaimo (0.3.0)
+    nap (1.1.0)
+    netrc (0.11.0)
+    nkf (0.2.0)
+    public_suffix (4.0.7)
+    rexml (3.2.6)
+    ruby-macho (2.5.1)
+    typhoeus (1.4.1)
+      ethon (>= 0.9.0)
+    tzinfo (2.0.6)
+      concurrent-ruby (~> 1.0)
+    xcodeproj (1.24.0)
+      CFPropertyList (>= 2.3.3, < 4.0)
+      atomos (~> 0.1.3)
+      claide (>= 1.0.2, < 2.0)
+      colored2 (~> 3.1)
+      nanaimo (~> 0.3.0)
+      rexml (~> 3.2.4)
+    zeitwerk (2.6.13)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  activesupport (>= 6.1.7.5, < 7.1.0)
+  cocoapods (>= 1.13, < 1.15)
+
+RUBY VERSION
+   ruby 2.6.10p210
+
+BUNDLED WITH
+   1.17.2

package/template/README.md

@@ -0,0 +1,79 @@
+This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).
+
+# Getting Started
+
+>**Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding.
+
+## Step 1: Start the Metro Server
+
+First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native.
+
+To start Metro, run the following command from the _root_ of your React Native project:
+
+```bash
+# using npm
+npm start
+
+# OR using Yarn
+yarn start
+```
+
+## Step 2: Start your Application
+
+Let Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app:
+
+### For Android
+
+```bash
+# using npm
+npm run android
+
+# OR using Yarn
+yarn android
+```
+
+### For iOS
+
+```bash
+# using npm
+npm run ios
+
+# OR using Yarn
+yarn ios
+```
+
+If everything is set up _correctly_, you should see your new app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator/simulator correctly.
+
+This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.
+
+## Step 3: Modifying your App
+
+Now that you have successfully run the app, let's modify it.
+
+1. Open `App.tsx` in your text editor of choice and edit some lines.
+2. For **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Developer Menu** (<kbd>Ctrl</kbd> + <kbd>M</kbd> (on Window and Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (on macOS)) to see your changes!
+
+   For **iOS**: Hit <kbd>Cmd ⌘</kbd> + <kbd>R</kbd> in your iOS Simulator to reload the app and see your changes!
+
+## Congratulations! :tada:
+
+You've successfully run and modified your React Native App. :partying_face:
+
+### Now what?
+
+- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps).
+- If you're curious to learn more about React Native, check out the [Introduction to React Native](https://reactnative.dev/docs/getting-started).
+
+# Troubleshooting
+
+If you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.
+
+# Learn More
+
+To learn more about React Native, take a look at the following resources:
+
+- [React Native Website](https://reactnative.dev) - learn more about React Native.
+- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
+- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
+- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
+- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.

package/template/__tests__/App.test.tsx

@@ -0,0 +1,17 @@
+/**
+ * @format
+ */
+
+import 'react-native';
+import React from 'react';
+import App from '../App';
+
+// Note: import explicitly to use the types shipped with jest.
+import { it } from '@jest/globals';
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+it('renders correctly', () => {
+    renderer.create(<App />);
+});

package/template/android/app/build.gradle

@@ -0,0 +1,120 @@
+apply plugin: "com.android.application"
+apply plugin: "org.jetbrains.kotlin.android"
+apply plugin: "com.facebook.react"
+
+/**
+ * This is the configuration block to customize your React Native Android app.
+ * By default you don't need to apply any configuration, just uncomment the lines you need.
+ */
+react {
+    /* Folders */
+    //   The root of your project, i.e. where "package.json" lives. Default is '..'
+    // root = file("../")
+    //   The folder where the react-native NPM package is. Default is ../node_modules/react-native
+    // reactNativeDir = file("../node_modules/react-native")
+    //   The folder where the react-native Codegen package is. Default is ../node_modules/@react-native/codegen
+    // codegenDir = file("../node_modules/@react-native/codegen")
+    //   The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js
+    // cliFile = file("../node_modules/react-native/cli.js")
+
+    /* Variants */
+    //   The list of variants to that are debuggable. For those we're going to
+    //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
+    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
+    // debuggableVariants = ["liteDebug", "prodDebug"]
+
+    /* Bundling */
+    //   A list containing the node command and its flags. Default is just 'node'.
+    // nodeExecutableAndArgs = ["node"]
+    //
+    //   The command to run when bundling. By default is 'bundle'
+    // bundleCommand = "ram-bundle"
+    //
+    //   The path to the CLI configuration file. Default is empty.
+    // bundleConfig = file(../rn-cli.config.js)
+    //
+    //   The name of the generated asset file containing your JS bundle
+    // bundleAssetName = "MyApplication.android.bundle"
+    //
+    //   The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
+    // entryFile = file("../js/MyApplication.android.js")
+    //
+    //   A list of extra flags to pass to the 'bundle' commands.
+    //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
+    // extraPackagerArgs = []
+
+    /* Hermes Commands */
+    //   The hermes compiler command to run. By default it is 'hermesc'
+    // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
+    //
+    //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
+    // hermesFlags = ["-O", "-output-source-map"]
+}
+
+/**
+ * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
+ */
+def enableProguardInReleaseBuilds = false
+
+/**
+ * The preferred build flavor of JavaScriptCore (JSC)
+ *
+ * For example, to use the international variant, you can use:
+ * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
+ *
+ * The international variant includes ICU i18n library and necessary data
+ * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
+ * give correct results when using with locales other than en-US. Note that
+ * this variant is about 6MiB larger per architecture than default.
+ */
+def jscFlavor = 'org.webkit:android-jsc:+'
+
+android {
+    ndkVersion rootProject.ext.ndkVersion
+    buildToolsVersion rootProject.ext.buildToolsVersion
+    compileSdk rootProject.ext.compileSdkVersion
+
+    namespace "com.blanktemplate"
+    defaultConfig {
+        applicationId "com.blanktemplate"
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0"
+    }
+    signingConfigs {
+        debug {
+            storeFile file('debug.keystore')
+            storePassword 'android'
+            keyAlias 'androiddebugkey'
+            keyPassword 'android'
+        }
+    }
+    buildTypes {
+        debug {
+            signingConfig signingConfigs.debug
+        }
+        release {
+            // Caution! In production, you need to generate your own keystore file.
+            // see https://reactnative.dev/docs/signed-apk-android.
+            signingConfig signingConfigs.debug
+            minifyEnabled enableProguardInReleaseBuilds
+            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+        }
+    }
+}
+
+dependencies {
+    // The version of react-native is set by the React Native Gradle Plugin
+    implementation("com.facebook.react:react-android")
+
+    if (hermesEnabled.toBoolean()) {
+        implementation("com.facebook.react:hermes-android")
+    } else {
+        implementation jscFlavor
+    }
+}
+
+apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
+apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
+apply from: "../../node_modules/@brightlayer-ui/react-native-vector-icons/fonts.gradle"

package/template/android/app/proguard-rules.pro

@@ -0,0 +1,10 @@
+# Add project specific ProGuard rules here.
+# By default, the flags in this file are appended to flags specified
+# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
+# You can edit the include path and order by changing the proguardFiles
+# directive in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# Add any project specific keep options here:

package/template/android/app/src/debug/AndroidManifest.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <application
+        android:usesCleartextTraffic="true"
+        tools:targetApi="28"
+        tools:ignore="GoogleAppIndexingWarning"/>
+</manifest>

package/template/android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,25 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <uses-permission android:name="android.permission.INTERNET" />
+
+    <application
+      android:name=".MainApplication"
+      android:label="@string/app_name"
+      android:icon="@mipmap/ic_launcher"
+      android:roundIcon="@mipmap/ic_launcher_round"
+      android:allowBackup="false"
+      android:theme="@style/AppTheme">
+      <activity
+        android:name=".MainActivity"
+        android:label="@string/app_name"
+        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
+        android:launchMode="singleTask"
+        android:windowSoftInputMode="adjustResize"
+        android:exported="true">
+        <intent-filter>
+            <action android:name="android.intent.action.MAIN" />
+            <category android:name="android.intent.category.LAUNCHER" />
+        </intent-filter>
+      </activity>
+    </application>
+</manifest>

package/template/android/app/src/main/java/com/blanktemplate/MainActivity.kt

@@ -0,0 +1,22 @@
+package com.blanktemplate
+
+import com.facebook.react.ReactActivity
+import com.facebook.react.ReactActivityDelegate
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
+import com.facebook.react.defaults.DefaultReactActivityDelegate
+
+class MainActivity : ReactActivity() {
+
+  /**
+   * Returns the name of the main component registered from JavaScript. This is used to schedule
+   * rendering of the component.
+   */
+  override fun getMainComponentName(): String = "blankTemplate"
+
+  /**
+   * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
+   * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
+   */
+  override fun createReactActivityDelegate(): ReactActivityDelegate =
+      DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
+}

package/template/android/app/src/main/java/com/blanktemplate/MainApplication.kt

@@ -0,0 +1,43 @@
+package com.blanktemplate
+
+import android.app.Application
+import com.facebook.react.PackageList
+import com.facebook.react.ReactApplication
+import com.facebook.react.ReactHost
+import com.facebook.react.ReactNativeHost
+import com.facebook.react.ReactPackage
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
+import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
+import com.facebook.react.defaults.DefaultReactNativeHost
+import com.facebook.soloader.SoLoader
+
+class MainApplication : Application(), ReactApplication {
+
+  override val reactNativeHost: ReactNativeHost =
+      object : DefaultReactNativeHost(this) {
+        override fun getPackages(): List<ReactPackage> =
+            PackageList(this).packages.apply {
+              // Packages that cannot be autolinked yet can be added manually here, for example:
+              // add(MyReactNativePackage())
+            }
+
+        override fun getJSMainModuleName(): String = "index"
+
+        override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
+
+        override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
+        override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
+      }
+
+  override val reactHost: ReactHost
+    get() = getDefaultReactHost(applicationContext, reactNativeHost)
+
+  override fun onCreate() {
+    super.onCreate()
+    SoLoader.init(this, false)
+    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+      // If you opted-in for the New Architecture, we load the native entry point for this app.
+      load()
+    }
+  }
+}