I have a screen named ChooseUser. And a file named ChooseUserScreen.js which I want to navigate to once signIn is done. But its not working. Its showing this error:
ReferenceError: Can't find variable: navigate
This is my code:
import React, { Component } from 'react';
import { Text, Block, Input, Button } from 'galio-framework';
import { StyleSheet, TouchableOpacity } from 'react-native';
class SignIn extends Component {
state = {
tochooseuser: false
}
signIn() {
this.setState({tochooseuser: true })
}
render() {
if (this.state.tochooseuser === true) {
navigate('ChooseUser')
}
return (
<Button round color="info" style={ styles.btn } onPress={ this.signIn.bind(this) }>Sign in</Button>
);
}
}
export default SignIn;
I managed to do it with
this.props.navigation.navigate('ChooseUser')
inside signIn()
Related
I'm setting up a FlatList, and want it will show my component inside it.
I made a function "renderEpisodes" that include my component and I want to pass this function inside the FlatList that it will show me all my details that include in there.
This is my FlatList with all the code
import React, { Component } from 'react';
import { ScrollView, FlatList, Text, View, Image } from 'react-native';
import axios from 'axios';
import EpisodeDetail from './EpisodeDetail';
import { Spinner } from './Spinner';
class EpisodeList extends Component {
state = { episodes: [] };
componentWillMount() {
axios.get('http://api.tvmaze.com/shows/1/episodes')
.then(Response => this.setState({ episodes: Response.data }));
}
renderEpisodes() {
return this.state.episodes.map(episode =>
<EpisodeDetail key={episode.name} episode={episode} />
);
}
render() {
return (
<FlatList
{this.renderEpisodes()}
/>
);
}
}
export default EpisodeList;
I expect the output of the FlatList will show me all content of the function "renderEpisodes" because of its include all my component stuff that I want to show.
You can try the following,
import React, { Component } from 'react';
import { ScrollView, FlatList, Text, View, Image } from 'react-native';
import axios from 'axios';
import EpisodeDetail from './EpisodeDetail';
import { Spinner } from './Spinner';
class EpisodeList extends Component {
state = { episodes: [] };
componentWillMount() {
axios.get('http://api.tvmaze.com/shows/1/episodes')
.then(Response => this.setState({ episodes: Response.data }));
}
renderEpisodes(episode) {
return (
<EpisodeDetail key={episode.name} episode={episode} />
);
}
render() {
return (
<FlatList
data={this.state.episodes}
renderItem={({item}) => this.renderEpisodes(item)}
/>
);
}
}
export default EpisodeList;
renderEpisodes({item,index}) {
return <EpisodeDetail key={index} episode={item} />
}
......
<FlatList data={this.state.episodes} renderItem={this.renderEpisodes}/>
I try to use navigation between screen in my RN app. This is my code :
INDEX.ANDROID.JS :
import React, { Component } from 'react';
import {
AppRegistry,
Text,
View ,
Button
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import Login from './app/components/Todo';
const SimpleApp = StackNavigator({
Login: { screen: Todo },
});
export default class aap extends Component {
static navigationOptions = { title: 'Welcome', };
render() {
const { navigate } = this.props.navigation;
return (
<Button onPress ={() => navigate('Todo') } title="go"/>
);
}
}
AppRegistry.registerComponent('aap', () => aap);
here is the code of the second screen TODO.JS
import React, { Component } from 'react';
import {
AppRegistry,
Text,
View ,
Button
} from 'react-native';
export default class Todo extends Component {
render() {
return (
<View>
<Text>
Here is my text
</Text>
</View>
);
}
}
When running my code i get an error : undefined is not an object this.props.naviagtion.
Any help is appreciated
You are not using StackNavigator correctly.
Like #xght said, you should be registering SimpleApp instead of aap. Also, you should be using aap as the initial route to your StackNavigator SimpleApp.
This should look something like this:
import React, { Component } from 'react';
import {
AppRegistry,
Text,
View ,
Button
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import Todo from './app/components/Todo';
class aap extends Component {
static navigationOptions = { title: 'Welcome', };
render() {
const { navigate } = this.props.navigation;
return (
<Button onPress ={() => navigate('Todo') } title="go"/>
);
}
}
const SimpleApp = StackNavigator({
Login: { screen: aap },
Todo: { screen: Todo },
});
AppRegistry.registerComponent('aap', () => SimpleApp);
You registered the wrong component, so the navigator SimpleApp doesn't pass the navigation prop to your component.
Replace
AppRegistry.registerComponent('aap', () => aap); by:
AppRegistry.registerComponent('aap', () => SimpleApp);
And also you forgot to add your aap component in SimpleApp routes. And your import Login from './app/components/Todo';is wrong: Login is the name of the route in SimpleApp, and Todo is the name of the component, so you need to replace it by import Todo...
I'm using React Router for a React Native app. Not sure what I'm missing here but I install react-router-native and require the history package, and setup a couple methods that just push a new route onto the stack but nothing happens. I console.log('clicked'); to check that it's firing and it is so not sure what's wrong.
import React, { Component } from 'react';
import { View } from 'react-native';
import Splash from './Splash';
import createHistory from 'history/createMemoryHistory';
const history = createHistory();
class SplashContainer extends Component {
goToLogin = () => {
history.push('/Login');
}
goToRegister = () => {
history.push('/SignUp');
}
render () {
console.log(history)
return (
<Splash
goToLogin={this.goToLogin}
goToRegister={this.goToRegister}
/>
);
}
}
export default SplashContainer;
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { Button } from 'native-base';
import { Link } from 'react-router-native';
import PropTypes from 'prop-types';
const Splash = (props) => {
console.log(props)
return (
<View style={styles.container}>
<Button light block onPress={props.goToLogin}>
<Text>Login</Text>
</Button>
<Button dark block bordered style={{marginTop: 10}} onPress={props.goToRegister}>
<Text>Register</Text>
</Button>
</View>
);
}
Splash.propTypes = {
goToLogin: PropTypes.func.isRequired,
goToRegister: PropTypes.func.isRequired
}
export default Splash;
I don't know your Router config, but your methods should be:
goToLogin = () => {
const { history } = this.props
history.push('/Login');
}
history will passed down via props of component inside Router's stack.
I'm using the new react-navigation library for a React Native application I'm building. I'm having an issue with passing down my ActionCreators from my Nav component down to its scenes.
I have an AppContainer that wraps the entire application.
import React, { Component } from 'react';
import { DrawerNavigator, addNavigationHelpers } from 'react-navigation';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { ActionCreators } from '../actions';
import DashboardContainer from './DashboardContainer';
import CustomersContainer from './CustomersContainer';
const ApplicationNavigation = DrawerNavigator({
Dashboard: { screen: DashboardContainer },
Customers: { screen: CustomersContainer },
});
class AppContainer extends Component {
render() {
return (
<ApplicationNavigation />
);
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(ActionCreators, dispatch);
}
export default connect(() => { return {} }, mapDispatchToProps)(AppContainer);
Here is the CustomerContainer:
import React, {Component} from 'react';
import {View, Text, Button} from 'react-native';
export default class CustomerContainer extends Component {
btnPressed() {
this.props.listCustomers()
}
render () {
return (
<View style={{marginTop: 40}}><Text>Customer</Text>
<Button onPress={() => this.btnPressed()} title="Press Me!" />
</View>
);
}
}
Now I'm trying to call an action within my CustomerContainer this.props.listCustomers(). The problem is the ActionCreator props aren't being passed down to the screens. I've tried doing adding the screenProps prop to the ApplicationNavigation component:
But for some reason when I do this my app doesn't display any screens its just blank with no errors.
UPDATE
So I updated my CustomerContainer file:
import React, {Component} from 'react';
import {View, Text, Button} from 'react-native';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { ActionCreators } from '../actions';
class CustomerContainer extends Component {
btnPressed() {
console.log(this.props.listCompanyCustomers())
}
render () {
return (
<View style={{marginTop: 40}}><Text>Customer</Text>
<Button onPress={() => this.btnPressed()} title="Press Me!" />
</View>
);
}
}
function mapStateToProps(state) {
return {
companyCustomers: state.companyCustomers
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(ActionCreators, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(CustomerContainer);
This now works; however this feels like the incorrect way to go about this.
What redux connect basically does is:
Wrap your component
Declare contextProps to get access to dispatch
pass the dispatch to your component props.
If you pass the connect mapDispatchToProps, then it creates the mapping of the methods to dispatch.
So if you connect you AppContainer, its children won't get these dispatch methods, unless AppContainer passes them to its children (but this what connect comes to prevent).
So to sum up, you should connect any component that needs to use dispatch, otherwise it won't get it.
If you don't want to copy paste the mapDispatchToProps, you can just delete it and use this.props.dispatch instead:
import { ActionCreators } from '../actions';
class CustomerContainer extends Component {
btnPressed() {
this.props.dispatch(ActionCreators.listCompanyCustomers());
}
render () {
return (
<View style={{marginTop: 40}}><Text>Customer</Text>
<Button onPress={() => this.btnPressed()} title="Press Me!" />
</View>
);
}
}
Trying to make a new app, I get error below from the code.
the component seesm to world
https://www.youtube.com/watch?v=QJ_iRLfehSU&index=3&list=PL7D-0n1z1EbgAoLu1n5wjcMLDDAQqXOMw
/**
* Sample React Native App
* https://github.com/facebook/react-native
* #flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Navigator
} from 'react-native';
var Login = require("./app/components/Login");
class PioneerSales extends Component {
render() {
return (
<Navigator
initialRoute = {{
id: "Login"
}}
renderScene = {
this.navigatorRenderScene
}
/>
);
}
navigatorRenderScene(route, navigator){
_navigator = navigator;
if (route.id == "Login") {
return (<Login _navigator={_navigator} title="Login" />)
}
}
}
AppRegistry.registerComponent('PioneerSales', () => PioneerSales);
Any help would be appreciated.
It may be due to your Login component has not exposed out.It should be like this. Check your component. Then import this component like this
import Test from './app/xxx/Login'
export default class Test extends Component {
render() {
return (
<View style={stytles.mainStytle}>
</View>
)
}
}