I add react-native-navigation-bar to my project. I want to display the left icon as a sidebar icon. I try this code but nothing is displayed :
<NavigationBar
title={'New Tech'}
height={80}
titleColor={'#fff'}
leftComponent={<Icon name="rocket"/> }
/>
ps: am installing react-native-vector-icons and import it by :
import Icon from 'react-native-vector-icons/FontAwesome';
Any help isappreciated.
It depends on your Navigation Version, but it is either called left or headerLeft (newer versions is the later):
static navigationOptions = ({ navigation }) => ({
title: `whatever`,
headerLeft: <Button title="" onPress={() => {/*do something*/}} />,
});
Related
I am trying to set the Screen Title of the Navigated Screen by using navigator. But it's not working/ changing and doesn't throw an exception either.
Scenario
I want to load some states from Redux and display nice Header Title in the Navigation Screen when the user clicks on the bottom Tab.
User clicks on second Tab in bottom navigation tab
Load state from Redux
Set Header Title
Expected
I want to set the following text to the Screen title
headerTitle set in Screen
Actual
I declared my BottomTabNavigator as following:
import FilterScreen from '../screens/FilterScreen';
import ItemsListScreen2 from '../screens/ItemsListScreen copy';
const BottomTab = createBottomTabNavigator();
const INITIAL_ROUTE_NAME = 'List';
export default function BottomTabNavigator({ navigation, route }) {
// this code works
navigation.setOptions({ headerTitle: 'header Set in Navigator' });
const [isFilterVisible, toggleFilter] = useState(false);
return (
<>
<BottomTab.Navigator
initialRouteName={INITIAL_ROUTE_NAME}
tabBarOptions={{
inactiveBackgroundColor: '#42a5f5',
inactiveTintColor: '#ffffff'
}}
>
<BottomTab.Screen
name="List"
component={ItemsListScreen}
options={{
title: 'List',
tabBarIcon: ({ focused }) => <TabBarIcon focused={focused} name="md-calendar" iconType="ion" />,
}}
/>
<BottomTab.Screen
name="List2"
headerMode="screen"
component={ItemsListScreen2}
screen
options={{
title: 'title List2',
headerTitle: 'my header title',
tabBarIcon: ({ focused }) => <TabBarIcon focused={focused} name="md-calendar" iconType="ion" />,
}}
/>
....
</BottomTab.Navigator>
</>
);
}
In the above component, I could set the Screen Title by using navigation.setOptions and it works.
So, I tried to do the same operation to set the headerTitle in List2 Screen. But it doesn't have any effect to the screen header. It only changes the label of the tab to "this is a title".
import { StyleSheet, View, Text } from 'react-native';
const ItemsListScreen2 = ({ navigation }) => {
navigation.setOptions({
headerTitle: `headerTitle set in Screen`, // <-- no effect at the screen level
title: "this is a title"
});
return (
<View>
<Text>Screen 2</Text>
</View>
);
}
I tried to do console.log to navigation object passed to the component and I can see it here:
Could you please help me to sort out this issue and suggest me how I could set the title from the screen?
Do I need to create a new function (Eg. getHeaderTitle), load the Redux state and set the title due to the route within BottomTabNavigation component? I want to keep that component clean and I want to load the Redux States only when the user navigates to the screen. I'd like to keep the screen specific codes in its own related screen.
I want to change the search icon in the searchbar of react-native-paper with the barcode-scan icon.
The native-paper uses react-native-vector-icons for icons and barcode-scan available in MaterialCommunityIcons
Here is the code that I tried which gives a blank instead of an icon
import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
<Searchbar
placeholder="Search"
onChangeText={query => { this.setState({ firstQuery: query }); }}
value={firstQuery}
icon={<MaterialCommunityIcon name="barcode-scan" size={30}/>}
/>
Is this the right way or am I missing something?
You have to use the callback to pass component in icon prop
icon={() => <MaterialCommunityIcons name="barcode-scan" size={30}/>}
Just adding '()=>' in icon wiil be suffice
import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
<Searchbar
placeholder="Search"
onChangeText={query => { this.setState({ firstQuery: query }); }}
value={firstQuery}
icon={()=><MaterialCommunityIcon name="barcode-scan" size={30}/>}
/>
I tried using the Badge from https://github.com/xotahal/react-native-material-ui, but the element doesn't properly fit into the bottom navigation:
Here's the code from AppNavigator.js:
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";
import { Badge, Icon, Avatar } from "react-native-material-ui";
export const SignedIn = createMaterialBottomTabNavigator(
{
MeetingsScreen: {
screen: MeetingsScreen,
navigationOptions: {
tabBarLabel: "Заседания",
tabBarIcon: ({ focused }) => (
<Badge text="3">
<TabBarIcon
focused={focused}
name={
Platform.OS === "ios"
? `ios-people${focused ? "" : "-outline"}`
: "md-people"
}
/>
</Badge>
)
}
},
...
I tried wrapping the TabBarIcon itself into the badge, but it didn't help.
How to set up this element properly? Or is there a better library for that?
Create a custom tab bar icon component that wraps the tab bar icon inside a view of greater width and height of the icon and make sure the badge is within the view perimeter. See diagram below:
ReactNavigation Stack Navigator has the property HeaderRight useful to place the menu button in the header, but has not a context menu.
Is it possible to integrate the React Native Popup Menu in the Stack Navigator?
Thanks in advance.
It is definitely possible to accomplish. In your root App do the following:
import React, { Component } from 'react';
import { MenuContext } from 'react-native-popup-menu';
import MainNavigator from './components/MainNavigator';
export default class App extends Component {
render() {
return (
<MenuContext>
<MainNavigator />
</MenuContext>
);
}
}
Then the way you've implemented your headerRight should work perfectly.
I set the navigationOptions of StackNavigator setting my custom button as RightHeader
static navigationOptions = ({ navigation }) => ({
title: `${navigation.state.params.Name}`,
headerRight: (
<ContextMenuButton
/>)
I would like to know if it is possible to use the React Native Popup Menu, display and use it in combination with the headerRight
I've been wondering about this as well, and found a solution:
Generally, all the Menu parts have to be inside of the Menu tag, so the MenuTrigger as well.
You can style the MenuTrigger but I didn't get it into the top bar with that.
Good news: It's even easier than that, simply place the whole Menu into your navigationOptions like this:
static navigationOptions = ({navigation}) => ({
title: 'Uploaded Videos',
drawerLockMode: 'locked-closed',
headerRight:
<Menu renderer={SlideInMenu} style={{ zIndex: 10 }}>
<MenuTrigger text="open menu"/>
<MenuOptions style={{ flex: 1 }}>
<Text>Menu</Text>
<MenuOption onSelect={() => { console.log("clicked") text="Click me" />
</MenuOptions>
</Menu>
Caveat: navigationOptions are static, so in your menu you can't use functions of the component. But there are ways around that, see for one example this issue at react-native-navigation. Generally, you should probably use redux for that.
Hopefully this still helps you!
i m trying to use react-navigation to implement an onPress handler which allows me to navigate to a screen called tasks
the below code shows the headerRight just fine. however, when i click on the headerRight button, i get the following error
"Undefined is not an object (evaluating _this2.props.navigation) on my expo simulator".
Anyone knows what could have gone wrong with my onPress handler? Tq
static navigationOptions = {
title: 'List',
headerRight: (
<Button
title='Add Task'
onPress={() => this.props.navigation.navigate('task')}
backgroundColor='rgba(0,0,0,0)'
color='rgba(0,122,255,1)'
/>)
}
I managed to get the codes working
hope this can help those using react-navigation and wanting to render a workable headerRight
static navigationOptions = ({navigation}) => ({
title: 'List',
headerRight: <Button
title= 'Add Task'
onPress={() => navigation.navigate('task')}
backgroundColor='rgba(0,0,0,0)'
color='rgba(0,122,255,1)'
/>
});