React Native button error problem, cant have click listener

Question

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,
},

});

Answer 1

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