How to call a class function from inside a React Navigation Header Ba
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
3
I am trying to call a parameterized function in a header but could not as I am unable to find to way to pass parameter.
class MyScreen extends React.Component {
static navigationOptions = ({ navigation }) =>
{
headerLeft: (
<SearchBar
placeholder="Search"
round
onChangeText={text => this.searchFunction(text)}
/>
)
};
*searchFunction(text)
{
alert( text + ' searched succesfully');
}*
componentDidMount()
{
**//I would need implementation here**
}
render()
{
return (<View />);
}
}
android react-native react-native-android react-navigation react-native-ios edited Nov 18 '18 at 23:39
e_i_pi
2,75921933
asked Nov 16 '18 at 23:18
UmarUmar
205
add a comment |
3
I am trying to call a parameterized function in a header but could not as I am unable to find to way to pass parameter.
class MyScreen extends React.Component {
static navigationOptions = ({ navigation }) =>
{
headerLeft: (
<SearchBar
placeholder="Search"
round
onChangeText={text => this.searchFunction(text)}
/>
)
};
*searchFunction(text)
{
alert( text + ' searched succesfully');
}*
componentDidMount()
{
**//I would need implementation here**
}
render()
{
return (<View />);
}
}
edited Nov 18 '18 at 23:39
e_i_pi
2,75921933
asked Nov 16 '18 at 23:18
UmarUmar
205
add a comment |
3
3
3
1
I am trying to call a parameterized function in a header but could not as I am unable to find to way to pass parameter.
class MyScreen extends React.Component {
static navigationOptions = ({ navigation }) =>
{
headerLeft: (
<SearchBar
placeholder="Search"
round
onChangeText={text => this.searchFunction(text)}
/>
)
};
*searchFunction(text)
{
alert( text + ' searched succesfully');
}*
componentDidMount()
{
**//I would need implementation here**
}
render()
{
return (<View />);
}
}
edited Nov 18 '18 at 23:39
e_i_pi
2,75921933
asked Nov 16 '18 at 23:18
UmarUmar
205
I am trying to call a parameterized function in a header but could not as I am unable to find to way to pass parameter.
class MyScreen extends React.Component {
static navigationOptions = ({ navigation }) =>
{
headerLeft: (
<SearchBar
placeholder="Search"
round
onChangeText={text => this.searchFunction(text)}
/>
)
};
*searchFunction(text)
{
alert( text + ' searched succesfully');
}*
componentDidMount()
{
**//I would need implementation here**
}
render()
{
return (<View />);
}
}
edited Nov 18 '18 at 23:39
e_i_pi
2,75921933
asked Nov 16 '18 at 23:18
UmarUmar
205
edited Nov 18 '18 at 23:39
e_i_pi
2,75921933
asked Nov 16 '18 at 23:18
UmarUmar
205
edited Nov 18 '18 at 23:39
e_i_pi
2,75921933
edited Nov 18 '18 at 23:39
e_i_pi
2,75921933
edited Nov 18 '18 at 23:39
e_i_pi
2,75921933
2,75921933
asked Nov 16 '18 at 23:18
UmarUmar
205
asked Nov 16 '18 at 23:18
UmarUmar
205
asked Nov 16 '18 at 23:18
UmarUmar
205
205
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
2
The reserved word this means nothing in the static context of the navigationOptions function, So you can't use it there to call the searchFunction.
There's a way to add params to the navigation object so you can get them in the navigationOptions static function.
You can add the searchFunction as a navigation object param and pass it to the onChangeText attribute.
The implementation looks like this:
class MyScreen extends React.Component {
// Pass the searchFunction from the navigation params to the `onChangeText` attribute.
// It should be triggered with the `text` argument.
static navigationOptions = ({ navigation }) =>
{
headerLeft: (
<SearchBar
placeholder="Search"
round
onChangeText={navigation.getParam('searchFunc')}
/>
)
};
// Use arrow function to bind it to the MyScreen class.
// (I'm not sure you have to do it like this, try to use it as a normal function first)
searchFunction = (text) => {
alert( text + ' searched succesfully');
}
// Add the `searchFunction` as a navigation param:
componentDidMount() {
this.props.navigation.setParams({searchFunc: this.searchFunction})
}
// Since we pass a class function as a param
// I believe it would be a good practice to remove it
// from the navigation params when the Component unmounts.
componentWillUnmount() {
this.props.navigation.setParams({searchFunc: null})
}
render() {
return (<View />);
}
}
Source
answered Nov 17 '18 at 7:03
HedeHHedeH
2,0731020
I will give it a try. Thanks for the answer.
– Umar
Nov 18 '18 at 20:46
It worked like a beauty. Thanks mate.
– Umar
Nov 18 '18 at 22:41
Great :) You're welcome. You should mark this answer as accepted, so other people would see this question has an accepted answer.
– HedeH
Nov 19 '18 at 5:56
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53346613%2fhow-to-call-a-class-function-from-inside-a-react-navigation-header-ba%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
The reserved word this means nothing in the static context of the navigationOptions function, So you can't use it there to call the searchFunction.
There's a way to add params to the navigation object so you can get them in the navigationOptions static function.
You can add the searchFunction as a navigation object param and pass it to the onChangeText attribute.
The implementation looks like this:
class MyScreen extends React.Component {
// Pass the searchFunction from the navigation params to the `onChangeText` attribute.
// It should be triggered with the `text` argument.
static navigationOptions = ({ navigation }) =>
{
headerLeft: (
<SearchBar
placeholder="Search"
round
onChangeText={navigation.getParam('searchFunc')}
/>
)
};
// Use arrow function to bind it to the MyScreen class.
// (I'm not sure you have to do it like this, try to use it as a normal function first)
searchFunction = (text) => {
alert( text + ' searched succesfully');
}
// Add the `searchFunction` as a navigation param:
componentDidMount() {
this.props.navigation.setParams({searchFunc: this.searchFunction})
}
// Since we pass a class function as a param
// I believe it would be a good practice to remove it
// from the navigation params when the Component unmounts.
componentWillUnmount() {
this.props.navigation.setParams({searchFunc: null})
}
render() {
return (<View />);
}
}
Source
answered Nov 17 '18 at 7:03
HedeHHedeH
2,0731020
I will give it a try. Thanks for the answer.
– Umar
Nov 18 '18 at 20:46
It worked like a beauty. Thanks mate.
– Umar
Nov 18 '18 at 22:41
Great :) You're welcome. You should mark this answer as accepted, so other people would see this question has an accepted answer.
– HedeH
Nov 19 '18 at 5:56
add a comment |
2
The reserved word this means nothing in the static context of the navigationOptions function, So you can't use it there to call the searchFunction.
There's a way to add params to the navigation object so you can get them in the navigationOptions static function.
You can add the searchFunction as a navigation object param and pass it to the onChangeText attribute.
The implementation looks like this:
class MyScreen extends React.Component {
// Pass the searchFunction from the navigation params to the `onChangeText` attribute.
// It should be triggered with the `text` argument.
static navigationOptions = ({ navigation }) =>
{
headerLeft: (
<SearchBar
placeholder="Search"
round
onChangeText={navigation.getParam('searchFunc')}
/>
)
};
// Use arrow function to bind it to the MyScreen class.
// (I'm not sure you have to do it like this, try to use it as a normal function first)
searchFunction = (text) => {
alert( text + ' searched succesfully');
}
// Add the `searchFunction` as a navigation param:
componentDidMount() {
this.props.navigation.setParams({searchFunc: this.searchFunction})
}
// Since we pass a class function as a param
// I believe it would be a good practice to remove it
// from the navigation params when the Component unmounts.
componentWillUnmount() {
this.props.navigation.setParams({searchFunc: null})
}
render() {
return (<View />);
}
}
Source
answered Nov 17 '18 at 7:03
HedeHHedeH
2,0731020
I will give it a try. Thanks for the answer.
– Umar
Nov 18 '18 at 20:46
It worked like a beauty. Thanks mate.
– Umar
Nov 18 '18 at 22:41
Great :) You're welcome. You should mark this answer as accepted, so other people would see this question has an accepted answer.
– HedeH
Nov 19 '18 at 5:56
add a comment |
2
2
2
The reserved word this means nothing in the static context of the navigationOptions function, So you can't use it there to call the searchFunction.
There's a way to add params to the navigation object so you can get them in the navigationOptions static function.
You can add the searchFunction as a navigation object param and pass it to the onChangeText attribute.
The implementation looks like this:
class MyScreen extends React.Component {
// Pass the searchFunction from the navigation params to the `onChangeText` attribute.
// It should be triggered with the `text` argument.
static navigationOptions = ({ navigation }) =>
{
headerLeft: (
<SearchBar
placeholder="Search"
round
onChangeText={navigation.getParam('searchFunc')}
/>
)
};
// Use arrow function to bind it to the MyScreen class.
// (I'm not sure you have to do it like this, try to use it as a normal function first)
searchFunction = (text) => {
alert( text + ' searched succesfully');
}
// Add the `searchFunction` as a navigation param:
componentDidMount() {
this.props.navigation.setParams({searchFunc: this.searchFunction})
}
// Since we pass a class function as a param
// I believe it would be a good practice to remove it
// from the navigation params when the Component unmounts.
componentWillUnmount() {
this.props.navigation.setParams({searchFunc: null})
}
render() {
return (<View />);
}
}
Source
answered Nov 17 '18 at 7:03
HedeHHedeH
2,0731020
The reserved word this means nothing in the static context of the navigationOptions function, So you can't use it there to call the searchFunction.
There's a way to add params to the navigation object so you can get them in the navigationOptions static function.
You can add the searchFunction as a navigation object param and pass it to the onChangeText attribute.
The implementation looks like this:
class MyScreen extends React.Component {
// Pass the searchFunction from the navigation params to the `onChangeText` attribute.
// It should be triggered with the `text` argument.
static navigationOptions = ({ navigation }) =>
{
headerLeft: (
<SearchBar
placeholder="Search"
round
onChangeText={navigation.getParam('searchFunc')}
/>
)
};
// Use arrow function to bind it to the MyScreen class.
// (I'm not sure you have to do it like this, try to use it as a normal function first)
searchFunction = (text) => {
alert( text + ' searched succesfully');
}
// Add the `searchFunction` as a navigation param:
componentDidMount() {
this.props.navigation.setParams({searchFunc: this.searchFunction})
}
// Since we pass a class function as a param
// I believe it would be a good practice to remove it
// from the navigation params when the Component unmounts.
componentWillUnmount() {
this.props.navigation.setParams({searchFunc: null})
}
render() {
return (<View />);
}
}
Source
answered Nov 17 '18 at 7:03
HedeHHedeH
2,0731020
edited Nov 18 '18 at 21:01
answered Nov 17 '18 at 7:03
HedeHHedeH
2,0731020
answered Nov 17 '18 at 7:03
HedeHHedeH
2,0731020
answered Nov 17 '18 at 7:03
HedeHHedeH
2,0731020
2,0731020
I will give it a try. Thanks for the answer.
– Umar
Nov 18 '18 at 20:46
It worked like a beauty. Thanks mate.
– Umar
Nov 18 '18 at 22:41
Great :) You're welcome. You should mark this answer as accepted, so other people would see this question has an accepted answer.
– HedeH
Nov 19 '18 at 5:56
add a comment |
I will give it a try. Thanks for the answer.
– Umar
Nov 18 '18 at 20:46
It worked like a beauty. Thanks mate.
– Umar
Nov 18 '18 at 22:41
Great :) You're welcome. You should mark this answer as accepted, so other people would see this question has an accepted answer.
– HedeH
Nov 19 '18 at 5:56
I will give it a try. Thanks for the answer.
– Umar
Nov 18 '18 at 20:46
I will give it a try. Thanks for the answer.
– Umar
Nov 18 '18 at 20:46
It worked like a beauty. Thanks mate.
– Umar
Nov 18 '18 at 22:41
It worked like a beauty. Thanks mate.
– Umar
Nov 18 '18 at 22:41
Great :) You're welcome. You should mark this answer as accepted, so other people would see this question has an accepted answer.
– HedeH
Nov 19 '18 at 5:56
Great :) You're welcome. You should mark this answer as accepted, so other people would see this question has an accepted answer.
– HedeH
Nov 19 '18 at 5:56
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53346613%2fhow-to-call-a-class-function-from-inside-a-react-navigation-header-ba%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
