Vfrdtyky

When pressing the Button nothing happens. The picture shows a warning and I can get rid of that if I change the

onPress={this._onSearchPressed}

to

onPress={() => this._onSearchPressed()}

But now when pressing the Button i get the error you see on the picture below like "undefined is not a function..".
How do I call a onPress correctly?

    'use strict';



import React, { Component } from 'react';

import {

  StyleSheet,

  Text,

  TextInput,

  View,

  Button,

  ActivityIndicator,

  Image,

} from 'react-native';





type Props = {};



function urlForQueryAndPage(key, value, pageNumber) {

  const data = {

      country: 'uk',

      pretty: '1',

      encoding: 'json',

      listing_type: 'buy',

      action: 'search_listings',

      page: pageNumber,

  };

  data[key] = value;



  const querystring = Object.keys(data)

    .map(key => key + '=' + encodeURIComponent(data[key]))

    .join('&');



  return 'https://api.nestoria.co.uk/api?' + querystring;

}





export default class SearchPage extends Component<Props> {

  static navigationOptions = {

    title: 'Property Finder',

  };



  constructor(props) {

    super(props);

    this.state = {

       searchString: 'london',

       isLoading: false,

    };



  }

  _onSearchTextChanged = (event) => {console.log('_onSearchTextChanged');

  this.setState({ searchString: event.nativeEvent.text });

  console.log('Current: '+this.state.searchString+', Next: '+event.nativeEvent.text);



  _executeQuery = (query) => {

    console.log(query);

    this.setState({ isLoading: true });

  };



  _onSearchPressed = () => {

    const query = urlForQueryAndPage('place_name', this.state.searchString, 1);

    this._executeQuery(query);

  };



};



  render() {

   console.log('SearchPage.render');

    const spinner = this.state.isLoading ? <ActivityIndicator size='large'/> : null;

    return (

      <View style={styles.container}>

        <Text style={styles.description}>

          Search for houses to buy!

        </Text>

        <Text style={styles.description}>

          Search by place-name or postcode.

        </Text>

        <View style={styles.flowRight}>

        <TextInput

            underlineColorAndroid={'transparent'}

            style={styles.searchInput}

            value={this.state.searchString}

            onChange={this._onSearchTextChanged}

            placeholder='Search via name or postcode'/>

            <Button

                onPress={this._onSearchPressed}

                color='#48BBEC'

                title='Go'>

            </Button>

        </View>

        <Image source={require('./Resources/house.png')} style={styles.image}/>

        {spinner}

      </View>

    );

  }

}



const styles = StyleSheet.create({

  description: {

    marginBottom: 20,

    fontSize: 18,

    textAlign: 'center',

    color: '#a56565'

  },

  flowRight: {

    flexDirection: 'row',

    alignItems: 'center',

    alignSelf: 'stretch',

  },

  searchInput: {

    height: 36,

    padding: 4,

    marginRight: 5,

    flexGrow: 1,

    fontSize: 18,

    borderWidth: 1,

    borderColor: '#48BBEC',

    borderRadius: 8,

    color: '#48BBEC',

  },

  container: {

    padding: 30,

    marginTop: 65,

    alignItems: 'center'

  },

  image: {

  width: 217,

  height: 138,

},



});

Okay, I think I might have found the error.

Here inside your code

 _onSearchTextChanged = (event) => {console.log('_onSearchTextChanged');

  this.setState({ searchString: event.nativeEvent.text });

  console.log('Current: '+this.state.searchString+', Next: '+event.nativeEvent.text);



  _executeQuery = (query) => {

    console.log(query);

    this.setState({ isLoading: true });

  };



  _onSearchPressed = () => {

    const query = urlForQueryAndPage('place_name', this.state.searchString, 1);

    this._executeQuery(query);

  };



};

You are nesting these two functions

  _executeQuery = (query) => {

        console.log(query);

        this.setState({ isLoading: true });

      };



      _onSearchPressed = () => {

        const query = urlForQueryAndPage('place_name', this.state.searchString, 1);

        this._executeQuery(query);

      };

inside your _onSearchTextChanged function. You probably might want to do something like this

  _onSearchTextChanged = (event) => {console.log('_onSearchTextChanged');

      this.setState({ searchString: event.nativeEvent.text });

      console.log('Current: '+this.state.searchString+', Next: '+event.nativeEvent.text);

}

 _executeQuery = (query) => {

        console.log(query);

        this.setState({ isLoading: true });

      };



      _onSearchPressed = () => {

        const query = urlForQueryAndPage('place_name', this.state.searchString, 1);

        this._executeQuery(query);

      };

Notice the closing } of your first function