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

2
src/components/actionButton.tsx
View File

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