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 { useState, useEffect } from 'react';
import { useWindowDimensions } from 'react-native'; import { useWindowDimensions } from 'react-native';
import config from 'constants/Config';
export function useAccess() { export function useAccess() {
@ -13,7 +14,7 @@ export function useAccess() {
} }
useEffect(() => { useEffect(() => {
if (dimensions.width > 650) { if (dimensions.width > config.tabbedWidth) {
updateState({ split: true }); updateState({ split: true });
} }
else { 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 ( return (
<SafeAreaProvider> <SafeAreaProvider>
<NavigationContainer> <NavigationContainer>
<Tab.Navigator { state.tabbed && (
screenOptions={({ route }) => ({ <Tab.Navigator
tabBarStyle: styles.tabBar, screenOptions={({ route }) => ({
headerShown: false, tabBarStyle: styles.tabBar,
tabBarIcon: ({ focused, color, size }) => { headerShown: false,
if (route.name === 'Profile') { tabBarIcon: ({ focused, color, size }) => {
return <Ionicons name={'user'} size={size} color={color} />; 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 === 'Conversation') {
} return <Ionicons name={'message1'} size={size} color={color} />;
if (route.name === 'Contacts') { }
return <Ionicons name={'contacts'} size={size} color={color} />; if (route.name === 'Contacts') {
} return <Ionicons name={'contacts'} size={size} color={color} />;
}, }
tabBarShowLabel: false, },
tabBarActiveTintColor: Colors.white, tabBarShowLabel: false,
tabBarInactiveTintColor: Colors.disabled, tabBarActiveTintColor: Colors.white,
})} tabBarInactiveTintColor: Colors.disabled,
> })}
<Tab.Screen name="Conversation" component={ConversationStackScreen} /> >
<Tab.Screen name="Profile" component={ProfileStackScreen} /> <Tab.Screen name="Conversation" component={ConversationStackScreen} />
<Tab.Screen name="Contacts" component={ContactStackScreen} /> <Tab.Screen name="Profile" component={ProfileStackScreen} />
</Tab.Navigator> <Tab.Screen name="Contacts" component={ContactStackScreen} />
</Tab.Navigator>
)}
</NavigationContainer> </NavigationContainer>
</SafeAreaProvider> </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 { useWindowDimensions } from 'react-native';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { AppContext } from 'context/AppContext'; import { AppContext } from 'context/AppContext';
import config from 'constants/Config';
export function useSession() { export function useSession() {
const [state, setState] = useState({ const [state, setState] = useState({
tabbled: null,
}); });
const dimensions = useWindowDimensions();
const app = useContext(AppContext); const app = useContext(AppContext);
const navigate = useNavigate(); const navigate = useNavigate();
@ -15,11 +17,16 @@ export function useSession() {
setState((s) => ({ ...s, ...value })); setState((s) => ({ ...s, ...value }));
} }
useEffect(() => {
if (dimensions.width > config.tabbedWidth) {
updateState({ tabbed: false });
}
else {
updateState({ tabbed: true });
}
}, [dimensions]);
const actions = { const actions = {
logout: async () => {
await app.actions.logout();
navigate('/');
},
}; };
return { state, actions }; return { state, actions };