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

preparing for large layouts

Browse Source
This commit is contained in:
balzack 2022-09-17 00:22:12 -07:00
parent c1141b2102
commit 74589ce5ad
4 changed files with 45 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/mobile/src/access/useAccess.hook.js
View File

@ -1,5 +1,6 @@
import { useState, useEffect } from 'react';
import { useWindowDimensions } from 'react-native';
import config from 'constants/Config';
export function useAccess() {
@ -13,7 +14,7 @@ export function useAccess() {
}
useEffect(() => {
if (dimensions.width > 650) {
if (dimensions.width > config.tabbedWidth) {
updateState({ split: true });
}
else {

5
app/mobile/src/constants/Config.js Normal file
View File

@ -0,0 +1,5 @@
export const Config = {
tabbedWidth: 650,
};
export default Config;

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

@ -47,30 +47,32 @@ export function Session() {
return (
<SafeAreaProvider>
<NavigationContainer>
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarStyle: styles.tabBar,
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} />;
}
},
tabBarShowLabel: false,
tabBarActiveTintColor: Colors.white,
tabBarInactiveTintColor: Colors.disabled,
})}
>
<Tab.Screen name="Conversation" component={ConversationStackScreen} />
<Tab.Screen name="Profile" component={ProfileStackScreen} />
<Tab.Screen name="Contacts" component={ContactStackScreen} />
</Tab.Navigator>
{ state.tabbed && (
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarStyle: styles.tabBar,
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} />;
}
},
tabBarShowLabel: false,
tabBarActiveTintColor: Colors.white,
tabBarInactiveTintColor: Colors.disabled,
})}
>
<Tab.Screen name="Conversation" component={ConversationStackScreen} />
<Tab.Screen name="Profile" component={ProfileStackScreen} />
<Tab.Screen name="Contacts" component={ContactStackScreen} />
</Tab.Navigator>
)}
</NavigationContainer>
</SafeAreaProvider>
);

17
app/mobile/src/session/useSession.hook.js
View File

@ -2,12 +2,14 @@ import { useState, useEffect, useContext } from 'react';
import { useWindowDimensions } from 'react-native';
import { useNavigate } from 'react-router-dom';
import { AppContext } from 'context/AppContext';
import config from 'constants/Config';
export function useSession() {
const [state, setState] = useState({
tabbled: null,
});
const dimensions = useWindowDimensions();
const app = useContext(AppContext);
const navigate = useNavigate();
@ -15,11 +17,16 @@ export function useSession() {
setState((s) => ({ ...s, ...value }));
}
useEffect(() => {
if (dimensions.width > config.tabbedWidth) {
updateState({ tabbed: false });
}
else {
updateState({ tabbed: true });
}
}, [dimensions]);
const actions = {
logout: async () => {
await app.actions.logout();
navigate('/');
},
};
return { state, actions };