Merge pull request #11387 from abpframework/react-native-packages

React Native UI: Upgraded all packages

templates/app/react-native/.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

templates/app/react-native/.gitignore

@@ -1,5 +1,6 @@
-node_modules/**/*
-.expo/*
+node_modules/
+.expo/
+dist/
 npm-debug.*
 *.jks
 *.p8
@@ -8,7 +9,6 @@ npm-debug.*
 *.mobileprovision
 *.orig.*
 web-build/
-web-report/
 
 # macOS
 .DS_Store

templates/app/react-native/App.js

@@ -1,39 +1,101 @@
-import { Ionicons } from '@expo/vector-icons';
-import * as Font from 'expo-font';
-import { StyleProvider } from 'native-base';
-import React, { useEffect, useState } from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import i18n from 'i18n-js';
+import { NativeBaseProvider } from 'native-base';
+import React, { useEffect, useMemo, useState } from 'react';
 import { enableScreens } from 'react-native-screens';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
-import AppContainer from './src/components/AppContainer/AppContainer';
+import { getEnvVars } from './Environment';
+import Loading from './src/components/Loading/Loading';
+import { LocalizationContext } from './src/contexts/LocalizationContext';
 import { initAPIInterceptor } from './src/interceptors/APIInterceptor';
+import AuthNavigator from './src/navigators/AuthNavigator';
+import DrawerNavigator from './src/navigators/DrawerNavigator';
 import { persistor, store } from './src/store';
-import getTheme from './src/theme/components';
-import { activeTheme } from './src/theme/variables';
+import AppActions from './src/store/actions/AppActions';
+import PersistentStorageActions from './src/store/actions/PersistentStorageActions';
+import { createLanguageSelector } from './src/store/selectors/AppSelectors';
+import { createTokenSelector } from './src/store/selectors/PersistentStorageSelectors';
+import { connectToRedux } from './src/utils/ReduxConnect';
+import { isTokenValid } from './src/utils/TokenUtils';
+
+const Stack = createNativeStackNavigator();
+
+const { localization } = getEnvVars();
+
+i18n.defaultSeparator = '::';
+
+const cloneT = i18n.t;
+i18n.t = (key, ...args) => {
+  if (key.slice(0, 2) === '::') {
+    key = localization.defaultResourceName + key;
+  }
+  return cloneT(key, ...args);
+};
 
 enableScreens();
 initAPIInterceptor(store);
 
 export default function App() {
+  const language = createLanguageSelector()(store.getState());
   const [isReady, setIsReady] = useState(false);
 
+  const localizationContextValue = useMemo(
+    () => ({
+      t: i18n.t,
+      locale: (language || {}).cultureName,
+    }),
+    [language]
+  );
+
   useEffect(() => {
-    Font.loadAsync({
-      Roboto: require('native-base/Fonts/Roboto.ttf'),
-      Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
-      ...Ionicons.font,
-    }).then(() => setIsReady(true));
+    store.dispatch(
+      AppActions.fetchAppConfigAsync({
+        callback: () => setIsReady(true),
+        showLoading: true,
+      })
+    );
   }, []);
 
   return (
-    <Provider store={store}>
-      <PersistGate loading={null} persistor={persistor}>
-        {isReady ? (
-          <StyleProvider style={getTheme(activeTheme)}>
-            <AppContainer />
-          </StyleProvider>
-        ) : null}
-      </PersistGate>
-    </Provider>
+    <NavigationContainer>
+      <Provider store={store}>
+        <PersistGate loading={null} persistor={persistor}>
+          <NativeBaseProvider>
+            {isReady ? (
+              <LocalizationContext.Provider value={localizationContextValue}>
+                <ConnectedAppContainer />
+              </LocalizationContext.Provider>
+            ) : null}
+            <Loading />
+          </NativeBaseProvider>
+        </PersistGate>
+      </Provider>
+    </NavigationContainer>
   );
 }
+
+function AppContainer({token, setToken}) {
+  const isValid = useMemo(() => isTokenValid(token), [token]);
+
+  useEffect(() => {
+    if (!isValid && token && token.access_token) {
+      setToken({})
+    }
+  }, [isValid]);
+
+
+  return isValid ? <DrawerNavigator /> : <AuthNavigator />
+}
+
+
+const ConnectedAppContainer = connectToRedux({
+  component: AppContainer,
+  stateProps: (state) => ({
+    token: createTokenSelector()(state),
+  }),
+  dispatchProps: {
+    setToken: PersistentStorageActions.setToken,
+  },
+});

templates/app/react-native/app.json

@@ -21,7 +21,11 @@
     },
     "android": {
       "package": "com.MyCompanyName.MyProjectName",
-      "versionCode": 1
+      "versionCode": 1,
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
     },
     "web": {
       "favicon": "./assets/icon.png"

templates/app/react-native/babel.config.js

@@ -2,5 +2,6 @@ module.exports = function(api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
+    plugins: ['react-native-reanimated/plugin'],
   };
-};
+};

templates/app/react-native/package.json

@@ -1,64 +1,43 @@
 {
+  "name": "myprojectname",
+  "version": "1.0.0",
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
     "start": "expo start",
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",
-    "eject": "expo eject",
-    "lint": "eslint *.js **/*.js",
-    "lint:fix": "yarn lint --fix"
+    "eject": "expo eject"
   },
   "dependencies": {
-    "@expo/vector-icons": "^10.2.1",
-    "@react-native-async-storage/async-storage": "^1.13.2",
-    "@react-native-community/masked-view": "0.1.10",
-    "@react-navigation/drawer": "^5.11.3",
-    "@react-navigation/native": "^5.8.9",
-    "@react-navigation/stack": "^5.12.6",
-    "@reduxjs/toolkit": "^1.4.0",
-    "axios": "^0.21.0",
-    "color": "^3.1.3",
-    "expo": "~39.0.4",
-    "expo-constants": "~9.2.0",
-    "expo-font": "~8.3.0",
-    "expo-status-bar": "~1.0.2",
-    "formik": "^2.2.5",
+    "@react-native-async-storage/async-storage": "~1.15.0",
+    "@react-navigation/drawer": "^6.1.8",
+    "@react-navigation/native": "^6.0.6",
+    "@react-navigation/native-stack": "^6.2.5",
+    "@reduxjs/toolkit": "^1.7.1",
+    "axios": "^0.24.0",
+    "expo": "~44.0.0",
+    "expo-status-bar": "~1.2.0",
+    "formik": "^2.2.9",
     "i18n-js": "^3.8.0",
-    "lodash": "^4.17.20",
-    "native-base": "2.13.14",
-    "prop-types": "^15.7.2",
+    "native-base": "^3.3.1",
+    "prop-types": "^15.8.1",
     "react": "17.0.1",
     "react-dom": "17.0.1",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
-    "react-native-gesture-handler": "~1.7.0 ",
-    "react-native-reanimated": "~1.13.2",
-    "react-native-safe-area-context": "3.1.4",
-    "react-native-safe-area-view": "^1.1.1",
-    "react-native-screens": "~2.10.1",
-    "react-native-web": "~0.14.8",
-    "react-redux": "^7.2.2",
+    "react-native": "0.64.3",
+    "react-native-gesture-handler": "~2.1.0",
+    "react-native-reanimated": "~2.3.1",
+    "react-native-safe-area-context": "3.3.2",
+    "react-native-screens": "~3.10.1",
+    "react-native-svg": "12.1.1",
+    "react-native-web": "0.17.1",
+    "react-redux": "^7.2.6",
     "redux-persist": "^6.0.0",
     "redux-saga": "^1.1.3",
-    "reselect": "^4.0.0",
-    "yup": "^0.29.3"
+    "yup": "^0.32.11"
   },
   "devDependencies": {
-    "@babel/core": "~7.12.3",
-    "@types/i18n-js": "^3.0.3",
-    "@types/react": "~16.9.56",
-    "@types/react-native": "~0.63.35",
-    "@types/react-redux": "^7.1.11",
-    "@types/yup": "^0.29.9",
-    "babel-eslint": "~10.1.0",
-    "babel-preset-expo": "~8.3.0",
-    "eslint": "^7.13.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.21.5",
-    "prettier": "^2.1.2"
+    "@babel/core": "^7.12.9"
   },
   "private": true
 }

templates/app/react-native/src/api/AccountAPI.js

@@ -3,17 +3,16 @@ import { getEnvVars } from '../../Environment';
 
 const { oAuthConfig } = getEnvVars();
 
-export const login = ({ username, password }) => {
-  return api({
+export const login = ({ username, password }) =>
+  api({
     method: 'POST',
     url: '/connect/token',
     headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
     data: `grant_type=password&scope=${oAuthConfig.scope}&username=${username}&password=${password}&client_id=${oAuthConfig.clientId}&client_secret=${oAuthConfig.clientSecret}`,
     baseURL: oAuthConfig.issuer,
-  }).then(({ data }) => data)
-};
+  }).then(({ data }) => data);
 
