Blur on SearchBar doesn't occurs with Tab.Navigator - react-native

I have a Tab.Navigator made with createBottomTabNavigator and I'm trying to implement a SearchBar inside it. But the blur event never happen when I click outside the SearchBar.
It's working well when I submit the search action.
Here's my Tab.Navigator :
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import {HomeStack} from './home';
import {SearchStack} from './search';
import {AddStack} from './add';
import {NewsStack} from './news';
import {ProfileStack} from './profile';
import Ionicons from 'react-native-vector-icons/Ionicons';
import colors from '../styles/colors';
const Tab = createBottomTabNavigator();
export function MainStack(){
return (
<Tab.Navigator
initialRouteName="Home"
activeColor="#333"
inactiveColor="#333"
screenOptions={({ route }) => ({
tabBarIcon: ({ color, size }) => {
let iconName;
if (route.name === 'Accueil') {
iconName = 'compass-outline';
}
else if (route.name === 'Rechercher') {
iconName = 'search-outline';
}
else if (route.name === 'Ajouter') {
iconName = 'add-circle-outline';
}
else if (route.name === 'Actus') {
iconName = 'newspaper-outline';
}
else if (route.name === 'Profil') {
iconName = 'person-circle-outline';
}
// You can return any component that you like here!
return <Ionicons name={iconName} size={size} color={color} />;
},
tabBarActiveTintColor: colors.primaryColor,
tabBarStyle: {
paddingBottom: 5,
}
})}
>
<Tab.Screen name="Accueil" component={HomeStack} options={{headerShown:false}}/>
<Tab.Screen name="Rechercher" component={SearchStack} options={{headerShown:false}}/>
<Tab.Screen name="Ajouter" component={AddStack} options={{headerShown:false}}/>
<Tab.Screen name="Actus" component={NewsStack} options={{headerShown:false}}/>
<Tab.Screen name="Profil" component={ProfileStack} options={{headerShown:false}}/>
</Tab.Navigator>
);
}
And my SearchBar :
<SearchBar
lightTheme={ scheme === 'dark' ? false : true}
onSubmitEditing={() => submitSearch(0)}
onChangeText={updateSearch}
value={search}
placeholder="Rechercher"
round
containerStyle={{backgroundColor: 'transparent', borderTopWidth:0, borderBottomWidth:0}}
onCancel={() => {setResults([]); setSearch(''); setSearched(false); setSelectedIndex(0);}}
onClear={() => {setResults([]); setSearch(''); setSearched(false); setSelectedIndex(0);}}
/>

Related

Expo Material Bottom Tabs Navigator doesn't work -> showing default BottomNavigation from React-Native-Paper

