Browse Source

update config react native paper

master
farhantock 2 months ago
parent
commit
c391d2969e
  1. 70
      index.js
  2. 24
      src/App.js

70
index.js

@ -1,25 +1,69 @@
/**
* @format
*/
import { AppRegistry } from 'react-native';
import React from 'react';
import { AppRegistry, StatusBar, View, StyleSheet, useColorScheme } from 'react-native';
import { Provider, useSelector } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { PaperProvider, MD3DarkTheme, MD3LightTheme } from 'react-native-paper';
import App from './src/App';
import { name as appName } from './app.json';
import { LogBox } from 'react-native';
import { PaperProvider, useTheme } from 'react-native-paper';
import { persistor, store } from './src/appredux/store';
const Main = () => {
const systemTheme = useColorScheme();
const { theme, useSystemTheme } = useSelector(state => state.themeReducer);
const customColors = {
blue: '#3876BF',
semiBlue: '#DCECFF',
beanRed: '#EF6262',
semiRed: '#FFC5C3',
semiYellow: '#FFE7A3',
orange: '#FAA300',
green: '#17C13E',
semigreen: '#E3F8E8',
black: '#333333',
mistBlue: '#667085',
amethystSmoke: '#9A99AB',
mercury: '#E4E4E7',
catskillWhite: '#F2F4F6',
white: '#F9F9F9',
pureWhite: '#FFFFFF',
};
LogBox.ignoreLogs(['Warning: Failed prop type: Invalid prop `role`']); // Ignore log notification by message
LogBox.ignoreAllLogs();
const lightTheme = {
...MD3LightTheme,
colors: {
...MD3LightTheme.colors,
...customColors,
background: customColors.white,
text: customColors.black,
},
};
const darkTheme = {
...MD3DarkTheme,
colors: {
...MD3DarkTheme.colors,
...customColors,
background: customColors.black,
text: customColors.white,
},
};
const appliedTheme = useSystemTheme ? (systemTheme === 'dark' ? darkTheme : lightTheme) : (theme === 'dark' ? darkTheme : lightTheme);
export default function Main() {
return (
<PaperProvider>
<PaperProvider theme={appliedTheme}>
<App />
</PaperProvider>
);
}
};
const AppWrapper = () => (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<Main />
</PersistGate>
</Provider>
);
AppRegistry.registerComponent(appName, () => App);
AppRegistry.registerComponent(appName, () => AppWrapper);

24
src/App.js

@ -1,23 +1,24 @@
import React from 'react';
import { StyleSheet, View, ActivityIndicator } from 'react-native';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { StyleSheet, View } from 'react-native';
import { ActivityIndicator } from 'react-native-paper';
import { persistor, store } from './appredux/store';
import AppRoutes from './navigation/AppRoutes'
import { store, persistor } from './appredux/store';
import AppRoutes from './navigation/AppRoutes';
import Toast from 'react-native-toast-message';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { colors } from '../src/utils/color'
import { colors } from '../src/utils/color';
const App = () => {
return (
<Provider store={store}>
<PersistGate loading={
<View style={styles.container}>
<ActivityIndicator size='large' style={{ backgroundColor: colors.pureWhite }} animating={true} color={colors.blue} />
</View>
} persistor={persistor}>
<PersistGate
loading={
<View style={styles.container}>
<ActivityIndicator size='large' style={{ backgroundColor: colors.pureWhite }} animating={true} color={colors.blue} />
</View>
}
persistor={persistor}
>
<GestureHandlerRootView style={{ flex: 1 }}>
<AppRoutes />
<Toast position='bottom' visibilityTime={5000} />
@ -27,7 +28,6 @@ const App = () => {
);
};
const styles = StyleSheet.create({
container: {
flex: 1,

Loading…
Cancel
Save