Skip to content
This repository has been archived by the owner on Jan 10, 2025. It is now read-only.

Removed native-base #1008

Draft
wants to merge 6 commits into
base: master-qa
Choose a base branch
from
Draft

Removed native-base #1008

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b1fda3e
Removed native-base
AlixH May 25, 2023
20ca7b0
Replaced icon style by iconStyle
AlixH May 25, 2023
acb2fc9
Replace icon style by iconStyle
AlixH May 25, 2023
93eda89
Change icon style to iconStyle
AlixH May 25, 2023
1c4616a
Review changes
AlixH May 25, 2023
4ece4ce
Deleted useless file
AlixH May 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6,065 changes: 147 additions & 5,918 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,6 @@
"jwt-decode": "^3.1.2",
"lodash": "^4.17.21",
"moment": "^2.29.4",
"native-base": "3.4.22",
"react": "^18.1.0",
"react-dom": "18.1.0",
"react-native": "0.70.8",
Expand Down
75 changes: 35 additions & 40 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import {
import { createStackNavigator } from '@react-navigation/stack';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import I18n from 'i18n-js';
import {Icon, NativeBaseProvider} from 'native-base';
import React, {useEffect, useState} from 'react';
import {Appearance, ColorSchemeName, NativeEventSubscription, StatusBar, Text} from 'react-native';
import { scale } from 'react-native-size-matters';
Expand Down Expand Up @@ -57,9 +56,6 @@ import ChargingStationQrCode from './screens/home/ChargingStationQrCode';
import ThemeManager from './custom-theme/ThemeManager';
import TenantQrCode from './screens/tenants/TenantQrCode';
import computeStyleSheet from './AppStyles';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import Settings from './screens/settings/Settings';
import {hide} from 'react-native-bootsplash';
import {ThemeType} from './types/Theme';
Expand All @@ -70,6 +66,7 @@ import Loading from './screens/loading/Loading';
import {Notification} from './types/UserNotifications';
import Configuration from './config/Configuration';
import {RootSiblingParent} from 'react-native-root-siblings';
import {Icon} from 'react-native-elements';

// Init i18n
I18nManager.initialize();
Expand Down Expand Up @@ -106,11 +103,11 @@ const createTabBarIcon = (
const commonColor = Utils.getCurrentCommonColor();
return (
<Icon
style={{
iconStyle={{
color: props.focused ? commonColor.textColor : commonColor.disabledDark,
}}
size={scale(21)}
as={type}
type={type}
name={name}
/>
);
Expand Down Expand Up @@ -184,7 +181,7 @@ function ChargingStationDetailsTabsNavigator(props: BaseProps) {
initialParams={{...(props?.route?.params?.params || {}), canOpenDrawer: false}}
options={{
tabBarLabel: <Text style={style.bottomTabsIcon}>{I18n.t('chargers.actions')}</Text>,
tabBarIcon: (iconProps) => createTabBarIcon(iconProps, MaterialIcons, 'build')
tabBarIcon: (iconProps) => createTabBarIcon(iconProps, 'material', 'build')
}}
/>
<ChargingStationDetailsTabs.Screen
Expand All @@ -193,7 +190,7 @@ function ChargingStationDetailsTabsNavigator(props: BaseProps) {
initialParams={{...(props?.route?.params?.params || {}), canOpenDrawer: false}}
options={{
tabBarLabel: <Text style={style.bottomTabsIcon}>{I18n.t('chargers.ocpp')}</Text>,
tabBarIcon: (iconProps) => createTabBarIcon(iconProps, MaterialIcons, 'format-list-bulleted')
tabBarIcon: (iconProps) => createTabBarIcon(iconProps, 'material', 'format-list-bulleted')
}}
/>
<ChargingStationDetailsTabs.Screen
Expand All @@ -202,7 +199,7 @@ function ChargingStationDetailsTabsNavigator(props: BaseProps) {
initialParams={{...(props?.route?.params?.params || {}), canOpenDrawer: false}}
options={{
tabBarLabel: <Text style={style.bottomTabsIcon}>{I18n.t('chargers.properties')}</Text>,
tabBarIcon: (iconProps) => createTabBarIcon(iconProps, MaterialIcons, 'info')
tabBarIcon: (iconProps) => createTabBarIcon(iconProps, 'material', 'info')
}}
/>
</ChargingStationDetailsTabs.Navigator>
Expand All @@ -228,7 +225,7 @@ function ChargingStationConnectorDetailsTabsNavigator(props: BaseProps) {
initialParams={{...(props?.route?.params?.params || {}), canOpenDrawer: false}}
options={{
tabBarLabel: <Text style={style.bottomTabsIcon}>{I18n.t('sites.chargePoint')}</Text>,
tabBarIcon: (iconProps) => createTabBarIcon(iconProps, FontAwesome, 'bolt')
tabBarIcon: (iconProps) => createTabBarIcon(iconProps, 'font-awesome', 'bolt')
}}
/>
<ChargingStationConnectorDetailsTabs.Screen
Expand All @@ -237,7 +234,7 @@ function ChargingStationConnectorDetailsTabsNavigator(props: BaseProps) {
initialParams={{...(props?.route?.params?.params || {}), canOpenDrawer: false}}
options={{
tabBarLabel: <Text style={style.bottomTabsIcon}>{I18n.t('details.graph')}</Text>,
tabBarIcon: (iconProps) => createTabBarIcon(iconProps, MaterialCommunityIcons, 'chart-areaspline-variant')
tabBarIcon: (iconProps) => createTabBarIcon(iconProps, 'material-community', 'chart-areaspline-variant')
}}
/>
</ChargingStationConnectorDetailsTabs.Navigator>
Expand All @@ -263,7 +260,7 @@ function TransactionDetailsTabsNavigator(props: BaseProps) {
initialParams={{...(props?.route?.params?.params || {}), canOpenDrawer: false}}
options={{
tabBarLabel: <Text style={style.bottomTabsIcon}>{I18n.t('transactions.transaction')}</Text>,
tabBarIcon: (iconProps) => createTabBarIcon(iconProps, FontAwesome, 'bolt')
tabBarIcon: (iconProps) => createTabBarIcon(iconProps, 'font-awesome', 'bolt')
}}
/>
<TransactionDetailsTabs.Screen
Expand All @@ -272,7 +269,7 @@ function TransactionDetailsTabsNavigator(props: BaseProps) {
initialParams={{...(props?.route?.params?.params || {}), canOpenDrawer: false}}
options={{
tabBarLabel: <Text style={style.bottomTabsIcon}>{I18n.t('details.graph')}</Text>,
tabBarIcon: (iconProps) => createTabBarIcon(iconProps, MaterialCommunityIcons, 'chart-areaspline-variant')
tabBarIcon: (iconProps) => createTabBarIcon(iconProps, 'material-community', 'chart-areaspline-variant')
}}
/>
</TransactionDetailsTabs.Navigator>
Expand Down Expand Up @@ -532,7 +529,7 @@ function AppDrawerNavigator(props: BaseProps) {
component={ChargingStationQrCode}
options={{
drawerLabel: I18n.t('sidebar.qrCodeScanner'),
drawerIcon: () => <Icon color={commonColors.textColor} size={scale(22)} as={MaterialIcons} name="qr-code-scanner" />
drawerIcon: () => <Icon color={commonColors.textColor} size={scale(22)} type={'material'} name="qr-code-scanner" />

}}
initialParams={{...(props?.route?.params?.params || {}), canOpenDrawer: false}}
Expand All @@ -544,7 +541,7 @@ function AppDrawerNavigator(props: BaseProps) {
component={ChargingStationsNavigator}
options={{
drawerLabel: I18n.t('sidebar.chargers'),
drawerIcon: () => <Icon color={commonColors.textColor} size={scale(22)} as={MaterialIcons} name="ev-station" />
drawerIcon: () => <Icon color={commonColors.textColor} size={scale(22)} type={'material'} name="ev-station" />
}}
initialParams={props?.route?.params?.params}
/>
Expand All @@ -554,7 +551,7 @@ function AppDrawerNavigator(props: BaseProps) {
component={SitesNavigator}
options={{
drawerLabel: I18n.t('sidebar.sites'),
drawerIcon: () => <Icon color={commonColors.textColor} size={scale(22)} as={MaterialIcons} name="store-mall-directory" />
drawerIcon: () => <Icon color={commonColors.textColor} size={scale(22)} type={'material'} name="store-mall-directory" />
}}
initialParams={props?.route?.params?.params}
/>
Expand All @@ -566,7 +563,7 @@ function AppDrawerNavigator(props: BaseProps) {
component={TransactionHistoryNavigator}
options={{
drawerLabel: I18n.t('sidebar.transactionsHistory'),
drawerIcon: () => <Icon color={commonColors.textColor} size={scale(22)} as={MaterialIcons} name="history" />
drawerIcon: () => <Icon color={commonColors.textColor} size={scale(22)} type={'material'} name="history" />
}}
initialParams={props?.route?.params?.params}
/>
Expand All @@ -575,7 +572,7 @@ function AppDrawerNavigator(props: BaseProps) {
component={TransactionInProgressNavigator}
options={{
drawerLabel: I18n.t('sidebar.transactionsInProgress'),
drawerIcon: () => <Icon color={commonColors.textColor} size={scale(22)} as={MaterialIcons} name="play-arrow" />
drawerIcon: () => <Icon color={commonColors.textColor} size={scale(22)} type={'material'} name="play-arrow" />
}}
initialParams={props?.route?.params?.params}
/>
Expand All @@ -584,7 +581,7 @@ function AppDrawerNavigator(props: BaseProps) {
component={StatsNavigator}
options={{
drawerLabel: I18n.t('sidebar.statistics'),
drawerIcon: () => <Icon color={commonColors.textColor} size={scale(22)} as={MaterialIcons} name="bar-chart" />
drawerIcon: () => <Icon color={commonColors.textColor} size={scale(22)} type={'material'} name="bar-chart" />
}}
initialParams={props?.route?.params?.params}
/>
Expand All @@ -596,7 +593,7 @@ function AppDrawerNavigator(props: BaseProps) {
component={UsersNavigator}
options={{
drawerLabel: I18n.t('sidebar.users'),
drawerIcon: () => <Icon color={commonColors.textColor} size={scale(22)} as={MaterialIcons} name="people" />
drawerIcon: () => <Icon color={commonColors.textColor} size={scale(22)} type={'material'} name="people" />
}}
initialParams={props?.route?.params?.params}
/>
Expand All @@ -607,7 +604,7 @@ function AppDrawerNavigator(props: BaseProps) {
component={TagsNavigator}
options={{
drawerLabel: I18n.t('sidebar.badges'),
drawerIcon: () => <Icon color={commonColors.textColor} size={scale(22)} as={MaterialCommunityIcons} name="credit-card-wireless-outline" />
drawerIcon: () => <Icon color={commonColors.textColor} size={scale(22)} type={'material-community'} name="credit-card-wireless-outline" />
}}
initialParams={props?.route?.params?.params}
/>
Expand All @@ -618,7 +615,7 @@ function AppDrawerNavigator(props: BaseProps) {
component={CarsNavigator}
options={{
drawerLabel: I18n.t('sidebar.cars'),
drawerIcon: () => <Icon color={commonColors.textColor} size={scale(22)} as={MaterialIcons} name="directions-car" />
drawerIcon: () => <Icon color={commonColors.textColor} size={scale(22)} type={'material'} name="directions-car" />
}}
initialParams={props?.route?.params?.params}
/>
Expand All @@ -631,7 +628,7 @@ function AppDrawerNavigator(props: BaseProps) {
component={PaymentMethodsNavigator}
options={{
drawerLabel: I18n.t('sidebar.paymentMethods'),
drawerIcon: () => <Icon color={commonColors.textColor} size={scale(22)} as={MaterialCommunityIcons} name="credit-card-outline" />
drawerIcon: () => <Icon color={commonColors.textColor} size={scale(22)} type={'material-community'} name="credit-card-outline" />
}}
initialParams={props?.route?.params?.params}
/>
Expand All @@ -643,7 +640,7 @@ function AppDrawerNavigator(props: BaseProps) {
component={InvoicesNavigator}
options={{
drawerLabel: I18n.t('sidebar.invoices'),
drawerIcon: () => <Icon color={commonColors.textColor} size={scale(22)} as={MaterialIcons} name="receipt" />
drawerIcon: () => <Icon color={commonColors.textColor} size={scale(22)} type={'material'} name="receipt" />
}}
initialParams={props?.route?.params?.params}
/>
Expand All @@ -654,7 +651,7 @@ function AppDrawerNavigator(props: BaseProps) {
component={ReportErrorNavigator}
options={{
drawerLabel: I18n.t('sidebar.reportError'),
drawerIcon: () => <Icon color={commonColors.textColor} size={scale(22)} as={MaterialIcons} name="error-outline" />
drawerIcon: () => <Icon color={commonColors.textColor} size={scale(22)} type={'material'} name="error-outline" />
}}
initialParams={props?.route?.params?.params}
/>
Expand Down Expand Up @@ -778,21 +775,19 @@ export default class App extends React.Component<Props, State> {
public render() {
const { showAppUpdateDialog, isSignedIn } = this.state;
return (
<NativeBaseProvider>
<GestureHandlerRootView style={{ flex: 1 }}>
<RootSiblingParent>
{showAppUpdateDialog && (
<AppUpdateDialog appVersion={this.appVersion} close={() => this.setState({ showAppUpdateDialog: false })} />
)}
<StatusBar barStyle={ThemeManager.getInstance()?.isThemeTypeIsDark() ? 'light-content' : 'dark-content'} translucent backgroundColor="transparent" />
{isSignedIn == null ?
<Loading/>
:
this.createRootNavigator()
}
</RootSiblingParent>
</GestureHandlerRootView>
</NativeBaseProvider>
<GestureHandlerRootView style={{ flex: 1 }}>
<RootSiblingParent>
{showAppUpdateDialog && (
<AppUpdateDialog appVersion={this.appVersion} close={() => this.setState({ showAppUpdateDialog: false })} />
)}
<StatusBar barStyle={ThemeManager.getInstance()?.isThemeTypeIsDark() ? 'light-content' : 'dark-content'} translucent backgroundColor="transparent" />
{isSignedIn == null ?
<Loading/>
:
this.createRootNavigator()
}
</RootSiblingParent>
</GestureHandlerRootView>
);
}

Expand Down
6 changes: 3 additions & 3 deletions src/I18n/languages/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
"notAuthorized": "You are not authorized to perform this action",
"migrationError": "Error during migration of data",
"cannotConnectBackend": "Connection has been lost",
"unexpectedErrorBackend": "Unexpected Backend Error",
"unexpectedError": "Unexpected Error",
"unexpectedErrorBackend": "Unexpected backend error",
"unexpectedError": "Unexpected error",
"sessionExpired": "Session has expired",
"numbers": "Enter a valid number",
"email": "Enter a valid email address",
Expand Down Expand Up @@ -124,7 +124,7 @@
"invalidMobile": "Invalid phone number",
"mandatoryPassword": "The Password is mandatory",
"logOut": "Log out",
"mustSelectTenant": "Select an Organization",
"mustSelectTenant": "Select an organization",
"wrongEmailOrPassword": "Wrong email or password",
"authenticationFailed": "Authentication Failed",
"invalidCaptcha": "The captcha has been refused (security)!",
Expand Down
4 changes: 2 additions & 2 deletions src/I18n/languages/fr.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,9 +124,9 @@
"invalidMobile": "Le numéro est invalide",
"mandatoryPassword": "Le Mot de Passe est obligatoire",
"logOut": "Déconnexion",
"mustSelectTenant": "Selectionnez une Organisation",
"mustSelectTenant": "Sélectionnez une organisation",
"wrongEmailOrPassword": "Mauvais email ou mot de passe",
"authenticationFailed": "Authentification Echouée",
"authenticationFailed": "Authentification echouée",
"invalidCaptcha": "Le Captcha a été refusé (sécurité)!",
"wrongEmail": "Email inconnu !",
"emailAlreadyExists": "Cet Email existe déjà",
Expand Down
17 changes: 7 additions & 10 deletions src/components/car/CarCatalogComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { Icon } from 'native-base';
import React from 'react';
import { Image, ImageStyle, Text, View, ViewStyle } from 'react-native';

Expand All @@ -8,10 +7,8 @@ import Utils from '../../utils/Utils';
import computeStyleSheet from './CarCatalogComponentStyle';
import computeListItemCommonStyle from '../list/ListItemCommonStyle';
import I18n from 'i18n-js';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import { scale } from 'react-native-size-matters';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {Icon} from 'react-native-elements';

interface State {
noImage?: boolean;
Expand Down Expand Up @@ -54,7 +51,7 @@ export default class CarCatalogComponent extends React.Component<Props, State> {
<Image onError={() => this.setState({ noImage: true })} resizeMethod={'auto'} style={style.imageStyle as ImageStyle} source={image} />
) : (
<View style={style.noImageContainer}>
<Icon size={scale(75)} style={style.carImagePlaceholder} as={Ionicons} name={'car-sport'} />
<Icon size={scale(75)} iconStyle={style.carImagePlaceholder} type={'ionicon'} name={'car-sport'} />
</View>
)}
<View style={style.rightContainer}>
Expand All @@ -67,23 +64,23 @@ export default class CarCatalogComponent extends React.Component<Props, State> {
<View style={style.powerDetailsContainer}>
<View style={style.columnContainer}>
<View style={style.iconContainer}>
<Icon size={scale(20)} as={MaterialIcons} name="battery-full" style={style.icon} />
<Icon size={scale(20)} type={'material'} name="battery-full" iconStyle={style.icon} />
</View>
<Text adjustsFontSizeToFit={true} numberOfLines={1} style={[style.text, style.powerDetailsText]}>
{carCatalog?.batteryCapacityFull} kW.h
</Text>
</View>
<View style={style.columnContainer}>
<View style={style.iconContainer}>
<Icon size={scale(20)} as={MaterialCommunityIcons} name="road-variant" style={style.icon} />
<Icon size={scale(20)} type={'material-community'} name="road-variant" iconStyle={style.icon} />
</View>
<Text adjustsFontSizeToFit={true} numberOfLines={1} style={[style.text, style.powerDetailsText]}>
{carCatalog?.rangeReal} km
</Text>
</View>
<View style={style.columnContainer}>
<View style={style.iconContainer}>
<Icon size={scale(20)} style={style.icon} as={MaterialCommunityIcons} name="piston" />
<Icon size={scale(20)} iconStyle={style.icon} type={'material-community'} name="piston" />
</View>
{carCatalog?.drivetrainPowerHP ? (
<Text adjustsFontSizeToFit={true} numberOfLines={1} style={[style.text, style.powerDetailsText]}>
Expand All @@ -95,8 +92,8 @@ export default class CarCatalogComponent extends React.Component<Props, State> {
</View>
<View style={style.columnContainer}>
<View style={style.iconContainer}>
<Icon size={scale(20)} style={style.icon} as={MaterialIcons} name="bolt" />
<Icon style={[style.icon, style.currentTypeIcon]} as={MaterialCommunityIcons} name="sine-wave" />
<Icon size={scale(20)} iconStyle={style.icon} type={'material'} name="bolt" />
<Icon iconStyle={{...style.icon, ...style.currentTypeIcon}} type={'material-community'} name="sine-wave" />
</View>
<Text adjustsFontSizeToFit={true} numberOfLines={1} style={[style.text, style.powerDetailsText]}>
{carCatalog?.chargeStandardPower} kW
Expand Down
Loading