i am trying to understand reactnavigation and i am setting up a concept app to understand.
What i am struggling at first is, that i get the Error Message "The component for route "SomeRoute" must be a React Component"
I do know, what it means, but i do not understand why this error is thrown.
I have following setup:
App.js:
import React from 'react';
import { Root } from './config/router';
import { SafeArea } from 'react-native';
class App extends Component {
render() {
return <Root />;
}
}
export default App;
router.js( config/router.js )
import React from 'react';
import { DrawerNavigator, TabNavigator, StackNavigator } from 'react-navigation';
import Feed from './../components/Feed';
import Search from './../components/Search';
import Favorites from './../components/Favorites';
import TextList from './../components/ComingSoon';
import Detail from './../components/Detail';
import Downloads from './../components/Downloads';
export const FeedStack = StackNavigator({
Feed: {
screen: Feed,
navigationOptions: {
title: 'Machines'
}
},
List: {
screen: TextList,
navigationOptions: {
title: 'List View'
}
},
Detail: {
screen: Detail,
navigationOptions: {
title: 'Detail'
}
}
});
export const TabStack = TabNavigator({
Dashboard: {
screen: FeedStack,
navigationOptions: {
title: 'Dashboard'
}
},
Search: {
screen: Search,
navigationOptions: {
title: 'Search'
}
},
Favorites: {
screen: Favorites,
navigationOptions: {
title: 'Favorites'
}
}
});
export const DownloadStack = StackNavigator({
Downloads: {
screen: Downloads,
navigationOptions: {
title: 'Downloads'
}
}
});
export const Root = DrawerNavigator({
Feed: {
Screen: TabStack,
navigationOptions: {
title: 'Machines'
}
},
Downloads: {
screen: DownloadStack
}
});
and Feed.js ( components/Feed.js )
import React from 'react';
import { View, Text } from 'react-native';
class Feed extends React.Component {
render() {
return (
<View>
<Text>Hallo Feed Soon</Text>
</View>
);
}
}
export default Feed;
As i can see, Feed is extending React.Component and also exporting a default Classname "Feed".
It seems to be a very Basic Mistake, what am i doing wrong here?
ok i found it.
The route "Feed" in Root has a "Screen" property instead of a "screen" Property.
can be closed by error in front of screen.
if you use react native router flux then this could be problem for using the wrong export syntax.
Usual syntax for export :
export {ComponentName};
or this :
export default ComponentName;
it should be (when using the react-native-router-flux
module.exports = ComponentName;
Related
I have created a different class for navigation to maintain the state of loggedIn and loggedOut user as follows:-
import React from "react";
import { createStackNavigator, createSwitchNavigator, DrawerNavigator } from "react-navigation";
import DrawerContent from "../views/Sidebar"
import Profile from '../views/Profile';
import Extra from '../views/Extra';
import SignIn from '../views/SignIn';
import Home from '../views/Home';
import Info from '../views/Info';
import Logout from '../views/Logout';
export const SignedIn = createStackNavigator({
Home: {
screen: Home,
},
Profile: {
screen: Profile,
},
Extra: {
screen: Extra,
}
});
export const SignedOut = createStackNavigator({
SignIn: {
screen: SignIn,
navigationOptions: {
title: "Sign Up",
headerRight: <Text>Hi</Text> //calling this gives an error
}
},
});
export const RootNavigator = (signedIn = false) => {
return createSwitchNavigator(
{
SignedIn: {
screen: SignedIn,
navigationOptions: {
gesturesEnabled: false
}
},
SignedOut: {
screen: SignedOut,
navigationOptions: {
gesturesEnabled: false
}
}
}, {
headerMode: "none",
mode: "modal",
initialRouteName: signedIn ? "SignedIn" : "SignedOut"
}
);
};
I want to create a button in navigation bar on signUp screen but it is giving an error like :-
header Title is easily shown onto screen but the right and left button doesn't seems to be appear. Any help on this.
Your header button must be a component
The way you are using is not pointing to a valid component
To do that either create a new component 'HeaderRight' and import it like you did for the 'Home' component,then point your headerRight property to it
Like headerRight:HeaderRight
Or simply wrap your text element within parenthesis like this
headerRight:(<Text>Hi</Text>)
Try and tell me if it is solved
Best regards
Hi i want to create a component by using a createDrawerNavigator, and want to add it all screens could you help me.
In the below example don't copy all the syntax understand the concept from my explanation I have configured redux and many other imports you may not need so configure and include content in below files as you need.
File name - BurgerMenu.js
import React, { Component } from "react";
import SideBar from "./SideBar.js";
import News from "../../Containers/News"; // import your screens instead
import Copyright from '../../Containers/Gallery' // import your screens instead
import { DrawerNavigator } from "react-navigation";
const BurgerMenu = DrawerNavigator(
{
News: { screen: News },
RulesOfUse: { screen: RulesOfUse },
Copyright: { screen: Copyright }
},
{
contentComponent: props => <SideBar {...props} />
}
);
export default BurgerMenu;
File name - SideBar.js
In this file specify the layout, any actions like navigation, api call etc of drawer as you want which is imported to above BurgerMenu.js file
/*
SideBar.js
Component used to render contents of SideBar
*/
import React from 'react';
import { View, Modal, Text, Linking } from 'react-native';
const {
modalBackground,
topContentStyle,
bottomContentStyle
} = styles;
class SideBar extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
componentDidMount() {
}
render() {
return (
<View
elevation={5}
style={modalBackground}
>
</View>
);
}
}
export default SideBar;
And in the App.js import Burgermenu.js to StackNavigator
import React, { Component } from 'react'
import { Provider } from 'react-redux';
import { StackNavigator } from 'react-navigation';
import Splash from './src/App/Containers/Splash';
import Login from './src/App/Containers/Login';
import InformationPage from './src/App/Containers/Gallery'
import BurgerMenu from './src/App/Components/BurgerMenu/index'
import configureStore from './src/RNRedux/ConfigureStore';
// Manifest of possible screens
const PrimaryNav = StackNavigator({
Splash: { screen: Splash },
Login: { screen: Login },
Home: { screen: BurgerMenu },
InformationPage: { screen: InformationPage }
}, {
// Default config for all screens
headerMode: 'none',
initialRouteName: 'Splash',
});
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
channelId: ""
};
this.store = configureStore();
}
componentDidMount() {
}
componentWillMount() {
}
render() {
return (
<Provider store={this.store}>
<PrimaryNav />
</Provider>
);
}
}
Just open the burger menu from any the screens imported to BurgerMenu.js
In my example you can open it from news.js and gallery.js which are imported to BurgerMenu.js.
Just use below functions for open and close
openBurgerMenu() {
this.props.navigation.openDrawer();
}
closeBurgerMenu() {
this.props.navigation.closeDrawer();
}
I am building an App on React-Native for which I am using React-Navigation
Now, Inside that i am using Stack-Navigation and TabNavigator (updated it DrawerNavigator)
import {
createStackNavigator,
TabNavigator,
DrawerNavigator
} from 'react-navigation';
import CoinCapCharts from "./src/container/CoinCapCharts.js"
import CoinCap from './src/container/CoinCap.js';
//THis is being Exported to App.js
export const Tab = TabNavigator({
TabA: {
screen: CoinCap
},
TabB: {
screen: CoinCap
}
}, {
order: ['TabA', 'TabB'],
animationEnabled: true,
})
export const MyScreen = createStackNavigator({
Home: {
screen: CoinCap
},
CoinCapCharts: {
screen: CoinCapCharts
}
},{
initialRouteName: 'Home',
headerMode: 'none'
});
export const Drawer = DrawerNavigator({
Tabs: { screen: Tab },
Stack: { screen: MyScreen },
})
I am importing this in my App.js where I am doing something like this
import React from 'react';
import {
Drawer
}from './Screen.js';
import {
View
} from 'react-native';
export default class App extends React.Component {
render() {
return (
<View>
<Drawer/>
<Tab/>
</View>
);
}
}
Now, This is indeed showing Tab the first time I run my app but after I navigate to different screen and return back, It doesn't appear to be showing that Tab again
[Question:] What could I be doing wrong and How can I fix it?
Try to define one within the other.
Something like:
const Tab = TabNavigator({
TabA: {
screen: Home
},
TabB: {
screen: Home
}
}, {
order: ['TabA', 'TabB'],
animationEnabled: true,
})
export const MyStack = createStackNavigator({
Home: {
screen: Home
},
CoinCapCharts: {
screen: CoinCapCharts
},
Tab: {
screen: Tab
},
},{
initialRouteName: 'Home',
headerMode: 'none'
});
Now, render MyStack (not sure that Screen is the best name :)
export default class App extends React.Component {
render() {
return (
<View>
<MyStack />
</View>
);
}
}
import React from 'react';
import { View, Text } from 'react-native';
import { StackNavigator } from 'react-navigation';
import HomeScreen from './Home.js';
import EntryPoint from './src/containers/EntryPoint.js';
import Stage2 from './src/containers/Stage2.js';
const RootNavigator = StackNavigator({
Home: {
screen: HomeScreen,
navigationOptions: {
headerTitle: 'Material Management',
},
},
EntryPoint: {
screen: EntryPoint,
navigationOptions: {
headerTitle: 'Entry Point'
}
},
Stage2 : {
screen : Stage2,
navigationOptions : {
headerTitle : 'Stage 2'
}
}
});
export default RootNavigator;
The above code is my App.js
I want to wrap the redux store around it. How do i do that . Couldn't find a proper documentation for redux setup with React-native.
import { createStore,bindActionCreators } from 'redux'
import { connect, Provider } from 'react-redux'
function mapStateToProps(state) {
return state;
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(Actions, dispatch);
}
let Container = connect(mapStateToProps,mapDispatchToProps)(RootNavigator);
export default class APP extends Component{
render(){
return (<Provider store={store}>
<Container/>
</Provider>)
}
};
is there any good no bugs example with StackNavigator inside DrawerNavigator?
As in my example when the drawer is open the top Navigation title is hidden and I can't open the drawer(with slide) when I am inside the NewScreen page.
So I want to open the drawer over the title and from any page.
Thanks
http://image.prntscr.com/image/eb4d869acbcf4d22a08159b072aae930.png
Here is the code
import React, { Component } from 'react';
import {
AppRegistry,
Button,
Platform,
ScrollView,
StyleSheet,
TouchableHighlight,
Text,
} from 'react-native';
import {
DrawerNavigator,StackNavigator
} from 'react-navigation';
import FontAwesome from "react-native-vector-icons/FontAwesome";
class ScreenHome extends Component{
static navigationOptions = {
title: 'ScreenHome',
};
render() {
const { navigate } = this.props.navigation;
return (
<Button
title="Go to Jane's profile"
onPress={() => navigate('New', { name: 'Jane' })}
/>
);
}
}
class NewScreen extends Component{
static navigationOptions = {
title: 'New screen',
};
render() {
const { navigate } = this.props.navigation;
return (
<Text>Some new screen</Text>
);
}
}
class ScreenRegister extends Component{
static navigationOptions = {
title: 'ScreenRegister',
};
render(){
return <Text>ScreenRegister</Text>
}
}
const MainScreenNavigator = DrawerNavigator({
Recent: {
screen: ScreenHome
},
All: {
screen: ScreenRegister
},
});
export default SimpleApp = StackNavigator({
Home: {
screen: MainScreenNavigator
},
Chat: {
screen: ScreenHome
},
New: {
screen: NewScreen
}
});
AppRegistry.registerComponent('naviTest', () => SimpleApp);
If I got your questions correctly, you want:
1) To have access to the drawer from any page
2) Your drawer to cover the title bar when open.
To achieve Number 1
There are two ways you can do it and they are:
a) Add a button/Icon that triggers the drawer on click. When you use this solution, you will still not have the slide from left functionality as this is controlled explicitly by the DrawerNavigator
b) Add NewScreen to your Drawer since you want to have access to the entire drawer when you are within the screen
To achieve Number 2
This is a very common issue when nesting DrawerNavigator within StackNavigator. To resolve this, modify StackNavigator thus
export default SimpleApp = StackNavigator({
Home: {
screen: MainScreenNavigator
},
Chat: {
screen: ScreenHome
},
New: {
screen: NewScreen
}
}, {
navigationOptions: { header: false }
});