CODEWITHSUNDEEP
react-native
darthVader
darthVader

Reputation: 41

My app doesn't find navigator variables - "ReferenceError: Can't find variable: navigator"

hope you can help me.

I'm working with react-native to develop a simple app from a tutorial I'm following. The problem is that it has "Navigator" and I can't make it works. Let me share my code:

index.android.js

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, Navigator } from 'react-native';
import SearchPage from './SearchPage';

    class PropertyFinder extends React.Component {
      render() {
        return (
          <Navigator
            initialRoute={{ title: 'Pagina Busqueda', index: 0 }}
            renderScene={(route, navigator) => {
              return <SearchPage title={route.title} />
            }}
          />
        );
      }
    }

    AppRegistry.registerComponent('Project', () => PropertyFinder);

And this is another file: SearchPage.js

    import React, { Component } from 'react'
    import { StyleSheet, Text, TextInput, View, TouchableHighlight, ActivityIndicator, Image, Navigator } from 'react-native';
    import SearchResults from './SearchResults';

export default class SearchPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchString: 'london',
      message: ''
    };
  }
  onSearchTextChanged(event) {
    this.setState({ searchString: event.nativeEvent.text });
  }
  _executeQuery(query) {
    console.log(query);
    fetch(query)
    .then(response => response.json())
    .then(json => this._handleResponse(json.response))
    .catch(error =>
    this.setState({
      message: 'Something bad happened ' + error
    }));
  }

  onSearchPressed() {
    var query = urlForQueryAndPage('place_name', this.state.searchString, 1);
    this._executeQuery(query);
  }
  _handleResponse(response) {
    this.setState({ message: '' });
    if (response.application_response_code.substr(0, 1) === '1') {
      const nextIndex = route.index + 1;
      navigator.push({
        title: 'Results ' + nextIndex,
        index: nextIndex,
        component: SearchResults,
        passProps: {listings: response.listings}
      });  
    } else {
      this.setState({ message: 'Location not recognized; please try again.'});
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.description}>
          Buscar casas para compra !!!
        </Text>
        <Text style={styles.description}>
          Busca por área, CP, o cerca de tu ubicación.
        </Text>
        <View style={styles.flowRight}>
          <TextInput
            style={styles.searchInput}
            value={this.state.searchString}
            onChange={this.onSearchTextChanged.bind(this)}
            placeholder='Búsqueda por nombre o CP'/>
          <TouchableHighlight style={styles.button}
              underlayColor='#99d9f4' onPress={this.onSearchPressed.bind(this)}>
            <Text style={styles.buttonText}>Go</Text>
          </TouchableHighlight>
        </View>
        <TouchableHighlight style={styles.button}
            underlayColor='#99d9f4'>
          <Text style={styles.buttonText}>Location</Text>
        </TouchableHighlight>
        <Image source={require('./Resources/house.png')} style={styles.image}/>
        <Text style={styles.description}>{this.state.message}</Text>
      </View>
    );
  }
}
function urlForQueryAndPage(key, value, pageNumber) {
  return 'http://api.nestoria.co.uk/api?country=uk&pretty=1&encoding=json&listing_type=buy&action=search_listings&page=1&place_name=london';
};

And there is another file called SearchResults.js But I don't think necessary to share it because the problem is happening at SearchPage.js.

When my app tries to execute the instructions (on the _handleResponse method):

const nextIndex = route.index + 1;
      navigator.push({
        title: 'Results ' + nextIndex,
        index: nextIndex,
        component: SearchResults,
        passProps: {listings: response.listings}
      });

I'm getting the error: ReferenceError: Can't find variable: route (neither navigator if I remove the route stuff)

Can anybody help me with this please?

Regards!

Upvotes: 0

Views: 4057

Answers (1)

Burak Karasoy
Burak Karasoy

Reputation: 1690

you need to pass navigator to SearchPage

<SearchPage title={route.title} navigator={navigator}/>

then you can reach navigator from searchPage using this.props

 this.props.navigator.push({
        title: 'Results ' + nextIndex,
        index: nextIndex,
        component: SearchResults,
        passProps: {listings: response.listings}
      });

and don't forget to bind _handleResponse in constructor of searchPage, otherwise it will be undefined 

this._handleResponse=this._handleResponse.bind(this)

Upvotes: 1

Related Questions