-export const logout = () =>
+export const Logout = () =>
   api({
     method: 'GET',
     url: '/api/account/logout',

templates/app/react-native/src/api/IdentityAPI.js

@@ -1,6 +1,5 @@
 import api from './API';
 
-export const getProfileDetail = () => api.get('/api/identity/my-profile').then(({ data }) => data);
 
 export const getAllRoles = () => api.get('/api/identity/roles/all').then(({ data }) => data.items);
 
@@ -19,8 +18,10 @@ export const updateUser = (body, id) =>
 
 export const removeUser = id => api.delete(`/api/identity/users/${id}`);
 
+export const getProfileDetail = () => api.get('/api/account/my-profile').then(({ data }) => data);
+
 export const updateProfileDetail = body =>
-  api.put('/api/identity/my-profile', body).then(({ data }) => data);
+  api.put('/api/account/my-profile', body).then(({ data }) => data);
 
 export const changePassword = body =>
-  api.post('/api/identity/my-profile/change-password', body).then(({ data }) => data);
+  api.post('/api/account/my-profile/change-password', body).then(({ data }) => data);

templates/app/react-native/src/components/AddIcon/AddIcon.js

@@ -0,0 +1,16 @@
+import { Ionicons } from '@expo/vector-icons';
+import { Icon } from 'native-base';
+import React from 'react';
+
+export default function AddIcon({ onPress, ...iconProps }) {
+  return (
+    <Icon
+      onPress={onPress}
+      as={Ionicons}
+      name={'add'}
+      size="7"
+      marginRight={-2}
+      {...iconProps}
+    />
+  );
+}

templates/app/react-native/src/components/AppContainer/AppContainer.js

@@ -1,88 +0,0 @@
-import { NavigationContainer } from '@react-navigation/native';
-import i18n from 'i18n-js';
-import { Root } from 'native-base';
-import PropTypes from 'prop-types';
-import React, { useEffect, useMemo } from 'react';
-import { Platform, StatusBar } from 'react-native';
-import { getEnvVars } from '../../../Environment';
-import { LocalizationContext } from '../../contexts/LocalizationContext';
-import AuthNavigator from '../../navigators/AuthNavigator';
-import DrawerNavigator from '../../navigators/DrawerNavigator';
-import AppActions from '../../store/actions/AppActions';
-import PersistentStorageActions from '../../store/actions/PersistentStorageActions';
-import { createLanguageSelector } from '../../store/selectors/AppSelectors';
-import { createTokenSelector } from '../../store/selectors/PersistentStorageSelectors';
-import { connectToRedux } from '../../utils/ReduxConnect';
-import { isTokenValid } from '../../utils/TokenUtils';
-import Loading from '../Loading/Loading';
-
-const { localization } = getEnvVars();
-
-i18n.defaultSeparator = '::';
-
-const cloneT = i18n.t;
-i18n.t = (key, ...args) => {
-  if (key.slice(0, 2) === '::') {
-    key = localization.defaultResourceName + key;
-  }
-  return cloneT(key, ...args);
-};
-
-function AppContainer({ language, fetchAppConfig, token, setToken }) {
-  const platform = Platform.OS;
-
-  const localizationContext = useMemo(
-    () => ({
-      t: i18n.t,
-      locale: (language || {}).cultureName,
-    }),
-    [language],
-  );
-
-  const isValid = useMemo(() => isTokenValid(token), [token]);
-
-  useEffect(() => {
-    if (!isValid && token && token.access_token) {
-      setToken({});
-    }
-  }, [isValid]);
-
-  useEffect(() => {
-    fetchAppConfig();
-  }, []);
-
-  return (
-    <>
-      <StatusBar barStyle={platform === 'ios' ? 'dark-content' : 'light-content'} />
-      <Root>
-        {language ? (
-          <LocalizationContext.Provider value={localizationContext}>
-            <NavigationContainer>
-              {isValid ? <DrawerNavigator /> : <AuthNavigator />}
-            </NavigationContainer>
-          </LocalizationContext.Provider>
-        ) : null}
-      </Root>
-      <Loading />
-    </>
-  );
-}
-
-AppContainer.propTypes = {
-  language: PropTypes.object,
-  token: PropTypes.object.isRequired,
-  fetchAppConfig: PropTypes.func.isRequired,
-  setToken: PropTypes.func.isRequired,
-};
-
-export default connectToRedux({
-  component: AppContainer,
-  stateProps: state => ({
-    language: createLanguageSelector()(state),
-    token: createTokenSelector()(state),
-  }),
-  dispatchProps: {
-    fetchAppConfig: AppActions.fetchAppConfigAsync,
-    setToken: PersistentStorageActions.setToken,
-  },
-});

templates/app/react-native/src/components/DataList/DataList.js

@@ -1,17 +1,16 @@
+import { Ionicons } from '@expo/vector-icons';
 import { useFocusEffect } from '@react-navigation/native';
 import i18n from 'i18n-js';
-import { connectStyle, Icon, Input, InputGroup, Item, List, Spinner, Text } from 'native-base';
+import { Box, Center, FlatList, Icon, Input, Spinner, Text } from 'native-base';
 import PropTypes from 'prop-types';
 import React, { forwardRef, useCallback, useEffect, useState } from 'react';
-import { RefreshControl, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import LoadingActions from '../../store/actions/LoadingActions';
-import { activeTheme } from '../../theme/variables';
 import { debounce } from '../../utils/Debounce';
 import { connectToRedux } from '../../utils/ReduxConnect';
 import LoadingButton from '../LoadingButton/LoadingButton';
 
 function DataList({
-  style,
   navigation,
   fetchFn,
   render,
@@ -44,56 +43,67 @@ function DataList({
     if (loading || records.length === totalCount) return;
 
     setButtonLoading(true);
-    fetch(skipCount + maxResultCount, false).finally(() => setButtonLoading(false));
+    fetch(skipCount + maxResultCount, false).finally(() =>
+      setButtonLoading(false)
+    );
   };
 
   useFocusEffect(
     useCallback(() => {
       setSkipCount(0);
       fetch(0, false);
-    }, []),
+    }, [])
   );
 
   useEffect(() => {
     function searchFetch() {
       setSearchLoading(true);
-      return fetch(0, false).finally(() => setTimeout(() => setSearchLoading(false), 150));
+      return fetch(0, false).finally(() =>
+        setTimeout(() => setSearchLoading(false), 150)
+      );
     }
     debounce(searchFetch, debounceTime)();
   }, [filter]);
 
   return (
-    <>
-      <Item placeholderLabel style={{ backgroundColor: '#fff' }}>
-        <InputGroup style={{ marginLeft: 10 }}>
-          <Input
-            placeholder={i18n.t('AbpUi::PagerSearch')}
-            style={{ padding: 0, margin: 0 }}
-            returnKeyType="done"
-            value={filter}
-            onChangeText={setFilter}
-          />
-          {searchLoading ? (
-            <View>
-              <Spinner style={style.spinner} color={style.spinner.color} />
-            </View>
-          ) : (
-            <Icon style={{ fontSize: 20, marginRight: 15 }} name="ios-search" />
-          )}
-        </InputGroup>
-      </Item>
-      <View style={style.container}>
-        <List
-          showsVerticalScrollIndicator
-          scrollEnabled
-          refreshControl={<RefreshControl refreshing={loading} onRefresh={fetch} />}
-          dataArray={records}
-          renderRow={(data, sectionID, rowId, ...args) => (
+    <Center>
+      <Box
+        w={{
+          base: '95%',
+        }}
+        mt="2"
+      >
+        <Input
+          placeholder={i18n.t('AbpUi::PagerSearch')}
+          style={{ padding: 0, margin: 0 }}
+          returnKeyType="done"
+          value={filter}
+          onChangeText={setFilter}
+          InputRightElement={
+            searchLoading ? (
+              <Spinner color="coolGray.500" marginRight={2} size="sm"/>
+            ) : (
+              <Icon as={Ionicons} name={'ios-search'} size="4" marginRight={2} color="coolGray.500" />
+            )
+          }
+        />
+        <FlatList
+          mt="2"
+          borderTopWidth="1"
+          borderTopColor="#e5e7eb"
+          data={records}
+          renderItem={(...args) => (
             <>
-              {render(data, sectionID, rowId, ...args)}
-              {rowId + 1 === skipCount + maxResultCount && totalCount > records.length ? (
-                <View style={{ justifyContent: 'center', alignItems: 'center' }}>
-                  <LoadingButton loading={buttonLoading} onPress={() => fetchPartial()}>
+              {render(...args)}
+              {args.index + 1 === skipCount + maxResultCount &&
+              totalCount > records.length ? (
+                <View
+                  style={{ justifyContent: 'center', alignItems: 'center' }}
+                >
+                  <LoadingButton
+                    loading={buttonLoading}
+                    onPress={() => fetchPartial()}
+                  >
                     <Text>{i18n.t('AbpUi::LoadMore')}</Text>
                   </LoadingButton>
                 </View>
@@ -102,14 +112,13 @@ function DataList({
           )}
           {...props}
         />
-      </View>
-    </>
+      </Box>
+    </Center>
   );
 }
 
 DataList.propTypes = {
-  ...List.propTypes,
-  style: PropTypes.any.isRequired,
+  ...FlatList.propTypes,
   fetchFn: PropTypes.func.isRequired,
   render: PropTypes.func.isRequired,
   maxResultCount: PropTypes.number,
@@ -119,19 +128,14 @@ DataList.propTypes = {
 const styles = StyleSheet.create({
   container: { flex: 1 },
   list: {},
-  spinner: {
-    transform: [{ scale: 0.5 }],
-    position: 'absolute',
-    right: 8,
-    top: -40,
-    color: activeTheme.brandInfo,
-  },
 });
 
-const Forwarded = forwardRef((props, ref) => <DataList {...props} forwardedRef={ref} />);
+const Forwarded = forwardRef((props, ref) => (
+  <DataList {...props} forwardedRef={ref} />
+));
 
 export default connectToRedux({
-  component: connectStyle('ABP.DataList', styles)(Forwarded),
+  component: Forwarded,
   dispatchProps: {
     startLoading: LoadingActions.start,
     stopLoading: LoadingActions.stop,

templates/app/react-native/src/components/DrawerContent/DrawerContent.js

@@ -1,73 +1,65 @@
-import { Text, View, List, ListItem, Left, Icon, Body } from 'native-base';
-import React from 'react';
-import { Image, StyleSheet } from 'react-native';
-import SafeAreaView from 'react-native-safe-area-view';
+import { Ionicons } from '@expo/vector-icons';
+import Constants from 'expo-constants';
 import i18n from 'i18n-js';
+import { List, Text, View } from 'native-base';
 import PropTypes from 'prop-types';
-import Constants from 'expo-constants';
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { withPermission } from '../../hocs/PermissionHOC';
 
 const screens = {
-  Home: { label: '::Menu:Home', iconName: 'home' },
-  Users: {
+  HomeStack: { label: '::Menu:Home', iconName: 'home' },
+  UsersStack: {
     label: 'AbpIdentity::Users',
-    iconName: 'contacts',
+    iconName: 'people',
     requiredPolicy: 'AbpIdentity.Users',
   },
-  Tenants: {
+  TenantsStack: {
     label: 'AbpTenantManagement::Tenants',
-    iconName: 'people',
+    iconName: 'book-outline',
     requiredPolicy: 'AbpTenantManagement.Tenants',
   },
-  Settings: { label: 'AbpSettingManagement::Settings', iconName: 'cog' },
+  SettingsStack: { label: 'AbpSettingManagement::Settings', iconName: 'cog' },
 };
 
-const ListItemWithPermission = withPermission(ListItem);
+const ListItemWithPermission = withPermission(List.Item);
 
-function DrawerContent({ navigation, state: { routeNames, index: currentScreenIndex } }) {
-  const navigate = screen => {
+function DrawerContent({
+  navigation,
+  state: { routeNames, index: currentScreenIndex },
+}) {
+  const navigate = (screen) => {
     navigation.navigate(screen);
     navigation.closeDrawer();
   };
 
   return (
     <View style={styles.container}>
-      <SafeAreaView style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>
+      <SafeAreaView
+        style={styles.container}
+        forceInset={{ top: 'always', horizontal: 'never' }}
+      >
         <View style={styles.headerView}>
-          <Image style={styles.logo} source={require('../../../assets/logo.png')} />
+          <Image
+            style={styles.logo}
+            source={require('../../../assets/logo.png')}
+          />
         </View>
-        <List
-          dataArray={routeNames}
-          keyExtractor={item => item}
-          renderRow={name => (
+        <List my={2} py={0}>
+          {routeNames.map((name) => (
             <ListItemWithPermission
-              icon
               key={name}
               policyKey={screens[name].requiredPolicy}
-              selected={name === routeNames[currentScreenIndex]}
+              bg={name === routeNames[currentScreenIndex] ? 'primary.400': 'transparent'}
               onPress={() => navigate(name)}
-              style={{
-                ...styles.navItem,
-                backgroundColor: name === routeNames[currentScreenIndex] ? '#38003c' : '#f2f2f2',
-              }}>
-              <Left>
-                <Icon
-                  dark={name !== routeNames[currentScreenIndex]}
-                  light={name === routeNames[currentScreenIndex]}
-                  name={screens[name].iconName}
-                />
-              </Left>
-              <Body style={{ borderBottomWidth: 0 }}>
-                <Text
-                  style={{
-                    color: name === routeNames[currentScreenIndex] ? '#fff' : '#000',
-                  }}>
-                  {i18n.t(screens[name].label)}
-                </Text>
-              </Body>
+              my="0"
+            >
+              <List.Icon as={Ionicons} name={screens[name].iconName} size="7"/>
+              {i18n.t(screens[name].label)}
             </ListItemWithPermission>
-          )}
-        />
+          ))}
+        </List>
       </SafeAreaView>
       <View style={styles.footer}>
         <Text note style={styles.copyRight}>
@@ -90,17 +82,8 @@ const styles = StyleSheet.create({
     marginBottom: 15,
   },
   headerView: {
-    borderBottomWidth: 1,
-    borderColor: '#eee',
     alignItems: 'center',
   },
-  navItem: {
-    marginLeft: 0,
-    marginBottom: 3,
-    paddingLeft: 10,
-    width: '100%',
-    backgroundColor: '#f2f2f2',
-  },
   footer: {
     backgroundColor: '#eee',
     flexDirection: 'row',

templates/app/react-native/src/components/FormButtons/FormButtons.js

@@ -1,11 +1,10 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import { Button, Text, connectStyle } from 'native-base';
-import { View, StyleSheet, Alert } from 'react-native';
 import i18n from 'i18n-js';
+import { Button, Text } from 'native-base';
+import PropTypes from 'prop-types';
+import React, { forwardRef } from 'react';
+import { Alert, StyleSheet, View } from 'react-native';
 
 function FormButtons({
-  style,
   submit,
   remove,
   removeMessage,
@@ -30,11 +29,10 @@ function FormButtons({
   };
 
   return (
-    <View style={style.container}>
+    <View style={styles.container}>
       {isShowRemove ? (
         <Button
-          abpButton
-          danger
+          bg="danger.500"
           style={{ flex: 1, borderRadius: 0 }}
           onPress={() => confirmation()}
           disabled={isRemoveDisabled}>
@@ -43,8 +41,6 @@ function FormButtons({
       ) : null}
       {isShowSubmit ? (
         <Button
-          abpButton
-          primary
           style={{ flex: 1, borderRadius: 0 }}
           onPress={submit}
           disabled={isSubmitDisabled}>
@@ -79,4 +75,4 @@ const styles = StyleSheet.create({
 
 const Forwarded = forwardRef((props, ref) => <FormButtons {...props} forwardedRef={ref} />);
 
-export default connectStyle('ABP.FormButtons', styles)(Forwarded);
+export default Forwarded;

templates/app/react-native/src/components/FormButtons/index.js

@@ -0,0 +1 @@
+export { default as FormButtons } from './FormButtons';

templates/app/react-native/src/components/HamburgerIcon/HamburgerIcon.js

@@ -0,0 +1,17 @@
+import { Ionicons } from '@expo/vector-icons';
+import { Icon } from 'native-base';
+import React from 'react';
+import { Platform } from 'react-native';
+
+export default function HamburgerIcon({ navigation, ...iconProps }) {
+  return (
+    <Icon
+      onPress={() => navigation.openDrawer()}
+      as={Ionicons}
+      name={Platform.OS ? 'ios-menu' : 'md-menu'}
+      size="8"
+      marginLeft={2}
+      {...iconProps}
+    />
+  );
+}

templates/app/react-native/src/components/Loading/Loading.js

@@ -1,24 +1,23 @@
+import { Spinner, View } from 'native-base';
+import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';
-import { Spinner, View, connectStyle } from 'native-base';
 import { StyleSheet } from 'react-native';
-import PropTypes from 'prop-types';
-import { activeTheme } from '../../theme/variables';
-import { connectToRedux } from '../../utils/ReduxConnect';
 import {
   createLoadingSelector,
-  createOpacitySelector,
+  createOpacitySelector
 } from '../../store/selectors/LoadingSelectors';
+import { connectToRedux } from '../../utils/ReduxConnect';
 
-function Loading({ style, loading, opacity }) {
+function Loading({ loading, opacity }) {
   return loading ? (
-    <View style={style.container}>
+    <View style={styles.container}>
       <View
         style={{
-          ...style.backdrop,
+          ...styles.backdrop,
           opacity: opacity || 0.6,
         }}
       />
-      <Spinner style={style.spinner} color={style.spinner.color} />
+      <Spinner style={styles.spinner} color={styles.spinner.color} />
     </View>
   ) : null;
 }
@@ -37,13 +36,13 @@ export const styles = StyleSheet.create({
   container: {
     ...backdropStyle,
     backgroundColor: 'transparent',
-    zIndex: activeTheme.zIndex.indicator,
+    // zIndex: activeTheme.zIndex.indicator, // TODO
     alignItems: 'center',
     justifyContent: 'center',
   },
   backdrop: backdropStyle,
   spinner: {
-    color: activeTheme.brandPrimary,
+    // color: activeTheme.brandPrimary, // TODO
     fontSize: 100,
   },
 });
@@ -55,7 +54,7 @@ Loading.propTypes = {
 };
 
 export default connectToRedux({
-  component: connectStyle('ABP.Loading', styles)(Forwarded),
+  component: Forwarded,
   stateProps: state => ({
     loading: createLoadingSelector()(state),
     opacity: createOpacitySelector()(state),

templates/app/react-native/src/components/LoadingButton/LoadingButton.js

@@ -1,13 +1,13 @@
-import { Button, connectStyle, Spinner } from 'native-base';
+import { Button, Spinner } from 'native-base';
 import PropTypes from 'prop-types';
-import React, { forwardRef } from 'react';
+import React from 'react';
 import { StyleSheet } from 'react-native';
 
-function LoadingButton({ loading = false, style, children, ...props }) {
+export default function LoadingButton({ loading = false, style, children, ...props }) {
   return (
-    <Button style={style.button} {...props}>
+    <Button style={styles.button} {...props}>
       {children}
-      {loading ? <Spinner style={style.spinner} color={style.spinner.color || 'white'} /> : null}
+      {loading ? <Spinner /> : null}
     </Button>
   );
 }
@@ -19,13 +19,4 @@ LoadingButton.propTypes = {
 
 const styles = StyleSheet.create({
   button: { marginTop: 20, marginBottom: 30, height: 30 },
-  spinner: {
-    transform: [{ scale: 0.5 }],
-    color: 'white',
-    marginRight: 5,
-  },
-});
-
-const Forwarded = forwardRef((props, ref) => <LoadingButton {...props} forwardedRef={ref} />);
-
-export default connectStyle('ABP.LoadingButton', styles)(Forwarded);
+});

templates/app/react-native/src/components/MenuIcon/MenuIcon.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import { TouchableOpacity } from 'react-native';
-import { Icon } from 'native-base';
-import PropTypes from 'prop-types';
-
-function MenuIcon({ onPress, iconName = 'menu' }) {
-  return (
-    <TouchableOpacity onPress={onPress}>
-      <Icon navElement name={iconName} />
-    </TouchableOpacity>
-  );
-}
-
-MenuIcon.propTypes = {
-  onPress: PropTypes.func.isRequired,
-  iconName: PropTypes.string,
-};
-
-export default MenuIcon;

templates/app/react-native/src/components/TenantBox/TenantBox.js

@@ -1,23 +1,19 @@
 import i18n from 'i18n-js';
-import {
-  Button,
-  connectStyle,
-  Content,
-  Input,
-  InputGroup,
-  Label,
-  Segment,
-  Text,
-} from 'native-base';
+import { Box, Button, FormControl, Input, Text } from 'native-base';
 import PropTypes from 'prop-types';
 import React, { forwardRef, useState } from 'react';
-import { StyleSheet, View, Alert } from 'react-native';
+import { Alert, StyleSheet, View } from 'react-native';
 import { getTenant } from '../../api/AccountAPI';
 import PersistentStorageActions from '../../store/actions/PersistentStorageActions';
-import { connectToRedux } from '../../utils/ReduxConnect';
 import { createTenantSelector } from '../../store/selectors/PersistentStorageSelectors';
+import { connectToRedux } from '../../utils/ReduxConnect';
 
-function TenantBox({ style, tenant = {}, setTenant, showTenantSelection, toggleTenantSelection }) {
+function TenantBox({
+  tenant = {},
+  setTenant,
+  showTenantSelection,
+  toggleTenantSelection,
+}) {
   const [tenantName, setTenantName] = useState(tenant.name);
 
   const findTenant = () => {
@@ -34,7 +30,7 @@ function TenantBox({ style, tenant = {}, setTenant, showTenantSelection, toggleT
           i18n.t('AbpUiMultiTenancy::GivenTenantIsNotAvailable', {
             0: tenantName,
           }),
-          [{ text: i18n.t('AbpUi::Ok') }],
+          [{ text: i18n.t('AbpUi::Ok') }]
         );
         return;
       }
@@ -45,42 +41,74 @@ function TenantBox({ style, tenant = {}, setTenant, showTenantSelection, toggleT
 
   return (
     <>
-      <Segment style={style.container}>
-        <View>
-          <Text style={style.title}>{i18n.t('AbpUiMultiTenancy::Tenant')}</Text>
-          <Text style={style.tenant}>
-            {tenant.name ? tenant.name : i18n.t('AbpUiMultiTenancy::NotSelected')}
+      <Box
+        mb="5"
+        px="4"
+        w={{
+          base: '100%',
+        }}
+        style={{ flexDirection: 'row' }}
+      >
+        <View style={{ flex: 1 }}>
+          <Text style={styles.title}>
+            {i18n.t('AbpUiMultiTenancy::Tenant')}
+          </Text>
+          <Text style={styles.tenant}>
+            {tenant.name
+              ? tenant.name
+              : i18n.t('AbpUiMultiTenancy::NotSelected')}
           </Text>
         </View>
         <Button
-          style={{ ...style.switchButton, display: !showTenantSelection ? 'flex' : 'none' }}
-          onPress={() => toggleTenantSelection()}>
-          <Text style={{ color: '#fff' }}>{i18n.t('AbpUiMultiTenancy::Switch')}</Text>
+          style={{
+            display: !showTenantSelection ? 'flex' : 'none',
+          }}
+          onPress={() => toggleTenantSelection()}
+        >
+            {i18n.t('AbpUiMultiTenancy::Switch')}
         </Button>
-      </Segment>
+      </Box>
       {showTenantSelection ? (
-        <Content px20 style={{ flex: 1 }}>
-          <InputGroup abpInputGroup>
-            <Label abpLabel>{i18n.t('AbpUiMultiTenancy::Name')}</Label>
-            <Input abpInput value={tenantName} onChangeText={setTenantName} autoCapitalize = 'none'/>
-          </InputGroup>
-          <Text style={style.hint}>{i18n.t('AbpUiMultiTenancy::SwitchTenantHint')}</Text>
-          <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-            <Button abpButton light style={style.button} onPress={() => toggleTenantSelection()}>
-              <Text>{i18n.t('AbpAccount::Cancel')}</Text>
+        <Box
+          px="3"
+          w={{
+            base: '100%',
+          }}
+        >
+          <FormControl my="2" width={350}>
+            <FormControl.Label>
+              {i18n.t('AbpUiMultiTenancy::Name')}
+            </FormControl.Label>
+            <Input
+              autoCapitalize="none"
+              value={tenantName}
+              onChangeText={setTenantName}
+            />
+          </FormControl>
+          <Text style={styles.hint}>
+            {i18n.t('AbpUiMultiTenancy::SwitchTenantHint')}
+          </Text>
+          <View
+            style={{ flexDirection: 'row', justifyContent: 'space-between' }}
+          >
+            <Button
+              style={styles.button}
+              onPress={() => toggleTenantSelection()}
+              variant="outline"
+            >
+              {i18n.t('AbpAccount::Cancel')}
             </Button>
-            <Button abpButton style={style.button} onPress={() => findTenant()}>
-              <Text>{i18n.t('AbpAccount::Save')}</Text>
+            <Button style={styles.button} onPress={() => findTenant()}>
+              {i18n.t('AbpAccount::Save')}
             </Button>
           </View>
-        </Content>
+        </Box>
       ) : null}
     </>
   );
 }
 
 TenantBox.propTypes = {
-  style: PropTypes.any.isRequired,
   setTenant: PropTypes.func.isRequired,
   showTenantSelection: PropTypes.bool.isRequired,
   toggleTenantSelection: PropTypes.func.isRequired,
@@ -88,26 +116,11 @@ TenantBox.propTypes = {
 };
 
 const styles = StyleSheet.create({
-  container: {
-    paddingHorizontal: 20,
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    height: 70,
-  },
   button: { marginTop: 20, width: '49%' },
-  switchButton: {
-    borderTopWidth: 0,
-    borderRightWidth: 0,
-    borderBottomWidth: 0,
-    borderLeftWidth: 0,
-    borderRadius: 10,
-    backgroundColor: '#38003c',
-    height: 35,
-  },
+
   tenant: { color: '#777' },
   title: {
     marginRight: 10,
-    color: '#777',
     fontSize: 13,
     fontWeight: '600',
     textTransform: 'uppercase',
@@ -115,14 +128,16 @@ const styles = StyleSheet.create({
   hint: { color: '#bbb', textAlign: 'left' },
 });
 
-const Forwarded = forwardRef((props, ref) => <TenantBox {...props} forwardedRef={ref} />);
+const Forwarded = forwardRef((props, ref) => (
+  <TenantBox {...props} forwardedRef={ref} />
+));
 
 export default connectToRedux({
-  component: connectStyle('ABP.TenantBox', styles)(Forwarded),
+  component: Forwarded,
   dispatchProps: {
     setTenant: PersistentStorageActions.setTenant,
   },
-  stateProps: state => ({
+  stateProps: (state) => ({
     tenant: createTenantSelector()(state),
   }),
 });

templates/app/react-native/src/components/ValidationMessage/ValidationMessage.js

@@ -1,18 +1,16 @@
 import i18n from 'i18n-js';
-import { connectStyle } from 'native-base';
 import React, { forwardRef } from 'react';
 import { Text } from 'react-native';
 
 const ValidationMessage = ({ children, ...props }) =>
-  children ? <Text {...props}>{i18n.t(children)}</Text> : null;
+  children ? <Text style={styles} {...props}>{i18n.t(children)}</Text> : null;
 
 const styles = {
   fontSize: 12,
-  marginHorizontal: 10,
-  marginTop: -5,
+  marginTop: 3,
   color: '#ed2f2f',
 };
 
 const Forwarded = forwardRef((props, ref) => <ValidationMessage {...props} forwardedRef={ref} />);
 
-export default connectStyle('ABP.ValidationMessage', styles)(Forwarded);
+export default Forwarded

templates/app/react-native/src/interceptors/APIInterceptor.js

@@ -1,8 +1,8 @@
-import { Toast } from 'native-base';
 import i18n from 'i18n-js';
+import { Toast } from 'native-base';
 import api from '../api/API';
-import PersistentStorageActions from '../store/actions/PersistentStorageActions';
 import LoadingActions from '../store/actions/LoadingActions';
+import PersistentStorageActions from '../store/actions/PersistentStorageActions';
 
 export function initAPIInterceptor(store) {
   api.interceptors.request.use(
@@ -45,11 +45,10 @@ export function initAPIInterceptor(store) {
         showError({ error: errorRes.data.error || {}, status: errorRes.status });
       } else {
         Toast.show({
-          text: 'An unexpected error has occurred',
-          buttonText: 'x',
+          title: 'An unexpected error has occurred',
+          isClosable: true,
           duration: 10000,
-          type: 'danger',
-          textStyle: { textAlign: 'center' },
+          backgroundColor: 'danger.500',
         });
       }
 
@@ -93,10 +92,9 @@ function showError({ error = {}, status }) {
   }
 
   Toast.show({
-    text: `${title}\n${message}`,
-    buttonText: 'x',
+    title: `${title}\n${message}`,
+    isClosable: true,
     duration: 10000,
-    type: 'danger',
-    textStyle: { textAlign: 'center' },
+    backgroundColor: 'danger.500',
   });
 }

templates/app/react-native/src/navigators/AuthNavigator.js

@@ -1,15 +1,15 @@
-import { createStackNavigator } from '@react-navigation/stack';
-import React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import React, { useContext } from 'react';
 import { LocalizationContext } from '../contexts/LocalizationContext';
 import LoginScreen from '../screens/Login/LoginScreen';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
-export default function AuthStackNavigator() {
-  const { t } = React.useContext(LocalizationContext);
+export default function AuthNavigator() {
+  const {t} = useContext(LocalizationContext);
 
   return (
-    <Stack.Navigator initialRouteName="Login">
+    <Stack.Navigator>
       <Stack.Screen
         name="Login"
         component={LoginScreen}

templates/app/react-native/src/navigators/DrawerNavigator.js

@@ -1,20 +1,43 @@
-import React from 'react';
 import { createDrawerNavigator } from '@react-navigation/drawer';
+import React from 'react';
+import DrawerContent from '../components/DrawerContent/DrawerContent';
+import HamburgerIcon from '../components/HamburgerIcon/HamburgerIcon';
+import { LocalizationContext } from '../contexts/LocalizationContext';
 import HomeStackNavigator from './HomeNavigator';
 import SettingsStackNavigator from './SettingsNavigator';
-import UsersStackNavigator from './UsersNavigator';
 import TenantsStackNavigator from './TenantsNavigator';
-import DrawerContent from '../components/DrawerContent/DrawerContent';
+import UsersStackNavigator from './UsersNavigator';
 
 const Drawer = createDrawerNavigator();
 
 export default function DrawerNavigator() {
+  const { t } = React.useContext(LocalizationContext);
+
   return (
     <Drawer.Navigator initialRouteName="Home" drawerContent={DrawerContent}>
-      <Drawer.Screen name="Home" component={HomeStackNavigator} />
-      <Drawer.Screen name="Users" component={UsersStackNavigator} />
-      <Drawer.Screen name="Tenants" component={TenantsStackNavigator} />
-      <Drawer.Screen name="Settings" component={SettingsStackNavigator} />
+      <Drawer.Screen
+        name="HomeStack"
+        component={HomeStackNavigator}
+        options={({ navigation }) => ({
+          title: t('::Menu:Home'),
+          headerLeft: () => <HamburgerIcon navigation={navigation} />,
+        })}
+      />
+      <Drawer.Screen
+        name="TenantsStack"
+        component={TenantsStackNavigator}
+        options={{ header: () => null }}
+      />
+      <Drawer.Screen
+        name="UsersStack"
+        component={UsersStackNavigator}
+        options={{ header: () => null }}
+      />
+      <Drawer.Screen
+        name="SettingsStack"
+        component={SettingsStackNavigator}
+        options={{ header: () => null }}
+      />
     </Drawer.Navigator>
   );
 }

templates/app/react-native/src/navigators/HomeNavigator.js

@@ -1,23 +1,16 @@
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React from 'react';
-import { createStackNavigator } from '@react-navigation/stack';
 import HomeScreen from '../screens/Home/HomeScreen';
-import MenuIcon from '../components/MenuIcon/MenuIcon';
-import { LocalizationContext } from '../contexts/LocalizationContext';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 export default function HomeStackNavigator() {
-  const { t } = React.useContext(LocalizationContext);
-
   return (
     <Stack.Navigator initialRouteName="Home">
       <Stack.Screen
         name="Home"
         component={HomeScreen}
-        options={({ navigation }) => ({
-          headerLeft: () => <MenuIcon onPress={() => navigation.openDrawer()} />,
-          title: t('::Menu:Home'),
-        })}
+        options={{header: () => null}}
       />
     </Stack.Navigator>
   );

templates/app/react-native/src/navigators/SettingsNavigator.js

@@ -1,13 +1,13 @@
-import React from 'react';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import i18n from 'i18n-js';
-import SettingsScreen from '../screens/Settings/SettingsScreen';
+import React from 'react';
+import HamburgerIcon from '../components/HamburgerIcon/HamburgerIcon';
+import { LocalizationContext } from '../contexts/LocalizationContext';
 import ChangePasswordScreen from '../screens/ChangePassword/ChangePasswordScreen';
 import ManageProfileScreen from '../screens/ManageProfile/ManageProfileScreen';
-import MenuIcon from '../components/MenuIcon/MenuIcon';
-import { LocalizationContext } from '../contexts/LocalizationContext';
+import SettingsScreen from '../screens/Settings/SettingsScreen';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 export default function SettingsStackNavigator() {
   const { t } = React.useContext(LocalizationContext);
@@ -18,7 +18,7 @@ export default function SettingsStackNavigator() {
         name="Settings"
         component={SettingsScreen}
         options={({ navigation }) => ({
-          headerLeft: () => <MenuIcon onPress={() => navigation.openDrawer()} />,
+          headerLeft: () => <HamburgerIcon navigation={navigation} marginLeft={-3} />,
           title: t('AbpSettingManagement::Settings'),
         })}
       />

templates/app/react-native/src/navigators/TenantsNavigator.js

@@ -1,11 +1,13 @@
+
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React from 'react';
-import { createStackNavigator } from '@react-navigation/stack';
-import TenantsScreen from '../screens/Tenants/TenantsScreen';
-import CreateUpdateTenantScreen from '../screens/CreateUpdateTenant/CreateUpdateTenantScreen';
-import MenuIcon from '../components/MenuIcon/MenuIcon';
+import AddIcon from '../components/AddIcon/AddIcon';
+import HamburgerIcon from '../components/HamburgerIcon/HamburgerIcon';
 import { LocalizationContext } from '../contexts/LocalizationContext';
+import CreateUpdateTenantScreen from '../screens/CreateUpdateTenant/CreateUpdateTenantScreen';
+import TenantsScreen from '../screens/Tenants/TenantsScreen';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 export default function TenantsStackNavigator() {
   const { t } = React.useContext(LocalizationContext);
@@ -16,17 +18,16 @@ export default function TenantsStackNavigator() {
         name="Tenants"
         component={TenantsScreen}
         options={({ navigation }) => ({
-          headerLeft: () => <MenuIcon onPress={() => navigation.openDrawer()} />,
           title: t('AbpTenantManagement::Tenants'),
+          headerLeft: () => <HamburgerIcon navigation={navigation} marginLeft={-3} />,
+          headerRight: () => <AddIcon onPress={() => navigation.navigate('CreateUpdateTenant')}/>,
         })}
       />
       <Stack.Screen
         name="CreateUpdateTenant"
         component={CreateUpdateTenantScreen}
         options={({ route }) => ({
-          title: t(
-            route.params?.tenantId ? 'AbpTenantManagement::Edit' : 'AbpTenantManagement::NewTenant',
-          ),
+          title: t(route.params?.tenantId ? 'AbpTenantManagement::Edit' : 'AbpTenantManagement::NewTenant'),
         })}
       />
     </Stack.Navigator>

templates/app/react-native/src/navigators/UsersNavigator.js

@@ -1,11 +1,12 @@
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React from 'react';
-import { createStackNavigator } from '@react-navigation/stack';
-import UsersScreen from '../screens/Users/UsersScreen';
-import CreateUpdateUserScreen from '../screens/CreateUpdateUser/CreateUpdateUserScreen';
-import MenuIcon from '../components/MenuIcon/MenuIcon';
+import AddIcon from '../components/AddIcon/AddIcon';
+import HamburgerIcon from '../components/HamburgerIcon/HamburgerIcon';
 import { LocalizationContext } from '../contexts/LocalizationContext';
+import CreateUpdateUserScreen from '../screens/CreateUpdateUser/CreateUpdateUserScreen';
+import UsersScreen from '../screens/Users/UsersScreen';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 export default function UsersStackNavigator() {
   const { t } = React.useContext(LocalizationContext);
@@ -16,8 +17,9 @@ export default function UsersStackNavigator() {
         name="Users"
         component={UsersScreen}
         options={({ navigation }) => ({
-          headerLeft: () => <MenuIcon onPress={() => navigation.openDrawer()} />,
           title: t('AbpIdentity::Users'),
+          headerLeft: () => <HamburgerIcon navigation={navigation} marginLeft={-3} />,
+          headerRight: () => <AddIcon onPress={() => navigation.navigate('CreateUpdateUser')}/>,
         })}
       />
       <Stack.Screen

templates/app/react-native/src/screens/ChangePassword/ChangePasswordForm.js

@@ -1,11 +1,19 @@
-import { Formik } from 'formik';
+import { useFormik } from 'formik';
 import i18n from 'i18n-js';
-import { Container, Content, Form, Input, InputGroup, Item, Icon, Label } from 'native-base';
+import {
+  Box,
+  FormControl,
+  Input,
+  KeyboardAvoidingView,
+  Stack,
+  Icon
+} from 'native-base';
 import PropTypes from 'prop-types';
 import React, { useRef, useState } from 'react';
 import * as Yup from 'yup';
-import FormButtons from '../../components/FormButtons/FormButtons';
+import { FormButtons } from '../../components/FormButtons';
 import ValidationMessage from '../../components/ValidationMessage/ValidationMessage';
+import { Ionicons } from '@expo/vector-icons';
 
 const ValidationSchema = Yup.object().shape({
   currentPassword: Yup.string().required('AbpAccount::ThisFieldIsRequired.'),
@@ -19,75 +27,89 @@ function ChangePasswordForm({ submit, cancel }) {
   const currentPasswordRef = useRef();
   const newPasswordRef = useRef();
 
-  const onSubmit = values => {
+  const onSubmit = (values) => {
     submit({
       ...values,
       newPasswordConfirm: values.newPassword,
     });
   };
 
+  const formik = useFormik({
+    enableReinitialize: true,
+    validationSchema: ValidationSchema,
+    initialValues: {
+      currentPassword: '',
+      newPassword: '',
+    },
+    onSubmit,
+  });
+
   return (
-    <Formik
-      enableReinitialize
-      validationSchema={ValidationSchema}
-      initialValues={{
-        currentPassword: '',
-        newPassword: '',
-      }}
-      onSubmit={values => onSubmit(values)}>
-      {({ handleChange, handleBlur, handleSubmit, values, errors, isValid }) => (
-        <>
-          <Container>
-            <Content px20>
-              <Form>
-                <InputGroup abpInputGroup>
-                  <Label abpLabel>{i18n.t('AbpIdentity::DisplayName:CurrentPassword')}</Label>
-                  <Item abpInput>
-                    <Input
-                      ref={currentPasswordRef}
-                      onSubmitEditing={() => newPasswordRef.current._root.focus()}
-                      returnKeyType="next"
-                      onChangeText={handleChange('currentPassword')}
-                      onBlur={handleBlur('currentPassword')}
-                      value={values.currentPassword}
-                      textContentType="password"
-                      secureTextEntry={!showCurrentPassword}
-                    />
-                    <Icon
-                      active
-                      name={showCurrentPassword ? 'eye-off' : 'eye'}
-                      onPress={() => setShowCurrentPassword(!showCurrentPassword)}
-                    />
-                  </Item>
-                </InputGroup>
-                <ValidationMessage>{errors.currentPassword}</ValidationMessage>
-                <InputGroup abpInputGroup>
-                  <Label abpLabel>{i18n.t('AbpIdentity::DisplayName:NewPassword')}</Label>
-                  <Item abpInput>
-                    <Input
-                      ref={newPasswordRef}
-                      returnKeyType="done"
-                      onSubmitEditing={handleSubmit}
-                      onChangeText={handleChange('newPassword')}
-                      onBlur={handleBlur('newPassword')}
-                      value={values.newPassword}
-                      textContentType="newPassword"
-                      secureTextEntry={!showNewPassword}
-                    />
-                    <Icon
-                      name={showNewPassword ? 'eye-off' : 'eye'}
-                      onPress={() => setShowNewPassword(!showNewPassword)}
-                    />
-                  </Item>
-                </InputGroup>
-                <ValidationMessage>{errors.newPassword}</ValidationMessage>
-              </Form>
-            </Content>
-          </Container>
-          <FormButtons submit={handleSubmit} cancel={cancel} isSubmitDisabled={!isValid} />
-        </>
-      )}
-    </Formik>
+    <>
+      <Box px="3">
+        <FormControl isRequired my="2">
+          <Stack mx="4">
+            <FormControl.Label>
+              {i18n.t('AbpIdentity::DisplayName:CurrentPassword')}
+            </FormControl.Label>
+            <Input
+              ref={currentPasswordRef}
+              onSubmitEditing={() => newPasswordRef?.current?.focus()}
+              returnKeyType="next"
+              onChangeText={formik.handleChange('currentPassword')}
+              onBlur={formik.handleBlur('currentPassword')}
+              value={formik.values.currentPassword}
+              textContentType="password"
+              secureTextEntry={!showCurrentPassword}
+              InputRightElement={
+                <Icon
+                  as={Ionicons}
+                  size="5"
+                  mr="2"
+                  name={showCurrentPassword ? 'eye-off-outline' : 'eye-outline'}
+                  onPress={() => setShowCurrentPassword(!showCurrentPassword)}
+                />
+              }
+            />
+            <ValidationMessage>
+              {formik.errors.currentPassword}
+            </ValidationMessage>
+          </Stack>
+        </FormControl>
+
+        <FormControl isRequired my="2">
+          <Stack mx="4">
+            <FormControl.Label>
+              {i18n.t('AbpIdentity::DisplayName:NewPassword')}
+            </FormControl.Label>
+            <Input
+              ref={newPasswordRef}
+              returnKeyType="done"
+              onChangeText={formik.handleChange('newPassword')}
+              onBlur={formik.handleBlur('newPassword')}
+              value={formik.values.newPassword}
+              textContentType="newPassword"
+              secureTextEntry={!showNewPassword}
+              InputRightElement={
+                <Icon
+                  as={Ionicons}
+                  size="5"
+                  mr="2"
+                  name={showNewPassword ? 'eye-off-outline' : 'eye-outline'}
+                  onPress={() => setShowNewPassword(!showNewPassword)}
+                />
+              }
+            />
+            <ValidationMessage>{formik.errors.newPassword}</ValidationMessage>
+          </Stack>
+        </FormControl>
+      </Box>
+      <FormButtons
+        submit={formik.handleSubmit}
+        cancel={cancel}
+        isSubmitDisabled={!formik.isValid}
+      />
+    </>
   );
 }
 

templates/app/react-native/src/screens/CreateUpdateTenant/CreateUpdateTenantForm.js

@@ -1,11 +1,11 @@
-import { Formik } from 'formik';
+import { Ionicons } from '@expo/vector-icons';
+import { useFormik } from 'formik';
 import i18n from 'i18n-js';
-import { Container, Content, Input, InputGroup, Label, Item, Icon } from 'native-base';
+import { Box, FormControl, Icon, Input, Stack } from 'native-base';
 import PropTypes from 'prop-types';
 import React, { useRef, useState } from 'react';
-import { StyleSheet } from 'react-native';
 import * as Yup from 'yup';
-import FormButtons from '../../components/FormButtons/FormButtons';
+import { FormButtons } from '../../components/FormButtons';
 import ValidationMessage from '../../components/ValidationMessage/ValidationMessage';
 import { usePermission } from '../../hooks/UsePermission';
 
@@ -21,13 +21,6 @@ function CreateUpdateTenantForm({ editingTenant = {}, submit, remove }) {
   const [showAdminPassword, setShowAdminPassword] = useState(false);
   const hasRemovePermission = usePermission('AbpTenantManagement.Tenants.Delete');
 
-  const onSubmit = values => {
-    submit({
-      ...editingTenant,
-      ...values,
-    });
-  };
-
   const adminEmailAddressValidation = Yup.lazy(() =>
     Yup.string()
       .required('AbpAccount::ThisFieldIsRequired.')
@@ -38,95 +31,107 @@ function CreateUpdateTenantForm({ editingTenant = {}, submit, remove }) {
     Yup.string().required('AbpAccount::ThisFieldIsRequired.'),
   );
 
+  const onSubmit = values => {
+    submit({
+      ...editingTenant,
+      ...values,
+    });
+  };
+
+  const formik = useFormik({
+    enableReinitialize: true,
+    validationSchema: Yup.object().shape({
+      ...validations,
+      ...(!editingTenant.id && {
+        adminEmailAddress: adminEmailAddressValidation,
+        adminPassword: adminPasswordValidation,
+      }),
+    }),
+    initialValues: {
+      lockoutEnabled: false,
+      twoFactorEnabled: false,
+      ...editingTenant,
+    },
+    onSubmit,
+  });
+
   return (
-    <Formik
-      enableReinitialize
-      validationSchema={Yup.object().shape({
-        ...validations,
-        ...(!editingTenant.id && {
-          adminEmailAddress: adminEmailAddressValidation,
-          adminPassword: adminPasswordValidation,
-        }),
-      })}
-      initialValues={{
-        ...editingTenant,
-      }}
-      onSubmit={values => onSubmit(values)}>
-      {({ handleChange, handleBlur, handleSubmit, values, errors, isValid }) => (
-        <>
-          <Container style={styles.container}>
-            <Content px20>
-              <InputGroup abpInputGroup>
-                <Label abpLabel>{i18n.t('AbpTenantManagement::TenantName')}</Label>
+    <>
+      <Box w={{ base: '100%' }} px="3">
+        <FormControl isRequired my="2">
+          <Stack mx="4">
+            <FormControl.Label>{i18n.t('AbpTenantManagement::TenantName')}</FormControl.Label>
+            <Input
+              ref={tenantNameRef}
+              onChangeText={formik.handleChange('name')}
+              onBlur={formik.handleBlur('name')}
+              value={formik.values.name}
+              autoCapitalize="none"
+              returnKeyType="next"
+            />
+            <ValidationMessage>{formik.errors.name}</ValidationMessage>
+          </Stack>
+        </FormControl>
+
+        {!editingTenant.id ? (
+          <>
+            <FormControl isRequired my="2">
+              <Stack mx="4">
+                <FormControl.Label>
+                  {i18n.t('AbpTenantManagement::DisplayName:AdminEmailAddress')}
+                </FormControl.Label>
                 <Input
-                  abpInput
-                  ref={tenantNameRef}
-                  onSubmitEditing={() =>
-                    !editingTenant.id ? adminEmailRef.current._root.focus() : null
-                  }
-                  returnKeyType={!editingTenant.id ? 'next' : 'done'}
-                  onChangeText={handleChange('name')}
-                  onBlur={handleBlur('name')}
-                  value={values.name}
-                  autoCapitalize = 'none'
+                  ref={adminEmailRef}
+                  onChangeText={formik.handleChange('adminEmailAddress')}
+                  onBlur={formik.handleBlur('adminEmailAddress')}
+                  value={formik.values.adminEmailAddress}
+                  autoCapitalize="none"
+                  onSubmitEditing={() => adminPasswordRef?.current?.focus()}
+                  returnKeyType="next"
                 />
-              </InputGroup>
-              <ValidationMessage>{errors.name}</ValidationMessage>
-              {!editingTenant.id ? (
-                <>
-                  <InputGroup abpInputGroup>
-                    <Label abpLabel>
-                      {i18n.t('AbpTenantManagement::DisplayName:AdminEmailAddress')}
-                    </Label>
-                    <Input
-                      abpInput
-                      ref={adminEmailRef}
-                      onSubmitEditing={() => adminPasswordRef.current._root.focus()}
-                      returnKeyType="next"
-                      onChangeText={handleChange('adminEmailAddress')}
-                      onBlur={handleBlur('adminEmailAddress')}
-                      value={values.adminEmailAddress}
-                      autoCapitalize = 'none'
+                <ValidationMessage>{formik.errors.adminEmailAddress}</ValidationMessage>
+              </Stack>
+            </FormControl>
+
+            <FormControl isRequired my="2">
+              <Stack mx="4">
+                <FormControl.Label>
+                  {i18n.t('AbpTenantManagement::DisplayName:AdminPassword')}
+                </FormControl.Label>
+                <Input
+                  ref={adminPasswordRef}
+                  returnKeyType="done"
+                  secureTextEntry={!showAdminPassword}
+                  onChangeText={formik.handleChange('adminPassword')}
+                  onBlur={formik.handleBlur('adminPassword')}
+                  value={formik.values.adminPassword}
+                  autoCapitalize="none"
+                  InputRightElement={
+                    <Icon
+                      as={Ionicons}
+                      size="5"
+                      mr="2"
+                      name={showAdminPassword ? 'eye-off-outline' : 'eye-outline'}
+                      onPress={() => setShowAdminPassword(!showAdminPassword)}
                     />
-                  </InputGroup>
-                  <ValidationMessage>{errors.adminEmailAddress}</ValidationMessage>
-                  <InputGroup abpInputGroup>
-                    <Label abpLabel>
-                      {i18n.t('AbpTenantManagement::DisplayName:AdminPassword')}
-                    </Label>
-                    <Item abpInput>
-                      <Input
-                        ref={adminPasswordRef}
-                        returnKeyType="done"
-                        secureTextEntry={!showAdminPassword}
-                        onChangeText={handleChange('adminPassword')}
-                        onBlur={handleBlur('adminPassword')}
-                        value={values.adminPassword}
-                        autoCapitalize = 'none'
-                      />
-                      <Icon
-                        name={showAdminPassword ? 'eye-off' : 'eye'}
-                        onPress={() => setShowAdminPassword(!showAdminPassword)}
-                      />
-                    </Item>
-                  </InputGroup>
-                  <ValidationMessage>{errors.adminPassword}</ValidationMessage>
-                </>
-              ) : null}
-            </Content>
-          </Container>
-          <FormButtons
-            submit={handleSubmit}
-            remove={remove}
-            removeMessage={i18n.t('AbpTenantManagement::TenantDeletionConfirmationMessage', {
-              0: editingTenant.name,
-            })}
-            isSubmitDisabled={!isValid}
-            isShowRemove={!!editingTenant.id && hasRemovePermission}
-          />
-        </>
-      )}
-    </Formik>
+                  }
+                />
+                <ValidationMessage>{formik.errors.adminPassword}</ValidationMessage>
+              </Stack>
+            </FormControl>
+          </>
+        ) : null}
+      </Box>
+      <FormButtons
+        submit={formik.handleSubmit}
+        remove={remove}
+        removeMessage={i18n.t('AbpTenantManagement::TenantDeletionConfirmationMessage', {
+          0: editingTenant.name,
+        })}
+        isSubmitDisabled={!formik.isValid}
+        isShowRemove={!!editingTenant.id && hasRemovePermission}
+      />
+    </>
   );
 }
 
@@ -136,10 +141,4 @@ CreateUpdateTenantForm.propTypes = {
   remove: PropTypes.func.isRequired,
 };
 
-const styles = StyleSheet.create({
-  container: {
-    marginBottom: 50,
-  },
-});
-
 export default CreateUpdateTenantForm;

templates/app/react-native/src/screens/CreateUpdateTenant/CreateUpdateTenantScreen.js

@@ -1,11 +1,11 @@
-import PropTypes from 'prop-types';
-import React, { useState, useCallback } from 'react';
 import { useFocusEffect } from '@react-navigation/native';
+import PropTypes from 'prop-types';
+import React, { useCallback, useState } from 'react';
 import {
   createTenant,
   getTenantById,
   removeTenant,
-  updateTenant,
+  updateTenant
 } from '../../api/TenantManagementAPI';
 import LoadingActions from '../../store/actions/LoadingActions';
 import { createLoadingSelector } from '../../store/selectors/LoadingSelectors';
@@ -48,7 +48,11 @@ function CreateUpdateTenantScreen({ navigation, route, startLoading, stopLoading
   };
 
   const renderForm = () => (
-    <CreateUpdateTenantForm editingTenant={tenant} submit={submit} remove={remove} />
+    <CreateUpdateTenantForm
+      editingTenant={tenant}
+      submit={submit}
+      remove={remove}
+    />
   );
 
   if (tenantId && tenant) {

templates/app/react-native/src/screens/CreateUpdateUser/CreateUpdateUserForm.js

@@ -1,25 +1,21 @@
-import { Formik } from 'formik';
+import { Ionicons } from '@expo/vector-icons';
+import { useFormik } from 'formik';
 import i18n from 'i18n-js';
 import {
-  Body,
+  Box,
   Button,
-  CheckBox,
-  Container,
-  Content,
-  Input,
-  InputGroup,
-  Item,
+  Checkbox,
+  FormControl,
   Icon,
-  Label,
-  ListItem,
-  Segment,
-  Text,
+  Input,
+  KeyboardAvoidingView,
+  Stack
 } from 'native-base';
 import PropTypes from 'prop-types';
 import React, { useRef, useState } from 'react';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { Platform } from 'react-native';
 import * as Yup from 'yup';
-import FormButtons from '../../components/FormButtons/FormButtons';
+import { FormButtons } from '../../components/FormButtons';
 import ValidationMessage from '../../components/ValidationMessage/ValidationMessage';
 import { usePermission } from '../../hooks/UsePermission';
 import UserRoles from './UserRoles';
@@ -50,7 +46,7 @@ function CreateUpdateUserForm({ editingUser = {}, submit, remove }) {
 
   const hasRemovePermission = usePermission('AbpIdentity.Users.Delete');
 
-  const onSubmit = values => {
+  const onSubmit = (values) => {
     submit({
       ...editingUser,
       ...values,
@@ -65,157 +61,205 @@ function CreateUpdateUserForm({ editingUser = {}, submit, remove }) {
     return Yup.string().required('AbpAccount::ThisFieldIsRequired.');
   });
 
+  const formik = useFormik({
+    enableReinitialize: true,
+    validationSchema: Yup.object().shape({
+      ...validations,
+      password: passwordValidation,
+    }),
+    initialValues: {
+      lockoutEnabled: false,
+      ...editingUser,
+    },
+    onSubmit,
+  });
+
   return (
-    <Formik
-      enableReinitialize
-      validationSchema={Yup.object().shape({
-        ...validations,
-        password: passwordValidation,
-      })}
-      initialValues={{
-        lockoutEnabled: false,
-        ...editingUser,
-      }}
-      onSubmit={values => onSubmit(values)}>
-      {({ handleChange, handleBlur, handleSubmit, values, errors, isValid, setFieldValue }) => (
-        <>
-          <Segment>
-            <Button first primary={selectedTab === 0} onPress={() => setSelectedTab(0)}>
-              <Text dark light={selectedTab === 0}>
-                {i18n.t('AbpIdentity::UserInformations')}
-              </Text>
+    <>
+      <KeyboardAvoidingView
+        h={{
+          base: '400px',
+          lg: 'auto',
+        }}
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      >
+        <Box w={{ base: '100%' }} px="4">
+          <Button.Group
+            colorScheme="blue"
+            mx={{
+              base: 'auto',
+              md: 0,
+            }}
+            size="sm"
+            m="2"
+          >
+            <Button
+              size="sm"
+              variant={selectedTab === 0 ? 'solid' : 'outline'}
+              onPress={() => setSelectedTab(0)}
+            >
+              {i18n.t('AbpIdentity::UserInformations')}
             </Button>
-            <Button last primary={selectedTab === 1} onPress={() => setSelectedTab(1)}>
-              <Text dark light={selectedTab === 1}>
-                {i18n.t('AbpIdentity::Roles')}
-              </Text>
+            <Button
+              size="sm"
+              variant={selectedTab === 1 ? 'solid' : 'outline'}
+              onPress={() => setSelectedTab(1)}
+            >
+              {i18n.t('AbpIdentity::Roles')}
             </Button>
-          </Segment>
-          <Container style={styles.container}>
-            <Content px20>
-              <View style={{ display: selectedTab === 0 ? 'flex' : 'none' }}>
-                <View style={{ alignItems: 'center', margin: 10, zIndex: 1 }} />
-                <InputGroup abpInputGroup>
-                  <Label abpLabel>{i18n.t('AbpIdentity::UserName')}*</Label>
+          </Button.Group>
+
+          {selectedTab === 0 ? (
+            <>
+              <FormControl isRequired my="2">
+                <Stack mx="4">
+                  <FormControl.Label>
+                    {i18n.t('AbpIdentity::UserName')}
+                  </FormControl.Label>
                   <Input
-                    abpInput
                     ref={usernameRef}
-                    onSubmitEditing={() => nameRef.current._root.focus()}
+                    onSubmitEditing={() => nameRef.current.focus()}
                     returnKeyType="next"
-                    onChangeText={handleChange('userName')}
-                    onBlur={handleBlur('userName')}
-                    value={values.userName}
-                    autoCapitalize = 'none'
+                    onChangeText={formik.handleChange('userName')}
+                    onBlur={formik.handleBlur('userName')}
+                    value={formik.values.userName}
+                    autoCapitalize="none"
                   />
-                </InputGroup>
-                <ValidationMessage>{errors.userName}</ValidationMessage>
-                <InputGroup abpInputGroup>
-                  <Label abpLabel>{i18n.t('AbpIdentity::DisplayName:Name')}</Label>
+                  <ValidationMessage>
+                    {formik.errors.userName}
+                  </ValidationMessage>
+                </Stack>
+              </FormControl>
+
+              <FormControl my="2">
+                <Stack mx="4">
+                  <FormControl.Label>
+                    {i18n.t('AbpIdentity::DisplayName:Name')}
+                  </FormControl.Label>
                   <Input
-                    abpInput
                     ref={nameRef}
-                    onSubmitEditing={() => surnameRef.current._root.focus()}
+                    onSubmitEditing={() => surnameRef.current.focus()}
                     returnKeyType="next"
-                    onChangeText={handleChange('name')}
-                    onBlur={handleBlur('name')}
-                    value={values.name}
+                    onChangeText={formik.handleChange('name')}
+                    onBlur={formik.handleBlur('name')}
+                    value={formik.values.name}
                   />
-                </InputGroup>
-                <InputGroup abpInputGroup>
-                  <Label abpLabel>{i18n.t('AbpIdentity::DisplayName:Surname')}</Label>
+                </Stack>
+              </FormControl>
+
+              <FormControl my="2">
+                <Stack mx="4">
+                  <FormControl.Label>
+                    {i18n.t('AbpIdentity::DisplayName:Surname')}
+                  </FormControl.Label>
                   <Input
-                    abpInput
                     ref={surnameRef}
-                    onSubmitEditing={() => emailRef.current._root.focus()}
+                    onSubmitEditing={() => emailRef.current.focus()}
                     returnKeyType="next"
-                    onChangeText={handleChange('surname')}
-                    onBlur={handleBlur('surname')}
-                    value={values.surname}
+                    onChangeText={formik.handleChange('surname')}
+                    onBlur={formik.handleBlur('surname')}
+                    value={formik.values.surname}
                   />
-                </InputGroup>
-                <InputGroup abpInputGroup>
-                  <Label abpLabel>{i18n.t('AbpIdentity::EmailAddress')}*</Label>
+                </Stack>
+              </FormControl>
+
+              <FormControl isRequired my="2">
+                <Stack mx="4">
+                  <FormControl.Label>
+                    {i18n.t('AbpIdentity::EmailAddress')}
+                  </FormControl.Label>
                   <Input
-                    abpInput
                     ref={emailRef}
-                    onSubmitEditing={() => phoneNumberRef.current._root.focus()}
+                    onSubmitEditing={() => phoneNumberRef.current.focus()}
                     returnKeyType="next"
-                    onChangeText={handleChange('email')}
-                    onBlur={handleBlur('email')}
-                    value={values.email}
-                    autoCapitalize = 'none'
+                    onChangeText={formik.handleChange('email')}
+                    onBlur={formik.handleBlur('email')}
+                    value={formik.values.email}
+                    autoCapitalize="none"
                   />
-                </InputGroup>
-                <ValidationMessage>{errors.email}</ValidationMessage>
-                <InputGroup abpInputGroup>
-                  <Label abpLabel>{i18n.t('AbpIdentity::PhoneNumber')}</Label>
+                  <ValidationMessage>{formik.errors.email}</ValidationMessage>
+                </Stack>
+              </FormControl>
+
+              <FormControl my="2">
+                <Stack mx="4">
+                  <FormControl.Label>
+                    {i18n.t('AbpIdentity::PhoneNumber')}
+                  </FormControl.Label>
                   <Input
-                    abpInput
                     ref={phoneNumberRef}
-                    onSubmitEditing={() => passwordRef.current._root.focus()}
+                    onSubmitEditing={() => passwordRef?.current?.focus()}
                     returnKeyType={!editingUser.id ? 'next' : 'default'}
-                    onChangeText={handleChange('phoneNumber')}
-                    onBlur={handleBlur('phoneNumber')}
-                    value={values.phoneNumber}
-                    autoCapitalize = 'none'
+                    onChangeText={formik.handleChange('phoneNumber')}
+                    onBlur={formik.handleBlur('phoneNumber')}
+                    value={formik.values.phoneNumber}
                   />
-                </InputGroup>
-                {!editingUser.id ? (
-                  <>
-                    <InputGroup abpInputGroup>
-                      <Label abpLabel>{i18n.t('AbpIdentity::Password')}*</Label>
-                      <Item abpInput>
-                        <Input
-                          ref={passwordRef}
-                          secureTextEntry={!showPassword}
-                          onChangeText={handleChange('password')}
-                          onBlur={handleBlur('password')}
-                          value={values.password}
-                          autoCapitalize = 'none'
-                        />
+                </Stack>
+              </FormControl>
+
+              {!editingUser.id ? (
+                <FormControl isRequired my="2">
+                  <Stack mx="4">
+                    <FormControl.Label>
+                      {i18n.t('AbpIdentity::Password')}
+                    </FormControl.Label>
+                    <Input
+                      ref={passwordRef}
+                      secureTextEntry={!showPassword}
+                      onChangeText={formik.handleChange('password')}
+                      onBlur={formik.handleBlur('password')}
+                      value={formik.values.password}
+                      autoCapitalize="none"
+                      InputRightElement={
                         <Icon
-                          name={showPassword ? 'eye-off' : 'eye'}
+                          as={Ionicons}
+                          size="5"
+                          mr="2"
+                          name={
+                            showPassword ? 'eye-off-outline' : 'eye-outline'
+                          }
                           onPress={() => setShowPassword(!showPassword)}
                         />
-                      </Item>
-                    </InputGroup>
-                    <ValidationMessage>{errors.password}</ValidationMessage>
-                  </>
-                ) : null}
-                <ListItem>
-                  <CheckBox
-                    checked={values.lockoutEnabled}
-                    onPress={() => setFieldValue('lockoutEnabled', !values.lockoutEnabled)}
-                  />
-                  <Body>
-                    <TouchableOpacity
-                      onPress={() => setFieldValue('lockoutEnabled', !values.lockoutEnabled)}>
-                      <Text>{i18n.t('AbpIdentity::DisplayName:LockoutEnabled')}</Text>
-                    </TouchableOpacity>
-                  </Body>
-                </ListItem>
-              </View>
-              <View
-                style={{
-                  display: selectedTab === 1 ? 'flex' : 'none',
-                  flex: 1,
-                }}>
-                <UserRoles {...{ editingUser, onChangeRoles }} />
-              </View>
-            </Content>
-          </Container>
-          <FormButtons
-            submit={handleSubmit}
-            remove={remove}
-            removeMessage={i18n.t('AbpIdentity::UserDeletionConfirmationMessage', {
-              0: editingUser.userName,
-            })}
-            isSubmitDisabled={!isValid}
-            isShowRemove={!!editingUser.id && hasRemovePermission}
-          />
-        </>
-      )}
-    </Formik>
+                      }
+                    />
+                    <ValidationMessage>
+                      {formik.errors.password}
+                    </ValidationMessage>
+                  </Stack>
+                </FormControl>
+              ) : null}
+
+              <FormControl my="2">
+                <Stack mx="4">
+                  <Checkbox
+                    isChecked={formik.values.lockoutEnabled}
+                    onPress={() =>
+                      formik.setFieldValue(
+                        'lockoutEnabled',
+                        !formik.values.lockoutEnabled
+                      )
+                    }
+                  >
+                    {i18n.t('AbpIdentity::DisplayName:LockoutEnabled')}
+                  </Checkbox>
+                </Stack>
+              </FormControl>
+            </>
+          ) : (
+            <UserRoles {...{ editingUser, onChangeRoles }} />
+          )}
+        </Box>
+      </KeyboardAvoidingView>
+      <FormButtons
+        submit={formik.handleSubmit}
+        remove={remove}
+        removeMessage={i18n.t('AbpIdentity::UserDeletionConfirmationMessage', {
+          0: editingUser.userName,
+        })}
+        isSubmitDisabled={!formik.isValid}
+        isShowRemove={!!editingUser.id && hasRemovePermission}
+      />
+    </>
   );
 }
 
@@ -225,10 +269,4 @@ CreateUpdateUserForm.propTypes = {
   remove: PropTypes.func.isRequired,
 };
 
-const styles = StyleSheet.create({
-  container: {
-    marginBottom: 50,
-  },
-});
-
 export default CreateUpdateUserForm;

templates/app/react-native/src/screens/CreateUpdateUser/UserRoles.js

@@ -1,7 +1,6 @@
-import React, { useEffect, useState } from 'react';
+import { Box, Checkbox, List } from 'native-base';
 import PropTypes from 'prop-types';
-import { List, ListItem, CheckBox, Body, Text } from 'native-base';
-import { TouchableOpacity } from 'react-native';
+import React, { useEffect, useState } from 'react';
 import { getAllRoles, getUserRoles } from '../../api/IdentityAPI';
 
 function UserRoles({ editingUser = {}, onChangeRoles }) {
@@ -37,18 +36,17 @@ function UserRoles({ editingUser = {}, onChangeRoles }) {
   }, [roles]);
 
   return (
-    <List>
+    <Box w={{base: '100%'}} px="4">
+      <List borderWidth={0}>
       {roles.map((role, index) => (
-        <ListItem key={role.id}>
-          <CheckBox checked={role.isSelected} onPress={() => onPress(index)} />
-          <Body>
-            <TouchableOpacity onPress={() => onPress(index)}>
-              <Text>{role.name}</Text>
-            </TouchableOpacity>
-          </Body>
-        </ListItem>
+        <List.Item key={role.id} borderBottomWidth={1} >
+          <Checkbox isChecked={role.isSelected} onPress={() => onPress(index)} >
+          {role.name}
+        </Checkbox>
+        </List.Item>
       ))}
     </List>
+    </Box>
   );
 }
 

templates/app/react-native/src/screens/Home/HomeScreen.js

@@ -1,33 +1,29 @@
 import i18n from 'i18n-js';
-import { Text } from 'native-base';
+import { Box, Center, Heading, Text } from 'native-base';
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet } from 'react-native';
 
 function HomeScreen() {
   return (
-    <View style={styles.container}>
-      <Text style={styles.title}> {i18n.t('::Welcome')}</Text>
-      <Text style={styles.centeredText}> {i18n.t('::LongWelcomeMessage')}</Text>
-    </View>
+    <Center flex={0.9} px="8">
+      <Box
+        w={{
+          base: '100%',
+        }}
+      >
+        <Heading style={styles.centeredText}> {i18n.t('::Welcome')}</Heading>
+        <Text style={styles.centeredText}>
+          {i18n.t('::LongWelcomeMessage')}
+        </Text>
+      </Box>
+    </Center>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: 20,
-    backgroundColor: '#fff',
-  },
   centeredText: {
     textAlign: 'center',
-  },
-  title: {
-    marginBottom: 30,
-    fontSize: 32,
-    fontWeight: '300',
-    textAlign: 'center',
+    marginBottom: 5
   },
 });
 

templates/app/react-native/src/screens/Login/LoginScreen.js

@@ -1,21 +1,17 @@
-import { Formik } from 'formik';
+import { useFormik } from 'formik';
 import i18n from 'i18n-js';
 import {
+  Box,
   Button,
-  Container,
-  Content,
-  Form,
-  Input,
-  InputGroup,
-  Item,
-  Label,
-  Text,
-  Icon,
+  Center,
+  FormControl, Image, Input,
+  Stack,
+  WarningOutlineIcon
 } from 'native-base';
 import PropTypes from 'prop-types';
-import React, { useState, useRef  } from 'react';
+import React, { useRef, useState } from 'react';
 import { View } from 'react-native';
-import * as Yup from 'yup';
+import { object, string } from 'yup';
 import { login } from '../../api/AccountAPI';
 import TenantBox from '../../components/TenantBox/TenantBox';
 import ValidationMessage from '../../components/ValidationMessage/ValidationMessage';
@@ -24,15 +20,14 @@ import LoadingActions from '../../store/actions/LoadingActions';
 import PersistentStorageActions from '../../store/actions/PersistentStorageActions';
 import { connectToRedux } from '../../utils/ReduxConnect';
 
-const ValidationSchema = Yup.object().shape({
-  username: Yup.string().required('AbpAccount::ThisFieldIsRequired.'),
-  password: Yup.string().required('AbpAccount::ThisFieldIsRequired.'),
+const ValidationSchema = object().shape({
+  username: string().required('AbpAccount::ThisFieldIsRequired.'),
+  password: string().required('AbpAccount::ThisFieldIsRequired.'),
 });
 
 function LoginScreen({ startLoading, stopLoading, setToken, fetchAppConfig }) {
   const [showTenantSelection, setShowTenantSelection] = useState(false);
-  const [showPassword, setShowPassword] = useState(false);
-  const passwordRef = useRef(null)
+  const passwordRef = useRef(null);
 
   const toggleTenantSelection = () => {
     setShowTenantSelection(!showTenantSelection);
@@ -41,78 +36,103 @@ function LoginScreen({ startLoading, stopLoading, setToken, fetchAppConfig }) {
   const submit = ({ username, password }) => {
     startLoading({ key: 'login' });
     login({ username, password })
-      .then(data =>
+      .then((data) =>
         setToken({
           ...data,
           expire_time: new Date().valueOf() + data.expires_in,
           scope: undefined,
-        }),
+        })
       )
       .then(
         () =>
-          new Promise(resolve =>
-            fetchAppConfig({ showLoading: false, callback: () => resolve(true) }),
-          ),
+          new Promise((resolve) =>
+            fetchAppConfig({
+              showLoading: false,
+              callback: () => resolve(true),
+            })
+          )
       )
       .finally(() => stopLoading({ key: 'login' }));
   };
 
+  const formik = useFormik({
+    validationSchema: ValidationSchema,
+    initialValues: { username: '', password: '' },
+    onSubmit: submit,
+  });
+
   return (
-    <Container>
+    <Center flex={0.6} px="3">
+      <Box
+        w={{
+          base: '100%',
+        }}
+        mb="50"
+        alignItems="center"
+      >
+        <Image
+          alt="Image"
+          source={require('../../../assets/logo.png')}
+        />
+      </Box>
+
       <TenantBox
         showTenantSelection={showTenantSelection}
         toggleTenantSelection={toggleTenantSelection}
       />
-      {!showTenantSelection ? (
-        <Content px20 style={{ flex: 1 }}>
-          <Formik
-            validationSchema={ValidationSchema}
-            initialValues={{ username: '', password: '' }}
-            onSubmit={submit}>
-            {({ handleChange, handleBlur, handleSubmit, values, errors }) => (
-              <Form>
-                <InputGroup abpInputGroup>
-                  <Label abpLabel>{i18n.t('AbpAccount::UserNameOrEmailAddress')}</Label>
-                  <Input
-                    abpInput
-                    onChangeText={handleChange('username')}
-                    onBlur={handleBlur('username')}
-                    value={values.username}
-                    onSubmitEditing={() => passwordRef.current._root.focus()}
-                    returnKeyType="next"
-                    autoCapitalize = 'none'
-                  />
-                </InputGroup>
-                <ValidationMessage>{errors.username}</ValidationMessage>
-                <InputGroup abpInputGroup>
-                  <Label abpLabel>{i18n.t('AbpAccount::Password')}</Label>
-                  <Item abpInput>
-                    <Input
-                      secureTextEntry={!showPassword}
-                      onChangeText={handleChange('password')}
-                      onBlur={handleBlur('password')}
-                      value={values.password}
-                      ref={passwordRef}
-                      autoCapitalize = 'none'
-                    />
-                    <Icon
-                      name={showPassword ? 'eye-off' : 'eye'}
-                      onPress={() => setShowPassword(!showPassword)}
-                    />
-                  </Item>
-                </InputGroup>
-                <ValidationMessage>{errors.password}</ValidationMessage>
-                <View style={{ marginTop: 20, alignItems: 'center' }}>
-                  <Button abpButton onPress={handleSubmit}>
-                    <Text>{i18n.t('AbpAccount::Login')}</Text>
-                  </Button>
-                </View>
-              </Form>
-            )}
-          </Formik>
-        </Content>
-      ) : null}
-    </Container>
+      <Box
+        w={{
+          base: '100%',
+        }}
+        display={showTenantSelection ? 'none' : 'flex'}
+      >
+        <FormControl isRequired my="2">
+          <Stack mx="4">
+            <FormControl.Label>
+              {i18n.t('AbpAccount::UserNameOrEmailAddress')}
+            </FormControl.Label>
+            <Input
+              onChangeText={formik.handleChange('username')}
+              onBlur={formik.handleBlur('username')}
+              value={formik.values.username}
+              returnKeyType="next"
+              autoCapitalize="none"
+              onSubmitEditing={() => passwordRef?.current?.focus()}
+              size="lg"
+            />
+            <ValidationMessage>{formik.errors.username}</ValidationMessage>
+          </Stack>
+        </FormControl>
+
+        <FormControl isRequired my="2">
+          <Stack mx="4">
+            <FormControl.Label>
+              {i18n.t('AbpAccount::Password')}
+            </FormControl.Label>
+            <Input
+              type="password"
+              onChangeText={formik.handleChange('password')}
+              onBlur={formik.handleBlur('password')}
+              value={formik.values.password}
+              ref={passwordRef}
+              autoCapitalize="none"
+              size="lg"
+            />
+            <FormControl.ErrorMessage
+              leftIcon={<WarningOutlineIcon size="xs" />}
+            >
+              {formik.errors.password}
+            </FormControl.ErrorMessage>
+          </Stack>
+        </FormControl>
+
+        <View style={{ marginTop: 20, alignItems: 'center' }}>
+          <Button onPress={formik.handleSubmit} width="30%" size="lg">
+            {i18n.t('AbpAccount::Login')}
+          </Button>
+        </View>
+      </Box>
+    </Center>
   );
 }
 

templates/app/react-native/src/screens/ManageProfile/ManageProfileForm.js

@@ -1,6 +1,12 @@
-import { Formik } from 'formik';
+import { useFormik } from 'formik';
 import i18n from 'i18n-js';
-import { Container, Content, Form, Input, InputGroup, Label } from 'native-base';
+import {
+  Box,
+  FormControl,
+  Input,
+  KeyboardAvoidingView,
+  Stack,
+} from 'native-base';
 import PropTypes from 'prop-types';
 import React, { useRef } from 'react';
 import * as Yup from 'yup';
@@ -21,95 +27,120 @@ function ManageProfileForm({ editingUser = {}, submit, cancel }) {
   const emailRef = useRef();
   const phoneNumberRef = useRef();
 
-  const onSubmit = values => {
+  const onSubmit = (values) => {
     submit({
       ...editingUser,
       ...values,
     });
   };
 
+  const formik = useFormik({
+    enableReinitialize: true,
+    validationSchema: ValidationSchema,
+    initialValues: {
+      ...editingUser,
+    },
+    onSubmit,
+  });
+
   return (
-    <Formik
-      enableReinitialize
-      validationSchema={ValidationSchema}
-      initialValues={{
-        ...editingUser,
-      }}
-      onSubmit={values => onSubmit(values)}>
-      {({ handleChange, handleBlur, handleSubmit, values, errors, isValid }) => (
-        <>
-          <Container>
-            <Content px20>
-              <Form>
-                <InputGroup abpInputGroup>
-                  <Label abpLabel>{i18n.t('AbpIdentity::UserName')}*</Label>
-                  <Input
-                    ref={usernameRef}
-                    onSubmitEditing={() => nameRef.current._root.focus()}
-                    returnKeyType="next"
-                    onChangeText={handleChange('userName')}
-                    onBlur={handleBlur('userName')}
-                    value={values.userName}
-                    abpInput
-                  />
-                </InputGroup>
-                <ValidationMessage>{errors.userName}</ValidationMessage>
-                <InputGroup abpInputGroup>
-                  <Label abpLabel>{i18n.t('AbpIdentity::DisplayName:Name')}</Label>
-                  <Input
-                    abpInput
-                    ref={nameRef}
-                    onSubmitEditing={() => surnameRef.current._root.focus()}
-                    returnKeyType="next"
-                    onChangeText={handleChange('name')}
-                    onBlur={handleBlur('name')}
-                    value={values.name}
-                  />
-                </InputGroup>
-                <InputGroup abpInputGroup>
-                  <Label abpLabel>{i18n.t('AbpIdentity::DisplayName:Surname')}</Label>
-                  <Input
-                    abpInput
-                    ref={surnameRef}
-                    onSubmitEditing={() => phoneNumberRef.current._root.focus()}
-                    returnKeyType="next"
-                    onChangeText={handleChange('surname')}
-                    onBlur={handleBlur('surname')}
-                    value={values.surname}
-                  />
-                </InputGroup>
-                <InputGroup abpInputGroup>
-                  <Label abpLabel>{i18n.t('AbpIdentity::PhoneNumber')}</Label>
-                  <Input
-                    abpInput
-                    ref={phoneNumberRef}
-                    onSubmitEditing={() => emailRef.current._root.focus()}
-                    returnKeyType="next"
-                    onChangeText={handleChange('phoneNumber')}
-                    onBlur={handleBlur('phoneNumber')}
-                    value={values.phoneNumber}
-                  />
-                </InputGroup>
-                <InputGroup abpInputGroup>
-                  <Label abpLabel>{i18n.t('AbpIdentity::EmailAddress')}*</Label>
-                  <Input
-                    abpInput
-                    ref={emailRef}
-                    returnKeyType="done"
-                    onSubmitEditing={handleSubmit}
-                    onChangeText={handleChange('email')}
-                    onBlur={handleBlur('email')}
-                    value={values.email}
-                  />
-                </InputGroup>
-                <ValidationMessage>{errors.email}</ValidationMessage>
-              </Form>
-            </Content>
-          </Container>
-          <FormButtons submit={handleSubmit} cancel={cancel} isSubmitDisabled={!isValid} />
-        </>
-      )}
-    </Formik>
+    <>
+      <Box px="3">
+        <KeyboardAvoidingView
+          h={{
+            base: '400px',
+            lg: 'auto',
+          }}
+          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        >
+          <FormControl isRequired my="2">
+            <Stack mx="4">
+              <FormControl.Label>
+                {i18n.t('AbpIdentity::UserName')}
+              </FormControl.Label>
+              <Input
+                ref={usernameRef}
+                onSubmitEditing={() => nameRef?.current?.focus()}
+                returnKeyType="next"
+                onChangeText={formik.handleChange('userName')}
+                onBlur={formik.handleBlur('userName')}
+                value={formik.values.userName}
+              />
+              <ValidationMessage>{formik.errors.userName}</ValidationMessage>
+            </Stack>
+          </FormControl>
+
+          <FormControl my="2">
+            <Stack mx="4">
+              <FormControl.Label>
+                {i18n.t('AbpIdentity::DisplayName:Name')}
+              </FormControl.Label>
+              <Input
+                ref={nameRef}
+                onSubmitEditing={() => surnameRef?.current?.focus()}
+                returnKeyType="next"
+                onChangeText={formik.handleChange('name')}
+                onBlur={formik.handleBlur('name')}
+                value={formik.values.name}
+              />
+            </Stack>
+          </FormControl>
+
+          <FormControl my="2">
+            <Stack mx="4">
+              <FormControl.Label>
+                {i18n.t('AbpIdentity::DisplayName:Surname')}
+              </FormControl.Label>
+              <Input
+                ref={surnameRef}
+                onSubmitEditing={() => phoneNumberRef?.current?.focus()}
+                returnKeyType="next"
+                onChangeText={formik.handleChange('surname')}
+                onBlur={formik.handleBlur('surname')}
+                value={formik.values.surname}
+              />
+            </Stack>
+          </FormControl>
+
+          <FormControl my="2">
+            <Stack mx="4">
+              <FormControl.Label>
+                {i18n.t('AbpIdentity::PhoneNumber')}
+              </FormControl.Label>
+              <Input
+                ref={phoneNumberRef}
+                onSubmitEditing={() => emailRef?.current?.focus()}
+                returnKeyType="next"
+                onChangeText={formik.handleChange('phoneNumber')}
+                onBlur={formik.handleBlur('phoneNumber')}
+                value={formik.values.phoneNumber}
+              />
+            </Stack>
+          </FormControl>
+
+          <FormControl isRequired my="2">
+            <Stack mx="4">
+              <FormControl.Label>
+                {i18n.t('AbpIdentity::EmailAddress')}
+              </FormControl.Label>
+              <Input
+                ref={emailRef}
+                returnKeyType="done"
+                onChangeText={formik.handleChange('email')}
+                onBlur={formik.handleBlur('email')}
+                value={formik.values.email}
+              />
+              <ValidationMessage>{formik.errors.email}</ValidationMessage>
+            </Stack>
+          </FormControl>
+        </KeyboardAvoidingView>
+      </Box>
+      <FormButtons
+        submit={formik.handleSubmit}
+        cancel={cancel}
+        isSubmitDisabled={!formik.isValid}
+      />
+    </>
   );
 }
 

templates/app/react-native/src/screens/Settings/SettingsScreen.js

@@ -1,29 +1,17 @@
+import { Ionicons } from '@expo/vector-icons';
+import { useFocusEffect } from '@react-navigation/native';
 import i18n from 'i18n-js';
-import {
-  Body,
-  Button,
-  Icon,
-  Label,
-  Left,
-  List,
-  ListItem,
-  Picker,
-  Right,
-  Text,
-  Thumbnail,
-} from 'native-base';
+import { Avatar, Button, Divider, FormControl, List, Select, Stack, Text, View } from 'native-base';
 import PropTypes from 'prop-types';
 import React, { useCallback, useState } from 'react';
-import { View } from 'react-native';
-import { useFocusEffect } from '@react-navigation/native';
 import { getProfileDetail } from '../../api/IdentityAPI';
 import AppActions from '../../store/actions/AppActions';
 import {
   createLanguageSelector,
-  createLanguagesSelector,
+  createLanguagesSelector
 } from '../../store/selectors/AppSelectors';
-import { connectToRedux } from '../../utils/ReduxConnect';
 import { createTenantSelector } from '../../store/selectors/PersistentStorageSelectors';
+import { connectToRedux } from '../../utils/ReduxConnect';
 
 function SettingsScreen({
   navigation,
@@ -49,74 +37,72 @@ function SettingsScreen({
 
   return (
     <View>
-      <List>
-        <ListItem itemDivider />
-        <ListItem
-          noIndent
+      <List px="0" py="0" borderWidth="0">
+        <List.Item
           style={{ backgroundColor: '#fff' }}
           onPress={() => navigation.navigate('ManageProfile')}>
-          <Left style={{ alignItems: 'center' }}>
-            <Thumbnail source={require('../../../assets/avatar.png')} />
-            <Body>
-              <Text>
-                {tenant.name ? `${tenant.name} / ` : ''}
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              width: '100%',
+            }}>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <Avatar ml="2" source={require('../../../assets/avatar.png')} />
+              <Text ml="2">
+                {tenant.name ? `${tenant.name}/` : ''}
                 {user.userName ? `${user.userName}` : ''}
               </Text>
-              <Text note>{user.email}</Text>
-            </Body>
-          </Left>
+            </View>
 
-          <Right>
-            <Icon active name="arrow-forward" />
-          </Right>
-        </ListItem>
-        <ListItem itemDivider />
-        <ListItem
-          noIndent
-          icon
+            <List.Icon as={Ionicons} name="arrow-forward" size="5" />
+          </View>
+        </List.Item>
+        <Divider thickness={5} />
+        <List.Item
           style={{ backgroundColor: '#fff' }}
           onPress={() => navigation.navigate('ChangePassword')}>
-          <Body>
-            <Text>{i18n.t('AbpUi::ChangePassword')}</Text>
-          </Body>
-          <Right>
-            <Icon active name="arrow-forward" />
-          </Right>
-        </ListItem>
-        <ListItem itemDivider />
-        <ListItem itemDivider>
-          <Label abpLabel style={{ marginBottom: 0 }}>
-            {i18n.t('AbpUi::Language')}
-          </Label>
-        </ListItem>
-        <ListItem noIndent icon style={{ backgroundColor: '#fff' }}>
-          <Body>
-            <Picker
-              mode="dropdown"
-              iosHeader={i18n.t('AbpUi::Language')}
-              iosIcon={<Icon active name="arrow-down" />}
-              onValueChange={value => setLanguageAsync(value)}
-              selectedValue={language.cultureName}
-              textStyle={{ paddingLeft: 0 }}>
-              {languages.map(lang => (
-                <Picker.Item
-                  label={lang.displayName}
-                  value={lang.cultureName}
-                  key={lang.cultureName}
-                />
-              ))}
-            </Picker>
-          </Body>
-        </ListItem>
-        <ListItem itemDivider />
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              width: '100%',
+            }}>
+            <Text ml="2">{i18n.t('AbpUi::ChangePassword')}</Text>
+
+            <List.Icon as={Ionicons} name="arrow-forward" size="5" />
+          </View>
+        </List.Item>
+        <Divider thickness={5} />
+        <List.Item style={{ backgroundColor: '#fff' }}>
+          <FormControl my="2">
+            <Stack mx="2">
+              <FormControl.Label>{i18n.t('AbpUi::Language')}</FormControl.Label>
+              <Select
+                mode="dropdown"
+                onValueChange={setLanguageAsync}
+                selectedValue={language.cultureName}>
+                {languages.map(lang => (
+                  <Select.Item
+                    label={lang.displayName}
+                    value={lang.cultureName}
+                    key={lang.cultureName}
+                  />
+                ))}
+              </Select>
+            </Stack>
+          </FormControl>
+        </List.Item>
+        <Divider thickness={10} />
         <Button
-          abpButton
-          danger
+          bg="danger.500"
           style={{ borderRadius: 0 }}
           onPress={() => {
             logoutAsync();
           }}>
-          <Text>{i18n.t('AbpAccount::Logout')}</Text>
+          {i18n.t('AbpAccount::Logout')}
         </Button>
       </List>
     </View>

templates/app/react-native/src/screens/Tenants/TenantsScreen.js

@@ -1,38 +1,44 @@
+import { Box, HStack, Pressable, Text } from 'native-base';
 import React from 'react';
-import i18n from 'i18n-js';
-import { ListItem, Text, Icon, Left, Body, Fab } from 'native-base';
-import { StyleSheet } from 'react-native';
 import { getTenants } from '../../api/TenantManagementAPI';
-import { activeTheme } from '../../theme/variables';
 import DataList from '../../components/DataList/DataList';
-import { withPermission } from '../../hocs/PermissionHOC';
-
-const CreateTenantButtonWithPermission = withPermission(Fab, 'AbpTenantManagement.Tenants.Create');
+import { LocalizationContext } from '../../contexts/LocalizationContext';
 
 function TenantsScreen({ navigation }) {
+  const { t } = React.useContext(LocalizationContext);
+
   return (
-    <>
+    <Box
+      w={{
+        base: '100%',
+        md: '25%',
+      }}
+    >
       <DataList
         navigation={navigation}
         fetchFn={getTenants}
-        render={tenant => (
-          <ListItem avatar onPress={() => navigateToCreateUpdateTenantScreen(navigation, tenant)}>
-            <Left style={styles.listItem}>
-              <Body>
-                <Text>{tenant.name}</Text>
-              </Body>
-            </Left>
-          </ListItem>
+        render={({ item }) => (
+          <Pressable
+            onPress={() => navigateToCreateUpdateTenantScreen(navigation, item)}
+          >
+            <Box
+              borderBottomWidth="1"
+              borderColor="coolGray.200"
+              pl="2"
+              pr="5"
+              py="2"
+            >
+              <HStack space={1}>
+                <Text color="coolGray.500">{t('AbpTenantManagement::TenantName')}:</Text>
+                <Text color="coolGray.800" bold>
+                  {item.name}
+                </Text>
+              </HStack>
+            </Box>
+          </Pressable>
         )}
       />
-
-      <CreateTenantButtonWithPermission
-        style={{ backgroundColor: activeTheme.brandPrimary }}
-        position="bottomRight"
-        onPress={() => navigation.navigate('CreateUpdateTenant')}>
-        <Icon name="add" />
-      </CreateTenantButtonWithPermission>
-    </>
+    </Box>
   );
 }
 
@@ -42,18 +48,4 @@ const navigateToCreateUpdateTenantScreen = (navigation, tenant = {}) => {
   });
 };
 
-const styles = StyleSheet.create({
-  listItem: {
-    alignItems: 'center',
-    marginVertical: 3,
-    marginLeft: -15,
-    paddingTop: 5,
-    paddingBottom: 5,
-    paddingLeft: 15,
-    backgroundColor: '#f9f9f9',
-    width: '110%',
-    minHeight: 50,
-  },
-});
-
 export default TenantsScreen;

templates/app/react-native/src/screens/Users/UsersScreen.js

@@ -1,40 +1,55 @@
+import { Box, HStack, Pressable, Text } from 'native-base';
 import React from 'react';
-import { ListItem, Text, Icon, Left, Thumbnail, Body, Fab } from 'native-base';
-import { StyleSheet } from 'react-native';
 import { getUsers } from '../../api/IdentityAPI';
-import { activeTheme } from '../../theme/variables';
 import DataList from '../../components/DataList/DataList';
-import { withPermission } from '../../hocs/PermissionHOC';
-
-const CreateUserButtonWithPermission = withPermission(Fab, 'AbpIdentity.Users.Create');
+import { LocalizationContext } from '../../contexts/LocalizationContext';
 
 function UsersScreen({ navigation }) {
+  const { t } = React.useContext(LocalizationContext);
+
   return (
-    <>
       <DataList
         navigation={navigation}
         fetchFn={getUsers}
-        render={user => (
-          <ListItem avatar onPress={() => navigateToCreateUpdateUserScreen(navigation, user)}>
-            <Left style={styles.listItem}>
-              <Thumbnail source={require('../../../assets/avatar.png')} />
-              <Body>
-                <Text>{user.userName}</Text>
-                <Text note>{user.email}</Text>
-              </Body>
-            </Left>
-          </ListItem>
+        render={({item}) => (
+          <Pressable
+          onPress={() => navigateToCreateUpdateUserScreen(navigation, item)}
+        >
+          <Box
+            borderBottomWidth="1"
+            borderColor="coolGray.200"
+            pl="2"
+            pr="5"
+            py="2"
+          >
+            <HStack space={1}>
+              <Text color="coolGray.500">{t('AbpIdentity::UserName')}:</Text>
+              <Text color="coolGray.800" bold>
+                {item.userName}
+              </Text>
+            </HStack>
+            <HStack space={1}>
+              <Text color="coolGray.500">{t('AbpIdentity::EmailAddress')}:</Text>
+              <Text color="coolGray.800" bold>
+                {item.email}
+              </Text>
+            </HStack>
+            <HStack space={1}>
+              <Text color="coolGray.500">{t('AbpIdentity::DisplayName:Name')}:</Text>
+              <Text color="coolGray.800" bold>
+                {item.name}
+              </Text>
+            </HStack>
+            <HStack space={1}>
+              <Text color="coolGray.500">{t('AbpIdentity::DisplayName:Surname')}:</Text>
+              <Text color="coolGray.800" bold>
+                {item.surname}
+              </Text>
+            </HStack>
+          </Box>
+        </Pressable>
         )}
       />
-
-      <CreateUserButtonWithPermission
-        containerStyle={{}}
-        style={{ backgroundColor: activeTheme.brandPrimary }}
-        position="bottomRight"
-        onPress={() => navigation.navigate('CreateUpdateUser')}>
-        <Icon name="add" />
-      </CreateUserButtonWithPermission>
-    </>
   );
 }
 
@@ -44,18 +59,4 @@ const navigateToCreateUpdateUserScreen = (navigation, user = {}) => {
   });
 };
 
-const styles = StyleSheet.create({
-  container: { flex: 1 },
-  listItem: {
-    alignItems: 'center',
-    marginVertical: 3,
-    marginLeft: -15,
-    paddingTop: 5,
-    paddingBottom: 5,
-    paddingLeft: 15,
-    backgroundColor: '#f9f9f9',
-    width: '110%',
-  },
-});
-
 export default UsersScreen;

templates/app/react-native/src/store/index.js

@@ -1,9 +1,9 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import { configureStore } from '@reduxjs/toolkit';
+import { persistReducer, persistStore } from 'redux-persist';
 import createSagaMiddleware from 'redux-saga';
-import { persistStore, persistReducer } from 'redux-persist';
-import { rootSaga } from './sagas';
 import rootReducer from './reducers';
-import AsyncStorage from '@react-native-async-storage/async-storage';
+import { rootSaga } from './sagas';
 
 const sagaMiddleware = createSagaMiddleware();
 

templates/app/react-native/src/store/reducers/index.js

@@ -1,6 +1,6 @@
 import { combineReducers } from '@reduxjs/toolkit';
-import LoadingReducer from './LoadingReducer';
 import AppReducer from './AppReducer';
+import LoadingReducer from './LoadingReducer';
 import PersistentStorageReducer from './PersistentStorageReducer';
 
 const rootReducer = combineReducers({

templates/app/react-native/src/store/sagas/AppSaga.js

@@ -1,6 +1,6 @@
-import { call, put, takeLatest, all } from 'redux-saga/effects';
+import { all, call, put, takeLatest } from 'redux-saga/effects';
+import { Logout } from '../../api/AccountAPI';
 import { getApplicationConfiguration } from '../../api/ApplicationConfigurationAPI';
-import { logout as logoutAsync } from '../../api/AccountAPI';
 import AppActions from '../actions/AppActions';
 import LoadingActions from '../actions/LoadingActions';
 import PersistentStorageActions from '../actions/PersistentStorageActions';
@@ -20,7 +20,7 @@ function* setLanguage(action) {
 }
 
 function* logout() {
-  yield call(logoutAsync);
+  yield call(Logout);
   yield put(PersistentStorageActions.setToken({}));
   yield put(AppActions.fetchAppConfigAsync());
 }

templates/app/react-native/src/theme/components/Badge.js

@@ -1,39 +0,0 @@
-// @flow
-
-import variable from '../variables/Platform';
-import { PLATFORM } from '../variables/CommonColor';
-
-export default (variables /* : * */ = variable) => {
-  const badgeTheme = {
-    '.primary': {
-      backgroundColor: variables.buttonPrimaryBg,
-    },
-    '.warning': {
-      backgroundColor: variables.buttonWarningBg,
-    },
-    '.info': {
-      backgroundColor: variables.buttonInfoBg,
-    },
-    '.success': {
-      backgroundColor: variables.buttonSuccessBg,
-    },
-    '.danger': {
-      backgroundColor: variables.buttonDangerBg,
-    },
-    'NativeBase.Text': {
-      color: variables.badgeColor,
-      fontSize: variables.fontSizeBase,
-      lineHeight: variables.lineHeight - 1,
-      textAlign: 'center',
-      paddingHorizontal: 3,
-    },
-    backgroundColor: variables.badgeBg,
-    padding: variables.badgePadding,
-    paddingHorizontal: 6,
-    alignSelf: 'flex-start',
-    justifyContent: variables.platform === PLATFORM.IOS ? 'center' : undefined,
-    borderRadius: 13.5,
-    height: 27,
-  };
-  return badgeTheme;
-};

templates/app/react-native/src/theme/components/Body.js

@@ -1,11 +0,0 @@
-// @flow
-
-export default () => {
-  const bodyTheme = {
-    flex: 1,
-    alignItems: 'center',
-    alignSelf: 'center',
-  };
-
-  return bodyTheme;
-};

templates/app/react-native/src/theme/components/Button.js

@@ -1,384 +0,0 @@
-// @flow
-
-import variable from '../variables/Platform';
-import { PLATFORM } from '../variables/CommonColor';
-
-export default (variables /* : * */ = variable) => {
-  const { platformStyle } = variables;
-  const { platform } = variables;
-  const darkCommon = {
-    'NativeBase.Text': {
-      color: variables.brandDark,
-    },
-    'NativeBase.Icon': {
-      color: variables.brandDark,
-    },
-    'NativeBase.IconNB': {
-      color: variables.brandDark,
-    },
-  };
-  const lightCommon = {
-    'NativeBase.Text': {
-      color: variables.brandLight,
-    },
-    'NativeBase.Icon': {
-      color: variables.brandLight,
-    },
-    'NativeBase.IconNB': {
-      color: variables.brandLight,
-    },
-  };
-  const primaryCommon = {
-    'NativeBase.Text': {
-      color: variables.buttonPrimaryBg,
-    },
-    'NativeBase.Icon': {
-      color: variables.buttonPrimaryBg,
-    },
-    'NativeBase.IconNB': {
-      color: variables.buttonPrimaryBg,
-    },
-  };
-  const successCommon = {
-    'NativeBase.Text': {
-      color: variables.buttonSuccessBg,
-    },
-    'NativeBase.Icon': {
-      color: variables.buttonSuccessBg,
-    },
-    'NativeBase.IconNB': {
-      color: variables.buttonSuccessBg,
-    },
-  };
-  const infoCommon = {
-    'NativeBase.Text': {
-      color: variables.buttonInfoBg,
-    },
-    'NativeBase.Icon': {
-      color: variables.buttonInfoBg,
-    },
-    'NativeBase.IconNB': {
-      color: variables.buttonInfoBg,
-    },
-  };
-  const warningCommon = {
-    'NativeBase.Text': {
-      color: variables.buttonWarningBg,
-    },
-    'NativeBase.Icon': {
-      color: variables.buttonWarningBg,
-    },
-    'NativeBase.IconNB': {
-      color: variables.buttonWarningBg,
-    },
-  };
-  const dangerCommon = {
-    'NativeBase.Text': {
-      color: variables.buttonDangerBg,
-    },
-    'NativeBase.Icon': {
-      color: variables.buttonDangerBg,
-    },
-    'NativeBase.IconNB': {
-      color: variables.buttonDangerBg,
-    },
-  };
-  const buttonTheme = {
-    '.disabled': {
-      '.transparent': {
-        backgroundColor: 'transparent',
-        'NativeBase.Text': {
-          color: variables.buttonDisabledBg,
-        },
-        'NativeBase.Icon': {
-          color: variables.buttonDisabledBg,
-        },
-        'NativeBase.IconNB': {
-          color: variables.buttonDisabledBg,
-        },
-      },
-      'NativeBase.Icon': {
-        color: variables.brandLight,
-      },
-      'NativeBase.IconNB': {
-        color: variables.brandLight,
-      },
-      backgroundColor: variables.buttonDisabledBg,
-    },
-    '.bordered': {
-      '.dark': {
-        ...darkCommon,
-        backgroundColor: 'transparent',
-        borderColor: variables.brandDark,
-        borderWidth: variables.borderWidth * 2,
-      },
-      '.light': {
-        ...lightCommon,
-        backgroundColor: 'transparent',
-        borderColor: variables.brandLight,
-        borderWidth: variables.borderWidth * 2,
-      },
-      '.primary': {
-        ...primaryCommon,
-        backgroundColor: 'transparent',
-        borderColor: variables.buttonPrimaryBg,
-        borderWidth: variables.borderWidth * 2,
-      },
-      '.success': {
-        ...successCommon,
-        backgroundColor: 'transparent',
-        borderColor: variables.buttonSuccessBg,
-        borderWidth: variables.borderWidth * 2,
-      },
-      '.info': {
-        ...infoCommon,
-        backgroundColor: 'transparent',
-        borderColor: variables.buttonInfoBg,
-        borderWidth: variables.borderWidth * 2,
-      },
-      '.warning': {
-        ...warningCommon,
-        backgroundColor: 'transparent',
-        borderColor: variables.buttonWarningBg,
-        borderWidth: variables.borderWidth * 2,
-      },
-      '.danger': {
-        ...dangerCommon,
-        backgroundColor: 'transparent',
-        borderColor: variables.buttonDangerBg,
-        borderWidth: variables.borderWidth * 2,
-      },
-      '.disabled': {
-        backgroundColor: 'transparent',
-        borderColor: variables.buttonDisabledBg,
-        borderWidth: variables.borderWidth * 2,
-        'NativeBase.Text': {
-          color: variables.buttonDisabledBg,
-        },
-      },
-      ...primaryCommon,
-      borderWidth: variables.borderWidth * 2,
-      elevation: null,
-      shadowColor: null,
-      shadowOffset: null,
-      shadowOpacity: null,
-      shadowRadius: null,
-      backgroundColor: 'transparent',
-    },
-
-    '.dark': {
-      '.bordered': {
-        ...darkCommon,
-      },
-      backgroundColor: variables.brandDark,
-    },
-    '.light': {
-      '.transparent': {
-        ...lightCommon,
-        backgroundColor: 'transparent',
-      },
-      '.bordered': {
-        ...lightCommon,
-      },
-      ...darkCommon,
-      backgroundColor: variables.brandLight,
-    },
-
-    '.primary': {
-      '.bordered': {
-        ...primaryCommon,
-      },
-      backgroundColor: variables.buttonPrimaryBg,
-    },
-
-    '.success': {
-      '.bordered': {
-        ...successCommon,
-      },
-      backgroundColor: variables.buttonSuccessBg,
-    },
-
-    '.info': {
-      '.bordered': {
-        ...infoCommon,
-      },
-      backgroundColor: variables.buttonInfoBg,
-    },
-
-    '.warning': {
-      '.bordered': {
-        ...warningCommon,
-      },
-      backgroundColor: variables.buttonWarningBg,
-    },
-
-    '.danger': {
-      '.bordered': {
-        ...dangerCommon,
-      },
-      backgroundColor: variables.buttonDangerBg,
-    },
-
-    '.block': {
-      justifyContent: 'center',
-      alignSelf: 'stretch',
-    },
-
-    '.full': {
-      justifyContent: 'center',
-      alignSelf: 'stretch',
-      borderRadius: 0,
-    },
-
-    '.rounded': {
-      borderRadius: variables.borderRadiusLarge,
-    },
-
-    '.transparent': {
-      backgroundColor: 'transparent',
-      elevation: 0,
-      shadowColor: null,
-      shadowOffset: null,
-      shadowRadius: null,
-      shadowOpacity: null,
-      ...primaryCommon,
-      '.dark': {
-        ...darkCommon,
-      },
-      '.danger': {
-        ...dangerCommon,
-      },
-      '.warning': {
-        ...warningCommon,
-      },
-      '.info': {
-        ...infoCommon,
-      },
-      '.primary': {
-        ...primaryCommon,
-      },
-      '.success': {
-        ...successCommon,
-      },
-      '.light': {
-        ...lightCommon,
-      },
-      '.disabled': {
-        backgroundColor: 'transparent',
-        borderColor: variables.buttonDisabledBg,
-        borderWidth: variables.borderWidth * 2,
-        'NativeBase.Text': {
-          color: variables.buttonDisabledBg,
-        },
-        'NativeBase.Icon': {
-          color: variables.buttonDisabledBg,
-        },
-        'NativeBase.IconNB': {
-          color: variables.buttonDisabledBg,
-        },
-      },
-    },
-
-    '.small': {
-      height: 30,
-      'NativeBase.Text': {
-        fontSize: 14,
-      },
-      'NativeBase.Icon': {
-        fontSize: 20,
-        paddingTop: 0,
-      },
-      'NativeBase.IconNB': {
-        fontSize: 20,
-        paddingTop: 0,
-      },
-    },
-
-    '.large': {
-      height: 60,
-      'NativeBase.Text': {
-        fontSize: 22,
-      },
-    },
-
-    '.capitalize': {},
-
-    '.vertical': {
-      flexDirection: 'column',
-      height: null,
-    },
-
-    'NativeBase.Text': {
-      fontFamily: variables.buttonFontFamily,
-      marginLeft: 0,
-      marginRight: 0,
-      color: variables.inverseTextColor,
-      fontSize: variables.buttonTextSize,
-      paddingHorizontal: 16,
-      backgroundColor: 'transparent',
-    },
-
-    'NativeBase.Icon': {
-      color: variables.inverseTextColor,
-      fontSize: 24,
-      marginHorizontal: 16,
-      paddingTop: platform === PLATFORM.IOS ? 2 : undefined,
-    },
-    'NativeBase.IconNB': {
-      color: variables.inverseTextColor,
-      fontSize: 24,
-      marginHorizontal: 16,
-      paddingTop: platform === PLATFORM.IOS ? 2 : undefined,
-    },
-
-    '.iconLeft': {
-      'NativeBase.Text': {
-        marginLeft: 0,
-      },
-      'NativeBase.IconNB': {
-        marginRight: 0,
-        marginLeft: 16,
-      },
-      'NativeBase.Icon': {
-        marginRight: 0,
-        marginLeft: 16,
-      },
-    },
-    '.iconRight': {
-      'NativeBase.Text': {
-        marginRight: 0,
-      },
-      'NativeBase.IconNB': {
-        marginLeft: 0,
-        marginRight: 16,
-      },
-      'NativeBase.Icon': {
-        marginLeft: 0,
-        marginRight: 16,
-      },
-    },
-    '.picker': {
-      'NativeBase.Text': {
-        '.note': {
-          fontSize: 16,
-          lineHeight: null,
-        },
-      },
-    },
-    paddingVertical: variables.buttonPadding,
-    backgroundColor: variables.buttonPrimaryBg,
-    borderRadius: variables.borderRadiusBase,
-    borderColor: variables.buttonPrimaryBg,
-    borderWidth: null,
-    height: 45,
-    flexDirection: 'row',
-    elevation: 2,
-    shadowColor: platformStyle === PLATFORM.MATERIAL ? variables.brandDark : undefined,
-    shadowOffset: platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined,
-    shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined,
-    shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined,
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  };
-  return buttonTheme;
-};

templates/app/react-native/src/theme/components/Card.js

@@ -1,37 +0,0 @@
-// @flow
-
-import variable from '../variables/Platform';
-
-export default (variables /* : * */ = variable) => {
-  const cardTheme = {
-    '.transparent': {
-      shadowColor: null,
-      shadowOffset: null,
-      shadowOpacity: null,
-      shadowRadius: null,
-      elevation: null,
-      backgroundColor: 'transparent',
-      borderWidth: 0,
-    },
-    '.noShadow': {
-      shadowColor: null,
-      shadowOffset: null,
-      shadowOpacity: null,
-      elevation: null,
-    },
-    marginVertical: 5,
-    marginHorizontal: 2,
-    borderWidth: variables.borderWidth,
-    borderRadius: variables.cardBorderRadius,
-    borderColor: variables.cardBorderColor,
-    flexWrap: 'nowrap',
-    backgroundColor: variables.cardDefaultBg,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.1,
-    shadowRadius: 1.5,
-    elevation: 3,
-  };
-
-  return cardTheme;
-};

templates/app/react-native/src/theme/components/CardItem.js

@@ -1,198 +0,0 @@
-// @flow
-
-import { StyleSheet } from 'react-native';
-
-import variable from '../variables/Platform';
-import { PLATFORM } from '../variables/CommonColor';
-
-export default (variables /* : * */ = variable) => {
-  const { platform } = variables;
-  const transparentBtnCommon = {
-    'NativeBase.Text': {
-      fontSize: variables.DefaultFontSize - 3,
-      color: variables.sTabBarActiveTextColor,
-    },
-    'NativeBase.Icon': {
-      fontSize: variables.iconFontSize - 10,
-      color: variables.sTabBarActiveTextColor,
-      marginHorizontal: null,
-    },
-    'NativeBase.IconNB': {
-      fontSize: variables.iconFontSize - 10,
-      color: variables.sTabBarActiveTextColor,
-    },
-    paddingVertical: null,
-    paddingHorizontal: null,
-  };
-
-  const cardItemTheme = {
-    'NativeBase.Left': {
-      'NativeBase.Body': {
-        'NativeBase.Text': {
-          '.note': {
-            color: variables.listNoteColor,
-            fontWeight: '400',
-            marginRight: 20,
-          },
-        },
-        flex: 1,
-        marginLeft: 10,
-        alignItems: null,
-      },
-      'NativeBase.Icon': {
-        fontSize: variables.iconFontSize,
-      },
-      'NativeBase.IconNB': {
-        fontSize: variables.iconFontSize,
-      },
-      'NativeBase.Text': {
-        marginLeft: 10,
-        alignSelf: 'center',
-      },
-      'NativeBase.Button': {
-        '.transparent': {
-          ...transparentBtnCommon,
-          paddingRight: variables.cardItemPadding + 5,
-        },
-      },
-      flex: 1,
-      flexDirection: 'row',
-      alignItems: 'center',
-    },
-    '.content': {
-      'NativeBase.Text': {
-        color: platform === PLATFORM.IOS ? '#555' : '#222',
-        fontSize: variables.DefaultFontSize - 2,
-      },
-    },
-    '.cardBody': {
-      padding: -5,
-      'NativeBase.Text': {
-        marginTop: 5,
-      },
-    },
-    'NativeBase.Body': {
-      'NativeBase.Text': {
-        '.note': {
-          color: variables.listNoteColor,
-          fontWeight: '200',
-          marginRight: 20,
-        },
-      },
-      'NativeBase.Button': {
-        '.transparent': {
-          ...transparentBtnCommon,
-          paddingRight: variables.cardItemPadding + 5,
-          alignSelf: 'stretch',
-        },
-      },
-      flex: 1,
-      alignSelf: 'stretch',
-      alignItems: 'flex-start',
-    },
-    'NativeBase.Right': {
-      'NativeBase.Badge': {
-        alignSelf: null,
-      },
-      'NativeBase.Button': {
-        '.transparent': {
-          ...transparentBtnCommon,
-        },
-        alignSelf: null,
-      },
-      'NativeBase.Icon': {
-        alignSelf: null,
-        fontSize: variables.iconFontSize - 8,
-        color: variables.cardBorderColor,
-      },
-      'NativeBase.IconNB': {
-        alignSelf: null,
-        fontSize: variables.iconFontSize - 8,
-        color: variables.cardBorderColor,
-      },
-      'NativeBase.Text': {
-        fontSize: variables.DefaultFontSize - 1,
-        alignSelf: null,
-      },
-      'NativeBase.Thumbnail': {
-        alignSelf: null,
-      },
-      'NativeBase.Image': {
-        alignSelf: null,
-      },
-      'NativeBase.Radio': {
-        alignSelf: null,
-      },
-      'NativeBase.Checkbox': {
-        alignSelf: null,
-      },
-      'NativeBase.Switch': {
-        alignSelf: null,
-      },
-      flex: 0.8,
-    },
-    '.header': {
-      'NativeBase.Text': {
-        fontSize: 16,
-        fontWeight: platform === PLATFORM.IOS ? '600' : '500',
-      },
-      '.bordered': {
-        'NativeBase.Text': {
-          color: variables.brandPrimary,
-          fontWeight: platform === PLATFORM.IOS ? '600' : '500',
-        },
-        borderBottomWidth: variables.borderWidth,
-      },
-      borderBottomWidth: null,
-      paddingVertical: variables.cardItemPadding + 5,
-    },
-    '.footer': {
-      'NativeBase.Text': {
-        fontSize: 16,
-        fontWeight: platform === PLATFORM.IOS ? '600' : '500',
-      },
-      '.bordered': {
-        'NativeBase.Text': {
-          color: variables.brandPrimary,
-          fontWeight: platform === PLATFORM.IOS ? '600' : '500',
-        },
-        borderTopWidth: variables.borderWidth,
-      },
-      borderBottomWidth: null,
-    },
-    'NativeBase.Text': {
-      '.note': {
-        color: variables.listNoteColor,
-        fontWeight: '200',
-      },
-    },
-    'NativeBase.Icon': {
-      width: variables.iconFontSize + 5,
-      fontSize: variables.iconFontSize - 2,
-    },
-    'NativeBase.IconNB': {
-      width: variables.iconFontSize + 5,
-      fontSize: variables.iconFontSize - 2,
-    },
-    '.bordered': {
-      borderBottomWidth: StyleSheet.hairlineWidth,
-      borderColor: variables.cardBorderColor,
-    },
-    '.first': {
-      borderTopLeftRadius: variables.cardBorderRadius,
-      borderTopRightRadius: variables.cardBorderRadius,
-    },
-    '.last': {
-      borderBottomLeftRadius: variables.cardBorderRadius,
-      borderBottomRightRadius: variables.cardBorderRadius,
-    },
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderRadius: variables.cardBorderRadius,
-    padding: variables.cardItemPadding + 5,
-    paddingVertical: variables.cardItemPadding,
-    backgroundColor: variables.cardDefaultBg,
-  };
-
-  return cardItemTheme;
-};

templates/app/react-native/src/theme/components/CheckBox.js

@@ -1,38 +0,0 @@
-// @flow
-
-import variable from '../variables/Platform';
-
-export default (variables /* : * */ = variable) => {
-  const checkBoxTheme = {
-    '.checked': {
-      'NativeBase.Icon': {
-        color: variables.checkboxTickColor,
-      },
-      'NativeBase.IconNB': {
-        color: variables.checkboxTickColor,
-      },
-    },
-    'NativeBase.Icon': {
-      color: 'transparent',
-      lineHeight: variables.CheckboxIconSize,
-      marginTop: variables.CheckboxIconMarginTop,
-      fontSize: variables.CheckboxFontSize,
-    },
-    'NativeBase.IconNB': {
-      color: 'transparent',
-      lineHeight: variables.CheckboxIconSize,
-      marginTop: variables.CheckboxIconMarginTop,
-      fontSize: variables.CheckboxFontSize,
-    },
-    borderRadius: variables.CheckboxRadius,
-    overflow: 'hidden',
-    width: variables.checkboxSize,
-    height: variables.checkboxSize,
-    borderWidth: variables.CheckboxBorderWidth,
-    paddingLeft: variables.CheckboxPaddingLeft - 1,
-    paddingBottom: variables.CheckboxPaddingBottom,
-    left: 10,
-  };
-
-  return checkBoxTheme;
-};

templates/app/react-native/src/theme/components/Container.js

@@ -1,17 +0,0 @@
-// @flow
-
-import { Platform, Dimensions } from 'react-native';
-
-import variable from '../variables/Platform';
-import { PLATFORM } from '../variables/CommonColor';
-
-const deviceHeight = Dimensions.get('window').height;
-export default (variables /* : * */ = variable) => {
-  const theme = {
-    flex: 1,
-    height: Platform.OS === PLATFORM.IOS ? deviceHeight : deviceHeight - 20,
-    backgroundColor: variables.containerBgColor,
-  };
-
-  return theme;
-};

templates/app/react-native/src/theme/components/Content.js

@@ -1,14 +0,0 @@
-// @flow
-
-export default () => {
-  const contentTheme = {
-    flex: 1,
-    backgroundColor: 'transparent',
-    'NativeBase.Segment': {
-      borderWidth: 0,
-      backgroundColor: 'transparent',
-    },
-  };
-
-  return contentTheme;
-};

templates/app/react-native/src/theme/components/Fab.js

@@ -1,25 +0,0 @@
-// @flow
-
-export default () => {
-  const fabTheme = {
-    'NativeBase.Button': {
-      alignItems: 'center',
-      padding: null,
-      justifyContent: 'center',
-      'NativeBase.Icon': {
-        alignSelf: 'center',
-        fontSize: 20,
-        marginLeft: 0,
-        marginRight: 0,
-      },
-      'NativeBase.IconNB': {
-        alignSelf: 'center',
-        fontSize: 20,
-        marginLeft: 0,
-        marginRight: 0,
-      },
-    },
-  };
-
-  return fabTheme;
-};

templates/app/react-native/src/theme/components/Footer.js

@@ -1,117 +0,0 @@
-// @flow
-
-import variable from '../variables/Platform';
-import { PLATFORM } from '../variables/CommonColor';
-
-export default (variables /* : * */ = variable) => {
-  const { platformStyle } = variables;
-  const { platform } = variables;
-
-  const iconCommon = {
-    'NativeBase.Icon': {
-      color: variables.tabBarActiveTextColor,
-    },
-  };
-  const iconNBCommon = {
-    'NativeBase.IconNB': {
-      color: variables.tabBarActiveTextColor,
-    },
-  };
-  const textCommon = {
-    'NativeBase.Text': {
-      color: variables.tabBarActiveTextColor,
-    },
-  };
-  const footerTheme = {
-    'NativeBase.Left': {
-      'NativeBase.Button': {
-        '.transparent': {
-          backgroundColor: 'transparent',
-          borderColor: null,
-          elevation: 0,
-          shadowColor: null,
-          shadowOffset: null,
-          shadowRadius: null,
-          shadowOpacity: null,
-          ...iconCommon,
-          ...iconNBCommon,
-          ...textCommon,
-        },
-        alignSelf: null,
-        ...iconCommon,
-        ...iconNBCommon,
-        // ...textCommon
-      },
-      flex: 1,
-      alignSelf: 'center',
-      alignItems: 'flex-start',
-    },
-    'NativeBase.Body': {
-      flex: 1,
-      alignItems: 'center',
-      alignSelf: 'center',
-      flexDirection: 'row',
-      'NativeBase.Button': {
-        alignSelf: 'center',
-        '.transparent': {
-          backgroundColor: 'transparent',
-          borderColor: null,
-          elevation: 0,
-          shadowColor: null,
-          shadowOffset: null,
-          shadowRadius: null,
-          shadowOpacity: null,
-          ...iconCommon,
-          ...iconNBCommon,
-          ...textCommon,
-        },
-        '.full': {
-          height: variables.footerHeight,
-          paddingBottom: variables.footerPaddingBottom,
-          flex: 1,
-        },
-        ...iconCommon,
-        ...iconNBCommon,
-        // ...textCommon
-      },
-    },
-    'NativeBase.Right': {
-      'NativeBase.Button': {
-        '.transparent': {
-          backgroundColor: 'transparent',
-          borderColor: null,
-          elevation: 0,
-          shadowColor: null,
-          shadowOffset: null,
-          shadowRadius: null,
-          shadowOpacity: null,
-          ...iconCommon,
-          ...iconNBCommon,
-          ...textCommon,
-        },
-        alignSelf: null,
-        ...iconCommon,
-        ...iconNBCommon,
-        // ...textCommon
-      },
-      flex: 1,
-      alignSelf: 'center',
-      alignItems: 'flex-end',
-    },
-    backgroundColor: variables.footerDefaultBg,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    borderTopWidth:
-      platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
-        ? variables.borderWidth
-        : undefined,
-    borderColor:
-      platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL ? '#cbcbcb' : undefined,
-    height: variables.footerHeight,
-    paddingBottom: variables.footerPaddingBottom,
-    elevation: 3,
-    left: 0,
-    right: 0,
-  };
-  return footerTheme;
-};

templates/app/react-native/src/theme/components/FooterTab.js

@@ -1,78 +0,0 @@
-// @flow
-
-import { Platform } from 'react-native';
-
-import variable from '../variables/Platform';
-import { PLATFORM } from '../variables/CommonColor';
-
-export default (variables /* : * */ = variable) => {
-  const { platform } = variables;
-
-  const footerTabTheme = {
-    'NativeBase.Button': {
-      '.active': {
-        'NativeBase.Text': {
-          color: variables.tabBarActiveTextColor,
-          fontSize: variables.tabBarTextSize,
-          lineHeight: 16,
-        },
-        'NativeBase.Icon': {
-          color: variables.tabBarActiveTextColor,
-        },
-        'NativeBase.IconNB': {
-          color: variables.tabBarActiveTextColor,
-        },
-        backgroundColor: variables.tabActiveBgColor,
-      },
-      flexDirection: null,
-      backgroundColor: 'transparent',
-      borderColor: null,
-      elevation: 0,
-      shadowColor: null,
-      shadowOffset: null,
-      shadowRadius: null,
-      shadowOpacity: null,
-      alignSelf: 'center',
-      flex: 1,
-      height: variables.footerHeight,
-      justifyContent: 'center',
-      '.badge': {
-        'NativeBase.Badge': {
-          'NativeBase.Text': {
-            fontSize: 11,
-            fontWeight: platform === PLATFORM.IOS ? '600' : undefined,
-            lineHeight: 14,
-          },
-          top: -3,
-          alignSelf: 'center',
-          left: 10,
-          zIndex: 99,
-          height: 18,
-          padding: 1.7,
-          paddingHorizontal: 3,
-        },
-        'NativeBase.Icon': {
-          marginTop: -18,
-        },
-      },
-      'NativeBase.Icon': {
-        color: variables.tabBarTextColor,
-      },
-      'NativeBase.IconNB': {
-        color: variables.tabBarTextColor,
-      },
-      'NativeBase.Text': {
-        color: variables.tabBarTextColor,
-        fontSize: variables.tabBarTextSize,
-        lineHeight: 16,
-      },
-    },
-    backgroundColor: Platform.OS === PLATFORM.ANDROID ? variables.footerDefaultBg : undefined,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    flex: 1,
-    alignSelf: 'stretch',
-  };
-
-  return footerTabTheme;
-};

templates/app/react-native/src/theme/components/Form.js

@@ -1,86 +0,0 @@
-// @flow
-
-export default () => {
-  const theme = {
-    'NativeBase.Item': {
-      '.fixedLabel': {
-        'NativeBase.Label': {
-          paddingLeft: null,
-        },
-        marginLeft: 15,
-      },
-      '.inlineLabel': {
-        'NativeBase.Label': {
-          paddingLeft: null,
-        },
-        marginLeft: 15,
-      },
-      '.placeholderLabel': {
-        'NativeBase.Input': {},
-      },
-      '.stackedLabel': {
-        'NativeBase.Label': {
-          top: 5,
-          paddingLeft: null,
-        },
-        'NativeBase.Input': {
-          paddingLeft: null,
-          marginLeft: null,
-        },
-        'NativeBase.Icon': {
-          marginTop: 36,
-        },
-        marginLeft: 15,
-      },
-      '.floatingLabel': {
-        'NativeBase.Input': {
-          paddingLeft: null,
-          top: 10,
-          marginLeft: null,
-        },
-        'NativeBase.Label': {
-          left: 0,
-          top: 6,
-        },
-        'NativeBase.Icon': {
-          top: 6,
-        },
-        marginTop: 15,
-        marginLeft: 15,
-      },
-      '.regular': {
-        'NativeBase.Label': {
-          left: 0,
-        },
-        marginLeft: 0,
-      },
-      '.rounded': {
-        'NativeBase.Label': {
-          left: 0,
-        },
-        marginLeft: 0,
-      },
-      '.underline': {
-        'NativeBase.Label': {
-          left: 0,
-          top: 0,
-          position: 'relative',
-        },
-        'NativeBase.Input': {
-          left: -15,
-        },
-        marginLeft: 15,
-      },
-      '.last': {
-        marginLeft: 0,
-        paddingLeft: 15,
-      },
-      'NativeBase.Label': {
-        paddingRight: 5,
-      },
-      marginLeft: 15,
-    },
-  };
-
-  return theme;
-};

templates/app/react-native/src/theme/components/H1.js

@@ -1,13 +0,0 @@
-// @flow
-
-import variable from '../variables/Platform';
-
-export default (variables /* : * */ = variable) => {
-  const h1Theme = {
-    color: variables.textColor,
-    fontSize: variables.fontSizeH1,
-    lineHeight: variables.lineHeightH1,
-  };
-
-  return h1Theme;
-};

templates/app/react-native/src/theme/components/H2.js

@@ -1,13 +0,0 @@
-// @flow
-
-import variable from '../variables/Platform';
-
-export default (variables /* : * */ = variable) => {
-  const h2Theme = {
-    color: variables.textColor,
-    fontSize: variables.fontSizeH2,
-    lineHeight: variables.lineHeightH2,
-  };
-
-  return h2Theme;
-};

templates/app/react-native/src/theme/components/H3.js

@@ -1,13 +0,0 @@
-// @flow
-
-import variable from '../variables/Platform';
-
-export default (variables /* : * */ = variable) => {
-  const h3Theme = {
-    color: variables.textColor,
-    fontSize: variables.fontSizeH3,
-    lineHeight: variables.lineHeightH3,
-  };
-
-  return h3Theme;
-};

templates/app/react-native/src/theme/components/Header.js

@@ -1,389 +0,0 @@
-// @flow
-
-import { PixelRatio, StatusBar } from 'react-native';
-
-import variable from '../variables/Platform';
-import { PLATFORM } from '../variables/CommonColor';
-
-export default (variables /* : * */ = variable) => {
-  const { platformStyle } = variables;
-  const { platform } = variables;
-
-  const headerTheme = {
-    '.span': {
-      height: 128,
-      'NativeBase.Left': {
-        alignSelf: 'flex-start',
-      },
-      'NativeBase.Body': {
-        alignSelf: 'flex-end',
-        alignItems: 'flex-start',
-        justifyContent: 'center',
-        paddingBottom: 26,
-      },
-      'NativeBase.Right': {
-        alignSelf: 'flex-start',
-      },
-    },
-    '.hasSubtitle': {
-      'NativeBase.Body': {
-        'NativeBase.Title': {
-          fontSize: variables.titleFontSize - 2,
-          fontFamily: variables.titleFontfamily,
-          textAlign: 'center',
-          fontWeight: '500',
-          paddingBottom: 3,
-        },
-        'NativeBase.Subtitle': {
-          fontSize: variables.subTitleFontSize,
-          fontFamily: variables.titleFontfamily,
-          color: variables.subtitleColor,
-          textAlign: 'center',
-        },
-      },
-    },
-    '.transparent': {
-      backgroundColor: 'transparent',
-      borderBottomColor: 'transparent',
-      elevation: 0,
-      shadowColor: null,
-      shadowOffset: null,
-      shadowRadius: null,
-      shadowOpacity: null,
-      paddingTop: platform === PLATFORM.ANDROID ? StatusBar.currentHeight : undefined,
-      height:
-        platform === PLATFORM.ANDROID
-          ? variables.toolbarHeight + StatusBar.currentHeight
-          : variables.toolbarHeight,
-    },
-    '.noShadow': {
-      elevation: 0,
-      shadowColor: null,
-      shadowOffset: null,
-      shadowRadius: null,
-      shadowOpacity: null,
-    },
-    '.hasTabs': {
-      elevation: 0,
-      shadowColor: null,
-      shadowOffset: null,
-      shadowRadius: null,
-      shadowOpacity: null,
-      borderBottomWidth: null,
-    },
-    '.hasSegment': {
-      elevation: 0,
-      shadowColor: null,
-      shadowOffset: null,
-      shadowRadius: null,
-      shadowOpacity: null,
-      borderBottomWidth: null,
-      'NativeBase.Left': {
-        flex: 0.3,
-      },
-      'NativeBase.Right': {
-        flex: 0.3,
-      },
-      'NativeBase.Body': {
-        flex: 1,
-        'NativeBase.Segment': {
-          marginRight: 0,
-          alignSelf: 'center',
-          'NativeBase.Button': {
-            paddingLeft: 0,
-            paddingRight: 0,
-          },
-        },
-      },
-    },
-    '.noLeft': {
-      'NativeBase.Left': {
-        width: platform === PLATFORM.IOS ? undefined : 0,
-        flex: platform === PLATFORM.IOS ? 1 : 0,
-      },
-      'NativeBase.Body': {
-        'NativeBase.Title': {
-          paddingLeft: platform === PLATFORM.IOS ? undefined : 10,
-        },
-        'NativeBase.Subtitle': {
-          paddingLeft: platform === PLATFORM.IOS ? undefined : 10,
-        },
-      },
-    },
-    'NativeBase.Button': {
-      justifyContent: 'center',
-      alignSelf: 'center',
-      alignItems: 'center',
-      '.transparent': {
-        'NativeBase.Text': {
-          color: variables.toolbarBtnTextColor,
-          fontWeight: '600',
-        },
-        'NativeBase.Icon': {
-          color: variables.toolbarBtnColor,
-        },
-        'NativeBase.IconNB': {
-          color: variables.toolbarBtnColor,
-        },
-        paddingHorizontal: variables.buttonPadding,
-      },
-      paddingHorizontal: 15,
-    },
-    '.searchBar': {
-      'NativeBase.Item': {
-        'NativeBase.Icon': {
-          backgroundColor: 'transparent',
-          color: variables.dropdownLinkColor,
-          fontSize: variables.toolbarSearchIconSize,
-          alignItems: 'center',
-          marginTop: 2,
-          paddingRight: 10,
-          paddingLeft: 10,
-        },
-        'NativeBase.IconNB': {
-          backgroundColor: 'transparent',
-          color: null,
-          alignSelf: 'center',
-        },
-        'NativeBase.Input': {
-          alignSelf: 'center',
-          lineHeight: null,
-          height: variables.searchBarInputHeight,
-        },
-        alignSelf: 'center',
-        alignItems: 'center',
-        justifyContent: 'flex-start',
-        flex: 1,
-        height: variables.searchBarHeight,
-        borderColor: 'transparent',
-        backgroundColor: variables.toolbarInputColor,
-      },
-      'NativeBase.Button': {
-        '.transparent': {
-          'NativeBase.Text': {
-            fontWeight: '500',
-          },
-          paddingHorizontal: null,
-          paddingLeft: platform === PLATFORM.IOS ? 10 : null,
-        },
-        paddingHorizontal: platform === PLATFORM.IOS ? undefined : null,
-        width: platform === PLATFORM.IOS ? undefined : 0,
-        height: platform === PLATFORM.IOS ? undefined : 0,
-      },
-    },
-    '.rounded': {
-      'NativeBase.Item': {
-        borderRadius: platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL ? 25 : 3,
-      },
-    },
-    'NativeBase.Left': {
-      'NativeBase.Button': {
-        '.hasText': {
-          marginLeft: -10,
-          height: 30,
-          'NativeBase.Icon': {
-            color: variables.toolbarBtnColor,
-            fontSize: variables.iconHeaderSize,
-            marginTop: 2,
-            marginRight: 5,
-            marginLeft: 2,
-          },
-          'NativeBase.Text': {
-            color: variables.toolbarBtnTextColor,
-            fontSize: platform === PLATFORM.IOS ? 17 : 0,
-            marginLeft: 7,
-            lineHeight: 19.5,
-          },
-          'NativeBase.IconNB': {
-            color: variables.toolbarBtnColor,
-            fontSize: variables.iconHeaderSize,
-            marginTop: 2,
-            marginRight: 5,
-            marginLeft: 2,
-          },
-        },
-        '.transparent': {
-          marginLeft: platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL ? -3 : 0,
-          'NativeBase.Icon': {
-            color: variables.toolbarBtnColor,
-            fontSize:
-              platform === PLATFORM.IOS && variables.platformStyle !== PLATFORM.MATERIAL
-                ? variables.iconHeaderSize + 1
-                : variables.iconHeaderSize,
-            marginTop: 0,
-            marginRight: 2,
-            marginLeft: 1,
-            paddingTop: 1,
-          },
-          'NativeBase.IconNB': {
-            color: variables.toolbarBtnColor,
-            fontSize:
-              platform === PLATFORM.IOS && variables.platformStyle !== PLATFORM.MATERIAL
-                ? variables.iconHeaderSize + 1
-                : variables.iconHeaderSize - 2,
-            marginTop: 0,
-            marginRight: 2,
-            marginLeft: 1,
-            paddingTop: 1,
-          },
-          'NativeBase.Text': {
-            color: variables.toolbarBtnTextColor,
-            fontSize: platform === PLATFORM.IOS ? 17 : 0,
-            top: platform === PLATFORM.IOS ? 1 : -1.5,
-            paddingLeft: platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL ? 2 : 5,
-            paddingRight:
-              platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL ? undefined : 10,
-          },
-          backgroundColor: 'transparent',
-          borderColor: null,
-          elevation: 0,
-          shadowColor: null,
-          shadowOffset: null,
-          shadowRadius: null,
-          shadowOpacity: null,
-        },
-        'NativeBase.Icon': {
-          color: variables.toolbarBtnColor,
-        },
-        'NativeBase.IconNB': {
-          color: variables.toolbarBtnColor,
-        },
-        alignSelf: null,
-        paddingRight: variables.buttonPadding,
-        paddingLeft: platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL ? 4 : 8,
-      },
-      flex: platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL ? 1 : 0.4,
-      alignSelf: 'center',
-      alignItems: 'flex-start',
-    },
-    'NativeBase.Body': {
-      flex: 1,
-      alignItems:
-        platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL ? 'center' : 'flex-start',
-      alignSelf: 'center',
-      'NativeBase.Segment': {
-        borderWidth: 0,
-        alignSelf: 'flex-end',
-        marginRight: platform === PLATFORM.IOS ? -40 : -55,
-      },
-      'NativeBase.Button': {
-        alignSelf: 'center',
-        '.transparent': {
-          backgroundColor: 'transparent',
-        },
-        'NativeBase.Icon': {
-          color: variables.toolbarBtnColor,
-        },
-        'NativeBase.IconNB': {
-          color: variables.toolbarBtnColor,
-        },
-        'NativeBase.Text': {
-          color: variables.inverseTextColor,
-          backgroundColor: 'transparent',
-        },
-      },
-    },
-    'NativeBase.Right': {
-      'NativeBase.Button': {
-        '.hasText': {
-          height: 30,
-          'NativeBase.Icon': {
-            color: variables.toolbarBtnColor,
-            fontSize: variables.iconHeaderSize - 2,
-            marginTop: 2,
-            marginRight: 2,
-            marginLeft: 5,
-          },
-          'NativeBase.Text': {
-            color: variables.toolbarBtnTextColor,
-            fontSize: platform === PLATFORM.IOS ? 17 : 14,
-            lineHeight: 19.5,
-          },
-          'NativeBase.IconNB': {
-            color: variables.toolbarBtnColor,
-            fontSize: variables.iconHeaderSize - 2,
-            marginTop: 2,
-            marginRight: 2,
-            marginLeft: 5,
-          },
-        },
-        '.transparent': {
-          marginRight: platform === PLATFORM.IOS ? -9 : -5,
-          paddingLeft: 15,
-          paddingRight: 12,
-          paddingHorizontal: 15,
-          borderRadius: 50,
-          'NativeBase.Icon': {
-            color: variables.toolbarBtnColor,
-            fontSize: variables.iconHeaderSize - 2,
-            marginTop: 0,
-            marginLeft: 2,
-            marginRight: 0,
-            // paddingTop: 0
-          },
-          'NativeBase.IconNB': {
-            color: variables.toolbarBtnColor,
-            fontSize: variables.iconHeaderSize - 2,
-            marginTop: 0,
-            marginLeft: 2,
-            marginRight: 0,
-            // paddingTop: 0
-          },
-          'NativeBase.Text': {
-            color: variables.toolbarBtnTextColor,
-            fontSize: platform === PLATFORM.IOS ? 17 : 14,
-            top: platform === PLATFORM.IOS ? 1 : -1.5,
-            paddingRight:
-              platform === PLATFORM.IOS && variables.platformStyle !== PLATFORM.MATERIAL
-                ? 0
-                : undefined,
-          },
-          backgroundColor: 'transparent',
-          borderColor: null,
-          elevation: 0,
-          shadowColor: null,
-          shadowOffset: null,
-          shadowRadius: null,
-          shadowOpacity: null,
-        },
-        'NativeBase.Icon': {
-          color: variables.toolbarBtnColor,
-        },
-        'NativeBase.IconNB': {
-          color: variables.toolbarBtnColor,
-        },
-        alignSelf: null,
-        paddingHorizontal: variables.buttonPadding,
-      },
-      flex: 1,
-      alignSelf: 'center',
-      alignItems: 'flex-end',
-      flexDirection: 'row',
-      justifyContent: 'flex-end',
-    },
-    backgroundColor: variables.toolbarDefaultBg,
-    flexDirection: 'row',
-    // paddingHorizontal: 10,
-    paddingLeft:
-      platform === PLATFORM.IOS && variables.platformStyle !== PLATFORM.MATERIAL ? 6 : 10,
-    paddingRight: 10,
-    justifyContent: 'center',
-    paddingTop: platform === PLATFORM.IOS ? 18 : 0,
-    borderBottomWidth: platform === PLATFORM.IOS ? 1 / PixelRatio.getPixelSizeForLayoutSize(1) : 0,
-    borderBottomColor: variables.toolbarDefaultBorder,
-    height:
-      variables.platform === PLATFORM.IOS && variables.platformStyle === PLATFORM.MATERIAL
-        ? variables.toolbarHeight + 10
-        : variables.toolbarHeight,
-    elevation: 3,
-    shadowColor: platformStyle === PLATFORM.MATERIAL ? '#000' : undefined,
-    shadowOffset: platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined,
-    shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined,
-    shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined,
-    top: 0,
-    left: 0,
-    right: 0,
-  };
-
-  return headerTheme;
-};

templates/app/react-native/src/theme/components/Icon.js

@@ -1,12 +0,0 @@
-// @flow
-
-import variable from '../variables/Platform';
-
-export default (variables /* : * */ = variable) => {
-  const iconTheme = {
-    fontSize: variables.iconFontSize,
-    color: variable.textColor,
-  };
-
-  return iconTheme;
-};

templates/app/react-native/src/theme/components/Input.js

@@ -1,19 +0,0 @@
-// @flow
-
-import variable from '../variables/Platform';
-
-export default (variables /* : * */ = variable) => {
-  const inputTheme = {
-    '.multiline': {
-      height: null,
-    },
-    height: variables.inputHeightBase,
-    color: variables.inputColor,
-    paddingLeft: 5,
-    paddingRight: 5,
-    flex: 1,
-    fontSize: variables.inputFontSize,
-  };
-
-  return inputTheme;
-};

templates/app/react-native/src/theme/components/InputGroup.js

@@ -1,132 +0,0 @@
-// @flow
-
-import variable from '../variables/Platform';
-
-export default (variables /* : * */ = variable) => {
-  const inputGroupTheme = {
-    'NativeBase.Icon': {
-      fontSize: 24,
-      color: variables.sTabBarActiveTextColor,
-      paddingHorizontal: 5,
-    },
-    'NativeBase.IconNB': {
-      fontSize: 24,
-      color: variables.sTabBarActiveTextColor,
-      paddingHorizontal: 5,
-    },
-    'NativeBase.Input': {
-      height: variables.inputHeightBase,
-      color: variables.inputColor,
-      paddingLeft: 5,
-      paddingRight: 5,
-      flex: 1,
-      fontSize: variables.inputFontSize,
-      lineHeight: variables.inputLineHeight,
-    },
-    '.underline': {
-      '.success': {
-        borderColor: variables.inputSuccessBorderColor,
-      },
-      '.error': {
-        borderColor: variables.inputErrorBorderColor,
-      },
-      paddingLeft: 5,
-      borderWidth: variables.borderWidth,
-      borderTopWidth: 0,
-      borderRightWidth: 0,
-      borderLeftWidth: 0,
-      borderColor: variables.inputBorderColor,
-    },
-    '.regular': {
-      '.success': {
-        borderColor: variables.inputSuccessBorderColor,
-      },
-      '.error': {
-        borderColor: variables.inputErrorBorderColor,
-      },
-      paddingLeft: 5,
-      borderWidth: variables.borderWidth,
-      borderColor: variables.inputBorderColor,
-    },
-    '.rounded': {
-      '.success': {
-        borderColor: variables.inputSuccessBorderColor,
-      },
-      '.error': {
-        borderColor: variables.inputErrorBorderColor,
-      },
-      paddingLeft: 5,
-      borderWidth: variables.borderWidth,
-      borderRadius: variables.inputGroupRoundedBorderRadius,
-      borderColor: variables.inputBorderColor,
-    },
-
-    '.success': {
-      'NativeBase.Icon': {
-        color: variables.inputSuccessBorderColor,
-      },
-      'NativeBase.IconNB': {
-        color: variables.inputSuccessBorderColor,
-      },
-      '.rounded': {
-        borderRadius: 30,
-        borderColor: variables.inputSuccessBorderColor,
-      },
-      '.regular': {
-        borderColor: variables.inputSuccessBorderColor,
-      },
-      '.underline': {
-        borderWidth: variables.borderWidth,
-        borderTopWidth: 0,
-        borderRightWidth: 0,
-        borderLeftWidth: 0,
-        borderColor: variables.inputSuccessBorderColor,
-      },
-      borderColor: variables.inputSuccessBorderColor,
-    },
-
-    '.error': {
-      'NativeBase.Icon': {
-        color: variables.inputErrorBorderColor,
-      },
-      'NativeBase.IconNB': {
-        color: variables.inputErrorBorderColor,
-      },
-      '.rounded': {
-        borderRadius: 30,
-        borderColor: variables.inputErrorBorderColor,
-      },
-      '.regular': {
-        borderColor: variables.inputErrorBorderColor,
-      },
-      '.underline': {
-        borderWidth: variables.borderWidth,
-        borderTopWidth: 0,
-        borderRightWidth: 0,
-        borderLeftWidth: 0,
-        borderColor: variables.inputErrorBorderColor,
-      },
-      borderColor: variables.inputErrorBorderColor,
-    },
-    '.disabled': {
-      'NativeBase.Icon': {
-        color: '#384850',
-      },
-      'NativeBase.IconNB': {
-        color: '#384850',
-      },
-    },
-
-    paddingLeft: 5,
-    borderWidth: variables.borderWidth,
-    borderTopWidth: 0,
-    borderRightWidth: 0,
-    borderLeftWidth: 0,
-    borderColor: variables.inputBorderColor,
-    backgroundColor: 'transparent',
-    flexDirection: 'row',
-    alignItems: 'center',
-  };
-
-  return inputGroupTheme;
-};

templates/app/react-native/src/theme/components/Item.js

@@ -1,241 +0,0 @@
-// @flow
-
-import { Platform } from 'react-native';
-
-import variable from '../variables/Platform';
-import { PLATFORM } from '../variables/CommonColor';
-
-export default (variables /* : * */ = variable) => {
-  const itemTheme = {
-    '.floatingLabel': {
-      'NativeBase.Input': {
-        height: 50,
-        top: 8,
-        paddingTop: 3,
-        paddingBottom: 7,
-        '.multiline': {
-          minHeight: variables.inputHeightBase,
-          paddingTop: Platform.OS === PLATFORM.IOS ? 10 : 3,
-          paddingBottom: Platform.OS === PLATFORM.IOS ? 14 : 10,
-        },
-      },
-      'NativeBase.Label': {
-        paddingTop: 5,
-      },
-      'NativeBase.Icon': {
-        top: 6,
-        paddingTop: 8,
-      },
-      'NativeBase.IconNB': {
-        top: 6,
-        paddingTop: 8,
-      },
-    },
-    '.fixedLabel': {
-      'NativeBase.Label': {
-        position: null,
-        top: null,
-        left: null,
-        right: null,
-        flex: 1,
-        height: null,
-        width: null,
-        fontSize: variables.inputFontSize,
-      },
-      'NativeBase.Input': {
-        flex: 2,
-        fontSize: variables.inputFontSize,
-      },
-    },
-    '.stackedLabel': {
-      'NativeBase.Label': {
-        position: null,
-        top: null,
-        left: null,
-        right: null,
-        paddingTop: 5,
-        alignSelf: 'flex-start',
-        fontSize: variables.inputFontSize - 2,
-      },
-      'NativeBase.Icon': {
-        marginTop: 36,
-      },
-      'NativeBase.Input': {
-        alignSelf: Platform.OS === PLATFORM.IOS ? 'stretch' : 'flex-start',
-        flex: 1,
-        width: Platform.OS === PLATFORM.IOS ? null : variables.deviceWidth - 25,
-        fontSize: variables.inputFontSize,
-        lineHeight: variables.inputLineHeight - 6,
-        '.secureTextEntry': {
-          fontSize: variables.inputFontSize,
-        },
-        '.multiline': {
-          paddingTop: Platform.OS === PLATFORM.IOS ? 9 : undefined,
-          paddingBottom: Platform.OS === PLATFORM.IOS ? 9 : undefined,
-        },
-      },
-      flexDirection: null,
-      minHeight: variables.inputHeightBase + 15,
-    },
-    '.inlineLabel': {
-      'NativeBase.Label': {
-        position: null,
-        top: null,
-        left: null,
-        right: null,
-        paddingRight: 20,
-        height: null,
-        width: null,
-        fontSize: variables.inputFontSize,
-      },
-      'NativeBase.Input': {
-        paddingLeft: 5,
-        fontSize: variables.inputFontSize,
-      },
-      flexDirection: 'row',
-    },
-    'NativeBase.Label': {
-      fontSize: variables.inputFontSize,
-      color: variables.inputColorPlaceholder,
-      paddingRight: 5,
-    },
-    'NativeBase.Icon': {
-      fontSize: 24,
-      paddingRight: 8,
-    },
-    'NativeBase.IconNB': {
-      fontSize: 24,
-      paddingRight: 8,
-    },
-    'NativeBase.Input': {
-      '.multiline': {
-        height: null,
-      },
-      height: variables.inputHeightBase,
-      color: variables.inputColor,
-      flex: 1,
-      top: Platform.OS === PLATFORM.IOS ? 1.5 : undefined,
-      fontSize: variables.inputFontSize,
-    },
-    '.underline': {
-      'NativeBase.Input': {
-        paddingLeft: 15,
-      },
-      '.success': {
-        borderColor: variables.inputSuccessBorderColor,
-      },
-      '.error': {
-        borderColor: variables.inputErrorBorderColor,
-      },
-      borderWidth: variables.borderWidth * 2,
-      borderTopWidth: 0,
-      borderRightWidth: 0,
-      borderLeftWidth: 0,
-      borderColor: variables.inputBorderColor,
-    },
-    '.regular': {
-      'NativeBase.Input': {
-        paddingLeft: 8,
-      },
-      'NativeBase.Icon': {
-        paddingLeft: 10,
-      },
-      '.success': {
-        borderColor: variables.inputSuccessBorderColor,
-      },
-      '.error': {
-        borderColor: variables.inputErrorBorderColor,
-      },
-      borderWidth: variables.borderWidth * 2,
-      borderColor: variables.inputBorderColor,
-    },
-    '.rounded': {
-      'NativeBase.Input': {
-        paddingLeft: 8,
-      },
-      'NativeBase.Icon': {
-        paddingLeft: 10,
-      },
-      '.success': {
-        borderColor: variables.inputSuccessBorderColor,
-      },
-      '.error': {
-        borderColor: variables.inputErrorBorderColor,
-      },
-      borderWidth: variables.borderWidth * 2,
-      borderRadius: 30,
-      borderColor: variables.inputBorderColor,
-    },
-
-    '.success': {
-      'NativeBase.Icon': {
-        color: variables.inputSuccessBorderColor,
-      },
-      'NativeBase.IconNB': {
-        color: variables.inputSuccessBorderColor,
-      },
-      '.rounded': {
-        borderRadius: 30,
-        borderColor: variables.inputSuccessBorderColor,
-      },
-      '.regular': {
-        borderColor: variables.inputSuccessBorderColor,
-      },
-      '.underline': {
-        borderWidth: variables.borderWidth * 2,
-        borderTopWidth: 0,
-        borderRightWidth: 0,
-        borderLeftWidth: 0,
-        borderColor: variables.inputSuccessBorderColor,
-      },
-      borderColor: variables.inputSuccessBorderColor,
-    },
-
-    '.error': {
-      'NativeBase.Icon': {
-        color: variables.inputErrorBorderColor,
-      },
-      'NativeBase.IconNB': {
-        color: variables.inputErrorBorderColor,
-      },
-      '.rounded': {
-        borderRadius: 30,
-        borderColor: variables.inputErrorBorderColor,
-      },
-      '.regular': {
-        borderColor: variables.inputErrorBorderColor,
-      },
-      '.underline': {
-        borderWidth: variables.borderWidth * 2,
-        borderTopWidth: 0,
-        borderRightWidth: 0,
-        borderLeftWidth: 0,
-        borderColor: variables.inputErrorBorderColor,
-      },
-      borderColor: variables.inputErrorBorderColor,
-    },
-    '.disabled': {
-      'NativeBase.Icon': {
-        color: '#384850',
-      },
-      'NativeBase.IconNB': {
-        color: '#384850',
-      },
-    },
-    '.picker': {
-      marginLeft: 0,
-    },
-
-    borderWidth: variables.borderWidth * 2,
-    borderTopWidth: 0,
-    borderRightWidth: 0,
-    borderLeftWidth: 0,
-    borderColor: variables.inputBorderColor,
-    backgroundColor: 'transparent',
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginLeft: 2,
-  };
-
-  return itemTheme;
-};

templates/app/react-native/src/theme/components/Label.js

@@ -1,15 +0,0 @@
-// @flow
-
-export default () => {
-  const labelTheme = {
-    '.focused': {
-      width: 0,
-    },
-    '.textPrimary': {
-      color: 'gray',
-    },
-    fontSize: 17,
-  };
-
-  return labelTheme;
-};

templates/app/react-native/src/theme/components/Left.js

@@ -1,11 +0,0 @@
-// @flow
-
-export default () => {
-  const leftTheme = {
-    flex: 1,
-    alignSelf: 'center',
-    alignItems: 'flex-start',
-  };
-
-  return leftTheme;
-};

templates/app/react-native/src/theme/components/ListItem.js

@@ -1,441 +0,0 @@
-// @flow
-
-import { Platform, PixelRatio } from 'react-native';
-
-import pickerTheme from './Picker';
-import variable from '../variables/Platform';
-import { PLATFORM } from '../variables/CommonColor';
-
-export default (variables /* : * */ = variable) => {
-  const { platform } = variables;
-  const selectedStyle = {
-    'NativeBase.Text': {
-      color: variables.listItemSelected,
-    },
-    'NativeBase.Icon': {
-      color: variables.listItemSelected,
-    },
-  };
-
-  const listItemTheme = {
-    'NativeBase.InputGroup': {
-      'NativeBase.Icon': {
-        paddingRight: 5,
-      },
-      'NativeBase.IconNB': {
-        paddingRight: 5,
-      },
-      'NativeBase.Input': {
-        paddingHorizontal: 5,
-      },
-      flex: 1,
-      borderWidth: null,
-      margin: -10,
-      borderBottomColor: 'transparent',
-    },
-    '.searchBar': {
-      'NativeBase.Item': {
-        'NativeBase.Icon': {
-          backgroundColor: 'transparent',
-          color: variables.dropdownLinkColor,
-          fontSize:
-            platform === PLATFORM.IOS ? variables.iconFontSize - 10 : variables.iconFontSize - 5,
-          alignItems: 'center',
-          marginTop: 2,
-          paddingRight: 8,
-        },
-        'NativeBase.IconNB': {
-          backgroundColor: 'transparent',
-          color: null,
-          alignSelf: 'center',
-        },
-        'NativeBase.Input': {
-          alignSelf: 'center',
-        },
-        alignSelf: 'center',
-        alignItems: 'center',
-        justifyContent: 'flex-start',
-        flex: 1,
-        height: platform === PLATFORM.IOS ? 30 : 40,
-        borderColor: 'transparent',
-        backgroundColor: '#fff',
-        borderRadius: 5,
-      },
-      'NativeBase.Button': {
-        '.transparent': {
-          'NativeBase.Text': {
-            fontWeight: '500',
-          },
-          paddingHorizontal: null,
-          paddingLeft: platform === PLATFORM.IOS ? 10 : null,
-        },
-        paddingHorizontal: platform === PLATFORM.IOS ? undefined : null,
-        width: platform === PLATFORM.IOS ? undefined : 0,
-        height: platform === PLATFORM.IOS ? undefined : 0,
-      },
-      backgroundColor: variables.toolbarInputColor,
-      padding: 10,
-      marginLeft: null,
-    },
-    'NativeBase.CheckBox': {
-      marginLeft: -10,
-      marginRight: 10,
-    },
-    '.first': {
-      '.itemHeader': {
-        paddingTop: variables.listItemPadding + 3,
-      },
-    },
-    '.itemHeader': {
-      '.first': {
-        paddingTop: variables.listItemPadding + 3,
-      },
-      borderBottomWidth: platform === PLATFORM.IOS ? variables.borderWidth : null,
-      marginLeft: null,
-      padding: variables.listItemPadding,
-      paddingLeft: variables.listItemPadding + 5,
-      paddingTop: platform === PLATFORM.IOS ? variables.listItemPadding + 25 : undefined,
-      paddingBottom: platform === PLATFORM.ANDROID ? variables.listItemPadding + 20 : undefined,
-      flexDirection: 'row',
-      borderColor: variables.listBorderColor,
-      'NativeBase.Text': {
-        fontSize: 14,
-        color: platform === PLATFORM.IOS ? undefined : variables.listNoteColor,
-      },
-    },
-    '.itemDivider': {
-      borderBottomWidth: null,
-      marginLeft: null,
-      padding: variables.listItemPadding,
-      paddingLeft: variables.listItemPadding + 5,
-      backgroundColor: variables.listDividerBg,
-      flexDirection: 'row',
-      borderColor: variables.listBorderColor,
-    },
-    '.selected': {
-      'NativeBase.Left': {
-        ...selectedStyle,
-      },
-      'NativeBase.Body': {
-        ...selectedStyle,
-      },
-      'NativeBase.Right': {
-        ...selectedStyle,
-      },
-      ...selectedStyle,
-    },
-    'NativeBase.Left': {
-      'NativeBase.Body': {
-        'NativeBase.Text': {
-          '.note': {
-            color: variables.listNoteColor,
-            fontWeight: '200',
-          },
-          fontWeight: '600',
-        },
-        marginLeft: 10,
-        alignItems: null,
-        alignSelf: null,
-      },
-      'NativeBase.Icon': {
-        width: variables.iconFontSize - 10,
-        fontSize: variables.iconFontSize - 10,
-      },
-      'NativeBase.IconNB': {
-        width: variables.iconFontSize - 10,
-        fontSize: variables.iconFontSize - 10,
-      },
-      'NativeBase.Text': {
-        alignSelf: 'center',
-      },
-      flexDirection: 'row',
-    },
-    'NativeBase.Body': {
-      'NativeBase.Text': {
-        marginHorizontal: variables.listItemPadding,
-        '.note': {
-          color: variables.listNoteColor,
-          fontWeight: '200',
-        },
-      },
-      alignSelf: null,
-      alignItems: null,
-    },
-    'NativeBase.Right': {
-      'NativeBase.Badge': {
-        alignSelf: null,
-      },
-      'NativeBase.PickerNB': {
-        'NativeBase.Button': {
-          marginRight: -15,
-          'NativeBase.Text': {
-            color: variables.topTabBarActiveTextColor,
-          },
-        },
-      },
-      'NativeBase.Button': {
-        alignSelf: null,
-        '.transparent': {
-          'NativeBase.Text': {
-            color: variables.topTabBarActiveTextColor,
-          },
-        },
-      },
-      'NativeBase.Icon': {
-        alignSelf: null,
-        fontSize: variables.iconFontSize - 8,
-        color: '#c9c8cd',
-      },
-      'NativeBase.IconNB': {
-        alignSelf: null,
-        fontSize: variables.iconFontSize - 8,
-        color: '#c9c8cd',
-      },
-      'NativeBase.Text': {
-        '.note': {
-          color: variables.listNoteColor,
-          fontWeight: '200',
-        },
-        alignSelf: null,
-      },
-      'NativeBase.Thumbnail': {
-        alignSelf: null,
-      },
-      'NativeBase.Image': {
-        alignSelf: null,
-      },
-      'NativeBase.Radio': {
-        alignSelf: null,
-      },
-      'NativeBase.Checkbox': {
-        alignSelf: null,
-      },
-      'NativeBase.Switch': {
-        alignSelf: null,
-      },
-      padding: null,
-      flex: 0.28,
-    },
-    'NativeBase.Text': {
-      '.note': {
-        color: variables.listNoteColor,
-        fontWeight: '200',
-      },
-      alignSelf: 'center',
-    },
-    '.last': {
-      marginLeft: -(variables.listItemPadding + 5),
-      paddingLeft: (variables.listItemPadding + 5) * 2,
-      top: 1,
-    },
-    '.avatar': {
-      'NativeBase.Left': {
-        flex: 0,
-        alignSelf: 'flex-start',
-        paddingTop: 14,
-      },
-      'NativeBase.Body': {
-        'NativeBase.Text': {
-          marginLeft: null,
-        },
-        flex: 1,
-        paddingVertical: variables.listItemPadding,
-        borderBottomWidth: variables.borderWidth,
-        borderColor: variables.listBorderColor,
-        marginLeft: variables.listItemPadding + 5,
-      },
-      'NativeBase.Right': {
-        'NativeBase.Text': {
-          '.note': {
-            fontSize: variables.noteFontSize - 2,
-          },
-        },
-        flex: 0,
-        paddingRight: variables.listItemPadding + 5,
-        alignSelf: 'stretch',
-        paddingVertical: variables.listItemPadding,
-        borderBottomWidth: variables.borderWidth,
-        borderColor: variables.listBorderColor,
-      },
-      '.noBorder': {
-        'NativeBase.Body': {
-          borderBottomWidth: null,
-        },
-        'NativeBase.Right': {
-          borderBottomWidth: null,
-        },
-      },
-      borderBottomWidth: null,
-      paddingVertical: null,
-      paddingRight: null,
-    },
-    '.thumbnail': {
-      'NativeBase.Left': {
-        flex: 0,
-      },
-      'NativeBase.Body': {
-        'NativeBase.Text': {
-          marginLeft: null,
-        },
-        flex: 1,
-        paddingVertical: variables.listItemPadding + 8,
-        borderBottomWidth: variables.borderWidth,
-        borderColor: variables.listBorderColor,
-        marginLeft: variables.listItemPadding + 5,
-      },
-      'NativeBase.Right': {
-        'NativeBase.Button': {
-          '.transparent': {
-            'NativeBase.Text': {
-              fontSize: variables.listNoteSize,
-              color: variables.sTabBarActiveTextColor,
-            },
-          },
-          height: null,
-        },
-        flex: 0,
-        justifyContent: 'center',
-        alignSelf: 'stretch',
-        paddingRight: variables.listItemPadding + 5,
-        paddingVertical: variables.listItemPadding + 5,
-        borderBottomWidth: variables.borderWidth,
-        borderColor: variables.listBorderColor,
-      },
-      '.noBorder': {
-        'NativeBase.Body': {
-          borderBottomWidth: null,
-        },
-        'NativeBase.Right': {
-          borderBottomWidth: null,
-        },
-      },
-      borderBottomWidth: null,
-      paddingVertical: null,
-      paddingRight: null,
-    },
-    '.icon': {
-      '.last': {
-        'NativeBase.Body': {
-          borderBottomWidth: null,
-        },
-        'NativeBase.Right': {
-          borderBottomWidth: null,
-        },
-        borderBottomWidth: variables.borderWidth,
-        borderColor: variables.listBorderColor,
-      },
-      'NativeBase.Left': {
-        'NativeBase.Button': {
-          'NativeBase.IconNB': {
-            marginHorizontal: null,
-            fontSize: variables.iconFontSize - 5,
-          },
-          'NativeBase.Icon': {
-            marginHorizontal: null,
-            fontSize: variables.iconFontSize - 8,
-          },
-          alignSelf: 'center',
-          height: 29,
-          width: 29,
-          borderRadius: 6,
-          paddingVertical: null,
-          paddingHorizontal: null,
-          alignItems: 'center',
-          justifyContent: 'center',
-        },
-        'NativeBase.Icon': {
-          width: variables.iconFontSize - 5,
-          fontSize: variables.iconFontSize - 2,
-        },
-        'NativeBase.IconNB': {
-          width: variables.iconFontSize - 5,
-          fontSize: variables.iconFontSize - 2,
-        },
-        paddingRight: variables.listItemPadding + 5,
-        flex: 0,
-        height: 44,
-        justifyContent: 'center',
-        alignItems: 'center',
-      },
-      'NativeBase.Body': {
-        'NativeBase.Text': {
-          marginLeft: null,
-          fontSize: 17,
-        },
-        flex: 1,
-        height: 44,
-        justifyContent: 'center',
-        borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
-        borderColor: variables.listBorderColor,
-      },
-      'NativeBase.Right': {
-        'NativeBase.Text': {
-          textAlign: 'center',
-          color: '#8F8E95',
-          fontSize: 17,
-        },
-        'NativeBase.IconNB': {
-          color: '#C8C7CC',
-          fontSize: variables.iconFontSize - 10,
-          alignSelf: 'center',
-          paddingLeft: 10,
-          paddingTop: 3,
-        },
-        'NativeBase.Icon': {
-          color: '#C8C7CC',
-          fontSize: variables.iconFontSize - 10,
-          alignSelf: 'center',
-          paddingLeft: 10,
-          paddingTop: 3,
-        },
-        'NativeBase.Switch': {
-          marginRight: Platform.OS === PLATFORM.IOS ? undefined : -5,
-          alignSelf: null,
-        },
-        'NativeBase.PickerNB': {
-          ...pickerTheme(),
-        },
-        flexDirection: 'row',
-        alignItems: 'center',
-        flex: 0,
-        alignSelf: 'stretch',
-        height: 44,
-        justifyContent: 'flex-end',
-        borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
-        borderColor: variables.listBorderColor,
-        paddingRight: variables.listItemPadding + 5,
-      },
-      '.noBorder': {
-        'NativeBase.Body': {
-          borderBottomWidth: null,
-        },
-        'NativeBase.Right': {
-          borderBottomWidth: null,
-        },
-      },
-      borderBottomWidth: null,
-      paddingVertical: null,
-      paddingRight: null,
-      height: 44,
-      justifyContent: 'center',
-    },
-    '.noBorder': {
-      borderBottomWidth: null,
-    },
-    '.noIndent': {
-      marginLeft: null,
-      padding: variables.listItemPadding,
-      paddingLeft: variables.listItemPadding + 6,
-    },
-    alignItems: 'center',
-    flexDirection: 'row',
-    paddingRight: variables.listItemPadding + 6,
-    paddingVertical: variables.listItemPadding + 3,
-    marginLeft: variables.listItemPadding + 6,
-    borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
-    backgroundColor: variables.listBg,
-    borderColor: variables.listBorderColor,
-  };
-
-  return listItemTheme;
-};

templates/app/react-native/src/theme/components/Picker.android.js

@@ -1,14 +0,0 @@
-// @flow
-
-export default () => {
-  const pickerTheme = {
-    '.note': {
-      color: '#8F8E95',
-    },
-    // width: 90,
-    marginRight: -4,
-    flexGrow: 1,
-  };
-
-  return pickerTheme;
-};

templates/app/react-native/src/theme/components/Picker.ios.js

@@ -1,7 +0,0 @@
-// @flow
-
-export default () => {
-  const pickerTheme = {};
-
-  return pickerTheme;
-};

templates/app/react-native/src/theme/components/Picker.js

@@ -1,14 +0,0 @@
-// @flow
-
-export default () => {
-  const pickerTheme = {
-    '.note': {
-      color: '#8F8E95',
-    },
-    // width: 90,
-    marginRight: -4,
-    flexGrow: 1,
-  };
-
-  return pickerTheme;
-};

templates/app/react-native/src/theme/components/Radio.js

@@ -1,26 +0,0 @@
-// @flow
-
-import { Platform } from 'react-native';
-
-import variable from '../variables/Platform';
-import { PLATFORM } from '../variables/CommonColor';
-
-export default (variables /* : * */ = variable) => {
-  const radioTheme = {
-    '.selected': {
-      'NativeBase.IconNB': {
-        color:
-          Platform.OS === PLATFORM.IOS ? variables.radioColor : variables.radioSelectedColorAndroid,
-        lineHeight: Platform.OS === PLATFORM.IOS ? 25 : variables.radioBtnLineHeight,
-        height: Platform.OS === PLATFORM.IOS ? 20 : undefined,
-      },
-    },
-    'NativeBase.IconNB': {
-      color: Platform.OS === PLATFORM.IOS ? 'transparent' : undefined,
-      lineHeight: Platform.OS === PLATFORM.IOS ? undefined : variables.radioBtnLineHeight,
-      fontSize: Platform.OS === PLATFORM.IOS ? undefined : variables.radioBtnSize,
-    },
-  };
-
-  return radioTheme;
-};

templates/app/react-native/src/theme/components/Right.js

@@ -1,14 +0,0 @@
-// @flow
-
-export default () => {
-  const rightTheme = {
-    'NativeBase.Button': {
-      alignSelf: null,
-    },
-    flex: 1,
-    alignSelf: 'center',
-    alignItems: 'flex-end',
-  };
-
-  return rightTheme;
-};

templates/app/react-native/src/theme/components/Segment.js

@@ -1,57 +0,0 @@
-// @flow
-
-import variable from '../variables/Platform';
-import { PLATFORM } from '../variables/CommonColor';
-
-export default (variables /* : * */ = variable) => {
-  const { platform } = variables;
-
-  const segmentTheme = {
-    height: 45,
-    borderColor: variables.segmentBorderColorMain,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    backgroundColor: variables.segmentBackgroundColor,
-    'NativeBase.Button': {
-      alignSelf: 'center',
-      borderRadius: 0,
-      paddingTop: 3,
-      paddingBottom: 3,
-      height: 30,
-      backgroundColor: 'transparent',
-      borderWidth: 1,
-      borderLeftWidth: 0,
-      borderColor: variables.segmentBorderColor,
-      elevation: 0,
-      '.active': {
-        backgroundColor: variables.segmentActiveBackgroundColor,
-        'NativeBase.Text': {
-          color: variables.segmentActiveTextColor,
-        },
-        'NativeBase.Icon': {
-          color: variables.segmentActiveTextColor,
-        },
-      },
-      '.first': {
-        borderTopLeftRadius: platform === PLATFORM.IOS ? 5 : undefined,
-        borderBottomLeftRadius: platform === PLATFORM.IOS ? 5 : undefined,
-        borderLeftWidth: 1,
-      },
-      '.last': {
-        borderTopRightRadius: platform === PLATFORM.IOS ? 5 : undefined,
-        borderBottomRightRadius: platform === PLATFORM.IOS ? 5 : undefined,
-      },
-      'NativeBase.Text': {
-        color: variables.segmentTextColor,
-        fontSize: 14,
-      },
-      'NativeBase.Icon': {
-        fontSize: 22,
-        paddingTop: 0,
-        color: variables.segmentTextColor,
-      },
-    },
-  };
-
-  return segmentTheme;
-};

templates/app/react-native/src/theme/components/Separator.js

@@ -1,49 +0,0 @@
-// @flow
-
-import variable from '../variables/Platform';
-
-export default (variables /* : * */ = variable) => {
-  const theme = {
-    '.group': {
-      height: 50,
-      paddingVertical: variables.listItemPadding - 8,
-      paddingTop: variables.listItemPadding + 12,
-      '.bordered': {
-        height: 50,
-        paddingVertical: variables.listItemPadding - 8,
-        paddingTop: variables.listItemPadding + 12,
-      },
-    },
-    '.bordered': {
-      '.noTopBorder': {
-        borderTopWidth: 0,
-      },
-      '.noBottomBorder': {
-        borderBottomWidth: 0,
-      },
-      height: 35,
-      paddingTop: variables.listItemPadding + 2,
-      paddingBottom: variables.listItemPadding,
-      borderBottomWidth: variables.borderWidth,
-      borderTopWidth: variables.borderWidth,
-      borderColor: variables.listBorderColor,
-    },
-    'NativeBase.Text': {
-      fontSize: variables.tabBarTextSize - 2,
-      color: '#777',
-    },
-    '.noTopBorder': {
-      borderTopWidth: 0,
-    },
-    '.noBottomBorder': {
-      borderBottomWidth: 0,
-    },
-    height: 38,
-    backgroundColor: '#F0EFF5',
-    flex: 1,
-    justifyContent: 'center',
-    paddingLeft: variables.listItemPadding + 5,
-  };
-
-  return theme;
-};

templates/app/react-native/src/theme/components/Spinner.js

@@ -1,9 +0,0 @@
-// @flow
-
-export default () => {
-  const spinnerTheme = {
-    height: 80,
-  };
-
-  return spinnerTheme;
-};

templates/app/react-native/src/theme/components/Subtitle.js

@@ -1,19 +0,0 @@
-// @flow
-
-import { Platform } from 'react-native';
-
-import variable from '../variables/Platform';
-import { PLATFORM } from '../variables/CommonColor';
-
-export default (variables /* : * */ = variable) => {
-  const subtitleTheme = {
-    fontSize: variables.subTitleFontSize,
-    fontFamily: variables.titleFontfamily,
-    color: variables.subtitleColor,
-    textAlign: 'center',
-    paddingLeft: Platform.OS === PLATFORM.IOS ? 4 : 0,
-    marginLeft: Platform.OS === PLATFORM.IOS ? undefined : -3,
-  };
-
-  return subtitleTheme;
-};

templates/app/react-native/src/theme/components/SwipeRow.js

@@ -1,46 +0,0 @@
-// @flow
-
-export default () => {
-  const swipeRowTheme = {
-    'NativeBase.ListItem': {
-      '.list': {
-        backgroundColor: '#FFF',
-      },
-      marginLeft: 0,
-    },
-    'NativeBase.Left': {
-      flex: 0,
-      alignSelf: null,
-      alignItems: null,
-      'NativeBase.Button': {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-        alignSelf: 'stretch',
-        borderRadius: 0,
-      },
-    },
-    'NativeBase.Right': {
-      flex: 0,
-      alignSelf: null,
-      alignItems: null,
-      'NativeBase.Button': {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-        alignSelf: 'stretch',
-        borderRadius: 0,
-      },
-    },
-    'NativeBase.Button': {
-      flex: 1,
-      height: null,
-      alignItems: 'center',
-      justifyContent: 'center',
-      alignSelf: 'stretch',
-      borderRadius: 0,
-    },
-  };
-
-  return swipeRowTheme;
-};

templates/app/react-native/src/theme/components/Switch.js

@@ -1,9 +0,0 @@
-// @flow
-
-export default () => {
-  const switchTheme = {
-    marginVertical: -5,
-  };
-
-  return switchTheme;
-};

templates/app/react-native/src/theme/components/Tab.js

@@ -1,10 +0,0 @@
-// @flow
-
-export default () => {
-  const tabTheme = {
-    flex: 1,
-    backgroundColor: '#FFF',
-  };
-
-  return tabTheme;
-};

templates/app/react-native/src/theme/components/TabBar.js

@@ -1,57 +0,0 @@
-// @flow
-
-import variable from '../variables/Platform';
-
-export default (variables /* : * */ = variable) => {
-  const tabBarTheme = {
-    '.tabIcon': {
-      height: undefined,
-    },
-    '.vertical': {
-      height: 60,
-    },
-    'NativeBase.Button': {
-      '.transparent': {
-        'NativeBase.Text': {
-          fontSize: variables.tabFontSize,
-          color: variables.sTabBarActiveTextColor,
-          fontWeight: '400',
-        },
-        'NativeBase.IconNB': {
-          color: variables.sTabBarActiveTextColor,
-        },
-      },
-      'NativeBase.IconNB': {
-        color: variables.sTabBarActiveTextColor,
-      },
-      'NativeBase.Text': {
-        fontSize: variables.tabFontSize,
-        color: variables.sTabBarActiveTextColor,
-        fontWeight: '400',
-      },
-      '.isTabActive': {
-        'NativeBase.Text': {
-          fontWeight: '900',
-        },
-      },
-      flex: 1,
-      alignSelf: 'stretch',
-      alignItems: 'center',
-      justifyContent: 'center',
-      borderRadius: null,
-      borderBottomColor: 'transparent',
-      backgroundColor: variables.tabBgColor,
-    },
-    height: 45,
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    borderWidth: 1,
-    borderTopWidth: 0,
-    borderLeftWidth: 0,
-    borderRightWidth: 0,
-    borderBottomColor: '#ccc',
-    backgroundColor: variables.tabBgColor,
-  };
-
-  return tabBarTheme;
-};

templates/app/react-native/src/theme/components/TabContainer.js

@@ -1,25 +0,0 @@
-// @flow
-
-import { Platform } from 'react-native';
-
-import variable from '../variables/Platform';
-import { PLATFORM } from '../variables/CommonColor';
-
-export default (variables /* : * */ = variable) => {
-  const { platformStyle } = variables;
-
-  const tabContainerTheme = {
-    elevation: 3,
-    height: 50,
-    flexDirection: 'row',
-    shadowColor: platformStyle === PLATFORM.MATERIAL ? '#000' : undefined,
-    shadowOffset: platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined,
-    shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined,
-    shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined,
-    justifyContent: 'space-around',
-    borderBottomWidth: Platform.OS === PLATFORM.IOS ? variables.borderWidth : 0,
-    borderColor: variables.topTabBarBorderColor,
-  };
-
-  return tabContainerTheme;
-};

templates/app/react-native/src/theme/components/TabHeading.js

@@ -1,40 +0,0 @@
-// @flow
-
-import variable from '../variables/Platform';
-import { PLATFORM } from '../variables/CommonColor';
-
-export default (variables /* : * */ = variable) => {
-  const { platform } = variables;
-
-  const tabHeadingTheme = {
-    flexDirection: 'row',
-    backgroundColor: variables.tabDefaultBg,
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    '.scrollable': {
-      paddingHorizontal: 20,
-      flex: platform === PLATFORM.ANDROID ? 0 : 1,
-      minWidth: platform === PLATFORM.ANDROID ? undefined : 60,
-    },
-    'NativeBase.Text': {
-      color: variables.topTabBarTextColor,
-      marginHorizontal: 7,
-    },
-    'NativeBase.Icon': {
-      color: variables.topTabBarTextColor,
-      fontSize: platform === PLATFORM.IOS ? 26 : undefined,
-    },
-    '.active': {
-      'NativeBase.Text': {
-        color: variables.topTabBarActiveTextColor,
-        fontWeight: '600',
-      },
-      'NativeBase.Icon': {
-        color: variables.topTabBarActiveTextColor,
-      },
-    },
-  };
-
-  return tabHeadingTheme;
-};

templates/app/react-native/src/theme/components/Text.js

@@ -1,20 +0,0 @@
-// @flow
-
-import variable from '../variables/Platform';
-
-export default (variables /* : * */ = variable) => {
-  const textTheme = {
-    fontSize: variables.DefaultFontSize,
-    fontFamily: variables.fontFamily,
-    color: variables.textColor,
-    '.note': {
-      color: '#a7a7a7',
-      fontSize: variables.noteFontSize,
-    },
-    '.textPrimary': {
-      color: '#333',
-    },
-  };
-
-  return textTheme;
-};

templates/app/react-native/src/theme/components/Textarea.js

@@ -1,25 +0,0 @@
-// @flow
-
-import variable from '../variables/Platform';
-
-export default (variables /* : * */ = variable) => {
-  const textAreaTheme = {
-    '.underline': {
-      borderBottomWidth: variables.borderWidth,
-      marginTop: 5,
-      borderColor: variables.inputBorderColor,
-    },
-    '.bordered': {
-      borderWidth: 1,
-      marginTop: 5,
-      borderColor: variables.inputBorderColor,
-    },
-    color: variables.textColor,
-    paddingLeft: 10,
-    paddingRight: 5,
-    fontSize: 15,
-    textAlignVertical: 'top',
-  };
-
-  return textAreaTheme;
-};

templates/app/react-native/src/theme/components/Thumbnail.js

@@ -1,40 +0,0 @@
-// @flow
-
-export default () => {
-  const thumbnailTheme = {
-    '.square': {
-      borderRadius: 0,
-      '.small': {
-        width: 36,
-        height: 36,
-        borderRadius: 0,
-      },
-      '.large': {
-        width: 80,
-        height: 80,
-        borderRadius: 0,
-      },
-    },
-    '.small': {
-      width: 36,
-      height: 36,
-      borderRadius: 18,
-      '.square': {
-        borderRadius: 0,
-      },
-    },
-    '.large': {
-      width: 80,
-      height: 80,
-      borderRadius: 40,
-      '.square': {
-        borderRadius: 0,
-      },
-    },
-    width: 56,
-    height: 56,
-    borderRadius: 28,
-  };
-
-  return thumbnailTheme;
-};

templates/app/react-native/src/theme/components/Title.js

@@ -1,21 +0,0 @@
-// @flow
-
-import { Platform } from 'react-native';
-
-import variable from '../variables/Platform';
-import { PLATFORM } from '../variables/CommonColor';
-
-export default (variables /* : * */ = variable) => {
-  const titleTheme = {
-    fontSize: variables.titleFontSize,
-    fontFamily: variables.titleFontfamily,
-    color: variables.titleFontColor,
-    fontWeight: Platform.OS === PLATFORM.IOS ? '700' : undefined,
-    textAlign: 'center',
-    paddingLeft: Platform.OS === PLATFORM.IOS ? 4 : 0,
-    marginLeft: Platform.OS === PLATFORM.IOS ? undefined : -3,
-    paddingTop: 1,
-  };
-
-  return titleTheme;
-};

templates/app/react-native/src/theme/components/Toast.js

@@ -1,41 +0,0 @@
-// @flow
-
-import variable from '../variables/Platform';
-import { PLATFORM } from '../variables/CommonColor';
-
-export default (variables /* : * */ = variable) => {
-  const { platform } = variables;
-
-  const toastTheme = {
-    '.danger': {
-      backgroundColor: variables.brandDanger,
-    },
-    '.warning': {
-      backgroundColor: variables.brandWarning,
-    },
-    '.success': {
-      backgroundColor: variables.brandSuccess,
-    },
-    backgroundColor: 'rgba(0,0,0,0.8)',
-    borderRadius: platform === PLATFORM.IOS ? 5 : 0,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: 10,
-    minHeight: 50,
-    'NativeBase.Text': {
-      color: '#fff',
-      flex: 1,
-    },
-    'NativeBase.Button': {
-      backgroundColor: 'transparent',
-      height: 30,
-      elevation: 0,
-      'NativeBase.Text': {
-        fontSize: 14,
-      },
-    },
-  };
-
-  return toastTheme;
-};

templates/app/react-native/src/theme/components/View.js

@@ -1,13 +0,0 @@
-// @flow
-
-import variable from '../variables/Platform';
-
-export default (variables /* : * */ = variable) => {
-  const viewTheme = {
-    '.padder': {
-      padding: variables.contentPadding,
-    },
-  };
-
-  return viewTheme;
-};

templates/app/react-native/src/theme/components/index.js

@@ -1,247 +0,0 @@
-/* eslint-disable no-param-reassign */
-// @flow
-
-import _ from 'lodash';
-
-import bodyTheme from './Body';
-import leftTheme from './Left';
-import rightTheme from './Right';
-import headerTheme from './Header';
-import switchTheme from './Switch';
-import thumbnailTheme from './Thumbnail';
-import containerTheme from './Container';
-import contentTheme from './Content';
-import buttonTheme from './Button';
-import titleTheme from './Title';
-import subtitleTheme from './Subtitle';
-import inputGroupTheme from './InputGroup';
-import badgeTheme from './Badge';
-import checkBoxTheme from './CheckBox';
-import cardTheme from './Card';
-import radioTheme from './Radio';
-import h3Theme from './H3';
-import h2Theme from './H2';
-import h1Theme from './H1';
-import footerTheme from './Footer';
-import footerTabTheme from './FooterTab';
-import fabTheme from './Fab';
-import itemTheme from './Item';
-import labelTheme from './Label';
-import textAreaTheme from './Textarea';
-import textTheme from './Text';
-import toastTheme from './Toast';
-import tabTheme from './Tab';
-import tabBarTheme from './TabBar';
-import tabContainerTheme from './TabContainer';
-import viewTheme from './View';
-import tabHeadingTheme from './TabHeading';
-import iconTheme from './Icon';
-import inputTheme from './Input';
-import swipeRowTheme from './SwipeRow';
-import segmentTheme from './Segment';
-import spinnerTheme from './Spinner';
-import cardItemTheme from './CardItem';
-import listItemTheme from './ListItem';
-import formTheme from './Form';
-import separatorTheme from './Separator';
-import pickerTheme from './Picker';
-import variable from '../variables/Platform';
-import getOverrides from '../overrides';
-
-export default (variables /* : * */ = variable) => {
-  const theme = {
-    variables,
-    'NativeBase.Left': {
-      ...leftTheme(variables),
-    },
-    'NativeBase.Right': {
-      ...rightTheme(variables),
-    },
-    'NativeBase.Body': {
-      ...bodyTheme(variables),
-    },
-
-    'NativeBase.Header': {
-      ...headerTheme(variables),
-    },
-
-    'NativeBase.Button': {
-      ...buttonTheme(variables),
-    },
-
-    'NativeBase.Title': {
-      ...titleTheme(variables),
-    },
-    'NativeBase.Subtitle': {
-      ...subtitleTheme(variables),
-    },
-
-    'NativeBase.InputGroup': {
-      ...inputGroupTheme(variables),
-    },
-
-    'NativeBase.Input': {
-      ...inputTheme(variables),
-    },
-
-    'NativeBase.Badge': {
-      ...badgeTheme(variables),
-    },
-
-    'NativeBase.CheckBox': {
-      ...checkBoxTheme(variables),
-    },
-
-    'NativeBase.Radio': {
-      ...radioTheme(variables),
-    },
-
-    'NativeBase.Card': {
-      ...cardTheme(variables),
-    },
-
-    'NativeBase.CardItem': {
-      ...cardItemTheme(variables),
-    },
-
-    'NativeBase.Toast': {
-      ...toastTheme(variables),
-    },
-
-    'NativeBase.H1': {
-      ...h1Theme(variables),
-    },
-    'NativeBase.H2': {
-      ...h2Theme(variables),
-    },
-    'NativeBase.H3': {
-      ...h3Theme(variables),
-    },
-    'NativeBase.Form': {
-      ...formTheme(variables),
-    },
-
-    'NativeBase.Container': {
-      ...containerTheme(variables),
-    },
-    'NativeBase.Content': {
-      ...contentTheme(variables),
-    },
-
-    'NativeBase.Footer': {
-      ...footerTheme(variables),
-    },
-
-    'NativeBase.Tabs': {
-      flex: 1,
-    },
-
-    'NativeBase.FooterTab': {
-      ...footerTabTheme(variables),
-    },
-
-    'NativeBase.ListItem': {
-      ...listItemTheme(variables),
-    },
-
-    'NativeBase.ListItem1': {
-      ...listItemTheme(variables),
-    },
-
-    'NativeBase.Icon': {
-      ...iconTheme(variables),
-    },
-    'NativeBase.IconNB': {
-      ...iconTheme(variables),
-    },
-    'NativeBase.Text': {
-      ...textTheme(variables),
-    },
-    'NativeBase.Spinner': {
-      ...spinnerTheme(variables),
-    },
-
-    'NativeBase.Fab': {
-      ...fabTheme(variables),
-    },
-
-    'NativeBase.Item': {
-      ...itemTheme(variables),
-    },
-
-    'NativeBase.Label': {
-      ...labelTheme(variables),
-    },
-
-    'NativeBase.Textarea': {
-      ...textAreaTheme(variables),
-    },
-
-    'NativeBase.PickerNB': {
-      ...pickerTheme(variables),
-      'NativeBase.Button': {
-        'NativeBase.Text': {},
-      },
-    },
-
-    'NativeBase.Tab': {
-      ...tabTheme(variables),
-    },
-
-    'NativeBase.Segment': {
-      ...segmentTheme(variables),
-    },
-
-    'NativeBase.TabBar': {
-      ...tabBarTheme(variables),
-    },
-    'NativeBase.ViewNB': {
-      ...viewTheme(variables),
-    },
-    'NativeBase.TabHeading': {
-      ...tabHeadingTheme(variables),
-    },
-    'NativeBase.TabContainer': {
-      ...tabContainerTheme(variables),
-    },
-    'NativeBase.Switch': {
-      ...switchTheme(variables),
-    },
-    'NativeBase.Separator': {
-      ...separatorTheme(variables),
-    },
-    'NativeBase.SwipeRow': {
-      ...swipeRowTheme(variables),
-    },
-    'NativeBase.Thumbnail': {
-      ...thumbnailTheme(variables),
-    },
-    ...getOverrides(variables),
-  };
-
-  const cssifyTheme = (grandparent, parent, parentKey) => {
-    _.forEach(parent, (style, styleName) => {
-      if (styleName.indexOf('.') === 0 && parentKey && parentKey.indexOf('.') === 0) {
-        if (grandparent) {
-          if (!grandparent[styleName]) {
-            grandparent[styleName] = {};
-          } else {
-            grandparent[styleName][parentKey] = style;
-          }
-        }
-      }
-      if (
-        style &&
-        typeof style === 'object' &&
-        styleName !== 'fontVariant' &&
-        styleName !== 'transform'
-      ) {
-        cssifyTheme(parent, style, styleName);
-      }
-    });
-  };
-
-  cssifyTheme(null, theme, null);
-
-  return theme;
-};

templates/app/react-native/src/theme/overrides/Button.js

@@ -1,20 +0,0 @@
-// @flow
-import buttonTheme from '../components/Button';
-
-export default variables => {
-  const buttonOverrides = {
-    ...buttonTheme(variables),
-    '.abpButton': {
-      display: 'flex',
-      justifyContent: 'center',
-      borderRadius: 15,
-      width: '100%',
-      'NativeBase.Text': {
-        fontWeight: '600',
-        textTransform: 'uppercase',
-      },
-    },
-  };
-
-  return buttonOverrides;
-};

templates/app/react-native/src/theme/overrides/Content.js

@@ -1,14 +0,0 @@
-// @flow
-import contentTheme from '../components/Content';
-
-export default variables => {
-  const override = {
-    ...contentTheme(variables),
-    backgroundColor: '#f8f8f8',
-    '.px20': {
-      paddingHorizontal: 20,
-    },
-  };
-
-  return override;
-};

templates/app/react-native/src/theme/overrides/Icon.js

@@ -1,35 +0,0 @@
-// @flow
-import iconTheme from '../components/Icon';
-
-export default variables => {
-  const iconOverrides = {
-    ...iconTheme(variables),
-    '.primary': {
-      color: variables.brandPrimary,
-    },
-    '.success': {
-      color: variables.brandSuccess,
-    },
-    '.info': {
-      color: variables.brandInfo,
-    },
-    '.danger': {
-      color: variables.brandDanger,
-    },
-    '.warning': {
-      color: variables.brandWarning,
-    },
-    '.dark': {
-      color: variables.brandDark,
-    },
-    '.light': {
-      color: variables.brandLight,
-    },
-    '.navElement': {
-      marginHorizontal: 15,
-      fontSize: 35,
-    },
-  };
-
-  return iconOverrides;
-};

templates/app/react-native/src/theme/overrides/Input.js

@@ -1,21 +0,0 @@
-import inputTheme from '../components/Input';
-
-export default variables => {
-  const inputOverrides = {
-    ...inputTheme(variables),
-    '.abpInput': {
-      paddingVertical: 0,
-      paddingHorizontal: 20,
-      borderWidth: 1,
-      borderColor: '#e6e6e6',
-      borderRadius: 15,
-      width: '100%',
-      height: 40,
-      backgroundColor: '#fff',
-      color: '#000',
-      lineHeight: 22,
-    },
-  };
-
-  return inputOverrides;
-};

templates/app/react-native/src/theme/overrides/InputGroup.js

@@ -1,19 +0,0 @@
-// @flow
-import inputGroupTheme from '../components/InputGroup';
-
-export default variables => {
-  const inputGroupOverrides = {
-    ...inputGroupTheme(variables),
-    '.abpInputGroup': {
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      padding: 0,
-      marginVertical: 10,
-      borderBottomWidth: 0,
-      height: 60,
-    },
-  };
-
-  return inputGroupOverrides;
-};

templates/app/react-native/src/theme/overrides/Item.js

@@ -1,24 +0,0 @@
-import itemTheme from '../components/Item';
-
-export default variables => {
-  const itemOverrides = {
-    ...itemTheme(variables),
-    '.abpInput': {
-      paddingVertical: 0,
-      paddingHorizontal: 5,
-      borderTopWidth: 1,
-      borderRightWidth: 1,
-      borderBottomWidth: 1,
-      borderLeftWidth: 1,
-      borderWidth: 1,
-      borderColor: '#e6e6e6',
-      borderRadius: 15,
-      width: '100%',
-      height: 40,
-      backgroundColor: '#fff',
-      color: '#000',
-    },
-  };
-
-  return itemOverrides;
-};

templates/app/react-native/src/theme/overrides/Label.js

@@ -1,18 +0,0 @@
-// @flow
-import labelTheme from '../components/Label';
-
-export default variables => {
-  const labelOverrides = {
-    ...labelTheme(variables),
-    '.abpLabel': {
-      alignSelf: 'flex-start',
-      marginBottom: 5,
-      color: '#8F8F8F',
-      fontWeight: '600',
-      fontSize: 13,
-      textTransform: 'uppercase',
-    },
-  };
-
-  return labelOverrides;
-};

templates/app/react-native/src/theme/overrides/Text.js

@@ -1,31 +0,0 @@
-// @flow
-import textTheme from '../components/Text';
-
-export default variables => {
-  const textOverrides = {
-    ...textTheme(variables),
-    '.primary': {
-      color: variables.brandPrimary,
-    },
-    '.success': {
-      color: variables.brandSuccess,
-    },
-    '.info': {
-      color: variables.brandInfo,
-    },
-    '.danger': {
-      color: variables.brandDanger,
-    },
-    '.warning': {
-      color: variables.brandWarning,
-    },
-    '.dark': {
-      color: variables.brandDark,
-    },
-    '.light': {
-      color: variables.brandLight,
-    },
-  };
-
-  return textOverrides;
-};

templates/app/react-native/src/theme/overrides/index.js

@@ -1,39 +0,0 @@
-import textTheme from './Text';
-import iconTheme from './Icon';
-import inputTheme from './Input';
-import inputGroupTheme from './InputGroup';
-import labelTheme from './Label';
-import buttonTheme from './Button';
-import contentTheme from './Content';
-import itemTheme from './Item';
-
-export default variables => {
-  const theme = {
-    'NativeBase.Text': {
-      ...textTheme(variables),
-    },
-    'NativeBase.Icon': {
-      ...iconTheme(variables),
-    },
-    'NativeBase.Input': {
-      ...inputTheme(variables),
-    },
-    'NativeBase.InputGroup': {
-      ...inputGroupTheme(variables),
-    },
-    'NativeBase.Label': {
-      ...labelTheme(variables),
-    },
-    'NativeBase.Button': {
-      ...buttonTheme(variables),
-    },
-    'NativeBase.Content': {
-      ...contentTheme(variables),
-    },
-    'NativeBase.Item': {
-      ...itemTheme(variables),
-    },
-  };
-
-  return theme;
-};

templates/app/react-native/src/theme/variables/CommonColor.js

@@ -1,304 +0,0 @@
-import color from 'color';
-import { Platform, Dimensions, PixelRatio } from 'react-native';
-
-export const PLATFORM = {
-  ANDROID: 'android',
-  IOS: 'ios',
-  MATERIAL: 'material',
-  WEB: 'web',
-};
-
-const deviceHeight = Dimensions.get('window').height;
-const deviceWidth = Dimensions.get('window').width;
-const platform = Platform.OS;
-const platformStyle = undefined;
-const isIphoneX =
-  platform === PLATFORM.IOS &&
-  (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896);
-
-export default {
-  platformStyle,
-  platform,
-
-  // Accordion
-  headerStyle: '#edebed',
-  iconStyle: '#000',
-  contentStyle: '#f5f4f5',
-  expandedIconStyle: '#000',
-  accordionBorderColor: '#d3d3d3',
-
-  // ActionSheet
-  elevation: 4,
-  containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)',
-  innerTouchableBackgroundColor: '#fff',
-  listItemHeight: 50,
-  listItemBorderColor: 'transparent',
-  marginHorizontal: -15,
-  marginLeft: 14,
-  marginTop: 15,
-  minHeight: 56,
-  padding: 15,
-  touchableTextColor: '#757575',
-
-  // Android
-  androidRipple: true,
-  androidRippleColor: 'rgba(256, 256, 256, 0.3)',
-  androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
-  buttonUppercaseAndroidText: true,
-
-  // Badge
-  badgeBg: '#ED1727',
-  badgeColor: '#fff',
-  badgePadding: platform === PLATFORM.IOS ? 3 : 0,
-
-  // Button
-  buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
-  buttonDisabledBg: '#b5b5b5',
-  buttonPadding: 6,
-  get buttonPrimaryBg() {
-    return this.brandPrimary;
-  },
-  get buttonPrimaryColor() {
-    return this.inverseTextColor;
-  },
-  get buttonInfoBg() {
-    return this.brandInfo;
-  },
-  get buttonInfoColor() {
-    return this.inverseTextColor;
-  },
-  get buttonSuccessBg() {
-    return this.brandSuccess;
-  },
-  get buttonSuccessColor() {
-    return this.inverseTextColor;
-  },
-  get buttonDangerBg() {
-    return this.brandDanger;
-  },
-  get buttonDangerColor() {
-    return this.inverseTextColor;
-  },
-  get buttonWarningBg() {
-    return this.brandWarning;
-  },
-  get buttonWarningColor() {
-    return this.inverseTextColor;
-  },
-  get buttonTextSize() {
-    return platform === PLATFORM.IOS ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1;
-  },
-  get buttonTextSizeLarge() {
-    return this.fontSizeBase * 1.5;
-  },
-  get buttonTextSizeSmall() {
-    return this.fontSizeBase * 0.8;
-  },
-  get borderRadiusLarge() {
-    return this.fontSizeBase * 3.8;
-  },
-  get iconSizeLarge() {
-    return this.iconFontSize * 1.5;
-  },
-  get iconSizeSmall() {
-    return this.iconFontSize * 0.6;
-  },
-
-  // Card
-  cardDefaultBg: '#fff',
-  cardBorderColor: '#ccc',
-  cardBorderRadius: 2,
-  cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
-
-  // CheckBox
-  CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0,
-  CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2,
-  CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2,
-  CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5,
-  CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16,
-  CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1,
-  CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17,
-  checkboxBgColor: '#039BE5',
-  checkboxSize: 20,
-  checkboxTickColor: '#fff',
-
-  // Color
-  brandPrimary: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5',
-  brandInfo: '#62B1F6',
-  brandSuccess: '#5cb85c',
-  brandDanger: '#d9534f',
-  brandWarning: '#f0ad4e',
-  brandDark: '#000',
-  brandLight: '#f4f4f4',
-
-  // Container
-  containerBgColor: '#fff',
-
-  // Date Picker
-  datePickerTextColor: '#000',
-  datePickerBg: 'transparent',
-
-  // FAB
-  fabWidth: 56,
-
-  // Font
-  DefaultFontSize: 16,
-  fontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto',
-  fontSizeBase: 15,
-  get fontSizeH1() {
-    return this.fontSizeBase * 1.8;
-  },
-  get fontSizeH2() {
-    return this.fontSizeBase * 1.6;
-  },
-  get fontSizeH3() {
-    return this.fontSizeBase * 1.4;
-  },
-
-  // Footer
-  footerHeight: 55,
-  footerDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
-  footerPaddingBottom: 0,
-
-  // FooterTab
-  tabBarTextColor: platform === PLATFORM.IOS ? '#737373' : '#bfc6ea',
-  tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11,
-  activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff',
-  sTabBarActiveTextColor: '#007aff',
-  tabBarActiveTextColor: platform === PLATFORM.IOS ? '#2874F0' : '#fff',
-  tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5',
-
-  // Header
-  toolbarBtnColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
-  toolbarDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
-  toolbarHeight: platform === PLATFORM.IOS ? 64 : 56,
-  toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23,
-  toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff',
-  searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
-  searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50,
-  toolbarBtnTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
-  iosStatusbar: 'dark-content',
-  toolbarDefaultBorder: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
-  get statusBarColor() {
-    return color(this.toolbarDefaultBg)
-      .darken(0.2)
-      .hex();
-  },
-  get darkenHeader() {
-    return color(this.tabBgColor)
-      .darken(0.03)
-      .hex();
-  },
-
-  // Icon
-  iconFamily: 'Ionicons',
-  iconFontSize: platform === PLATFORM.IOS ? 30 : 28,
-  iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24,
-
-  // InputGroup
-  inputFontSize: 17,
-  inputBorderColor: '#D9D5DC',
-  inputSuccessBorderColor: '#2b8339',
-  inputErrorBorderColor: '#ed2f2f',
-  inputHeightBase: 50,
-  get inputColor() {
-    return this.textColor;
-  },
-  get inputColorPlaceholder() {
-    return '#575757';
-  },
-
-  // Line Height
-  buttonLineHeight: 19,
-  lineHeightH1: 32,
-  lineHeightH2: 27,
-  lineHeightH3: 22,
-  lineHeight: platform === PLATFORM.IOS ? 20 : 24,
-
-  // List
-  listBg: 'transparent',
-  listBorderColor: '#c9c9c9',
-  listDividerBg: '#f4f4f4',
-  listBtnUnderlayColor: '#DDD',
-  listItemPadding: platform === PLATFORM.IOS ? 10 : 12,
-  listNoteColor: '#808080',
-  listNoteSize: 13,
-  listItemSelected: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5',
-
-  // Progress Bar
-  defaultProgressColor: '#E4202D',
-  inverseProgressColor: '#1A191B',
-
-  // Radio Button
-  radioBtnSize: platform === PLATFORM.IOS ? 25 : 23,
-  radioSelectedColorAndroid: '#3F51B5',
-  radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24,
-  get radioColor() {
-    return this.brandPrimary;
-  },
-
-  // Segment
-  segmentBackgroundColor: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
-  segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
-  segmentTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
-  segmentActiveTextColor: platform === PLATFORM.IOS ? '#fff' : '#3F51B5',
-  segmentBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
-  segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
-
-  // Spinner
-  defaultSpinnerColor: '#45D56E',
-  inverseSpinnerColor: '#1A191B',
-
-  // Tab
-  tabDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
-  topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
-  topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
-  topTabBarBorderColor: platform === PLATFORM.IOS ? '#a7a6ab' : '#fff',
-  topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
-
-  // Tabs
-  tabBgColor: '#F8F8F8',
-  tabFontSize: 15,
-
-  // Text
-  textColor: '#000',
-  inverseTextColor: '#fff',
-  noteFontSize: 14,
-  get defaultTextColor() {
-    return this.textColor;
-  },
-
-  // Title
-  titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
-  titleFontSize: platform === PLATFORM.IOS ? 17 : 19,
-  subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14,
-  subtitleColor: platform === PLATFORM.IOS ? '#000' : '#fff',
-  titleFontColor: platform === PLATFORM.IOS ? '#000' : '#fff',
-
-  // Other
-  borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2,
-  borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
-  contentPadding: 10,
-  dropdownLinkColor: '#414142',
-  inputLineHeight: 24,
-  deviceWidth,
-  deviceHeight,
-  isIphoneX,
-  inputGroupRoundedBorderRadius: 30,
-
-  // iPhoneX SafeArea
-  Inset: {
-    portrait: {
-      topInset: 24,
-      leftInset: 0,
-      rightInset: 0,
-      bottomInset: 34,
-    },
-    landscape: {
-      topInset: 0,
-      leftInset: 44,
-      rightInset: 44,
-      bottomInset: 21,
-    },
-  },
-};

templates/app/react-native/src/theme/variables/Material.js

@@ -1,299 +0,0 @@
-import color from 'color';
-import { Platform, Dimensions, PixelRatio } from 'react-native';
-
-import { PLATFORM } from './CommonColor';
-
-const deviceHeight = Dimensions.get('window').height;
-const deviceWidth = Dimensions.get('window').width;
-const platform = Platform.OS;
-const platformStyle = PLATFORM.MATERIAL;
-const isIphoneX =
-  platform === PLATFORM.IOS &&
-  (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896);
-
-export default {
-  platformStyle,
-  platform,
-
-  // Accordion
-  headerStyle: '#edebed',
-  iconStyle: '#000',
-  contentStyle: '#f5f4f5',
-  expandedIconStyle: '#000',
-  accordionBorderColor: '#d3d3d3',
-
-  // ActionSheet
-  elevation: 4,
-  containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)',
-  innerTouchableBackgroundColor: '#fff',
-  listItemHeight: 50,
-  listItemBorderColor: 'transparent',
-  marginHorizontal: -15,
-  marginLeft: 14,
-  marginTop: 15,
-  minHeight: 56,
-  padding: 15,
-  touchableTextColor: '#757575',
-
-  // Android
-  androidRipple: true,
-  androidRippleColor: 'rgba(256, 256, 256, 0.3)',
-  androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
-  buttonUppercaseAndroidText: true,
-
-  // Badge
-  badgeBg: '#ED1727',
-  badgeColor: '#fff',
-  badgePadding: 0,
-
-  // Button
-  buttonFontFamily: 'Roboto',
-  buttonDisabledBg: '#b5b5b5',
-  buttonPadding: 6,
-  get buttonPrimaryBg() {
-    return this.brandPrimary;
-  },
-  get buttonPrimaryColor() {
-    return this.inverseTextColor;
-  },
-  get buttonInfoBg() {
-    return this.brandInfo;
-  },
-  get buttonInfoColor() {
-    return this.inverseTextColor;
-  },
-  get buttonSuccessBg() {
-    return this.brandSuccess;
-  },
-  get buttonSuccessColor() {
-    return this.inverseTextColor;
-  },
-  get buttonDangerBg() {
-    return this.brandDanger;
-  },
-  get buttonDangerColor() {
-    return this.inverseTextColor;
-  },
-  get buttonWarningBg() {
-    return this.brandWarning;
-  },
-  get buttonWarningColor() {
-    return this.inverseTextColor;
-  },
-  get buttonTextSize() {
-    return this.fontSizeBase - 1;
-  },
-  get buttonTextSizeLarge() {
-    return this.fontSizeBase * 1.5;
-  },
-  get buttonTextSizeSmall() {
-    return this.fontSizeBase * 0.8;
-  },
-  get borderRadiusLarge() {
-    return this.fontSizeBase * 3.8;
-  },
-  get iconSizeLarge() {
-    return this.iconFontSize * 1.5;
-  },
-  get iconSizeSmall() {
-    return this.iconFontSize * 0.6;
-  },
-
-  // Card
-  cardDefaultBg: '#fff',
-  cardBorderColor: '#ccc',
-  cardBorderRadius: 2,
-  cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
-
-  // CheckBox
-  CheckboxRadius: 0,
-  CheckboxBorderWidth: 2,
-  CheckboxPaddingLeft: 2,
-  CheckboxPaddingBottom: 5,
-  CheckboxIconSize: 16,
-  CheckboxIconMarginTop: 1,
-  CheckboxFontSize: 17,
-  checkboxBgColor: '#039BE5',
-  checkboxSize: 20,
-  checkboxTickColor: '#fff',
-
-  // Color
-  brandPrimary: '#3F51B5',
-  brandInfo: '#62B1F6',
-  brandSuccess: '#5cb85c',
-  brandDanger: '#d9534f',
-  brandWarning: '#f0ad4e',
-  brandDark: '#000',
-  brandLight: '#f4f4f4',
-
-  // Container
-  containerBgColor: '#fff',
-
-  // Date Picker
-  datePickerTextColor: '#000',
-  datePickerBg: 'transparent',
-
-  // FAB
-  fabWidth: 56,
-
-  // Font
-  DefaultFontSize: 16,
-  fontFamily: 'Roboto',
-  fontSizeBase: 15,
-  get fontSizeH1() {
-    return this.fontSizeBase * 1.8;
-  },
-  get fontSizeH2() {
-    return this.fontSizeBase * 1.6;
-  },
-  get fontSizeH3() {
-    return this.fontSizeBase * 1.4;
-  },
-
-  // Footer
-  footerHeight: 55,
-  footerDefaultBg: '#3F51B5',
-  footerPaddingBottom: 0,
-
-  // FooterTab
-  tabBarTextColor: '#bfc6ea',
-  tabBarTextSize: 11,
-  activeTab: '#fff',
-  sTabBarActiveTextColor: '#007aff',
-  tabBarActiveTextColor: '#fff',
-  tabActiveBgColor: '#3F51B5',
-
-  // Header
-  toolbarBtnColor: '#fff',
-  toolbarDefaultBg: '#3F51B5',
-  toolbarHeight: 56,
-  toolbarSearchIconSize: 23,
-  toolbarInputColor: '#fff',
-  searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
-  searchBarInputHeight: platform === PLATFORM.IOS ? 40 : 50,
-  toolbarBtnTextColor: '#fff',
-  toolbarDefaultBorder: '#3F51B5',
-  iosStatusbar: 'light-content',
-  get statusBarColor() {
-    return color(this.toolbarDefaultBg)
-      .darken(0.2)
-      .hex();
-  },
-  get darkenHeader() {
-    return color(this.tabBgColor)
-      .darken(0.03)
-      .hex();
-  },
-
-  // Icon
-  iconFamily: 'Ionicons',
-  iconFontSize: 28,
-  iconHeaderSize: 24,
-
-  // InputGroup
-  inputFontSize: 17,
-  inputBorderColor: '#D9D5DC',
-  inputSuccessBorderColor: '#2b8339',
-  inputErrorBorderColor: '#ed2f2f',
-  inputHeightBase: 50,
-  get inputColor() {
-    return this.textColor;
-  },
-  get inputColorPlaceholder() {
-    return '#575757';
-  },
-
-  // Line Height
-  buttonLineHeight: 19,
-  lineHeightH1: 32,
-  lineHeightH2: 27,
-  lineHeightH3: 22,
-  lineHeight: 24,
-
-  // List
-  listBg: 'transparent',
-  listBorderColor: '#c9c9c9',
-  listDividerBg: '#f4f4f4',
-  listBtnUnderlayColor: '#DDD',
-  listItemPadding: 12,
-  listNoteColor: '#808080',
-  listNoteSize: 13,
-  listItemSelected: '#3F51B5',
-
-  // Progress Bar
-  defaultProgressColor: '#E4202D',
-  inverseProgressColor: '#1A191B',
-
-  // Radio Button
-  radioBtnSize: 23,
-  radioSelectedColorAndroid: '#3F51B5',
-  radioBtnLineHeight: 24,
-  get radioColor() {
-    return this.brandPrimary;
-  },
-
-  // Segment
-  segmentBackgroundColor: '#3F51B5',
-  segmentActiveBackgroundColor: '#fff',
-  segmentTextColor: '#fff',
-  segmentActiveTextColor: '#3F51B5',
-  segmentBorderColor: '#fff',
-  segmentBorderColorMain: '#3F51B5',
-
-  // Spinner
-  defaultSpinnerColor: '#45D56E',
-  inverseSpinnerColor: '#1A191B',
-
-  // Tab
-  tabDefaultBg: '#3F51B5',
-  topTabBarTextColor: '#b3c7f9',
-  topTabBarActiveTextColor: '#fff',
-  topTabBarBorderColor: '#fff',
-  topTabBarActiveBorderColor: '#fff',
-
-  // Tabs
-  tabBgColor: '#F8F8F8',
-  tabFontSize: 15,
-
-  // Text
-  textColor: '#000',
-  inverseTextColor: '#fff',
-  noteFontSize: 14,
-  get defaultTextColor() {
-    return this.textColor;
-  },
-
-  // Title
-  titleFontfamily: 'Roboto',
-  titleFontSize: 19,
-  subTitleFontSize: 14,
-  subtitleColor: '#FFF',
-  titleFontColor: '#FFF',
-
-  // Other
-  borderRadiusBase: 2,
-  borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
-  contentPadding: 10,
-  dropdownLinkColor: '#414142',
-  inputLineHeight: 24,
-  deviceWidth,
-  deviceHeight,
-  isIphoneX,
-  inputGroupRoundedBorderRadius: 30,
-
-  // iPhoneX SafeArea
-  Inset: {
-    portrait: {
-      topInset: 24,
-      leftInset: 0,
-      rightInset: 0,
-      bottomInset: 34,
-    },
-    landscape: {
-      topInset: 0,
-      leftInset: 44,
-      rightInset: 44,
-      bottomInset: 21,
-    },
-  },
-};

templates/app/react-native/src/theme/variables/Platform.js

@@ -1,333 +0,0 @@
-// @flow
-
-import color from 'color';
-import { Platform, Dimensions, PixelRatio } from 'react-native';
-
-import { PLATFORM } from './CommonColor';
-
-const deviceHeight = Dimensions.get('window').height;
-const deviceWidth = Dimensions.get('window').width;
-const platform = Platform.OS;
-const platformStyle = undefined;
-const isIphoneX =
-  platform === PLATFORM.IOS &&
-  (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896);
-
-export default {
-  platformStyle,
-  platform,
-
-  // Accordion
-  accordionBorderColor: '#d3d3d3',
-  accordionContentPadding: 10,
-  accordionIconFontSize: 18,
-  contentStyle: '#f5f4f5',
-  expandedIconStyle: '#000',
-  headerStyle: '#edebed',
-  iconStyle: '#000',
-
-  // ActionSheet
-  elevation: 4,
-  containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)',
-  innerTouchableBackgroundColor: '#fff',
-  listItemHeight: 50,
-  listItemBorderColor: 'transparent',
-  marginHorizontal: -15,
-  marginLeft: 14,
-  marginTop: 15,
-  minHeight: 56,
-  padding: 15,
-  touchableTextColor: '#757575',
-
-  // Android
-  androidRipple: true,
-  androidRippleColor: 'rgba(256, 256, 256, 0.3)',
-  androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
-  buttonUppercaseAndroidText: true,
-
-  // Badge
-  badgeBg: '#ED1727',
-  badgeColor: '#fff',
-  badgePadding: platform === PLATFORM.IOS ? 3 : 0,
-
-  // Button
-  buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
-  buttonDisabledBg: '#b5b5b5',
-  buttonPadding: 6,
-  buttonDefaultActiveOpacity: 0.5,
-  buttonDefaultFlex: 1,
-  buttonDefaultBorderRadius: 2,
-  buttonDefaultBorderWidth: 1,
-  get buttonPrimaryBg() {
-    return this.brandPrimary;
-  },
-  get buttonPrimaryColor() {
-    return this.inverseTextColor;
-  },
-  get buttonInfoBg() {
-    return this.brandInfo;
-  },
-  get buttonInfoColor() {
-    return this.inverseTextColor;
-  },
-  get buttonSuccessBg() {
-    return this.brandSuccess;
-  },
-  get buttonSuccessColor() {
-    return this.inverseTextColor;
-  },
-  get buttonDangerBg() {
-    return this.brandDanger;
-  },
-  get buttonDangerColor() {
-    return this.inverseTextColor;
-  },
-  get buttonWarningBg() {
-    return this.brandWarning;
-  },
-  get buttonWarningColor() {
-    return this.inverseTextColor;
-  },
-  get buttonTextSize() {
-    return platform === PLATFORM.IOS ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1;
-  },
-  get buttonTextSizeLarge() {
-    return this.fontSizeBase * 1.5;
-  },
-  get buttonTextSizeSmall() {
-    return this.fontSizeBase * 0.8;
-  },
-  get borderRadiusLarge() {
-    return this.fontSizeBase * 3.8;
-  },
-  get iconSizeLarge() {
-    return this.iconFontSize * 1.5;
-  },
-  get iconSizeSmall() {
-    return this.iconFontSize * 0.6;
-  },
-
-  // Card
-  cardDefaultBg: '#fff',
-  cardBorderColor: '#ccc',
-  cardBorderRadius: 2,
-  cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
-
-  // CheckBox
-  CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0,
-  CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2,
-  CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2,
-  CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5,
-  CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16,
-  CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1,
-  CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17,
-  get checkboxBgColor() {
-    return this.brandPrimary;
-  },
-  checkboxSize: 20,
-  checkboxTickColor: '#fff',
-  checkboxDefaultColor: 'transparent',
-  checkboxTextShadowRadius: 0,
-
-  // Color
-  brandPrimary: '#38003c',
-  brandInfo: '#54B9F1',
-  brandSuccess: '#42B87F',
-  brandDanger: '#A83232',
-  brandWarning: '#FFC42E',
-  brandDark: '#2A2A2A',
-  brandLight: '#E8E8E8',
-
-  // Container
-  containerBgColor: '#fff',
-
-  // Date Picker
-  datePickerFlex: 1,
-  datePickerPadding: 10,
-  datePickerTextColor: '#000',
-  datePickerBg: 'transparent',
-
-  // FAB
-  fabBackgroundColor: 'blue',
-  fabBorderRadius: 28,
-  fabBottom: 0,
-  fabButtonBorderRadius: 20,
-  fabButtonHeight: 40,
-  fabButtonLeft: 7,
-  fabButtonMarginBottom: 10,
-  fabContainerBottom: 20,
-  fabDefaultPosition: 20,
-  fabElevation: 4,
-  fabIconColor: '#fff',
-  fabIconSize: 24,
-  fabShadowColor: '#000',
-  fabShadowOffsetHeight: 2,
-  fabShadowOffsetWidth: 0,
-  fabShadowOpacity: 0.4,
-  fabShadowRadius: 2,
-  fabWidth: 56,
-
-  // Font
-  DefaultFontSize: 16,
-  fontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto',
-  fontSizeBase: 15,
-  get fontSizeH1() {
-    return this.fontSizeBase * 1.8;
-  },
-  get fontSizeH2() {
-    return this.fontSizeBase * 1.6;
-  },
-  get fontSizeH3() {
-    return this.fontSizeBase * 1.4;
-  },
-
-  // Footer
-  footerHeight: 55,
-  footerDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
-  footerPaddingBottom: 0,
-
-  // FooterTab
-  tabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
-  tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11,
-  activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff',
-  sTabBarActiveTextColor: '#007aff',
-  tabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
-  tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5',
-
-  // Header
-  toolbarBtnColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
-  toolbarDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
-  toolbarHeight: platform === PLATFORM.IOS ? 64 : 56,
-  toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23,
-  toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff',
-  searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
-  searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50,
-  toolbarBtnTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
-  toolbarDefaultBorder: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
-  iosStatusbar: 'light-content',
-  get statusBarColor() {
-    return color(this.toolbarDefaultBg)
-      .darken(0.2)
-      .hex();
-  },
-  get darkenHeader() {
-    return color(this.tabBgColor)
-      .darken(0.03)
-      .hex();
-  },
-
-  // Icon
-  iconFamily: 'Ionicons',
-  iconFontSize: platform === PLATFORM.IOS ? 30 : 28,
-  iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24,
-
-  // InputGroup
-  inputFontSize: 17,
-  inputBorderColor: '#D9D5DC',
-  inputSuccessBorderColor: '#2b8339',
-  inputErrorBorderColor: '#ed2f2f',
-  inputHeightBase: 50,
-  get inputColor() {
-    return this.textColor;
-  },
-  get inputColorPlaceholder() {
-    return '#575757';
-  },
-
-  // Line Height
-  buttonLineHeight: 19,
-  lineHeightH1: 32,
-  lineHeightH2: 27,
-  lineHeightH3: 22,
-  lineHeight: platform === PLATFORM.IOS ? 20 : 24,
-  listItemSelected: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5',
-
-  // List
-  listBg: 'transparent',
-  listBorderColor: '#c9c9c9',
-  listDividerBg: '#f4f4f4',
-  listBtnUnderlayColor: '#DDD',
-  listItemPadding: platform === PLATFORM.IOS ? 10 : 12,
-  listNoteColor: '#808080',
-  listNoteSize: 13,
-
-  // Progress Bar
-  defaultProgressColor: '#E4202D',
-  inverseProgressColor: '#1A191B',
-
-  // Radio Button
-  radioBtnSize: platform === PLATFORM.IOS ? 25 : 23,
-  radioSelectedColorAndroid: '#3F51B5',
-  radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24,
-  get radioColor() {
-    return this.brandPrimary;
-  },
-
-  // Segment
-  segmentBackgroundColor: '#f8f8f8',
-  segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
-  segmentTextColor: '#333',
-  segmentActiveTextColor: '#fff',
-  get segmentBorderColor() {
-    return this.brandPrimary;
-  },
-  segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
-
-  // Spinner
-  defaultSpinnerColor: '#45D56E',
-  inverseSpinnerColor: '#1A191B',
-
-  // Tab
-  tabBarDisabledTextColor: '#BDBDBD',
-  tabDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
-  topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
-  topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
-  topTabBarBorderColor: platform === PLATFORM.IOS ? '#a7a6ab' : '#fff',
-  topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
-
-  // Tabs
-  tabBgColor: '#F8F8F8',
-  tabFontSize: 15,
-
-  // Text
-  textColor: '#000',
-  inverseTextColor: '#fff',
-  noteFontSize: 14,
-  get defaultTextColor() {
-    return this.textColor;
-  },
-
-  // Title
-  titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
-  titleFontSize: platform === PLATFORM.IOS ? 17 : 19,
-  subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14,
-  subtitleColor: platform === PLATFORM.IOS ? '#8e8e93' : '#FFF',
-  titleFontColor: platform === PLATFORM.IOS ? '#000' : '#FFF',
-
-  // Other
-  borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2,
-  borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
-  contentPadding: 10,
-  dropdownLinkColor: '#414142',
-  inputLineHeight: 24,
-  deviceWidth,
-  deviceHeight,
-  isIphoneX,
-  inputGroupRoundedBorderRadius: 30,
-
-  // iPhoneX SafeArea
-  Inset: {
-    portrait: {
-      topInset: 24,
-      leftInset: 0,
-      rightInset: 0,
-      bottomInset: 34,
-    },
-    landscape: {
-      topInset: 0,
-      leftInset: 44,
-      rightInset: 44,
-      bottomInset: 21,
-    },
-  },
-};

templates/app/react-native/src/theme/variables/index.js

@@ -1,10 +0,0 @@
-import platform from './Platform';
-
-export const customVariables = {
-  zIndex: {
-    overlay: 50,
-    loaders: 150,
-  },
-};
-
-export const activeTheme = { ...platform, ...customVariables };