javascript - Stack navigator giving me undefined error -

i'm using https://facebook.github.io/react-native/docs/navigation.html way.

i'm trying use stacknavigator go login.js aboutdendro.js. what's wrong in <button/> component that's throwing error in ios simulator?

here's login.js:

import react, { component } 'react'; import { connect } 'react-redux'; import { scrollview, text, textinput, view, button, stylesheet } 'react-native'; import { login } '../redux/actions/auth'; import {authenticationdetails, cognitouser, cognitouserattribute, cognitouserpool} '../lib/aws-cognito-identity'; import stacknavigator 'react-navigation'; import aboutdendro './aboutdendro';  const awscognitosettings = {     userpoolid: 'something',     clientid: 'something' };  class login extends component {     constructor (props) {         super(props);         this.state = {             page: 'login',             username: '',             password: ''         };     }      alt () { return (this.state.page === 'login') ? 'signup' : 'login'; }      handleclick (e) {         e.preventdefault();         const userpool = new cognitouserpool(awscognitosettings);          // sign         if (this.state.page === 'signup') {             const attributelist = [                 new cognitouserattribute({ name: 'email', value: this.state.username })             ];             userpool.signup(                 this.state.username,                 this.state.password,                 attributelist,                 null,                 (err, result) => {                     if (err) {                         alert(err);                         this.setstate({ username: '', password: '' });                         return;                     }                     console.log(`result = ${json.stringify(result)}`);                     this.props.onlogin(this.state.username, this.state.password);                 }             );         } else {             const authdetails = new authenticationdetails({                 username: this.state.username,                 password: this.state.password             });             const cognitouser = new cognitouser({                 username: this.state.username,                 pool: userpool             });             cognitouser.authenticateuser(authdetails, {                 onsuccess: (result) => {                     console.log(`access token = ${result.getaccesstoken().getjwttoken()}`);                     this.props.onlogin(this.state.username, this.state.password);                 },                 onfailure: (err) => {                     alert(err);                     this.setstate({ username: '', password: '' });                     return;                 }             });         }     }      togglepage (e) {         this.setstate({ page: this.alt });         e.preventdefault();     }      static navigationoptions = {         title: 'aboutdendro',     };      render() {         const { navigate } = this.props.navigation;         const app = stacknavigator({             home: { screen: login },             profile: { screen: aboutdendro },         });          return (             <scrollview style={{padding: 20}}>                 <button                     title="go jane's profile"                     onpress={() =>                         navigate('aboutdendro', { name: 'aboutdendro' })                     }                 />                 <text style={{fontsize: 27}}>{this.state.page}</text>                 <textinput                     placeholder='email address'                     autocapitalize='none'                     autocorrect={false}                     autofocus={true}                     keyboardtype='email-address'                     value={this.state.username}                     onchangetext={(text) => this.setstate({ username: text })} />                 <textinput                     placeholder='password'                     autocapitalize='none'                     autocorrect={false}                     securetextentry={true}                     value={this.state.password}                     onchangetext={(text) => this.setstate({ password: text })} />                 <view style={{margin: 7}}/>                 <button onpress={(e) => this.handleclick(e)} title={this.state.page}/>                 <view style={styles.firstview}>                     <text onpress={(e) => this.togglepage(e)} style={styles.buttons}>                         {this.alt}                     </text>                 </view>             </scrollview>         );     } }  const styles = stylesheet.create({     buttons: {         fontsize: 12,         color: 'blue',         flex: 1     },      firstview: {         margin: 7,         flexdirection: 'row',         justifycontent: 'center'     } });  const mapstatetoprops = (state, ownprops) => {     return {         isloggedin: state.auth.isloggedin     }; }  const mapdispatchtoprops = (dispatch) => {     return {         onlogin: (username, password) => { dispatch(login(username, password)); }     } }  export default connect(mapstatetoprops, mapdispatchtoprops)(login); 

it because navigation not in props. part of app component created. nothing component.

you should have app.js file, stacknavigator, set login component default component in stacknavigator's parameters.

take @ this documentation