Trying to render a menu icon in the upper left corner for a stack navigator nested inside a bottom tab navigator. I am using react-navigation-header-buttons library for aid in formatting the icon in the stack header. Basically, the title of the Item component "Menu" is showing rather than the icon I am attempting to use.
//HomeScreenNavigator.js
import React from 'react';
import { createStackNavigator } from 'react-navigation-stack';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import HomeScreen from '../screens/HomeScreen';
import MediaSelectScreen from '../screens/MediaSelectScreen';
import FinalizePostScreen from '../screens/FinalizePostScreen';
import Colors from '../constants/Colors';
import CustomHeaderButton from '../components/HeaderButton';
const HomeScreenNavigator = createStackNavigator({
Home: { screen: HomeScreen, navigationOptions: {
headerTitle: 'Feed',
headerLeft: (
<HeaderButtons> HeaderButtonComponent={CustomHeaderButton}
<Item title="Menu" iconName="ios-menu" onPress={() => {}} />
</HeaderButtons>
)
}},
MediaSelect: MediaSelectScreen,
FinalizePost: FinalizePostScreen
}, {
defaultNavigationOptions: {
headerStyle: {
backgroundColor: Colors.accentColor
}
}
});
export default HomeScreenNavigator;
//HeaderButton.js
import React from 'react';
import { HeaderButton } from 'react-navigation-header-buttons';
import { Ionicons } from '#expo/vector-icons';
import Colors from '../constants/Colors';
const CustomHeaderButton = props => {
return <HeaderButton
{...props}
IconComponent={Ionicons}
iconSize={23}
color={Colors.iconSelectedOutline}
/>
};
export default CustomHeaderButton
No error messages are shown but no icon is shown either. Instead The header bar just has a headerLeft button with text "MENU" and then the Header title "Feed". screenshot-simulator
Line of code that was causing the issue:
<HeaderButtons> HeaderButtonComponent={CustomHeaderButton}
Needs to be:
<HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
Related
I am creating a react native application and I have problem when I want to navigate between screens it gives error as " Cannot read property 'navigate' of Undefined " . I want when I press gear icon it must navigate to settings part . I couldn't clearly see where did I mistake .
settings button touchable opacity
import React from 'react';
import {createStackNavigator} from 'react-navigation-stack';
import { createAppContainer} from 'react-navigation';
import PS from '../screens/PS';
import SPC from '../screens/SPC';
import TFA from '../screens/2FA';
import Login from '../screens/Login';
import Settings from '../screens/settings';
const screens = {
Login: {
screen: Login,
navigationOptions: {
header: null,
}
},
TFA:{
screen: TFA
},
PS: {
screen: PS,
navigationOptions: {
header: null,
}
},
SPC: {
screen: SPC
},
Settings: {
screen: Settings
}
}
const HomeStack = createStackNavigator(screens);
export default createAppContainer(HomeStack);
import React, {useState}from 'react';
import SettingsButton from './SettingsButton';
import ConnectionIcon from './Connectionİcon';
import { View, Image, StyleSheet } from 'react-native';
const Header = () => {
return (
<View style={styles.header}>
<View style={styles.headerp1}></View>
<View style={styles.headerp2}><Image
source={require('../assets/images/monitor.png')}
/></View>
<View style={styles.headerp3}>
<SettingsButton />
<ConnectionIcon />
</View>
</View>
)
}
export default Header;
// const styles here
import React from 'react';
import { Image, TouchableOpacity, StyleSheet } from 'react-native';
const SettingsButton = ({ navigation }) => {
return (
<TouchableOpacity
style={styles.headerp3v2}
onPress={() => navigation.navigate('Settings')}
>
<Image style={styles.reddot}
source={require('../assets/images/gear.png')}
/>
</TouchableOpacity>
)
}
export default SettingsButton;
// const stlyes codes here
header file is here
import { Image, StyleSheet, Button, View, Text, SafeAreaView, StatusBar } from 'react-native';
import Footer from '../components/Footer';
import Header from '../components/Header';
import PV from '../components/PV';
export default function PS() {
return (
<View style={styles.container}>
<StatusBar hidden />
<Header />
<View><Text style={styles.text}>All Persons</Text></View>
<PV />
<Footer/>
</View>
);
}```
You don't pass navigation prop into SettingsButton
You can try use useNavigation hook https://reactnavigation.org/docs/use-navigation/ for get navigation object into SettingsButton
import React from 'react';
import { Image, TouchableOpacity, StyleSheet } from 'react-native';
import { useNavigation } from '#react-navigation/native'; // <-- new code
const SettingsButton = () => {
const navigation = useNavigation(); // <-- new code
return (
<TouchableOpacity
style={styles.headerp3v2}
onPress={() => navigation.navigate('Settings')}
>
<Image style={styles.reddot}
source={require('../assets/images/gear.png')}
/>
</TouchableOpacity>
)
}
export default SettingsButton;
I built a React Native app which has 2 tabs for change screen. When I change a screen I would like to change also the title of the header. So when I press Tab 1 the tile is Tab 1 and Tab 2 if Tab 2 screen is on.
I would like to understand what kind of change or add I need to do to perform that action in my code. Iùm sharing the code where I think should be done the change but if Iùm wrong please guide me to the right code I should share. I'm new to Native and I'm trying to learn it.
I have a Route.js file:
import React from 'react';
import { View, Platform, Image, StyleSheet } from "react-native";
import {createStackNavigator} from "react-navigation";
import FlightsTabNavigator from "./App/navigations/FlightsTabNavigator";
import FlightsHeader from "./App/components/header/FlightsHeader";
import HeaderStyle from "./App/styles/HeaderStyle";
import s from "./App/styles/headerImgStyle";
const Routes = createStackNavigator({
FlightsTabNavigator: {
screen: FlightsTabNavigator,
}
},{
initialRouteName: 'FlightsTabNavigator',
navigationOptions: {
headerTitle: '',
headerBackground: (
<Image
style={s.image}
//source={require('./App/assets/header/header.jpg')}
source={{uri: 'https://images.unsplash.com/photo-1503365113766-4a362681eac5?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=79cf794378a008ab1d74b8e612d72ad0&auto=format&fit=crop&w=1050&q=80'}}
/>
),
header: props => <FlightsHeader {...props} />,
...HeaderStyle,
animationEnabled: true
}
});
export default Routes;
And the Header:
import React from "react";
import { Header } from "react-navigation";
import { View, Text, Platform, Image, StyleSheet } from "react-native";
const FlightsHeader = props => {
return (
<View>
<Header {...props} />
</View>
);
};
export default FlightsHeader;
I am trying to get a tab menu to appear using react-navigation (TabNavigator) but I either get the below red screen error or If I change the name of the keys I get a blank screen.
I am using:
react-native: 0.51.0
npm: 4.6.1
This is my router.js file:
import React from 'react';
import { TabNavigator } from 'react-navigation';
import { Icon } from 'react-native-elements';
import BooksList from '../screens/BooksList';
import FilmsList from '../screens/FilmsList';
export const Tabs = TabNavigator({
BooksList: {
screen: BooksList,
navigationOptions: {
tabBar: {
label: "Books",
icon: ({ tintColor }) =>
<Icon name="list" size={35} color={tintColor} />
}
}
}
});
This is my BookList.js file:
import React, { Component } from 'react';
import {
Text,
View,
ScrollView
} from 'react-native';
import { List, ListItem } from 'react-native-elements';
import { users } from '../config/data';
import '../config/ReactotronConfig';
import Reactotron from "reactotron-react-native";
class BooksList extends Component {
onLearnMore = user => {
this.props.navigation.navigate("Details", { ...user });
};
render() {
return (
<ScrollView>
<List>
{users.map(user => (
<ListItem
key={user.login.username}
roundAvatar
avatar={{ uri: user.picture.thumbnail }}
title={`${user.name.first.toUpperCase()} ${user.name.last.toUpperCase()}`}
subtitle={user.email}
onPress={() => this.onLearnMore(user)}
/>
))}
</List>
</ScrollView>
);
}
}
export default BooksList;
Try this.
import React from 'react';
import { TabNavigator } from 'react-navigation';
import { Icon } from 'react-native-elements';
import BooksList from '../screens/BooksList';
import FilmsList from '../screens/FilmsList';
export const Tabs = TabNavigator({
BooksList: {
screen: BooksList,
navigationOptions: {
tabBarLabel: "Books",
tabBarIcon: ({ tintColor }) =>
<Icon name="list" size={35} color={tintColor} />
}
}
});
Hi i 'm new to react native how to implement a drawer navigator in react native. Actually i'm following this doc
Updated:
code for home page is as follows
constructor(props){
super(props)
this.state= {
icon: null
}
}
render(){
return(
<Container>
<Header style={{backgroundColor:'pink'}} >
<Button
transparent
onPress= {() => this.props.navigation.navigate("DrawerOpen")}>
<Icon
style= {{color: '#ffffff', fontSize:25, paddingTop:0}}
name="bars"
/>
</Button>
</Header>
<Content>
</Content>
</Container>
);
}
}
also
index.js
import CourseListing from './CourseListing';
import SideBar from './SideBar/SideBar';
import {DrawerNavigator} from 'react-navigation';
import Profile from './Profile';
const MyHome =DrawerNavigator(
{
CourseListing: {screen: CourseListing},
Profile: {screen: Profile},
},
{
contentComponent: props => <SideBar {...props} />
}
);
I'm getting this error
In addition to the documentation which is great, I also recommend watching This video.
I would suggest creating a file called Router.js. It could look something like this:
import React from 'react';
import { DrawerNavigator } from 'react-navigation';
import Screens1 from ... // Import all your screens here
import Screens2 from ...
import Screens3 from ...
// The DrawerNavigator uses all the screens
export const MyDrawer = DrawerNavigator({
Screen1: { screen: Screen1 },
Screen2: { screen: Screen2 },
Screen3: { screen: Screen3 },
});
In your root (usually called App.js) make sure to import MyDrawer:
import React, { Component } from 'react';
import { MyDrawer } from '(correct path here)/Router.js';
export default class App extends Component {
render() {
return <MyDrawer />;
}
}
Now when the app starts Screen1 will be loaded. Each of the screens has a side menu because of the DrawerNavigator. To open the menu in any screen, use the following method:
_openMenu() {
this.props.navigation.navigate('DrawerOpen');
}
Hope this helps.
it's so, implement drawer such as stack-navgation
exmaple :
import { createDrawerNavigator } from 'react-navigation-drawer';
import {signIn,drawer} from 'scene'
const RouteConfigs = {
signIn
}
const DrawerNavigatorConfig = {
drawerPosition:'right',
drawerType:'front',
hideStatusBar:true,
contentComponent:drawer
}
export default createDrawerNavigator(RouteConfigs, DrawerNavigatorConfig);
the important part is contentComponent in DrawerNavigatorConfig. it's a view that shows in the drawer when it opens
import React, { Component } from "react";
import { Dimensions, StyleSheet, } from 'react-native';
import { createStackNavigator } from '#react-navigation/stack';
import { createDrawerNavigator } from '#react-navigation/drawer';
import color from '../../../constants/color'
import Attendance from '../../ExtraScreens/Attendance/Attendance'
import KIETDigitalDirectory from '../../ExtraScreens/KIETDigitalDirectory/KIETDigitalDirectory'
import KIETExtensions from '../../ExtraScreens/KIETExtensions/KIETExtensions'
import StudentRedressal from '../../ExtraScreens/StudentRedressal/StudentRedressal'
//
import Ticketing from '../../ExtraScreens/Ticketing/Ticketing'
import TicketingApply from '../../ExtraScreens/Ticketing/TicketingApply'
//
import Grievance from '../../ExtraScreens/EmployeeGrievance/Grievance'
import GrievanceApply from '../../ExtraScreens/EmployeeGrievance/GrievanceApply'
export default class Extra extends React.Component {
render() {
const Drawer = createDrawerNavigator();
return (
<Drawer.Navigator
drawerType="back"
// openByDefault
// overlayColor="transparent"
>
<Drawer.Screen name="KIET Extensions" component={KIETExtensions} />
<Drawer.Screen name="Grievance" component={GrievanceStack} />
<Drawer.Screen name="Ticketing" component={TicketingStack} />
<Drawer.Screen name="Student Redressal" component={StudentRedressal} />
<Drawer.Screen name="Attendance" component={Attendance} />
<Drawer.Screen name="KIET Digital Directory" component={KIETDigitalDirectory} />
</Drawer.Navigator>
)
}
}
const StackNavigator = createStackNavigator();
const GrievanceStack = (props) => (
<StackNavigator.Navigator
initialRouteName="Grievance"
mode="card"
headerMode="none"enter code here>
<StackNavigator.Screen name="Grievance" component={Grievance} />
<StackNavigator.Screen name="Grievance Apply" component={GrievanceApply} />
</StackNavigator.Navigator>
)
const TicketingStack = (props) => (
<StackNavigator.Navigator
initialRouteName="Ticketing"
mode="card"
headerMode="none"
>`enter code here`
<StackNavigator.Screen name="Ticketing" component={Ticketing} />
<StackNavigator.Screen name="Ticketing Apply" component={TicketingApply} />
</StackNavigator.Navigator>
)
I'm trying to get a handle on react-navigation by making a dead simple app; I just want two screens with buttons you can click on to go between them. Here's my code:
App.js:
import React from 'react';
import {
Text,
View,
Button
} from 'react-native';
import {
StackNavigator,
} from 'react-navigation';
import OtherPage from './OtherPage';
const Home = ({navigation}) => (
<View>
<Text style={styles.title}>Welcome</Text>
<Button title="Other Page" onPress={() => {
navigation.navigate('OtherPage')
}}></Button>
</View>
);
const Nav = StackNavigator(
{
OtherPage: { screen: OtherPage},
Index: {
screen: Home
}
},
{
initialRouteName: 'Index',
}
);
export default () => <Nav />;
OtherPage.js:
import React from 'react';
import {
Text,
View,
Button
} from 'react-native';
import { StackNavigator } from 'react-navigation';
const OtherPage = ({navigation}) => (
<View>
<Text>Other Page</Text>
<Button title="Go Home" onPress={() => {
navigation.navigate('Home');
}}></Button>
</View>
);
import Home from './App';
const Nav = StackNavigator(
{
OtherPage: { screen: OtherPage},
Home: { screen: Home }, // THIS LINE CAUSES THE ERROR
},
);
export default () => <Nav />;
For some reason what I get back from import Home from './App'; isn't a screen and so I get the error Route 'Home' should declare a screen. It's definitely that line that's causing the problem, if I comment it out then the app loads and I can click the button on the home screen to go to the other page, but then of course I'm stuck there and can't go back.
What's confusing me is that these files are essentially identical in how everything's declared, and for some reason import OtherPage from './OtherPage'; is a valid screen but import Home from './App'; isn't.
Can anyone help me out? What am I doing wrong?