feat(theme): rework the tom character and the ui of the boilerplate (#…

…342)

* feat(theme): rework the tom character and the ui of the boilerplate

* chore(version): bump patch version

* fix(reanimated): mock the reanimated dep

---------

Co-authored-by: jeremydolle <[email protected]>

README.md

@@ -1,14 +1,11 @@
 <div align="center">
-    <img src="documentation/static/img/TOM-Legend.png" alt="Logo" width="100%">
+    <img src="documentation/static/img/tom-github-banner.png" alt="Logo" width="100%">
 </div>
 
 ![React Native Boilerplate License](https://img.shields.io/github/license/thecodingmachine/react-native-boilerplate)
-![React Native Boilerplate Version](https://flat.badgen.net/npm/v/@thecodingmachine/react-native-boilerplate)
 ![React Native Boilerplate Release Date](https://img.shields.io/github/release-date/thecodingmachine/react-native-boilerplate)
 ![React Native Boilerplate Download](https://flat.badgen.net/npm/dt/@thecodingmachine/react-native-boilerplate)
-![React Native Boilerplate Stars](https://img.shields.io/github/stars/thecodingmachine/react-native-boilerplate)
 ![React Native Boilerplate Top Language](https://img.shields.io/github/languages/top/thecodingmachine/react-native-boilerplate)
-![React Native Boilerplate TypeScript](https://badgen.net/npm/types/tslib)
 [![CI](https://github.com/thecodingmachine/react-native-boilerplate/actions/workflows/CI.yml/badge.svg)](https://github.com/thecodingmachine/react-native-boilerplate/actions/workflows/CI.yml)
 
 # TheCodingMachine React Native boilerplate
@@ -23,7 +20,7 @@ If you love this boilerplate, give us a star, you will be a ray of sunshine in o
 
 ## Requirements
 
-Node 12 or greater is required. Development for iOS requires a Mac and Xcode 10 or up, and will target iOS 11 and up.
+Node 14 or greater is required. Development for iOS requires a Mac and Xcode 10 or up, and will target iOS 11 and up.
 
 You also need to install the dependencies required by React Native.  
 Go to the [React Native environment setup](https://reactnative.dev/docs/environment-setup), then select `React Native CLI Quickstart` tab.  
@@ -52,4 +49,4 @@ This project is released under the [MIT License](LICENSE).
 
 ## About us
 
-[TheCodingMachine](https://www.thecodingmachine.com/) is a web and mobile agency based in Paris and Lyon, France. We are [constantly looking for new developers and team leaders](https://www.thecodingmachine.com/nous-rejoindre/) and we love [working with freelancers](https://coders.thecodingmachine.com/). You'll find [an overview of all our open source projects on our website](https://thecodingmachine.io/open-source) and on [Github](https://github.com/thecodingmachine).
+[TheCodingMachine](https://www.thecodingmachine.com/) is a web and mobile agency based in Paris and Lyon, France. We are [constantly looking for new developers and team leaders](https://www.thecodingmachine.com/nous-rejoindre/) and we love [working with freelancers](https://coders.thecodingmachine.com/). You'll find [an overview of all our open source projects on our website](https://thecodingmachine.com/en/open-source-en/) and on [Github](https://github.com/thecodingmachine).

documentation/.eslintrc.js

@@ -37,5 +37,7 @@ module.exports = {
     'import/no-unresolved': [2, { ignore: ['^@theme', '^@docusaurus', '^@site'] }],
     'react/jsx-props-no-spreading': 'off',
     'react/no-array-index-key': 'off',
+    'import/no-relative-packages': 'off',
+    'global-require': 'off',
   },
 };

documentation/babel.config.js

@@ -1,3 +1,10 @@
 module.exports = {
   presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+  plugins: [
+    ['module-resolver', {
+      alias: {
+        'react-native': './mocks/react-native-mock',
+      },
+    }],
+  ],
 };

documentation/docs/1_Introduction.mdx

@@ -2,17 +2,10 @@
 slug: /Introduction
 title: What's in the box❓
 ---
+import VersionReader from './components/VersionReader'
+import Tom from './components/Tom'
 
-import deps from '../../template/package.json'
-export const Version = ({name, dev}) => (
-  <span>
-    {deps[!!dev ? 'devDependencies' : 'dependencies'][name]}
-  </span>
-);
-
-<div align="center">
-    <img width="300" height="300" src={require('./assets/TOM.png').default} />
-</div>
+<Tom />
 
 This project is a [React Native](https://facebook.github.io/react-native/) boilerplate that can be used to kick-start a mobile application.
 
@@ -49,17 +42,17 @@ The driving goal of the architecture of the boilerplate is separation of concern
 ## Content 🧳
 
 The boilerplate contains a [clear directory layout](#directory-layout) to provide a base architecture for your application with some essential dependencies:
-- [React Native](https://facebook.github.io/react-native/) (v**<Version name="react-native"/>**) application (in "[ejected](https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md)" mode to allow using dependencies that rely on native code)
-- [Redux](https://redux.js.org/) (v**<Version name="react-redux"/>**) to help manage state
-- [Redux Toolkit (Query)](https://redux-toolkit.js.org/) (v**<Version name="@reduxjs/toolkit"/>**) to improve redux api calls
-- [Redux Persist](https://github.com/rt2zz/redux-persist) (v**<Version name="redux-persist"/>**) to persist the Redux state
-- [React Native mmkv](https://github.com/mrousavy/react-native-mmkv) (v**<Version name="react-native-mmkv"/>**) which is an efficient, small mobile key-value storage
-- [React Navigation](https://reactnavigation.org/) (v**<Version name="@react-navigation/native"/>**) to handle routing and navigation in the app, with a splash screen setup by default
-- [React I18Next](https://github.com/i18next/react-i18next) (v**<Version name="react-i18next"/>**) to handle internationalization in your app
+- [React Native](https://facebook.github.io/react-native/) (v**<VersionReader name="react-native"/>**) application (in "[ejected](https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md)" mode to allow using dependencies that rely on native code)
+- [Redux](https://redux.js.org/) (v**<VersionReader name="react-redux"/>**) to help manage state
+- [Redux Toolkit (Query)](https://redux-toolkit.js.org/) (v**<VersionReader name="@reduxjs/toolkit"/>**) to improve redux api calls
+- [Redux Persist](https://github.com/rt2zz/redux-persist) (v**<VersionReader name="redux-persist"/>**) to persist the Redux state
+- [React Native mmkv](https://github.com/mrousavy/react-native-mmkv) (v**<VersionReader name="react-native-mmkv"/>**) which is an efficient, small mobile key-value storage
+- [React Navigation](https://reactnavigation.org/) (v**<VersionReader name="@react-navigation/native"/>**) to handle routing and navigation in the app, with a splash screen setup by default
+- [React I18Next](https://github.com/i18next/react-i18next) (v**<VersionReader name="react-i18next"/>**) to handle internationalization in your app
 - [prettier](https://prettier.io/) and [eslint](https://eslint.org/) preconfigured for React Native
-- [react-native-flipper](https://fbflipper.com/) (v**<Version name="react-native-flipper" dev/>**) to debug react-native,
- [redux-flipper](https://github.com/jk-gan/redux-flipper) (v**<Version name="redux-flipper" dev/>**) to debug redux,
- [navigation devtool](https://www.npmjs.com/package/@react-navigation/devtools) (v**<Version name="@react-navigation/devtools" dev/>**) to debug navigation,
+- [react-native-flipper](https://fbflipper.com/) (v**<VersionReader name="react-native-flipper" dev/>**) to debug react-native,
+ [redux-flipper](https://github.com/jk-gan/redux-flipper) (v**<VersionReader name="redux-flipper" dev/>**) to debug redux,
+ [navigation devtool](https://www.npmjs.com/package/@react-navigation/devtools) (v**<VersionReader name="@react-navigation/devtools" dev/>**) to debug navigation,
 
 
 The boilerplate includes an example (displaying fake user data) from UI components to the business logic. The example is easy to remove so that it doesn't get in the way.

documentation/docs/components/Tom.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+function Tom() {
+  return (
+    <div className="flex justify-center items-center mb-5">
+      <img
+        width="300"
+        height="300"
+        className="dark:block hidden dark:block"
+        src={require('../../static/img/tom_dark.png').default}
+        alt="tom"
+      />
+
+      <img
+        width="300"
+        height="300"
+        className="dark:hidden sm:block"
+        src={require('../../static/img/tom_light.png').default}
+        alt="tom"
+      />
+    </div>
+  );
+}
+
+export default Tom;

documentation/docs/components/VersionReader.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import packageJson from '../../../template/package.json';
+
+type Props = {
+    name: string
+    dev: boolean
+};
+
+function VersionReader({ name, dev }: Props) {
+  return (
+    <span>
+      {packageJson[dev ? 'devDependencies' : 'dependencies'][name]}
+    </span>
+  );
+}
+
+export default VersionReader;

documentation/mocks/react-native-mock.ts

@@ -0,0 +1,4 @@
+// eslint-disable-next-line import/prefer-default-export
+export const StyleSheet = {
+  create: (arg: any) => arg,
+};

documentation/package.json

@@ -29,13 +29,14 @@
     "@tsconfig/docusaurus": "^1.0.5",
     "@typescript-eslint/eslint-plugin": "^5.27.0",
     "@typescript-eslint/parser": "^5.27.0",
+    "autoprefixer": "^10.4.13",
+    "babel-plugin-module-resolver": "^5.0.0",
     "eslint": "^7.32.0 || ^8.2.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "autoprefixer": "^10.4.13",
     "postcss": "^8.4.21",
     "tailwindcss": "^3.2.7",
     "typescript": "^4.7.4"

documentation/src/components/Quickstart.tsx

@@ -29,9 +29,8 @@ export default function Quickstart() {
             <div>
               <button
                 type="button"
-                className="
-        transition-all
-        ease-in mt-5 hover:bg-green-700 hover:text-white hover:text text-md text-white font-bold py-3 px-4 rounded bg-green-500 shadow-lg shadow-green-500/50"
+                className="transition-all ease-in mt-5 hover:bg-green-700 hover:text-white hover:text text-md text-white
+                font-bold py-3 px-4 rounded bg-green-500 shadow-lg shadow-green-500/50"
                 onClick={() => { navigator.clipboard.writeText('npx react-native init MyApp --template @thecodingmachine/react-native-boilerplate'); }}
               >
                 Copy and test it
@@ -41,14 +40,14 @@ export default function Quickstart() {
           </div>
 
           <img
-            className="dark:block pointer-events-none hidden dark:sm:block w-full md:w-[80%] 2xl:w-[85%] lg:w-2/3 mr-0 translate-x-[32%] md:translate-x-[20%] lg:translate-x-[15%] 2xl:translate-x-[28%] -translate-y-1/3 md:-translate-y-1/3 lg:-translate-y-1/2"
-            src="./img/phone-dark.png"
+            className="pointer-events-none hidden dark:sm:block w-3/4 md:w-[70%] 2xl:w-[85%] lg:w-2/3 mr-0 translate-x-[27%] md:translate-x-[20%] lg:translate-x-[15%] 2xl:translate-x-[28%] -translate-y-[43%]"
+            src="./img/phone_dark.png"
             alt="phone"
           />
 
           <img
-            className="dark:hidden pointer-events-none hidden sm:block w-full md:w-[80%] 2xl:w-[85%] lg:w-2/3 mr-0 translate-x-[32%] md:translate-x-[20%] lg:translate-x-[15%] 2xl:translate-x-[28%] -translate-y-1/3 md:-translate-y-1/3 lg:-translate-y-1/2"
-            src="./img/phone.png"
+            className="dark:hidden pointer-events-none hidden sm:block w-3/4 md:w-[70%] 2xl:w-[85%] lg:w-2/3 mr-0 translate-x-[27%] md:translate-x-[20%] lg:translate-x-[15%] 2xl:translate-x-[28%] -translate-y-[43%]"
+            src="./img/phone_light.png"
             alt="phone"
           />
         </div>

documentation/src/pages/index.tsx

@@ -11,15 +11,21 @@ function HomepageHeader() {
 
   return (
     <header>
-      <div className="pt-28 md:pt-0 -ml-5 md:ml-auto flex justify-center md:absolute w-full md:w-1/3 top-20 m-auto md:right-20">
+      <div className="mt-10 pt-0 md:pt-28 md:pt-0 -ml-5 md:ml-auto flex justify-end top-10 right-12 md:top-auto md:left-auto md:justify-center absolute w-full md:w-1/3 top-20 m-auto md:right-20">
         <img
-          src="./img/TOM.png"
-          alt="Facebook Open Source Logo"
-          className="z-10 w-1/2 md:w-full"
+          className="dark:block pointer-events-none hidden dark:block z-10 w-1/4 md:w-3/4"
+          src="./img/tom_dark.png"
+          alt="tom"
+        />
+
+        <img
+          className="dark:hidden pointer-events-none sm:block z-10 w-1/4 md:w-3/4"
+          src="./img/tom_light.png"
+          alt="tom"
         />
       </div>
 
-      <div className="px-5 sm:px-12 md:px-16 relative mx-auto md:pt-24">
+      <div className="px-5 sm:px-12 md:px-16 relative mx-auto pt-10 md:pt-24">
         <h1 className="text-[32px] sm:text-[40px] mt-10 lg:mt-16 md:mt-0 md:text-[45px] lg:text-[63px] leading-10 md:leading-8 font-black text-indigo-700">
           The React Native
           <span className="font-extralight mt-4 md:mt-8 lg:mt-0 text-[66px] sm:text-[83px] md:text-[92px] lg:text-9xl block text-red-500 dark:text-red-600">Boilerplate</span>
@@ -57,8 +63,8 @@ export default function Home(): JSX.Element {
       wrapperClassName="relative overflow-hidden"
     >
       <div className="relative max-w-7xl m-auto w-full">
-        <div className="animate-blob opacity-80 absolute -top-20 -right-20 md:top-0 md:right-0 bg-gradient-to-r from-red-600 via-pink-700 to-pink-400 h-[310px] w-[310px] md:h-[350px] md:w-[350px] lg:h-[382px] lg:w-[382px]" style={{ borderRadius: '30% 70% 67% 33% / 64% 30% 70% 36%' }} />
-        <div className="animate-blob-delay-1 opacity-80 absolute top-12 right-1/4 md:top-[250px] md:right-1/4 bg-gradient-to-r from-indigo-600 via-blue-700 to-blue-400 h-[180px] w-[180px] md:h-[230px] md:w-[230px]" style={{ borderRadius: '30% 70% 67% 33% / 64% 30% 70% 36%' }} />
+        <div className="animate-blob opacity-80 absolute top-0 -right-10 md:top-0 md:right-0 bg-gradient-to-r from-indigo-600 via-blue-700 to-blue-400 h-[210px] w-[210px] md:h-[350px] md:w-[350px] lg:h-[382px] lg:w-[382px]" style={{ borderRadius: '30% 70% 67% 33% / 64% 30% 70% 36%' }} />
+        <div className="animate-blob-delay-1 opacity-80 absolute top-0 right-32 md:top-[250px] md:right-1/4 lg:right-60 bg-gradient-to-r from-red-600 via-pink-700 to-pink-400 h-[180px] w-[180px] md:h-[230px] md:w-[230px] lg:h-[282px] lg:w-[282px]" style={{ borderRadius: '30% 70% 67% 33% / 64% 30% 70% 36%' }} />
       </div>
 
       <div className="backdrop-blur-xl">

documentation/tailwind.config.js

@@ -1,6 +1,9 @@
 module.exports = {
   darkMode: 'class',
-  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+  content: [
+    './src/**/*.{js,jsx,ts,tsx}',
+    './docs/**/*.mdx',
+  ],
   theme: {
     extend: {
       screens: {

documentation/tsconfig.json

@@ -2,6 +2,7 @@
   // This file is not used in compilation. It is here just for a nice editor experience.
   "extends": "@tsconfig/docusaurus/tsconfig.json",
   "compilerOptions": {
-    "baseUrl": "."
-  }
+    "baseUrl": ".",
+    "resolveJsonModule": true,
+  },
 }

documentation/yarn.lock

@@ -2803,6 +2803,17 @@ [email protected]:
   dependencies:
     "@babel/helper-plugin-utils" "7.10.4"
 
+babel-plugin-module-resolver@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-module-resolver/-/babel-plugin-module-resolver-5.0.0.tgz#2b7fc176bd55da25f516abf96015617b4f70fc73"
+  integrity sha512-g0u+/ChLSJ5+PzYwLwP8Rp8Rcfowz58TJNCe+L/ui4rpzE/mg//JVX0EWBUYoxaextqnwuGHzfGp2hh0PPV25Q==
+  dependencies:
+    find-babel-config "^2.0.0"
+    glob "^8.0.3"
+    pkg-up "^3.1.0"
+    reselect "^4.1.7"
+    resolve "^1.22.1"
+
 babel-plugin-polyfill-corejs2@^0.3.3:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz#5d1bd3836d0a19e1b84bbf2d9640ccb6f951c122"
@@ -2926,6 +2937,13 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
+brace-expansion@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae"
+  integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
+  dependencies:
+    balanced-match "^1.0.0"
+
 braces@^3.0.2, braces@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
@@ -4460,6 +4478,14 @@ [email protected]:
     statuses "2.0.1"
     unpipe "~1.0.0"
 
+find-babel-config@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/find-babel-config/-/find-babel-config-2.0.0.tgz#a8216f825415a839d0f23f4d18338a1cc966f701"
+  integrity sha512-dOKT7jvF3hGzlW60Gc3ONox/0rRZ/tz7WCil0bqA1In/3I8f1BctpXahRnEKDySZqci7u+dqq93sZST9fOJpFw==
+  dependencies:
+    json5 "^2.1.1"
+    path-exists "^4.0.0"
+
 find-cache-dir@^3.3.1:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.2.tgz#b30c5b6eff0730731aea9bbd9dbecbd80256d64b"
@@ -4695,6 +4721,17 @@ glob@^7.0.0, glob@^7.1.3, glob@^7.1.6:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+glob@^8.0.3:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-8.1.0.tgz#d388f656593ef708ee3e34640fdfb99a9fd1c33e"
+  integrity sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^5.0.1"
+    once "^1.3.0"
+
 global-dirs@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-3.0.1.tgz#0c488971f066baceda21447aecb1a8b911d22485"
@@ -5648,7 +5685,7 @@ json5@^1.0.2:
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.1.2, json5@^2.2.2:
+json5@^2.1.1, json5@^2.1.2, json5@^2.2.2:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
@@ -6001,6 +6038,13 @@ [email protected], minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch
   dependencies:
     brace-expansion "^1.1.7"
 
+minimatch@^5.0.1:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.6.tgz#1cfcb8cf5522ea69952cd2af95ae09477f122a96"
+  integrity sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
@@ -7343,6 +7387,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
+reselect@^4.1.7:
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.7.tgz#56480d9ff3d3188970ee2b76527bd94a95567a42"
+  integrity sha512-Zu1xbUt3/OPwsXL46hvOOoQrap2azE7ZQbokq61BQfiXvhewsKDwhMeZjTX9sX0nvw1t/U5Audyn1I9P/m9z0A==
+
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"

template/@types/theme.d.ts

@@ -1,5 +1,6 @@
 import Variables from '../src/theme/Variables';
 import { DefaultVariables, Fonts, Gutters, Images, Layout } from '../src/theme';
+import { Theme as ReactNavigationTheme } from '@react-navigation/native/src/types';
 
 export type ThemeVariables = {
   Colors: typeof Variables.Colors;
@@ -17,14 +18,8 @@ export type Theme<F, G, I, L, C> = ThemeVariables & {
   Variables?: Partial<ThemeVariables>;
 };
 
-export type ThemeNavigationColors = {
-  primary: string;
-  background: string;
-  card: string;
-  text: string;
-  border: string;
-  notification: string;
-};
+type NavigationColors<T> = T extends { colors: infer U } ? U : never;
+type ThemeNavigationColors = NavigationColors<ReactNavigationTheme>;
 
 export type ThemeNavigationTheme = {
   dark: boolean;

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

@@ -34,9 +34,4 @@
         </intent-filter>
       </activity>
     </application>
-
-    <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-      <background android:drawable="@color/ic_launcher_background" />
-      <foreground android:drawable="@mipmap/ic_launcher_foreground" />
-    </adaptive-icon>
 </manifest>

template/android/app/src/main/res/values/ic_launcher_background.xml

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="ic_launcher_background">#ffffff</color>
-</resources>
+    <color name="ic_launcher_background">#302f46</color>
+</resources>