React Native onClick is not firing - react-native

Question

Working on React Native application for Android using NativeBase, I'm stuck with a problem. Despite using arrow function, the onClick()-event in my Button component is not firing, and I can't figure out why.
Here is the code:
import React from 'react';
import {View, Text} from 'react-native';
import {withNavigation} from 'react-navigation';
import {Button, Header, Icon, Item, Input} from 'native-base';
let text = '';
class SearchBar extends React.Component {
onButtonClick = () => {
text = 'yes';
};
render() {
return (
<View>
<Header searchBar rounded>
<Item>
<Icon name="ios-search" />
<Input placeholder="Search" />
</Item>
</Header>
<Button onClick={() => this.onButtonClick()}>
<Text>Search</Text>
</Button>
<Text>Is the button clicked? {text}</Text>
</View>
);
}
}
export default withNavigation(SearchBar);
Can you help me? In all other components I implemented the event functionalities exactly like in the example above, and these are working. What is the problem with the above one?
I also tried the Button from React-Native instead of NativeBase - same problem.

Answer 1

it is called "onPress" in react native
refer: https://facebook.github.io/react-native/docs/0.58/button

Answer 2

A react component is only updated when a state changes.
Here, your text variable changes, but your react component doesn't know it has to update.
You should use onPress instead of onClick and do this to trigger a re-render (update a state) :
import React from 'react';
import {View, Text} from 'react-native';
import {withNavigation} from 'react-navigation';
import {Button, Header, Icon, Item, Input} from 'native-base';
class SearchBar extends React.Component {
constructor(props) {
super(props);
this.state = {text: ''};
}
onButtonClick = () => {
this.setState({text: 'yes'});
};
render() {
return (
<View>
<Header searchBar rounded>
<Item>
<Icon name="ios-search" />
<Input placeholder="Search" />
</Item>
</Header>
<Button onPress={() => this.onButtonClick()}>
<Text>Search</Text>
</Button>
<Text>Is the button clicked? {this.state.text}</Text>
</View>
);
}
}
export default withNavigation(SearchBar);