How to use single component as a new instance with react-native tabview
I created one single screen and i need to display it on tabview with two tabs, because the both tab screens are same so i have created single component for that.
but here problem is that when i am entering some text in textinput that on tab1, InputText and switching on tab2 so for tab2 InputText my last entered charector is displaying,
Please see the Screens first tab having Phone number, and in second tab having email,
but if I enter phone number and switch to email tab then for email it is displaying my last entered phone number.
reactjs react-native react-native-android
asked Nov 23 '18 at 16:55
Lovekush VishwakarmaLovekush Vishwakarma
1,075917
add a comment |
I created one single screen and i need to display it on tabview with two tabs, because the both tab screens are same so i have created single component for that.
but here problem is that when i am entering some text in textinput that on tab1, InputText and switching on tab2 so for tab2 InputText my last entered charector is displaying,
Please see the Screens first tab having Phone number, and in second tab having email,
but if I enter phone number and switch to email tab then for email it is displaying my last entered phone number.
reactjs react-native react-native-android
asked Nov 23 '18 at 16:55
Lovekush VishwakarmaLovekush Vishwakarma
1,075917
add a comment |
I created one single screen and i need to display it on tabview with two tabs, because the both tab screens are same so i have created single component for that.
but here problem is that when i am entering some text in textinput that on tab1, InputText and switching on tab2 so for tab2 InputText my last entered charector is displaying,
Please see the Screens first tab having Phone number, and in second tab having email,
but if I enter phone number and switch to email tab then for email it is displaying my last entered phone number.
reactjs react-native react-native-android
asked Nov 23 '18 at 16:55
Lovekush VishwakarmaLovekush Vishwakarma
1,075917
I created one single screen and i need to display it on tabview with two tabs, because the both tab screens are same so i have created single component for that.
but here problem is that when i am entering some text in textinput that on tab1, InputText and switching on tab2 so for tab2 InputText my last entered charector is displaying,
Please see the Screens first tab having Phone number, and in second tab having email,
but if I enter phone number and switch to email tab then for email it is displaying my last entered phone number.
reactjs react-native react-native-android
reactjs react-native react-native-android
asked Nov 23 '18 at 16:55
Lovekush VishwakarmaLovekush Vishwakarma
1,075917
asked Nov 23 '18 at 16:55
Lovekush VishwakarmaLovekush Vishwakarma
1,075917
edited Nov 23 '18 at 17:07
Lovekush Vishwakarma
asked Nov 23 '18 at 16:55
Lovekush VishwakarmaLovekush Vishwakarma
1,075917
asked Nov 23 '18 at 16:55
Lovekush VishwakarmaLovekush Vishwakarma
1,075917
asked Nov 23 '18 at 16:55
Lovekush VishwakarmaLovekush Vishwakarma
1,075917
1,075917
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
you most probably using the same state that is causing the issue. if you can share the code that would be helpful to identify the issue.
you can also use this approach to have more control over state.
_renderScene = ({ route, navigationState }) => {
switch (route.key) {
case 'first':
return (
<YourScreen
focused={navigationState.index === 0}
/>
);
case 'second':
return (
<YourScreen
focused={navigationState.index === 1}
/>
);
default:
return null;
}
};
<TabView
navigationState={this.state}
renderScene={this._renderScene}
onIndexChange={this._handleIndexChange}
/>
answered Nov 24 '18 at 0:49
gamingumargamingumar
19926
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
});
}
});
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%2f53450469%2fhow-to-use-single-component-as-a-new-instance-with-react-native-tabview%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
you most probably using the same state that is causing the issue. if you can share the code that would be helpful to identify the issue.
you can also use this approach to have more control over state.
_renderScene = ({ route, navigationState }) => {
switch (route.key) {
case 'first':
return (
<YourScreen
focused={navigationState.index === 0}
/>
);
case 'second':
return (
<YourScreen
focused={navigationState.index === 1}
/>
);
default:
return null;
}
};
<TabView
navigationState={this.state}
renderScene={this._renderScene}
onIndexChange={this._handleIndexChange}
/>
answered Nov 24 '18 at 0:49
gamingumargamingumar
19926
add a comment |
you most probably using the same state that is causing the issue. if you can share the code that would be helpful to identify the issue.
you can also use this approach to have more control over state.
_renderScene = ({ route, navigationState }) => {
switch (route.key) {
case 'first':
return (
<YourScreen
focused={navigationState.index === 0}
/>
);
case 'second':
return (
<YourScreen
focused={navigationState.index === 1}
/>
);
default:
return null;
}
};
<TabView
navigationState={this.state}
renderScene={this._renderScene}
onIndexChange={this._handleIndexChange}
/>
answered Nov 24 '18 at 0:49
gamingumargamingumar
19926
add a comment |
you most probably using the same state that is causing the issue. if you can share the code that would be helpful to identify the issue.
you can also use this approach to have more control over state.
_renderScene = ({ route, navigationState }) => {
switch (route.key) {
case 'first':
return (
<YourScreen
focused={navigationState.index === 0}
/>
);
case 'second':
return (
<YourScreen
focused={navigationState.index === 1}
/>
);
default:
return null;
}
};
<TabView
navigationState={this.state}
renderScene={this._renderScene}
onIndexChange={this._handleIndexChange}
/>
answered Nov 24 '18 at 0:49
gamingumargamingumar
19926
you most probably using the same state that is causing the issue. if you can share the code that would be helpful to identify the issue.
you can also use this approach to have more control over state.
_renderScene = ({ route, navigationState }) => {
switch (route.key) {
case 'first':
return (
<YourScreen
focused={navigationState.index === 0}
/>
);
case 'second':
return (
<YourScreen
focused={navigationState.index === 1}
/>
);
default:
return null;
}
};
<TabView
navigationState={this.state}
renderScene={this._renderScene}
onIndexChange={this._handleIndexChange}
/>
answered Nov 24 '18 at 0:49
gamingumargamingumar
19926
answered Nov 24 '18 at 0:49
gamingumargamingumar
19926
answered Nov 24 '18 at 0:49
gamingumargamingumar
19926
answered Nov 24 '18 at 0:49
gamingumargamingumar
19926
19926
add a comment |
add a comment |
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.
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%2f53450469%2fhow-to-use-single-component-as-a-new-instance-with-react-native-tabview%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