I've been trying to create a normal material bottom tabs navigator and it just doesnt want to work. I also tried another identical code I had and there it works like it should, but with this code the Material bottom Tabs Navigator shows the BottomNavigation from React-Native-Paper. Is there any help?Anything i have to change?
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import AuthScreen from './screens/AuthScreen';
import HomeScreen from './screens/HomeScreen';
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { userAuthStateListener } from './redux/actions/auth';
const Stack = createNativeStackNavigator()
export default function Main() {
const currenUserObject = useSelector(state => state.auth) // access data from redux from here
const dispatch = useDispatch()
useEffect(() => {
dispatch(userAuthStateListener());
}, []);
if (currenUserObject == null) {
console.log("nothing in user obj")
} else {
console.log("this prints" + { currenUserObject })
}
return (
<NavigationContainer>
<Stack.Navigator>
{currenUserObject.currentUser == null ?
<Stack.Screen name='AuthScreen' component={AuthScreen} options={{ headerShown: false }} />
:
<>
<Stack.Screen name='hb' component={HomeScreen} options={{ headerShown: false }} />
</>
}
</Stack.Navigator>
</NavigationContainer>
)
}
And the HomeScreen should have the material bottom tabs navigator.
import { View, Text, StyleSheet, SafeAreaView } from 'react-native'
import React from 'react'
import { Feather } from '#expo/vector-icons'
import { createMaterialBottomTabNavigator } from '#react-navigation/material-bottom-tabs';
const Tab = createMaterialBottomTabNavigator();
const Test = () => {
return (
<View style={{backgroundColor:"blue"}}>
<Text>Test</Text>
</View>
)
}
//options={{ tabBarIcon: ({ color }) => (<Feather name="home" size={24} color={color} />)}}
//barStyle={{ backgroundColor: "black" }}
export default function HomeScreen() {
return (
<Tab.Navigator barStyle={{ backgroundColor: 'black' }} activeColor="white" shifting={true}>
<Tab.Screen name="Home" component={Test} />
<Tab.Screen name="Search" component={Test} options={{ tabBarColor:"white",tabBarBadge:false, tabBarIcon: ({ color }) => (<Feather name="search" size={24} color={color} />) }} />
<Tab.Screen name="Post" component={Test} options={{ tabBarIcon: ({ color }) => (<Feather name="plus-square" size={24} color={color} />) }} />
<Tab.Screen name="Chat" component={Test} options={{ tabBarIcon: ({ color }) => (<Feather name="message-square" size={24} color={color} />) }} />
<Tab.Screen name="Me" component={Test} options={{ tabBarIcon: ({ color }) => (<Feather name="user" size={24} color={color} />) }} />
</Tab.Navigator>
)
}
But it doesnt show the right material-bottom-tabs-navigator.
It shows this:
Image of wrong navigator
Show right material-bottom-tabs-navigator but it actually shows the bottomnavigation from react-native-paper

React Native mixed Navigation

I am about to crate an app that has a main Drawer Navigator (sidemenu). On some specific pages I want to add an additional Tabsmenu to the page. How can I achieve that?
This is the Drawer Navigator:
const Drawer = createDrawerNavigator()
function myLogout(){
navigation.navigate("LoginScreen");
}
const DrawerNavigator = () => {
// Load the icon font before using it
const [fontsLoaded] = useFonts({ IcoMoon: require('../../assets/icomoon/zepra_icons.ttf') });
if (!fontsLoaded) {
return <AppLoading />;
}
return (
<Drawer.Navigator initialRouteName="Home" drawerContent={props => {
return (
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} />
<DrawerItem label="Logout" labelStyle={{marginLeft:-18, fontSize: 15,}}
icon={({ focused, color, size }) => <Icon2 style={{marginLeft:8}} color={focused ? '#1585b5' : '#6cbabf'} size={26} name={focused ? 'log-out-outline' : 'log-out-outline'} /> }
onPress={() => props.navigation.navigate("StartScreen") } />
</DrawerContentScrollView>
)
}}>
...
<Drawer.Screen name="Impressum" component={ImpressumStackNavigator}
options={{
drawerLabel: 'Impressum',
drawerLabelStyle:{marginLeft:-18, fontSize: 15,},
drawerIcon: ({focused, size}) => (
<Icon2 style={{marginLeft:7}} name='ios-information-circle-outline' size={26} color={focused ? '#1585b5' : '#6cbabf'} />
)}}/>
</Drawer.Navigator>
)
}
export default DrawerNavigator
this is the Dashboard Page:
import * as React from 'react';
import { NavigationContainer } from '#react-navigation/native'
import DrawerNavigator from './DrawerNavigator'
function App() {
return (
<DrawerNavigator />
);
}
export default App;
and this is the page with the tabs:
import * as React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import DrawerNavigator from './DrawerNavigator';
//#################### BUTTON-TAB erstellen #####################
const Tab = createBottomTabNavigator();
function MainContainer({ route, navigation }) {
//function MainContainer({ }) {
// Load the icon font before using it
const [fontsLoaded] = useFonts({ IcoMoon: require('../../assets/icomoon/zepra_icons.ttf') });
const { data } = route.params;
if (!fontsLoaded) {
return <AppLoading />;
}
return (
<Tab.Navigator
initialRouteName={projectsName}
screenOptions={({ route }) => ({
headerShown: false,
tabBarIcon: ({ focused, color, size }) => {
let iconName;
let rn = route.name;
if (rn === projectsName) {
iconName = focused ? 'PROJEKTE_ALLE' : 'PROJEKTE_ALLE';
} else if (rn === waermeschutzName) {
iconName = focused ? 'HAUS_3' : 'HAUS_3';
} else if (rn === begehungenName) {
iconName = focused ? 'NOTIZ_ERSTELLEN' : 'NOTIZ_ERSTELLEN';
}
// You can return any component that you like here!
return <Icon name={iconName} size={43} color={color} />;
},
'tabBarActiveTintColor': '#4283b1',
'tabBarInactiveTintColor': '#5db8bd',
'tabBarStyle':{ 'paddingTop':4, 'height':90 },
'tabBarLabelStyle':{ 'paddingTop':3, 'fontSize':13 }
})}>
<Tab.Screen name={projectsName} component={ProjectsScreen} initialParams={{ data }} />
<Tab.Screen name={waermeschutzName} component={WaermeschutzScreen} />
<Tab.Screen name={begehungenName} component={BegehungenScreen} />
</Tab.Navigator>
);
}
export default MainContainer;
How can I add the DrawerNavigator to the Tabspage now?
Thank you for your help

