diff --git a/templates/app/react-native/.expo-shared/assets.json b/templates/app/react-native/.expo-shared/assets.json new file mode 100644 index 0000000000..1e6decfbb5 --- /dev/null +++ b/templates/app/react-native/.expo-shared/assets.json @@ -0,0 +1,4 @@ +{ + "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true, + "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true +} diff --git a/templates/app/react-native/.gitignore b/templates/app/react-native/.gitignore index c409cf6af4..ec8a36a257 100644 --- a/templates/app/react-native/.gitignore +++ b/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 diff --git a/templates/app/react-native/App.js b/templates/app/react-native/App.js index 7f8330f775..6505569f2b 100644 --- a/templates/app/react-native/App.js +++ b/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 ( - - - {isReady ? ( - - - - ) : null} - - + + + + + {isReady ? ( + + + + ) : null} + + + + + ); } + +function AppContainer({token, setToken}) { + const isValid = useMemo(() => isTokenValid(token), [token]); + + useEffect(() => { + if (!isValid && token && token.access_token) { + setToken({}) + } + }, [isValid]); + + + return isValid ? : +} + + +const ConnectedAppContainer = connectToRedux({ + component: AppContainer, + stateProps: (state) => ({ + token: createTokenSelector()(state), + }), + dispatchProps: { + setToken: PersistentStorageActions.setToken, + }, +}); diff --git a/templates/app/react-native/app.json b/templates/app/react-native/app.json index 9bfd9cdad8..5b78afa519 100644 --- a/templates/app/react-native/app.json +++ b/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" diff --git a/templates/app/react-native/assets/adaptive-icon.png b/templates/app/react-native/assets/adaptive-icon.png new file mode 100644 index 0000000000..03d6f6b6c6 Binary files /dev/null and b/templates/app/react-native/assets/adaptive-icon.png differ diff --git a/templates/app/react-native/babel.config.js b/templates/app/react-native/babel.config.js index 2900afe9d8..d715221e05 100644 --- a/templates/app/react-native/babel.config.js +++ b/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'], }; -}; +}; \ No newline at end of file diff --git a/templates/app/react-native/package.json b/templates/app/react-native/package.json index e13a0f1d56..e08783807c 100644 --- a/templates/app/react-native/package.json +++ b/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 } diff --git a/templates/app/react-native/src/api/AccountAPI.js b/templates/app/react-native/src/api/AccountAPI.js index 913909281d..af303b626a 100644 --- a/templates/app/react-native/src/api/AccountAPI.js +++ b/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', diff --git a/templates/app/react-native/src/api/AuditLoggingAPI.js b/templates/app/react-native/src/api/AuditLoggingAPI.js new file mode 100644 index 0000000000..0fd8d1d86f --- /dev/null +++ b/templates/app/react-native/src/api/AuditLoggingAPI.js @@ -0,0 +1,7 @@ +import api from './API'; + +export function getErrorRateStatistics(params = {}) { + return api + .get('/api/audit-logging/audit-logs/statistics/error-rate', { params }) + .then(({ data }) => data); +} diff --git a/templates/app/react-native/src/api/IdentityAPI.js b/templates/app/react-native/src/api/IdentityAPI.js index 45e191033c..9ae81ad2b5 100644 --- a/templates/app/react-native/src/api/IdentityAPI.js +++ b/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); diff --git a/templates/app/react-native/src/components/AddIcon/AddIcon.js b/templates/app/react-native/src/components/AddIcon/AddIcon.js new file mode 100644 index 0000000000..b4cc26f36f --- /dev/null +++ b/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 ( + + ); +} diff --git a/templates/app/react-native/src/components/AppContainer/AppContainer.js b/templates/app/react-native/src/components/AppContainer/AppContainer.js deleted file mode 100644 index 3879c54844..0000000000 --- a/templates/app/react-native/src/components/AppContainer/AppContainer.js +++ /dev/null @@ -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 ( - <> - - - {language ? ( - - - {isValid ? : } - - - ) : null} - - - - ); -} - -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, - }, -}); diff --git a/templates/app/react-native/src/components/DataList/DataList.js b/templates/app/react-native/src/components/DataList/DataList.js index 7c837ec83f..9dce6d9562 100644 --- a/templates/app/react-native/src/components/DataList/DataList.js +++ b/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 ( - <> - - - - {searchLoading ? ( - - - - ) : ( - - )} - - - - } - dataArray={records} - renderRow={(data, sectionID, rowId, ...args) => ( +
+ + + ) : ( + + ) + } + /> + ( <> - {render(data, sectionID, rowId, ...args)} - {rowId + 1 === skipCount + maxResultCount && totalCount > records.length ? ( - - fetchPartial()}> + {render(...args)} + {args.index + 1 === skipCount + maxResultCount && + totalCount > records.length ? ( + + fetchPartial()} + > {i18n.t('AbpUi::LoadMore')} @@ -102,14 +112,13 @@ function DataList({ )} {...props} /> - - + +
); } 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) => ); +const Forwarded = forwardRef((props, ref) => ( + +)); export default connectToRedux({ - component: connectStyle('ABP.DataList', styles)(Forwarded), + component: Forwarded, dispatchProps: { startLoading: LoadingActions.start, stopLoading: LoadingActions.stop, diff --git a/templates/app/react-native/src/components/DrawerContent/DrawerContent.js b/templates/app/react-native/src/components/DrawerContent/DrawerContent.js index 1725abaee3..598f05a8c7 100644 --- a/templates/app/react-native/src/components/DrawerContent/DrawerContent.js +++ b/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 ( - + - + - item} - renderRow={name => ( + + {routeNames.map((name) => ( navigate(name)} - style={{ - ...styles.navItem, - backgroundColor: name === routeNames[currentScreenIndex] ? '#38003c' : '#f2f2f2', - }}> - - - - - - {i18n.t(screens[name].label)} - - + my="0" + > + + {i18n.t(screens[name].label)} - )} - /> + ))} + @@ -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', diff --git a/templates/app/react-native/src/components/FormButtons/FormButtons.js b/templates/app/react-native/src/components/FormButtons/FormButtons.js index 5bbdb388f8..d844f7747a 100644 --- a/templates/app/react-native/src/components/FormButtons/FormButtons.js +++ b/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 ( - + {isShowRemove ? ( ); } @@ -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) => ); - -export default connectStyle('ABP.LoadingButton', styles)(Forwarded); +}); \ No newline at end of file diff --git a/templates/app/react-native/src/components/MenuIcon/MenuIcon.js b/templates/app/react-native/src/components/MenuIcon/MenuIcon.js deleted file mode 100644 index c820d30a7f..0000000000 --- a/templates/app/react-native/src/components/MenuIcon/MenuIcon.js +++ /dev/null @@ -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 ( - - - - ); -} - -MenuIcon.propTypes = { - onPress: PropTypes.func.isRequired, - iconName: PropTypes.string, -}; - -export default MenuIcon; diff --git a/templates/app/react-native/src/components/TenantBox/TenantBox.js b/templates/app/react-native/src/components/TenantBox/TenantBox.js index dc13fae309..7534b9a8f4 100644 --- a/templates/app/react-native/src/components/TenantBox/TenantBox.js +++ b/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 ( <> - - - {i18n.t('AbpUiMultiTenancy::Tenant')} - - {tenant.name ? tenant.name : i18n.t('AbpUiMultiTenancy::NotSelected')} + + + + {i18n.t('AbpUiMultiTenancy::Tenant')} + + + {tenant.name + ? tenant.name + : i18n.t('AbpUiMultiTenancy::NotSelected')} - + {showTenantSelection ? ( - - - - - - {i18n.t('AbpUiMultiTenancy::SwitchTenantHint')} - - - - + ) : 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) => ); +const Forwarded = forwardRef((props, ref) => ( + +)); export default connectToRedux({ - component: connectStyle('ABP.TenantBox', styles)(Forwarded), + component: Forwarded, dispatchProps: { setTenant: PersistentStorageActions.setTenant, }, - stateProps: state => ({ + stateProps: (state) => ({ tenant: createTenantSelector()(state), }), }); diff --git a/templates/app/react-native/src/components/ValidationMessage/ValidationMessage.js b/templates/app/react-native/src/components/ValidationMessage/ValidationMessage.js index 30e7087762..c2a398f379 100644 --- a/templates/app/react-native/src/components/ValidationMessage/ValidationMessage.js +++ b/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 ? {i18n.t(children)} : null; + children ? {i18n.t(children)} : null; const styles = { fontSize: 12, - marginHorizontal: 10, - marginTop: -5, + marginTop: 3, color: '#ed2f2f', }; const Forwarded = forwardRef((props, ref) => ); -export default connectStyle('ABP.ValidationMessage', styles)(Forwarded); +export default Forwarded diff --git a/templates/app/react-native/src/interceptors/APIInterceptor.js b/templates/app/react-native/src/interceptors/APIInterceptor.js index 6060dca2b3..b5ffc56a3c 100644 --- a/templates/app/react-native/src/interceptors/APIInterceptor.js +++ b/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', }); } diff --git a/templates/app/react-native/src/navigators/AuthNavigator.js b/templates/app/react-native/src/navigators/AuthNavigator.js index b6b06d11b5..0311556deb 100644 --- a/templates/app/react-native/src/navigators/AuthNavigator.js +++ b/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 ( - + - - - - + ({ + title: t('::Menu:Home'), + headerLeft: () => , + })} + /> + null }} + /> + null }} + /> + null }} + /> ); } diff --git a/templates/app/react-native/src/navigators/HomeNavigator.js b/templates/app/react-native/src/navigators/HomeNavigator.js index 7ba440f510..8f9e588edd 100644 --- a/templates/app/react-native/src/navigators/HomeNavigator.js +++ b/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 ( ({ - headerLeft: () => navigation.openDrawer()} />, - title: t('::Menu:Home'), - })} + options={{header: () => null}} /> ); diff --git a/templates/app/react-native/src/navigators/SettingsNavigator.js b/templates/app/react-native/src/navigators/SettingsNavigator.js index 7bfd996e2d..370da97b93 100644 --- a/templates/app/react-native/src/navigators/SettingsNavigator.js +++ b/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: () => navigation.openDrawer()} />, + headerLeft: () => , title: t('AbpSettingManagement::Settings'), })} /> diff --git a/templates/app/react-native/src/navigators/TenantsNavigator.js b/templates/app/react-native/src/navigators/TenantsNavigator.js index 7e38b82674..94ae711d42 100644 --- a/templates/app/react-native/src/navigators/TenantsNavigator.js +++ b/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: () => navigation.openDrawer()} />, title: t('AbpTenantManagement::Tenants'), + headerLeft: () => , + headerRight: () => navigation.navigate('CreateUpdateTenant')}/>, })} /> ({ - title: t( - route.params?.tenantId ? 'AbpTenantManagement::Edit' : 'AbpTenantManagement::NewTenant', - ), + title: t(route.params?.tenantId ? 'AbpTenantManagement::Edit' : 'AbpTenantManagement::NewTenant'), })} /> diff --git a/templates/app/react-native/src/navigators/UsersNavigator.js b/templates/app/react-native/src/navigators/UsersNavigator.js index 222dfe1550..537129be14 100644 --- a/templates/app/react-native/src/navigators/UsersNavigator.js +++ b/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: () => navigation.openDrawer()} />, title: t('AbpIdentity::Users'), + headerLeft: () => , + headerRight: () => navigation.navigate('CreateUpdateUser')}/>, })} /> { + const onSubmit = (values) => { submit({ ...values, newPasswordConfirm: values.newPassword, }); }; + const formik = useFormik({ + enableReinitialize: true, + validationSchema: ValidationSchema, + initialValues: { + currentPassword: '', + newPassword: '', + }, + onSubmit, + }); + return ( - onSubmit(values)}> - {({ handleChange, handleBlur, handleSubmit, values, errors, isValid }) => ( - <> - - -
- - - - newPasswordRef.current._root.focus()} - returnKeyType="next" - onChangeText={handleChange('currentPassword')} - onBlur={handleBlur('currentPassword')} - value={values.currentPassword} - textContentType="password" - secureTextEntry={!showCurrentPassword} - /> - setShowCurrentPassword(!showCurrentPassword)} - /> - - - {errors.currentPassword} - - - - - setShowNewPassword(!showNewPassword)} - /> - - - {errors.newPassword} -
- - - - - )} - + <> + + + + + {i18n.t('AbpIdentity::DisplayName:CurrentPassword')} + + newPasswordRef?.current?.focus()} + returnKeyType="next" + onChangeText={formik.handleChange('currentPassword')} + onBlur={formik.handleBlur('currentPassword')} + value={formik.values.currentPassword} + textContentType="password" + secureTextEntry={!showCurrentPassword} + InputRightElement={ + setShowCurrentPassword(!showCurrentPassword)} + /> + } + /> + + {formik.errors.currentPassword} + + + + + + + + {i18n.t('AbpIdentity::DisplayName:NewPassword')} + + setShowNewPassword(!showNewPassword)} + /> + } + /> + {formik.errors.newPassword} + + + + + ); } diff --git a/templates/app/react-native/src/screens/CreateUpdateTenant/CreateUpdateTenantForm.js b/templates/app/react-native/src/screens/CreateUpdateTenant/CreateUpdateTenantForm.js index bb1a2105fc..b76f356062 100644 --- a/templates/app/react-native/src/screens/CreateUpdateTenant/CreateUpdateTenantForm.js +++ b/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 ( - onSubmit(values)}> - {({ handleChange, handleBlur, handleSubmit, values, errors, isValid }) => ( - <> - - - - + <> + + + + {i18n.t('AbpTenantManagement::TenantName')} + + {formik.errors.name} + + + + {!editingTenant.id ? ( + <> + + + + {i18n.t('AbpTenantManagement::DisplayName:AdminEmailAddress')} + - !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" /> - - {errors.name} - {!editingTenant.id ? ( - <> - - - adminPasswordRef.current._root.focus()} - returnKeyType="next" - onChangeText={handleChange('adminEmailAddress')} - onBlur={handleBlur('adminEmailAddress')} - value={values.adminEmailAddress} - autoCapitalize = 'none' + {formik.errors.adminEmailAddress} + + + + + + + {i18n.t('AbpTenantManagement::DisplayName:AdminPassword')} + + setShowAdminPassword(!showAdminPassword)} /> - - {errors.adminEmailAddress} - - - - - setShowAdminPassword(!showAdminPassword)} - /> - - - {errors.adminPassword} - - ) : null} - - - - - )} - + } + /> + {formik.errors.adminPassword} + + + + ) : null} + + + ); } @@ -136,10 +141,4 @@ CreateUpdateTenantForm.propTypes = { remove: PropTypes.func.isRequired, }; -const styles = StyleSheet.create({ - container: { - marginBottom: 50, - }, -}); - export default CreateUpdateTenantForm; diff --git a/templates/app/react-native/src/screens/CreateUpdateTenant/CreateUpdateTenantScreen.js b/templates/app/react-native/src/screens/CreateUpdateTenant/CreateUpdateTenantScreen.js index eacbb98a2c..a3f59a8cf7 100644 --- a/templates/app/react-native/src/screens/CreateUpdateTenant/CreateUpdateTenantScreen.js +++ b/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 = () => ( - + ); if (tenantId && tenant) { diff --git a/templates/app/react-native/src/screens/CreateUpdateUser/CreateUpdateUserForm.js b/templates/app/react-native/src/screens/CreateUpdateUser/CreateUpdateUserForm.js index b20233f431..81621ff87e 100644 --- a/templates/app/react-native/src/screens/CreateUpdateUser/CreateUpdateUserForm.js +++ b/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,219 @@ function CreateUpdateUserForm({ editingUser = {}, submit, remove }) { return Yup.string().required('AbpAccount::ThisFieldIsRequired.'); }); + const formik = useFormik({ + enableReinitialize: true, + validationSchema: Yup.object().shape({ + ...validations, + password: passwordValidation, + }), + initialValues: { + isActive: true, + lockoutEnabled: false, + ...editingUser, + }, + onSubmit, + }); + return ( - onSubmit(values)}> - {({ handleChange, handleBlur, handleSubmit, values, errors, isValid, setFieldValue }) => ( - <> - - - - - - - - - - + + + {selectedTab === 0 ? ( + <> + + + + {i18n.t('AbpIdentity::UserName')} + 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" /> - - {errors.userName} - - + + {formik.errors.userName} + + + + + + + + {i18n.t('AbpIdentity::DisplayName:Name')} + 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} /> - - - + + + + + + + {i18n.t('AbpIdentity::DisplayName:Surname')} + 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} /> - - - + + + + + + + {i18n.t('AbpIdentity::EmailAddress')} + 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" /> - - {errors.email} - - + {formik.errors.email} + + + + + + + {i18n.t('AbpIdentity::PhoneNumber')} + 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} /> - - {!editingUser.id ? ( - <> - - - - + + + + {!editingUser.id ? ( + + + + {i18n.t('AbpIdentity::Password')} + + setShowPassword(!showPassword)} /> - - - {errors.password} - - ) : null} - - setFieldValue('lockoutEnabled', !values.lockoutEnabled)} - /> - - setFieldValue('lockoutEnabled', !values.lockoutEnabled)}> - {i18n.t('AbpIdentity::DisplayName:LockoutEnabled')} - - - - - - - - - - - - )} - + } + /> + + {formik.errors.password} + + + + ) : null} + + + + + formik.setFieldValue('isActive', !formik.values.isActive) + } + > + {i18n.t('AbpIdentity::DisplayName:IsActive')} + + + + + + + + formik.setFieldValue( + 'lockoutEnabled', + !formik.values.lockoutEnabled + ) + } + > + {i18n.t('AbpIdentity::DisplayName:LockoutEnabled')} + + + + + ) : ( + + )} + + + + ); } @@ -225,10 +283,4 @@ CreateUpdateUserForm.propTypes = { remove: PropTypes.func.isRequired, }; -const styles = StyleSheet.create({ - container: { - marginBottom: 50, - }, -}); - export default CreateUpdateUserForm; diff --git a/templates/app/react-native/src/screens/CreateUpdateUser/UserRoles.js b/templates/app/react-native/src/screens/CreateUpdateUser/UserRoles.js index 052134c32c..25db76afee 100644 --- a/templates/app/react-native/src/screens/CreateUpdateUser/UserRoles.js +++ b/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 ( - + + {roles.map((role, index) => ( - - onPress(index)} /> - - onPress(index)}> - {role.name} - - - + + onPress(index)} > + {role.name} + + ))} + ); } diff --git a/templates/app/react-native/src/screens/Home/HomeScreen.js b/templates/app/react-native/src/screens/Home/HomeScreen.js index 63140d9a8a..82ca221e2d 100644 --- a/templates/app/react-native/src/screens/Home/HomeScreen.js +++ b/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 ( - - {i18n.t('::Welcome')} - {i18n.t('::LongWelcomeMessage')} - +
+ + {i18n.t('::Welcome')} + + {i18n.t('::LongWelcomeMessage')} + + +
); } 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 }, }); diff --git a/templates/app/react-native/src/screens/Login/LoginScreen.js b/templates/app/react-native/src/screens/Login/LoginScreen.js index f43ef6a35b..acb72076fa 100644 --- a/templates/app/react-native/src/screens/Login/LoginScreen.js +++ b/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 ( - +
+ + Image + + - {!showTenantSelection ? ( - - - {({ handleChange, handleBlur, handleSubmit, values, errors }) => ( -
- - - passwordRef.current._root.focus()} - returnKeyType="next" - autoCapitalize = 'none' - /> - - {errors.username} - - - - - setShowPassword(!showPassword)} - /> - - - {errors.password} - - - -
- )} - - - ) : null} - + + + + + {i18n.t('AbpAccount::UserNameOrEmailAddress')} + + passwordRef?.current?.focus()} + size="lg" + /> + {formik.errors.username} + + + + + + + {i18n.t('AbpAccount::Password')} + + + } + > + {formik.errors.password} + + + + + + + + +
); } diff --git a/templates/app/react-native/src/screens/ManageProfile/ManageProfileForm.js b/templates/app/react-native/src/screens/ManageProfile/ManageProfileForm.js index 9135df2ade..4254acc93f 100644 --- a/templates/app/react-native/src/screens/ManageProfile/ManageProfileForm.js +++ b/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 ( - onSubmit(values)}> - {({ handleChange, handleBlur, handleSubmit, values, errors, isValid }) => ( - <> - - -
- - - nameRef.current._root.focus()} - returnKeyType="next" - onChangeText={handleChange('userName')} - onBlur={handleBlur('userName')} - value={values.userName} - abpInput - /> - - {errors.userName} - - - surnameRef.current._root.focus()} - returnKeyType="next" - onChangeText={handleChange('name')} - onBlur={handleBlur('name')} - value={values.name} - /> - - - - phoneNumberRef.current._root.focus()} - returnKeyType="next" - onChangeText={handleChange('surname')} - onBlur={handleBlur('surname')} - value={values.surname} - /> - - - - emailRef.current._root.focus()} - returnKeyType="next" - onChangeText={handleChange('phoneNumber')} - onBlur={handleBlur('phoneNumber')} - value={values.phoneNumber} - /> - - - - - - {errors.email} -
- - - - - )} - + <> + + + + + + {i18n.t('AbpIdentity::UserName')} + + nameRef?.current?.focus()} + returnKeyType="next" + onChangeText={formik.handleChange('userName')} + onBlur={formik.handleBlur('userName')} + value={formik.values.userName} + /> + {formik.errors.userName} + + + + + + + {i18n.t('AbpIdentity::DisplayName:Name')} + + surnameRef?.current?.focus()} + returnKeyType="next" + onChangeText={formik.handleChange('name')} + onBlur={formik.handleBlur('name')} + value={formik.values.name} + /> + + + + + + + {i18n.t('AbpIdentity::DisplayName:Surname')} + + phoneNumberRef?.current?.focus()} + returnKeyType="next" + onChangeText={formik.handleChange('surname')} + onBlur={formik.handleBlur('surname')} + value={formik.values.surname} + /> + + + + + + + {i18n.t('AbpIdentity::PhoneNumber')} + + emailRef?.current?.focus()} + returnKeyType="next" + onChangeText={formik.handleChange('phoneNumber')} + onBlur={formik.handleBlur('phoneNumber')} + value={formik.values.phoneNumber} + /> + + + + + + + {i18n.t('AbpIdentity::PhoneNumber')} + + + {formik.errors.email} + + + + + + ); } diff --git a/templates/app/react-native/src/screens/Settings/SettingsScreen.js b/templates/app/react-native/src/screens/Settings/SettingsScreen.js index 80fc93e0b4..cc8fb4aa9f 100644 --- a/templates/app/react-native/src/screens/Settings/SettingsScreen.js +++ b/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 ( - - - + navigation.navigate('ManageProfile')}> - - - - - {tenant.name ? `${tenant.name} / ` : ''} + + + + + {tenant.name ? `${tenant.name}/` : ''} {user.userName ? `${user.userName}` : ''} - {user.email} - - + - - - - - - + + + + navigation.navigate('ChangePassword')}> - - {i18n.t('AbpUi::ChangePassword')} - - - - - - - - - - - - } - onValueChange={value => setLanguageAsync(value)} - selectedValue={language.cultureName} - textStyle={{ paddingLeft: 0 }}> - {languages.map(lang => ( - - ))} - - - - + + {i18n.t('AbpUi::ChangePassword')} + + + + + + + + + {i18n.t('AbpUi::Language')} + + + + + diff --git a/templates/app/react-native/src/screens/Tenants/TenantsScreen.js b/templates/app/react-native/src/screens/Tenants/TenantsScreen.js index e937175dfa..da3dac53af 100644 --- a/templates/app/react-native/src/screens/Tenants/TenantsScreen.js +++ b/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 ( - <> + ( - navigateToCreateUpdateTenantScreen(navigation, tenant)}> - - - {tenant.name} - - - + render={({ item }) => ( + navigateToCreateUpdateTenantScreen(navigation, item)} + > + + + {t('AbpTenantManagement::TenantName')}: + + {item.name} + + + + )} /> - - navigation.navigate('CreateUpdateTenant')}> - - - + ); } @@ -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; diff --git a/templates/app/react-native/src/screens/Users/UsersScreen.js b/templates/app/react-native/src/screens/Users/UsersScreen.js index 4dc25dc646..b49658cb24 100644 --- a/templates/app/react-native/src/screens/Users/UsersScreen.js +++ b/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 ( - <> ( - navigateToCreateUpdateUserScreen(navigation, user)}> - - - - {user.userName} - {user.email} - - - + render={({item}) => ( + navigateToCreateUpdateUserScreen(navigation, item)} + > + + + {t('AbpIdentity::UserName')}: + + {item.userName} + + + + {t('AbpIdentity::EmailAddress')}: + + {item.email} + + + + {t('AbpIdentity::DisplayName:Name')}: + + {item.name} + + + + {t('AbpIdentity::DisplayName:Surname')}: + + {item.surname} + + + + )} /> - - navigation.navigate('CreateUpdateUser')}> - - - ); } @@ -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; diff --git a/templates/app/react-native/src/store/index.js b/templates/app/react-native/src/store/index.js index b038d82cf4..d30a0890dd 100644 --- a/templates/app/react-native/src/store/index.js +++ b/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(); diff --git a/templates/app/react-native/src/store/reducers/index.js b/templates/app/react-native/src/store/reducers/index.js index 8784be3042..0479999c14 100644 --- a/templates/app/react-native/src/store/reducers/index.js +++ b/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({ diff --git a/templates/app/react-native/src/store/sagas/AppSaga.js b/templates/app/react-native/src/store/sagas/AppSaga.js index 8a1d3211df..8fc0145309 100644 --- a/templates/app/react-native/src/store/sagas/AppSaga.js +++ b/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()); } diff --git a/templates/app/react-native/src/theme/components/Badge.js b/templates/app/react-native/src/theme/components/Badge.js deleted file mode 100644 index 7db8c886ec..0000000000 --- a/templates/app/react-native/src/theme/components/Badge.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/components/Body.js b/templates/app/react-native/src/theme/components/Body.js deleted file mode 100644 index 9bf2b99268..0000000000 --- a/templates/app/react-native/src/theme/components/Body.js +++ /dev/null @@ -1,11 +0,0 @@ -// @flow - -export default () => { - const bodyTheme = { - flex: 1, - alignItems: 'center', - alignSelf: 'center', - }; - - return bodyTheme; -}; diff --git a/templates/app/react-native/src/theme/components/Button.js b/templates/app/react-native/src/theme/components/Button.js deleted file mode 100644 index e1f106b18b..0000000000 --- a/templates/app/react-native/src/theme/components/Button.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/components/Card.js b/templates/app/react-native/src/theme/components/Card.js deleted file mode 100644 index c8e726336f..0000000000 --- a/templates/app/react-native/src/theme/components/Card.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/components/CardItem.js b/templates/app/react-native/src/theme/components/CardItem.js deleted file mode 100644 index 745714bb03..0000000000 --- a/templates/app/react-native/src/theme/components/CardItem.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/components/CheckBox.js b/templates/app/react-native/src/theme/components/CheckBox.js deleted file mode 100644 index ac280de985..0000000000 --- a/templates/app/react-native/src/theme/components/CheckBox.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/components/Container.js b/templates/app/react-native/src/theme/components/Container.js deleted file mode 100644 index f2f57afa41..0000000000 --- a/templates/app/react-native/src/theme/components/Container.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/components/Content.js b/templates/app/react-native/src/theme/components/Content.js deleted file mode 100644 index e09a22a8a5..0000000000 --- a/templates/app/react-native/src/theme/components/Content.js +++ /dev/null @@ -1,14 +0,0 @@ -// @flow - -export default () => { - const contentTheme = { - flex: 1, - backgroundColor: 'transparent', - 'NativeBase.Segment': { - borderWidth: 0, - backgroundColor: 'transparent', - }, - }; - - return contentTheme; -}; diff --git a/templates/app/react-native/src/theme/components/Fab.js b/templates/app/react-native/src/theme/components/Fab.js deleted file mode 100644 index 87520a690b..0000000000 --- a/templates/app/react-native/src/theme/components/Fab.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/components/Footer.js b/templates/app/react-native/src/theme/components/Footer.js deleted file mode 100644 index 49101fc0d9..0000000000 --- a/templates/app/react-native/src/theme/components/Footer.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/components/FooterTab.js b/templates/app/react-native/src/theme/components/FooterTab.js deleted file mode 100644 index 39e50fa891..0000000000 --- a/templates/app/react-native/src/theme/components/FooterTab.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/components/Form.js b/templates/app/react-native/src/theme/components/Form.js deleted file mode 100644 index 48a638fff4..0000000000 --- a/templates/app/react-native/src/theme/components/Form.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/components/H1.js b/templates/app/react-native/src/theme/components/H1.js deleted file mode 100644 index 0f45abc872..0000000000 --- a/templates/app/react-native/src/theme/components/H1.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/components/H2.js b/templates/app/react-native/src/theme/components/H2.js deleted file mode 100644 index 4763fdf92d..0000000000 --- a/templates/app/react-native/src/theme/components/H2.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/components/H3.js b/templates/app/react-native/src/theme/components/H3.js deleted file mode 100644 index 0765853f15..0000000000 --- a/templates/app/react-native/src/theme/components/H3.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/components/Header.js b/templates/app/react-native/src/theme/components/Header.js deleted file mode 100644 index ebb9f5b331..0000000000 --- a/templates/app/react-native/src/theme/components/Header.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/components/Icon.js b/templates/app/react-native/src/theme/components/Icon.js deleted file mode 100644 index d233562deb..0000000000 --- a/templates/app/react-native/src/theme/components/Icon.js +++ /dev/null @@ -1,12 +0,0 @@ -// @flow - -import variable from '../variables/Platform'; - -export default (variables /* : * */ = variable) => { - const iconTheme = { - fontSize: variables.iconFontSize, - color: variable.textColor, - }; - - return iconTheme; -}; diff --git a/templates/app/react-native/src/theme/components/Input.js b/templates/app/react-native/src/theme/components/Input.js deleted file mode 100644 index bc5b5b7da2..0000000000 --- a/templates/app/react-native/src/theme/components/Input.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/components/InputGroup.js b/templates/app/react-native/src/theme/components/InputGroup.js deleted file mode 100644 index 9638ad20b2..0000000000 --- a/templates/app/react-native/src/theme/components/InputGroup.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/components/Item.js b/templates/app/react-native/src/theme/components/Item.js deleted file mode 100644 index 997504a084..0000000000 --- a/templates/app/react-native/src/theme/components/Item.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/components/Label.js b/templates/app/react-native/src/theme/components/Label.js deleted file mode 100644 index cbefe9d449..0000000000 --- a/templates/app/react-native/src/theme/components/Label.js +++ /dev/null @@ -1,15 +0,0 @@ -// @flow - -export default () => { - const labelTheme = { - '.focused': { - width: 0, - }, - '.textPrimary': { - color: 'gray', - }, - fontSize: 17, - }; - - return labelTheme; -}; diff --git a/templates/app/react-native/src/theme/components/Left.js b/templates/app/react-native/src/theme/components/Left.js deleted file mode 100644 index 5a1b8b09b6..0000000000 --- a/templates/app/react-native/src/theme/components/Left.js +++ /dev/null @@ -1,11 +0,0 @@ -// @flow - -export default () => { - const leftTheme = { - flex: 1, - alignSelf: 'center', - alignItems: 'flex-start', - }; - - return leftTheme; -}; diff --git a/templates/app/react-native/src/theme/components/ListItem.js b/templates/app/react-native/src/theme/components/ListItem.js deleted file mode 100644 index ab1e38002a..0000000000 --- a/templates/app/react-native/src/theme/components/ListItem.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/components/Picker.android.js b/templates/app/react-native/src/theme/components/Picker.android.js deleted file mode 100644 index 0b499a6537..0000000000 --- a/templates/app/react-native/src/theme/components/Picker.android.js +++ /dev/null @@ -1,14 +0,0 @@ -// @flow - -export default () => { - const pickerTheme = { - '.note': { - color: '#8F8E95', - }, - // width: 90, - marginRight: -4, - flexGrow: 1, - }; - - return pickerTheme; -}; diff --git a/templates/app/react-native/src/theme/components/Picker.ios.js b/templates/app/react-native/src/theme/components/Picker.ios.js deleted file mode 100644 index b81b0568e2..0000000000 --- a/templates/app/react-native/src/theme/components/Picker.ios.js +++ /dev/null @@ -1,7 +0,0 @@ -// @flow - -export default () => { - const pickerTheme = {}; - - return pickerTheme; -}; diff --git a/templates/app/react-native/src/theme/components/Picker.js b/templates/app/react-native/src/theme/components/Picker.js deleted file mode 100644 index 0b499a6537..0000000000 --- a/templates/app/react-native/src/theme/components/Picker.js +++ /dev/null @@ -1,14 +0,0 @@ -// @flow - -export default () => { - const pickerTheme = { - '.note': { - color: '#8F8E95', - }, - // width: 90, - marginRight: -4, - flexGrow: 1, - }; - - return pickerTheme; -}; diff --git a/templates/app/react-native/src/theme/components/Radio.js b/templates/app/react-native/src/theme/components/Radio.js deleted file mode 100644 index a50e70deb7..0000000000 --- a/templates/app/react-native/src/theme/components/Radio.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/components/Right.js b/templates/app/react-native/src/theme/components/Right.js deleted file mode 100644 index 25b4c604f3..0000000000 --- a/templates/app/react-native/src/theme/components/Right.js +++ /dev/null @@ -1,14 +0,0 @@ -// @flow - -export default () => { - const rightTheme = { - 'NativeBase.Button': { - alignSelf: null, - }, - flex: 1, - alignSelf: 'center', - alignItems: 'flex-end', - }; - - return rightTheme; -}; diff --git a/templates/app/react-native/src/theme/components/Segment.js b/templates/app/react-native/src/theme/components/Segment.js deleted file mode 100644 index b78c0f391d..0000000000 --- a/templates/app/react-native/src/theme/components/Segment.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/components/Separator.js b/templates/app/react-native/src/theme/components/Separator.js deleted file mode 100644 index 8892181faf..0000000000 --- a/templates/app/react-native/src/theme/components/Separator.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/components/Spinner.js b/templates/app/react-native/src/theme/components/Spinner.js deleted file mode 100644 index f52a4d0aef..0000000000 --- a/templates/app/react-native/src/theme/components/Spinner.js +++ /dev/null @@ -1,9 +0,0 @@ -// @flow - -export default () => { - const spinnerTheme = { - height: 80, - }; - - return spinnerTheme; -}; diff --git a/templates/app/react-native/src/theme/components/Subtitle.js b/templates/app/react-native/src/theme/components/Subtitle.js deleted file mode 100644 index 9d6ec5022c..0000000000 --- a/templates/app/react-native/src/theme/components/Subtitle.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/components/SwipeRow.js b/templates/app/react-native/src/theme/components/SwipeRow.js deleted file mode 100644 index 16de874ecf..0000000000 --- a/templates/app/react-native/src/theme/components/SwipeRow.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/components/Switch.js b/templates/app/react-native/src/theme/components/Switch.js deleted file mode 100644 index d4edad8cc7..0000000000 --- a/templates/app/react-native/src/theme/components/Switch.js +++ /dev/null @@ -1,9 +0,0 @@ -// @flow - -export default () => { - const switchTheme = { - marginVertical: -5, - }; - - return switchTheme; -}; diff --git a/templates/app/react-native/src/theme/components/Tab.js b/templates/app/react-native/src/theme/components/Tab.js deleted file mode 100644 index 0498253251..0000000000 --- a/templates/app/react-native/src/theme/components/Tab.js +++ /dev/null @@ -1,10 +0,0 @@ -// @flow - -export default () => { - const tabTheme = { - flex: 1, - backgroundColor: '#FFF', - }; - - return tabTheme; -}; diff --git a/templates/app/react-native/src/theme/components/TabBar.js b/templates/app/react-native/src/theme/components/TabBar.js deleted file mode 100644 index 0c2b51da4f..0000000000 --- a/templates/app/react-native/src/theme/components/TabBar.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/components/TabContainer.js b/templates/app/react-native/src/theme/components/TabContainer.js deleted file mode 100644 index 1b42d58a0e..0000000000 --- a/templates/app/react-native/src/theme/components/TabContainer.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/components/TabHeading.js b/templates/app/react-native/src/theme/components/TabHeading.js deleted file mode 100644 index 37bb15350a..0000000000 --- a/templates/app/react-native/src/theme/components/TabHeading.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/components/Text.js b/templates/app/react-native/src/theme/components/Text.js deleted file mode 100644 index 2e6bea0e06..0000000000 --- a/templates/app/react-native/src/theme/components/Text.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/components/Textarea.js b/templates/app/react-native/src/theme/components/Textarea.js deleted file mode 100644 index 8022d3093b..0000000000 --- a/templates/app/react-native/src/theme/components/Textarea.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/components/Thumbnail.js b/templates/app/react-native/src/theme/components/Thumbnail.js deleted file mode 100644 index b3152fdcbb..0000000000 --- a/templates/app/react-native/src/theme/components/Thumbnail.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/components/Title.js b/templates/app/react-native/src/theme/components/Title.js deleted file mode 100644 index 02d28aafaa..0000000000 --- a/templates/app/react-native/src/theme/components/Title.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/components/Toast.js b/templates/app/react-native/src/theme/components/Toast.js deleted file mode 100644 index 6246a049f0..0000000000 --- a/templates/app/react-native/src/theme/components/Toast.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/components/View.js b/templates/app/react-native/src/theme/components/View.js deleted file mode 100644 index a01a86939e..0000000000 --- a/templates/app/react-native/src/theme/components/View.js +++ /dev/null @@ -1,13 +0,0 @@ -// @flow - -import variable from '../variables/Platform'; - -export default (variables /* : * */ = variable) => { - const viewTheme = { - '.padder': { - padding: variables.contentPadding, - }, - }; - - return viewTheme; -}; diff --git a/templates/app/react-native/src/theme/components/index.js b/templates/app/react-native/src/theme/components/index.js deleted file mode 100644 index 921980bb8a..0000000000 --- a/templates/app/react-native/src/theme/components/index.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/overrides/Button.js b/templates/app/react-native/src/theme/overrides/Button.js deleted file mode 100644 index 9597871ba2..0000000000 --- a/templates/app/react-native/src/theme/overrides/Button.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/overrides/Content.js b/templates/app/react-native/src/theme/overrides/Content.js deleted file mode 100644 index a3baf45b2c..0000000000 --- a/templates/app/react-native/src/theme/overrides/Content.js +++ /dev/null @@ -1,14 +0,0 @@ -// @flow -import contentTheme from '../components/Content'; - -export default variables => { - const override = { - ...contentTheme(variables), - backgroundColor: '#f8f8f8', - '.px20': { - paddingHorizontal: 20, - }, - }; - - return override; -}; diff --git a/templates/app/react-native/src/theme/overrides/Icon.js b/templates/app/react-native/src/theme/overrides/Icon.js deleted file mode 100644 index ee602f9049..0000000000 --- a/templates/app/react-native/src/theme/overrides/Icon.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/overrides/Input.js b/templates/app/react-native/src/theme/overrides/Input.js deleted file mode 100644 index 5ff4b86a9d..0000000000 --- a/templates/app/react-native/src/theme/overrides/Input.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/overrides/InputGroup.js b/templates/app/react-native/src/theme/overrides/InputGroup.js deleted file mode 100644 index e673b7e052..0000000000 --- a/templates/app/react-native/src/theme/overrides/InputGroup.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/overrides/Item.js b/templates/app/react-native/src/theme/overrides/Item.js deleted file mode 100644 index c5fd1d2397..0000000000 --- a/templates/app/react-native/src/theme/overrides/Item.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/overrides/Label.js b/templates/app/react-native/src/theme/overrides/Label.js deleted file mode 100644 index fbc68c661d..0000000000 --- a/templates/app/react-native/src/theme/overrides/Label.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/overrides/Text.js b/templates/app/react-native/src/theme/overrides/Text.js deleted file mode 100644 index 811c694011..0000000000 --- a/templates/app/react-native/src/theme/overrides/Text.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/overrides/index.js b/templates/app/react-native/src/theme/overrides/index.js deleted file mode 100644 index e44c56805d..0000000000 --- a/templates/app/react-native/src/theme/overrides/index.js +++ /dev/null @@ -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; -}; diff --git a/templates/app/react-native/src/theme/variables/CommonColor.js b/templates/app/react-native/src/theme/variables/CommonColor.js deleted file mode 100644 index dd28eb1531..0000000000 --- a/templates/app/react-native/src/theme/variables/CommonColor.js +++ /dev/null @@ -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, - }, - }, -}; diff --git a/templates/app/react-native/src/theme/variables/Material.js b/templates/app/react-native/src/theme/variables/Material.js deleted file mode 100644 index 8382482c96..0000000000 --- a/templates/app/react-native/src/theme/variables/Material.js +++ /dev/null @@ -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, - }, - }, -}; diff --git a/templates/app/react-native/src/theme/variables/Platform.js b/templates/app/react-native/src/theme/variables/Platform.js deleted file mode 100644 index db8fccab92..0000000000 --- a/templates/app/react-native/src/theme/variables/Platform.js +++ /dev/null @@ -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, - }, - }, -}; diff --git a/templates/app/react-native/src/theme/variables/index.js b/templates/app/react-native/src/theme/variables/index.js deleted file mode 100644 index d200bbdb83..0000000000 --- a/templates/app/react-native/src/theme/variables/index.js +++ /dev/null @@ -1,10 +0,0 @@ -import platform from './Platform'; - -export const customVariables = { - zIndex: { - overlay: 50, - loaders: 150, - }, -}; - -export const activeTheme = { ...platform, ...customVariables };