martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 03:29:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

styling bottom nav

Browse Source
This commit is contained in:
Roland Osborne 2022-09-16 15:00:29 -07:00
parent a8735c5066
commit d8ad6ebf41
3 changed files with 47 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/mobile/src/constants/Colors.js
View File

@ -16,6 +16,9 @@ export const Colors = {
text: '#444444', text: '#444444',
link: '#0077CC', link: '#0077CC',
active: '#222222',
idle: '#707070',
itemDivider: '#eeeeee', itemDivider: '#eeeeee',
connected: '#44cc44', connected: '#44cc44',

46
app/mobile/src/session/Session.jsx
View File

@ -1,7 +1,11 @@
import { View, TouchableOpacity, Text } from 'react-native'; import { View, TouchableOpacity, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native'; import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import { useSession } from './useSession.hook';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import Ionicons from '@expo/vector-icons/AntDesign';
import { useSession } from './useSession.hook';
import { styles } from './Session.styled';
import Colors from 'constants/Colors';
export function Session() { export function Session() {
@ -9,17 +13,39 @@ export function Session() {
const Tab = createBottomTabNavigator(); const Tab = createBottomTabNavigator();
const Home = () => (<TouchableOpacity style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }} onPress={actions.logout}><Text>LOGOUT</Text></TouchableOpacity>); const Conversation = () => (<TouchableOpacity style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }} onPress={actions.logout}><Text>LOGOUT</Text></TouchableOpacity>);
const Settings = () => (<Text>SETTINGS</Text>); const Profile = () => (<SafeAreaView edges={['top']}><View style={{ width: '100%', height: '100%', backgroundColor: 'yellow'}} /></SafeAreaView>);
const Contacts = () => (<SafeAreaView edges={['top']}><View style={{ width: '100%', height: '100%', backgroundColor: 'yellow'}} /></SafeAreaView>);
return ( return (
<NavigationContainer> <SafeAreaProvider>
<Tab.Navigator> <NavigationContainer>
<Tab.Screen name="Home" component={Home} /> <Tab.Navigator
<Tab.Screen name="Settings" component={Settings} /> screenOptions={({ route }) => ({
</Tab.Navigator> tabBarStyle: styles.tabBar,
</NavigationContainer> headerShown: false,
tabBarIcon: ({ focused, color, size }) => {
if (route.name === 'Profile') {
return <Ionicons name={'user'} size={size} color={color} />;
}
if (route.name === 'Conversation') {
return <Ionicons name={'message1'} size={size} color={color} />;
}
if (route.name === 'Contacts') {
return <Ionicons name={'contacts'} size={size} color={color} />;
}
},
tabBarActiveTintColor: Colors.white,
tabBarInactiveTintColor: Colors.disabled,
})}
>
<Tab.Screen name="Conversation" component={Conversation} />
<Tab.Screen name="Profile" component={Profile} />
<Tab.Screen name="Contacts" component={Contacts} />
</Tab.Navigator>
</NavigationContainer>
</SafeAreaProvider>
); );
} }

8
app/mobile/src/session/Session.styled.js Normal file
View File

@ -0,0 +1,8 @@
import { StyleSheet } from 'react-native';
import { Colors } from 'constants/Colors';
export const styles = StyleSheet.create({
tabBar: {
backgroundColor: Colors.primary,
},
});