feat: boilerplate enchancement

boilerplate/.babelrc

@@ -1,9 +1,41 @@
 {
-    "presets": ["module:metro-react-native-babel-preset"],
-    "env": {
-      "production": {
-        "plugins": ["ignite-ignore-reactotron"]
+  "presets": [
+    [
+      "module:metro-react-native-babel-preset",
+      { "useTransformReactJSXExperimental": true }
+    ]
+  ],
+  "plugins": [
+    [
+      "@babel/plugin-transform-react-jsx",
+      {
+        "runtime": "automatic"
       }
+    ],
+    [
+      "module-resolver",
+      {
+        "alias": {
+          "@Components": "./App/Components",
+          "@Config": "./App/Config",
+          "@Containers": "./App/Containers",
+          "@Fixtures": "./App/Fixtures",
+          "@Images": "./App/Images",
+          "@Lib": "./App/Lib",
+          "@Navigation": "./App/Navigation",
+          "@Redux": "./App/Redux",
+          "@Sagas": "./App/Sagas",
+          "@Services": "./App/Services",
+          "@Themes": "./App/Themes"
+        },
+        "extensions": [".js", ".ios.js", ".android.js"]
+      }
+    ]
+  ],
+  "env": {
+    "production": {
+      "plugins": ["ignite-ignore-reactotron"]
     }
   }
+}
 

boilerplate/App/Components/Button.js → boilerplate/App/Components/Button/Base.js

@@ -1,4 +1,4 @@
-import React, { memo } from 'react'
+import { memo } from 'react'
 import PropTypes from 'prop-types'
 import {
   TouchableNativeFeedback,
@@ -8,8 +8,8 @@ import {
 } from 'react-native'
 
 // Styles
-import styles from './Styles/ButtonStyle'
-import { apply } from '../Themes/OsmiProvider'
+import styles from '../Styles/BaseStyle'
+import { apply } from '@Themes/OsmiProvider'
 
 const Button = props => {
   const { ...restProps } = props

boilerplate/App/Components/Styles/BaseStyle.js

@@ -0,0 +1,5 @@
+import { connect } from '@Themes/OsmiProvider'
+
+export default connect({
+  // your component's styles here
+})

boilerplate/App/Config/ReduxPersist.js

@@ -1,11 +1,11 @@
-import immutablePersistenceTransform from '../Services/ImmutablePersistenceTransform'
+import immutablePersistenceTransform from '@Services/ImmutablePersistenceTransform'
 import AsyncStorage from '@react-native-async-storage/async-storage'
 
 const REDUX_PERSIST = {
   active: true,
   reducerVersion: '1.0',
   storeConfig: {
-    key: 'maupesan',
+    key: 'osmi-kit',
     storage: AsyncStorage,
     // Reducer keys that you do NOT want stored to persistence here.
     blacklist: ['login', 'search', 'nav'],

boilerplate/App/Containers/App.js

@@ -1,9 +1,9 @@
-import '../Config'
-import DebugConfig from '../Config/DebugConfig'
-import React, { Component } from 'react'
+import '@Config'
+import DebugConfig from '@Config/DebugConfig'
+import { Component } from 'react'
 import { Provider } from 'react-redux'
 import RootContainer from './RootContainer'
-import createStore from '../Redux'
+import createStore from '@Redux'
 
 // create our store
 const store = createStore()

boilerplate/App/Containers/LaunchScreen.js

@@ -1,15 +1,15 @@
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 import { connect } from 'react-redux'
-import { StatusBar, Image, View, Text } from 'react-native'
+import { StatusBar, Image, Text } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
-import Images from '../Images'
+import Images from '@Images'
 
 // Components
-import Button from '../Components/Button'
+import Button from '@Components/Button/Base'
 
 // Styles
 import styles from './Styles/LaunchScreenStyle'
-import { apply } from '../Themes/OsmiProvider'
+import { apply } from '@Themes/OsmiProvider'
 
 const LaunchScreen = props => {
   const _navigateExplore = useCallback(() => props.navigation.navigate("WelcomeScreen"), [])

boilerplate/App/Containers/RootContainer.js

@@ -1,13 +1,13 @@
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
 import { StatusBar } from 'react-native'
 import { connect } from 'react-redux'
-import StartupActions from '../Redux/StartupRedux'
-import ReduxPersist from '../Config/ReduxPersist'
-import AppNavigation from '../Navigation/AppNavigation'
+import StartupActions from '@Redux/StartupRedux'
+import ReduxPersist from '@Config/ReduxPersist'
+import AppNavigation from '@Navigation/AppNavigation'
 import { SafeAreaView } from 'react-native-safe-area-context'
 
 // styles
-import { apply } from '../Themes/OsmiProvider'
+import { apply } from '@Themes/OsmiProvider'
 
 const RootContainer = (props) => {
   useEffect(() => {

boilerplate/App/Containers/Styles/LaunchScreenStyle.js

@@ -1,4 +1,4 @@
-import { connect } from '../../Themes/OsmiProvider'
+import { connect } from '@Themes/OsmiProvider'
 
 export default connect({
   container: 'flex bg-gray-900 items-center p-5',

boilerplate/App/Containers/Styles/WelcomeScreenStyle.js

@@ -1,4 +1,4 @@
-import { connect } from '../../Themes/OsmiProvider'
+import { connect } from '@Themes/OsmiProvider'
 
 export default connect({
 })

boilerplate/App/Containers/WelcomeScreen.js

@@ -1,12 +1,11 @@
-import React from 'react'
 import { connect } from 'react-redux'
 import { StatusBar, Text } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import Icon from 'react-native-vector-icons/Ionicons'
 
 // Styles
 import styles from './Styles/WelcomeScreenStyle'
-import { apply } from '../Themes/OsmiProvider'
+import { apply } from '@Themes/OsmiProvider'
 
 const WelcomeScreen = props => {
   return (

boilerplate/App/Navigation/AppNavigation.js

@@ -2,8 +2,8 @@ import React from 'react'
 import { NavigationContainer } from '@react-navigation/native'
 import { createStackNavigator } from '@react-navigation/stack'
 
-import LaunchScreen from '../Containers/LaunchScreen'
-import WelcomeScreen from '../Containers/WelcomeScreen'
+import LaunchScreen from '@Containers/LaunchScreen'
+import WelcomeScreen from '@Containers/WelcomeScreen'
 
 const Stack = createStackNavigator()
 

boilerplate/App/Redux/CreateStore.js

@@ -1,10 +1,10 @@
 import { createStore, applyMiddleware, compose } from 'redux'
-import Rehydration from '../Services/Rehydration'
-import ReduxPersist from '../Config/ReduxPersist'
-import Config from '../Config/DebugConfig'
+import Rehydration from '@Services/Rehydration'
+import ReduxPersist from '@Config/ReduxPersist'
+import Config from '@Config/DebugConfig'
 import createSagaMiddleware from 'redux-saga'
 import ScreenTracking from './ScreenTrackingMiddleware'
-import Reactotron from '../Config/ReactotronConfig'
+import Reactotron from '@Config/ReactotronConfig'
 
 // creates the store
 export default (rootReducer, rootSaga) => {

boilerplate/App/Redux/index.js

@@ -1,8 +1,8 @@
 import { combineReducers } from 'redux'
 import { persistReducer } from 'redux-persist'
 import configureStore from './CreateStore'
-import rootSaga from '../Sagas/'
-import ReduxPersist from '../Config/ReduxPersist'
+import rootSaga from '@Sagas/'
+import ReduxPersist from '@Config/ReduxPersist'
 
 /* ------------- Assemble The Reducers ------------- */
 export const reducers = combineReducers({

boilerplate/App/Sagas/StaticDataSagas.js

@@ -1,5 +1,5 @@
 import { call, put, select } from 'redux-saga/effects'
-import StaticDataActions from '../Redux/StaticDataRedux'
+import StaticDataActions from '@Redux/StaticDataRedux'
 
 export function * getRoot (api, action) {
   const { data } = action

boilerplate/App/Sagas/index.js

@@ -1,11 +1,11 @@
 import { takeLatest, all } from 'redux-saga/effects'
-import API from '../Services/Api'
-import FixtureAPI from '../Services/FixtureApi'
-import DebugConfig from '../Config/DebugConfig'
+import API from '@Services/Api'
+import FixtureAPI from '@Services/FixtureApi'
+import DebugConfig from '@Config/DebugConfig'
 
 /* ------------- Types ------------- */
-import { StartupTypes } from '../Redux/StartupRedux'
-import { StaticDataTypes } from '../Redux/StaticDataRedux'
+import { StartupTypes } from '@Redux/StartupRedux'
+import { StaticDataTypes } from '@Redux/StaticDataRedux'
 
 /* ------------- Sagas ------------- */
 import { startup } from './StartupSagas'

boilerplate/App/Services/FixtureApi.js

@@ -3,19 +3,19 @@ export default {
   getRoot: () => {
     return {
       ok: true,
-      data: require('../Fixtures/root.json')
+      data: require('@Fixtures/root.json')
     }
   },
   getRate: () => {
     return {
       ok: true,
-      data: require('../Fixtures/rateLimit.json')
+      data: require('@Fixtures/rateLimit.json')
     }
   },
   getUser: (username) => {
     // This fixture only supports gantman or else returns skellock
-    const gantmanData = require('../Fixtures/gantman.json')
-    const skellockData = require('../Fixtures/skellock.json')
+    const gantmanData = require('@Fixtures/gantman.json')
+    const skellockData = require('@Fixtures/skellock.json')
     return {
       ok: true,
       data: username.toLowerCase() === 'gantman' ? gantmanData : skellockData

boilerplate/App/Services/Rehydration.js

@@ -1,8 +1,8 @@
-import ReduxPersist from '../Config/ReduxPersist'
+import ReduxPersist from '@Config/ReduxPersist'
 import AsyncStorage from '@react-native-async-storage/async-storage'
 import { persistStore } from 'redux-persist'
-import StartupActions from '../Redux/StartupRedux'
-import DebugConfig from '../Config/DebugConfig'
+import StartupActions from '@Redux/StartupRedux'
+import DebugConfig from '@Config/DebugConfig'
 
 const updateReducers = (store) => {
   const reducerVersion = ReduxPersist.reducerVersion

boilerplate/android/build.gradle

@@ -1,18 +1,12 @@
 // Top-level build file where you can add configuration options common to all sub-projects/modules.
 
 buildscript {
-    ext {
-        buildToolsVersion = "29.0.2"
-        minSdkVersion = 16
-        compileSdkVersion = 29
-        targetSdkVersion = 29
-    }
     repositories {
         google()
         jcenter()
     }
     dependencies {
-        classpath("com.android.tools.build:gradle:3.5.3")
+        classpath("com.android.tools.build:gradle:4.1.0")
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files
     }
@@ -35,3 +29,11 @@ allprojects {
         maven { url 'https://www.jitpack.io' }
     }
 }
+
+ext {
+    buildToolsVersion = "29.0.3"
+    minSdkVersion = 21
+    compileSdkVersion = 29
+    targetSdkVersion = 29
+    ndkVersion = "20.1.5948944"
+}

boilerplate/android/gradle.properties

@@ -25,4 +25,4 @@ android.useAndroidX=true
 android.enableJetifier=true
 
 # Version of flipper SDK to use with React Native
-FLIPPER_VERSION=0.70.0
+FLIPPER_VERSION=0.75.1

boilerplate/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-6.2-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-6.7-all.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

boilerplate/babel.config.js

@@ -1,3 +1,16 @@
 module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
+  presets: [
+    [
+      'module:metro-react-native-babel-preset',
+      { useTransformReactJSXExperimental: true }
+    ]
+  ],
+  plugins: [
+    [
+      '@babel/plugin-transform-react-jsx',
+      {
+        runtime: 'automatic',
+      },
+    ]
+  ]
 };

boilerplate/ios/Podfile

@@ -6,7 +6,11 @@ platform :ios, '10.0'
 target 'OsmiKit' do
   config = use_native_modules!
 
-  use_react_native!(:path => config["reactNativePath"])
+  use_react_native!(
+    :path => config["reactNativePath"],
+    # to enable hermes on iOS, change `false` to `true` and then install pods
+    :hermes_enabled => false
+  )
 
   pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
 
@@ -19,17 +23,9 @@ target 'OsmiKit' do
   #
   # Note that if you have use_frameworks! enabled, Flipper will not work and
   # you should disable these next few lines.
-  use_flipper!({ 'Flipper' => '0.74.0' })
+  use_flipper!({ 'Flipper' => '0.75.1' })
   post_install do |installer|
     flipper_post_install(installer)
+    react_native_post_install(installer)
   end
-end
-
-target 'OsmiKit-tvOS' do
-  # Pods for OsmiKit-tvOS
-
-  target 'OsmiKit-tvOSTests' do
-    inherit! :search_paths
-    # Pods for testing
-  end
-end
+end

boilerplate/jsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "es2017",
+    "module": "es6",
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": "./App",
+    "paths": {
+      "@Images": ["Images"],
+      "@Components/*": ["Components/*"],
+      "@Config/*": ["Config/*"],
+      "@Containers/*": ["@Containers/*"],
+      "@Fixtures/*": ["Fixtures/*"],
+      "@Images/*": ["Images/*"],
+      "@Lib/*": ["Lib/*"],
+      "@Navigation/*": ["Navigation/*"],
+      "@Redux/*": ["Redux/*"],
+      "@Sagas/*": ["Sagas/*"],
+      "@Services/*": ["Services/*"],
+      "@Themes/*": ["Themes/*"],
+    }
+  },
+  "include": ["App"],
+  "exclude": ["node_modules", "dist", "android", "ios", "Tests"]
+}