CODEWITHSUNDEEP
react-nativereduxreact-reduxredux-form
jack
jack

Reputation: 31

react navigation navigate to other screen

i try make login, when isLoggedIn = true then navigate to Profile, but always give me error

undefined is not an object (evaluating '_this.props.navigation')

whats wrong with mycode? can someone help me?

import React from 'react'
import {
    Image,
    StyleSheet,
    Text,
    TextInput,
    TouchableOpacity,
    View
} from 'react-native'
import { Field, reduxForm } from 'redux-form'
import { Container, Content, InputGroup, Button , Input, Icon, Item } from 'native-base';
import { login } from '../Action/Action';
import {NavigationActions} from "react-navigation";
import styles from './Style';
import { connect,  } from 'react-redux'

 }
function submit(values) {
    console.log(values);

}
const renderInput = ({ input: { onChange, ...restInput }}) => {
    return <Input onChangeText={onChange} {...restInput} />
}
}
const Form = props => {
    //const {navigate} = this.props.navigation;
    //let _navigateTo;
    if (props.appUser.isLoggedIn) {
        console.log("haloooo");
        const navigateAction = NavigationActions.navigate({
            routeName: 'Profile',
            params: {},
            action: NavigationActions.navigate({ routeName:     'SubProfileRoute'})
        })

        this.props.navigation.dispatch(navigateAction)
    }
    const { handleSubmit } = props
    //console.log(props.appUser);
    return (
        <Container >
            <Content>
                <Content>
                    <View style={styles.container}>
                        <Image source={require('../Assets/Octocat.png')} style={{width: 128, height: 128}} />

                    </View>
                </Content>
                <Content style={{paddingLeft:10,paddingRight:10,paddingBottom:5, paddingTop:30}}>
                    <Item rounded>
                        <Field name="username" component={renderInput} />
                    </Item>
                </Content>
                <Content style={{paddingLeft:10,paddingRight:10}}>
                    <Item rounded>
                        <Field name="password" component={renderInput} />
                    </Item>
                </Content>
                <Content style={{padding:10}}>
                    <Button  onPress={handleSubmit(props.onLogin)} block info>
                        <Text>Login</Text>
                    </Button>
                </Content>
            </Content>

        </Container>

    )
}
const myReduxForm = reduxForm({
    form: 'MyReduxForm', 
})(Form)
function mapStateToProps(state) {
    return {
        appUser: state.appUser,
    }
}

function mapDispatchToProps(dispatch) {
    return {
        onLogin: (data) => { dispatch(login(data)); },
    }
}
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(myReduxForm)
// export default reduxForm({
//     form: 'test'
// })(Form)
// export default reduxForm({
//     form: 'test'
// })(Form)

Upvotes: 0

Views: 745

Answers (2)

kubido
kubido

Reputation: 568

you use this.props instead just props

this one should work

const { handleSubmit, navigation: {navigate} } = props

Upvotes: 0

KimHau
KimHau

Reputation: 340

try to use withNavigation. Use the component FormWithNavigation as shown in the code below

const Form = ({ navigation }) => {
 //..
navigation.navigate('XXX')
}

const FormWithNavigation = withNavigation(Form);

Upvotes: 1

Related Questions