React Native: Dont see FontAwesome or any other expo/vector icons

I am facing some problems with FontAwesome icons. (I have tried with MaterialCommunityIcons and normal Icons, but the same result)
They don't appear in the bottom Tab navigation, as also under Social networks. (The other icons are from react-native-settings-page)
Here is a screenshot:
Here is the TabNavigation:
import React from 'react';
import { createBottomTabNavigator } from "#react-navigation/bottom-tabs";
import { MaterialCommunityIcons } from '#expo/vector-icons';
import HomeNavigator from '../navigation/HomeNavigator';
import NewsNavigator from '../navigation/NewsNavigator';
import settings from '../config/settings';
import i18n from "../locales/i18n";
const Tab = createBottomTabNavigator();
function TabNavigation(props) {
return (
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ color }) => {
let iconName;
if (route.name === 'Home') {
iconName = 'home';
}
else if (route.name === 'News') {
iconName = 'newspaper';
}
// You can return any component that you like here!
return <MaterialCommunityIcons color={color} icon={iconName} size={25} />;
},
})}
tabBarOptions={{
activeTintColor: settings.colors.activecolor,
inactiveTintColor: settings.colors.fontcolor,
activeBackgroundColor: settings.colors.navigation,
inactiveBackgroundColor:settings.colors.navigation,
}}
>
<Tab.Screen name="Home" options={{ tabBarLabel: i18n.t('navigation.home') }} component={HomeNavigator} />
<Tab.Screen name="News" options={{ tabBarLabel: i18n.t('navigation.news') }} component={NewsNavigator} />
</Tab.Navigator>
);
}
export default TabNavigation;
Here are my colors, but I think they are not making the problem:
export default {
colors: {
navigation: '#000',
bgcolor: "#000",
fontcolor: '#fff',
activecolor: '#dd163b',
settingsbackground: '#c3c3c3',
},
languages: {
}
}
You are using tabBarIcon as part of the navigator this should be passed to the screen level options like below
<Tab.Screen
name="Home"
options={{
tabBarLabel: i18n.t('navigation.home'),
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="home" color={color} size={20} />
),
}}
component={HomeNavigator}
/>
<Tab.Screen
name="News"
options={{
tabBarLabel: i18n.t('navigation.news'),
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="newspaper" color={color} size={20} />
),
}}
component={NewsNavigator}
/>

react navigation version 5, hide top bar when render tab screen

