karaolidis/terminally-online
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add actionButton conditional hiding

Browse Source 
Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
This commit is contained in:
Nick Karaolidis
2023-07-09 20:04:18 +03:00
parent cdc96bc7db
commit 3c797bf02d
3 changed files with 90 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.tsx
View File

@@ -7,7 +7,6 @@ import { lightTheme, darkTheme } from './theme';
import { Meme, Tag } from './database';
import NavigationContainer from './navigation';
import { SettingsProvider } from './contexts/settings';
import ActionButton from './components/actionButton';
function App(): JSX.Element {
const colorScheme = useColorScheme();
@@ -24,7 +23,6 @@ function App(): JSX.Element {
backgroundColor={theme.colors.background}
/>
<NavigationContainer />
<ActionButton />
</SafeAreaProvider>
</SettingsProvider>
</PaperProvider>

2
src/components/actionButton.tsx
View File

@@ -5,7 +5,7 @@ import { noOp } from '../constants';
const styles = StyleSheet.create({
fab: {
marginBottom: 100,
paddingBottom: 90,
},
});

171
src/navigation.tsx
View File

@@ -7,97 +7,104 @@ import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { BottomNavigation, useTheme } from 'react-native-paper';
import { Home, Search, Tags, Settings } from './screens';
import ActionButton from './components/actionButton';
function NavigationContainer() {
const TabNavigator = createBottomTabNavigator();
const theme = useTheme();
const [showFab, setShowFab] = React.useState(true);
return (
<NavigationContainerBase
theme={{
dark: theme.dark,
colors: {
primary: theme.colors.primary,
background: theme.colors.background,
card: theme.colors.surface,
text: theme.colors.onSurface,
border: theme.colors.outline,
notification: theme.colors.error,
},
}}>
<TabNavigator.Navigator
screenOptions={{
headerShown: false,
}}
tabBar={({ navigation, state, descriptors, insets }) => (
<BottomNavigation.Bar
navigationState={state}
safeAreaInsets={insets}
onTabPress={({ route, preventDefault }) => {
const event = navigation.emit({
type: 'tabPress',
target: route.key,
canPreventDefault: true,
});
if (event.defaultPrevented) {
preventDefault();
} else {
navigation.dispatch({
...CommonActions.navigate(route.name, route.params),
target: state.key,
<>
<NavigationContainerBase
theme={{
dark: theme.dark,
colors: {
primary: theme.colors.primary,
background: theme.colors.background,
card: theme.colors.surface,
text: theme.colors.onSurface,
border: theme.colors.outline,
notification: theme.colors.error,
},
}}>
<TabNavigator.Navigator
screenOptions={{
headerShown: false,
}}
tabBar={({ navigation, state, descriptors, insets }) => (
<BottomNavigation.Bar
navigationState={state}
safeAreaInsets={insets}
onTabPress={({ route, preventDefault }) => {
const event = navigation.emit({
type: 'tabPress',
target: route.key,
canPreventDefault: true,
});
}
}}
renderIcon={({ route, focused, color }) => {
const { options } = descriptors[route.key];
if (options.tabBarIcon) {
return options.tabBarIcon({ focused, color, size: 24 });
}
}}
getLabelText={({ route }) => {
const { options } = descriptors[route.key];
return options.title ?? route.name;
if (event.defaultPrevented) {
preventDefault();
} else {
navigation.dispatch({
...CommonActions.navigate(route.name, route.params),
target: state.key,
});
}
setShowFab(route.name !== 'Settings');
}}
renderIcon={({ route, focused, color }) => {
const { options } = descriptors[route.key];
if (options.tabBarIcon) {
return options.tabBarIcon({ focused, color, size: 24 });
}
}}
getLabelText={({ route }) => {
const { options } = descriptors[route.key];
return options.title ?? route.name;
}}
/>
)}>
<TabNavigator.Screen
name="Home"
component={Home}
options={{
tabBarIcon: ({ color }) => (
<FontAwesome5 name="home" color={color} size={20} />
),
}}
/>
)}>
<TabNavigator.Screen
name="Home"
component={Home}
options={{
tabBarIcon: ({ color }) => (
<FontAwesome5 name="home" color={color} size={20} />
),
}}
/>
<TabNavigator.Screen
name="Search"
component={Search}
options={{
tabBarIcon: ({ color }) => (
<FontAwesome5 name="search" color={color} size={20} />
),
}}
/>
<TabNavigator.Screen
name="Tags"
component={Tags}
options={{
tabBarIcon: ({ color }) => (
<FontAwesome5 name="tags" color={color} size={20} />
),
}}
/>
<TabNavigator.Screen
name="Settings"
component={Settings}
options={{
tabBarIcon: ({ color }) => (
<FontAwesome5 name="cog" color={color} size={20} />
),
}}
/>
</TabNavigator.Navigator>
</NavigationContainerBase>
<TabNavigator.Screen
name="Search"
component={Search}
options={{
tabBarIcon: ({ color }) => (
<FontAwesome5 name="search" color={color} size={20} />
),
}}
/>
<TabNavigator.Screen
name="Tags"
component={Tags}
options={{
tabBarIcon: ({ color }) => (
<FontAwesome5 name="tags" color={color} size={20} />
),
}}
/>
<TabNavigator.Screen
name="Settings"
component={Settings}
options={{
tabBarIcon: ({ color }) => (
<FontAwesome5 name="cog" color={color} size={20} />
),
}}
/>
</TabNavigator.Navigator>
</NavigationContainerBase>
{showFab && <ActionButton />}
</>
);
}