Unable to render searchBar in the component

Expo SDK
1

import React, { Component } from ‘react’;
import {
AppRegistry,
StyleSheet,
Text,
Button,
View
} from ‘react-native’;

import { SearchBar } from ‘react-native-elements’;

import { List, ListItem, Divider } from ‘react-native-elements’

// import { SideMenu, List, ListItem } from ‘react-native-elements’;

class FollowupScreen extends Component {

    someFunction() {
      console.log(' someFunction called');
    }


static navigationOptions = {
  title: 'Follow UP'
};


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

  return (
    <View>

      <SearchBar
        lightTheme
        onChangeText={someFunction()}
        placeholder='Type Here...'
         />

        <List>
              <ListItem
                  onPress={() => navigate('allProperties')}
                  title="All Properties"
                  leftIcon={{name: 'flight-takeoff'}}
                  color="rgba(0,122,255,1)"
              />
              <ListItem
                onPress={() => navigate('Contract')}
                  title="Contract Settings"
                leftIcon={{name: 'flight-takeoff'}}
              />
              <ListItem
                onPress={() => navigate('Subscription')}
                  title="Credit Card & Subscription"
                leftIcon={{name: 'flight-takeoff'}}
              />

            <Divider style={{ backgroundColor: 'white', height: 20 }} />

2

someFunction is not defined in this file.

3

1032×796 44 KB

4

Its a class method, so therefore you need this.someFunction(), The code formatting you provided didn’t make it clear whether or not the function was part of the class. Sorry about that harryp.

5

thats fine @jimmylee I appreciate your reply sir

6

@jimmylee thanks man, its showing up the search bar now, but its still not firing the console.log inside the someFunciton method when i start typing text in the search bar, Heres the updated code.

class FollowupScreen extends Component {

    someFunction() {
      console.log(' someFunction called');
    }


static navigationOptions = {
  title: 'Follow UP'
};


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

  return (
    <View>

      <SearchBar
        lightTheme
        onChangeText={this.someFunction()}
        placeholder='Type Here...'
         />
7

You’re going to want to change someFunction() { } to an arrow function someFunction = () => {}, and then you’re going to want to change onChangeText={this.someFunction} instead of what you have.

To understand this topic better, please read: https://facebook.github.io/react/docs/handling-events.html

8

Its firing now

How would i provide the e pass the content typed in the search bar so i can call another backend funciton to do the search ?

class FollowupScreen extends Component {

    someFunction = () => {
      console.log(' someFunction called');
    }


static navigationOptions = {
  title: 'Follow UP'
};


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

  return (
    <View>

      <SearchBar
        lightTheme
        onChangeText={this.someFunction()}
        placeholder='Type Here...'
         />