I've created nested navigation using react-navigation version 5, But when tab screen render I need to hide top bar, I've follow step from here https://reactnavigation.org/docs/hiding-tabbar-in-screens/ but still not working
import * as React from 'react';
import {NavigationContainer} from '#react-navigation/native';
import {createStackNavigator} from '#react-navigation/stack';
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
import {navigationRef} from './NavigationService';
import {Home, Appointment, Settings, Map, ProviderDetails} from 'app/screens';
import {PRIMARY_COLOR, SECONDARY_COLOR} from '../config/color';
import ThemeController from '../components/ThemeController';
import {StatusBar} from 'react-native';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
const Stack = createStackNavigator();
const homeOptions = {
title: 'Home',
headerTitleStyle: {
fontWeight: 'bold',
},
headerRight: () => <ThemeController />,
};
const HomeStack = () => {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
</Stack.Navigator>
);
};
const MapStack = () => {
return (
<Stack.Navigator>
<Stack.Screen name="Map" component={Map} />
<Stack.Screen name="ProviderDetails" component={ProviderDetails} />
</Stack.Navigator>
);
};
const Tab = createBottomTabNavigator();
function App(props) {
const {theme} = props;
return (
<NavigationContainer ref={navigationRef} theme={theme}>
<StatusBar barStyle={theme.dark ? 'light-content' : 'dark-content'} />
<Tab.Navigator
screenOptions={({route}) => ({
tabBarIcon: ({focused, color, size}) => {
if (route.name === 'Home') {
return <MaterialIcons name="home" size={size} color={color} />;
} else if (route.name === 'Map') {
return (
<FontAwesome5 name="map-marked-alt" size={size} color={color} />
);
} else if (route.name === 'Appointment') {
return (
<FontAwesome5 name="calendar-alt" size={size} color={color} />
);
} else if (route.name === 'More') {
return (
<MaterialIcons name="more-horiz" size={size} color={color} />
);
}
},
})}
tabBarOptions={{
activeTintColor: PRIMARY_COLOR,
inactiveTintColor: SECONDARY_COLOR,
}}>
<Tab.Screen name="Home" component={HomeStack} />
<Tab.Screen name="Map" component={MapStack} />
<Tab.Screen name="Appointment" component={Appointment} />
<Tab.Screen name="More" component={Settings} />
</Tab.Navigator>
</NavigationContainer>
);
}
export default App;
Create HomeStack and MapStack stack navigator and pass that value to Tab Navigator,
In bellow image you can see in Home and Map tab display top bar.
Use headerShown option
const HomeStack = () => {
return (
<Stack.Navigator>
<Stack.Screen name="Home" options={{ headerShown: false }} component={Home} />
</Stack.Navigator>
);
};

Hide specific Tab.Screen in Tab.Navigator React Native

Is there a way where I could hide the screen that says "### HIDE ME ###" or is there a way where I could define a screen that wont show up in the Tab Navigation?
Here is the code:
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === 'Home') {
iconName = focused
? 'ios-home'
: 'ios-home';
} else if (route.name === 'Messages') {
iconName = focused ? 'ios-paper-plane' : 'ios-paper-plane';
} else if (route.name === 'Todo') {
iconName = focused ? 'ios-list-box' : 'ios-list';
} else if (route.name === 'More') {
iconName = focused ? 'ios-more' : 'ios-more';
} else if (route.name === 'Videos') {
iconName = focused ? 'ios-videocam' : 'ios-videocam';
}
// You can return any component that you like here!
return <Ionicons name={iconName} size={size} color={color} />;
},
})}
tabBarOptions={{
activeTintColor: '#ffcc07',
inactiveTintColor: 'gray',
}}>
<Tab.Screen name="Home" component={DashboardScreen} />
<Tab.Screen name="Messages" component={MessagesScreen} />
<Tab.Screen name="Todo" component={TodoScreen} />
<Tab.Screen name="Videos" component={WisdomReplayScreen} />
<Tab.Screen name="More" component={MoreOptionsScreen} />
<Tab.Screen name="Test" component={Test} ### HIDE ME ###/>
</Tab.Navigator>
you can determine the screens on which the tab bar should be hidden like this
function getTabBarVisible(route) {
const routeName = route.state
? route.state.routes[route.state.index].name
: route.params?.screen || 'Home';
if (routeName === 'Home') {
return false;
}
return true;
}
**and attach it to the tab navigator's screen:**
<Tab.Screen name="Home"
component={HomeStackScreen}
options={({ route }) => ({
tabBarVisible: getTabBarVisible(route) })} />