Browse Source

dev: Add React Native Paper theme

themes-and-bottom-tab-navigator
Florian 3 months ago
parent
commit
26653e11c5
  1. 14
      App.tsx
  2. 35
      constants/Theme.ts
  3. 26
      navigation/BottomTabNavigator.tsx

14
App.tsx

@ -4,14 +4,18 @@ import React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import BottomTabNavigator from './navigation/BottomTabNavigator';
import { NavigationContainer } from '@react-navigation/native';
import { ThemeProvider } from 'react-native-paper';
import { navigationTheme, paperTheme } from './constants/Theme';
export default function App() {
return (
<NavigationContainer>
<SafeAreaProvider>
<StatusBar />
<BottomTabNavigator />
</SafeAreaProvider>
<NavigationContainer theme={navigationTheme}>
<ThemeProvider theme={paperTheme}>
<SafeAreaProvider>
<StatusBar />
<BottomTabNavigator />
</SafeAreaProvider>
</ThemeProvider>
</NavigationContainer>
);
}

35
constants/Theme.ts

@ -0,0 +1,35 @@
import { DefaultTheme as defaultPaperTheme, useTheme as useRNPTheme } from 'react-native-paper';
import { DefaultTheme as defaultNavigationTheme } from '@react-navigation/native';
enum Colors {
PRIMARY = '#E73059',
SECONDARY = '#202020',
BACKGROUND = '#FEF7F9',
ICON_FOCUSED = '#E03B60',
ICON_NOT_FOCUSED = '#A3A3A3',
}
export const paperTheme = {
...defaultPaperTheme,
colors: {
...defaultPaperTheme.colors,
primary: Colors.PRIMARY,
secondary: Colors.SECONDARY,
background: Colors.BACKGROUND,
iconFocused: Colors.ICON_FOCUSED,
iconNotFocused: Colors.ICON_NOT_FOCUSED,
},
};
export const navigationTheme = {
...defaultNavigationTheme,
colors: {
...defaultNavigationTheme.colors,
primary: Colors.ICON_FOCUSED,
background: Colors.BACKGROUND,
},
};
export type PaperTheme = typeof paperTheme;
export type NavigationTheme = typeof navigationTheme;
export const useTheme = () => useRNPTheme() as PaperTheme;

26
navigation/BottomTabNavigator.tsx

@ -1,17 +1,33 @@
import React, { FC } from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from '../screens/Home';
import Player from '../screens/Player';
import Informations from '../screens/Informations';
import { useTheme } from '../constants/Theme';
import { MaterialCommunityIcons as Icon } from '@expo/vector-icons';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Navigator = createBottomTabNavigator();
const BottomTabNavigator: FC = () => {
const theme = useTheme();
return (
<Navigator.Navigator>
<Navigator.Screen name='Home' component={Home} />
<Navigator.Screen name='Player' component={Player} />
<Navigator.Screen name='Informations' component={Informations} />
<Navigator.Navigator tabBarOptions={{ style: { backgroundColor: theme.colors.secondary }, showLabel: false }}>
<Navigator.Screen
name='Home'
component={Home}
options={{ tabBarIcon: props => <Icon {...props} name='play-box-multiple' /> }}
/>
<Navigator.Screen
name='Player'
component={Player}
options={{ tabBarIcon: props => <Icon {...props} size={32} name='play' /> }}
/>
<Navigator.Screen
name='Informations'
component={Informations}
options={{ tabBarIcon: props => <Icon {...props} name='information' /> }}
/>
</Navigator.Navigator>
);
};

Loading…
Cancel
Save