0

I am in the very initial stages of trying to build out an app, and am a React-Native novice. I am getting the following navigation error: undefined is not an object (evaluating 'this.props.navigation.navigate').

What I have tried:

I've read the answers to this question and this one. I understand that the problem is that I am not passing down navigation as props correctly to my component. I just don't quite know how to fix that. I tried to ensure that all my components were screens in the main App.js file. I'm sure I'm not doing it right, but I'm unsure of the right way to do it.

Here is my main App.js so far:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import * as firebase from "firebase";
import TodoList from './components/TodoList'
import AddTask from './components/AddTask'
import { StackNavigator } from 'react-navigation'

// Initialize Firebase
var config = {
  apiKey: "<api-key>",
  authDomain: "<auth-domain>",
  databaseURL: "<databaseURL>",
  storageBucket: "<storageBucket>"
};
firebase.initializeApp(config);

export default class Home extends React.Component {

  constructor(props) {
    super(props)

    this.state = {todos: []}
  }

  componentDidMount() {
    firebase.database().ref('/tasks').on('value', data => {
      console.log(data.val())
      this.setState({ todos: (data.val()) })
    })

  }

  render() {
    return (
      <View style={styles.container}>
        <TodoList database={database} todos={this.state.todos} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

const App = StackNavigator({
  Home: { screen: Home },
  TodoList: { screen: TodoList },
  AddTask: { screen: AddTask }
});

The TodoList component:

import React from 'react';
import { StyleSheet, Text, View, FlatList, Button } from 'react-native';
import * as firebase from "firebase";
import AddTask from './AddTask'
import { StackNavigator } from 'react-navigation'

export default class TodoList extends React.Component {

    constructor(props) {
        super(props)

        this.state = {
            todos: [],
            database: this.props.database
        }
    }

    static navigationOptions = {
        title: 'To Do List',
    };

    _keyExtractor = (item) => item.name

    render() {
        const { navigate } = this.props.navigation;
        return (

            <View style={styles.container}>
                <FlatList
                    data={this.props.todos}
                    keyExtractor={this._keyExtractor}
                    renderItem={({ item }) => <Text style={styles.item}>{item.name}</Text>}
                />
                <Button
                    onPress={() =>
                        navigate('AddTask')
                    }
                    title="Add a Task"
                    color="#841584"
                />
            </View>
        )
    }


}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 22
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
    },
})

The AddTask component thus far:

import React from 'react';

export default class AddTask extends React.Component {

    static navigationOptions = {
        title: 'Add a Task',
    };

    render() {
        return (
            <View>
                <Text>This is the Add Task Page</Text>
            </View>
        );
    }
}

Thanks in advance for your help.

Katie
  • 808
  • 1
  • 11
  • 28
  • It seems like you're missing AppRegistry.registerComponent('YourAppName', () => App); in the App.js file. Im not sure if you have an index.js file. If so the stack navigation should be initiated there. – A-Man Jun 25 '17 at 01:05
  • I'm using [create-react-native-app](https://facebook.github.io/react-native/blog/2017/03/13/introducing-create-react-native-app.html) My understanding, maybe incorrect, was that you don't include the AppRegistry line in that case. And I don't have an index.js file. The sample boilerplate from running Create React Native App starts from App.js, as far as I can tell. I am an extreme novice though, so I'd take correction. – Katie Jun 25 '17 at 01:26
  • (just for the record, I tried adding it, and it didn't change the problem.) – Katie Jun 25 '17 at 01:42
  • Try return () in your render instead. Your app const doesnt seem to be used. – A-Man Jun 25 '17 at 08:15
  • if I put anywhere in the return statement of class Home (is that what you meant?), I get maximum call stack size exceeded, presumably because App is trying to render Home which is trying to render App. This is mysterious to me, and I've tried to look under the hood to understand it better, but the create-react-native-app boilerplate seems to know under the hood to look for app.js and try to render the App constant within it. – Katie Jun 25 '17 at 11:31
  • Yea that's what i meant. Maybe it's not compatible with create-react-native-app. Looking at the react-navigation documentation it uses AppRegistry. Perhaps start a new project via react-native init and see if you can navigate via that – A-Man Jun 25 '17 at 11:37
  • Thanks for that suggestion, since it led me to google "create-react-native-app" and "react-navigation" and find a bunch of discussion of the issues in using them together. I don't have time to look into them all this morning, but I'll check back in if I figure something out. – Katie Jun 25 '17 at 12:15

0 Answers0