TextInput from React Native does not show entered text
I am trying to implement a simple iOS application with React Native. However, I got stuck with a problem with the TextInput element.
It works fine until I try the next steps:
- Enter some long text (the text should be longer than the input itself)
- Put the cursor to the beginning of the text
- Try typing something.
I expect that after I type, say, abc, it will look like this:
However, by some reason, the result is like this:
I.e., abc is entered, however, the cursor stays at the initial (leftmost) position and the entered text is not visible. I have to move the cursor to the left myself to see the text. That is not expected behavior: I, as a user, feel that the input is broken and my text just is not entered at all.
I did not found any solution for the issue so far. Is it a bug of React Native or I just do something wrong?
Thank you.
Update #1
Created a simple Expo project to reproduce the issue.
Update #2
Looks like an issue of React Native. Reported the issue and implemented the workaround proposed by @HelmerBarcos (with multiline={true}).
react-native
asked Dec 11 '18 at 21:08
yaskovdevyaskovdev
5241412
add a comment |
I am trying to implement a simple iOS application with React Native. However, I got stuck with a problem with the TextInput element.
It works fine until I try the next steps:
- Enter some long text (the text should be longer than the input itself)
- Put the cursor to the beginning of the text
- Try typing something.
I expect that after I type, say, abc, it will look like this:
However, by some reason, the result is like this:
I.e., abc is entered, however, the cursor stays at the initial (leftmost) position and the entered text is not visible. I have to move the cursor to the left myself to see the text. That is not expected behavior: I, as a user, feel that the input is broken and my text just is not entered at all.
I did not found any solution for the issue so far. Is it a bug of React Native or I just do something wrong?
Thank you.
Update #1
Created a simple Expo project to reproduce the issue.
Update #2
Looks like an issue of React Native. Reported the issue and implemented the workaround proposed by @HelmerBarcos (with multiline={true}).
react-native
asked Dec 11 '18 at 21:08
yaskovdevyaskovdev
5241412
I think your are making some mistake in the styles. It is the TextInput component from react-native itself? cCan you please share a Minimal, Complete, and Verifiable example
– Helmer Barcos
Dec 11 '18 at 21:23
@HelmerBarcos, thank you for the quick comment. I am going to prepare the smallest possible project that reproduces the issue and update the question with the link to it.
– yaskovdev
Dec 11 '18 at 21:26
on Expo do you mean? it would be nice!
– Helmer Barcos
Dec 11 '18 at 21:28
Just created the project to reproduce using Expo: github.com/yaskovdev/sandbox/blob/master/…
– yaskovdev
Dec 11 '18 at 21:51
1
Good question. I just found out I have the same issue in my app. Weird behaviour
– Nikhil
Dec 12 '18 at 5:57
add a comment |
I am trying to implement a simple iOS application with React Native. However, I got stuck with a problem with the TextInput element.
It works fine until I try the next steps:
- Enter some long text (the text should be longer than the input itself)
- Put the cursor to the beginning of the text
- Try typing something.
I expect that after I type, say, abc, it will look like this:
However, by some reason, the result is like this:
I.e., abc is entered, however, the cursor stays at the initial (leftmost) position and the entered text is not visible. I have to move the cursor to the left myself to see the text. That is not expected behavior: I, as a user, feel that the input is broken and my text just is not entered at all.
I did not found any solution for the issue so far. Is it a bug of React Native or I just do something wrong?
Thank you.
Update #1
Created a simple Expo project to reproduce the issue.
Update #2
Looks like an issue of React Native. Reported the issue and implemented the workaround proposed by @HelmerBarcos (with multiline={true}).
react-native
asked Dec 11 '18 at 21:08
yaskovdevyaskovdev
5241412
I am trying to implement a simple iOS application with React Native. However, I got stuck with a problem with the TextInput element.
It works fine until I try the next steps:
- Enter some long text (the text should be longer than the input itself)
- Put the cursor to the beginning of the text
- Try typing something.
I expect that after I type, say, abc, it will look like this:
However, by some reason, the result is like this:
I.e., abc is entered, however, the cursor stays at the initial (leftmost) position and the entered text is not visible. I have to move the cursor to the left myself to see the text. That is not expected behavior: I, as a user, feel that the input is broken and my text just is not entered at all.
I did not found any solution for the issue so far. Is it a bug of React Native or I just do something wrong?
Thank you.
Update #1
Created a simple Expo project to reproduce the issue.
Update #2
Looks like an issue of React Native. Reported the issue and implemented the workaround proposed by @HelmerBarcos (with multiline={true}).
react-native
react-native
asked Dec 11 '18 at 21:08
yaskovdevyaskovdev
5241412
asked Dec 11 '18 at 21:08
yaskovdevyaskovdev
5241412
edited Jan 2 at 14:34
yaskovdev
asked Dec 11 '18 at 21:08
yaskovdevyaskovdev
5241412
asked Dec 11 '18 at 21:08
yaskovdevyaskovdev
5241412
asked Dec 11 '18 at 21:08
yaskovdevyaskovdev
5241412
5241412
I think your are making some mistake in the styles. It is the TextInput component from react-native itself? cCan you please share a Minimal, Complete, and Verifiable example
– Helmer Barcos
Dec 11 '18 at 21:23
@HelmerBarcos, thank you for the quick comment. I am going to prepare the smallest possible project that reproduces the issue and update the question with the link to it.
– yaskovdev
Dec 11 '18 at 21:26
on Expo do you mean? it would be nice!
– Helmer Barcos
Dec 11 '18 at 21:28
Just created the project to reproduce using Expo: github.com/yaskovdev/sandbox/blob/master/…
– yaskovdev
Dec 11 '18 at 21:51
1
Good question. I just found out I have the same issue in my app. Weird behaviour
– Nikhil
Dec 12 '18 at 5:57
add a comment |
I think your are making some mistake in the styles. It is the TextInput component from react-native itself? cCan you please share a Minimal, Complete, and Verifiable example
– Helmer Barcos
Dec 11 '18 at 21:23
@HelmerBarcos, thank you for the quick comment. I am going to prepare the smallest possible project that reproduces the issue and update the question with the link to it.
– yaskovdev
Dec 11 '18 at 21:26
on Expo do you mean? it would be nice!
– Helmer Barcos
Dec 11 '18 at 21:28
Just created the project to reproduce using Expo: github.com/yaskovdev/sandbox/blob/master/…
– yaskovdev
Dec 11 '18 at 21:51
1
Good question. I just found out I have the same issue in my app. Weird behaviour
– Nikhil
Dec 12 '18 at 5:57
I think your are making some mistake in the styles. It is the TextInput component from react-native itself? cCan you please share a Minimal, Complete, and Verifiable example
– Helmer Barcos
Dec 11 '18 at 21:23
I think your are making some mistake in the styles. It is the TextInput component from react-native itself? cCan you please share a Minimal, Complete, and Verifiable example
– Helmer Barcos
Dec 11 '18 at 21:23
@HelmerBarcos, thank you for the quick comment. I am going to prepare the smallest possible project that reproduces the issue and update the question with the link to it.
– yaskovdev
Dec 11 '18 at 21:26
@HelmerBarcos, thank you for the quick comment. I am going to prepare the smallest possible project that reproduces the issue and update the question with the link to it.
– yaskovdev
Dec 11 '18 at 21:26
on Expo do you mean? it would be nice!
– Helmer Barcos
Dec 11 '18 at 21:28
on Expo do you mean? it would be nice!
– Helmer Barcos
Dec 11 '18 at 21:28
Just created the project to reproduce using Expo: github.com/yaskovdev/sandbox/blob/master/…
– yaskovdev
Dec 11 '18 at 21:51
Just created the project to reproduce using Expo: github.com/yaskovdev/sandbox/blob/master/…
– yaskovdev
Dec 11 '18 at 21:51
1
1
Good question. I just found out I have the same issue in my app. Weird behaviour
– Nikhil
Dec 12 '18 at 5:57
Good question. I just found out I have the same issue in my app. Weird behaviour
– Nikhil
Dec 12 '18 at 5:57
add a comment |
1 Answer
1
active
oldest
votes
The problem is that you are not making proper use of the corresponding property or props of the TextInput Component. For a better understanding of their use, please read the official API documentation from React Native components in this case TextInput Component Documentation
You need to use the placeholder prop and it should works. It could be that there is another mistake on your StylesSheet.
I have created an Expo example for you just for showing the correct way. You can add your own code there if you want to experiment with it.
answered Dec 11 '18 at 22:15
Helmer BarcosHelmer Barcos
634310
Thank you for your answer and for the example! Unfortunately, theplaceholderis not what I need. A user should have possibility to edit earlier entered text using the text input. The placeholder does not give the user such possibility. As for the stylesheet, that is definitely not the cause (checked by commenting out all the stylesheets from my minimalistic example).
– yaskovdev
Dec 12 '18 at 6:30
1
Try whit themultiline={true}prop it lets you edit the value and shows the new one correctly. I edit my Expo please take a look there
– Helmer Barcos
Dec 12 '18 at 13:09
Thank you. Decided to implement the workaround you proposed (withmultiline={true}). Updated my question.
– yaskovdev
Jan 2 at 14:34
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%2f53732372%2ftextinput-from-react-native-does-not-show-entered-text%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
The problem is that you are not making proper use of the corresponding property or props of the TextInput Component. For a better understanding of their use, please read the official API documentation from React Native components in this case TextInput Component Documentation
You need to use the placeholder prop and it should works. It could be that there is another mistake on your StylesSheet.
I have created an Expo example for you just for showing the correct way. You can add your own code there if you want to experiment with it.
answered Dec 11 '18 at 22:15
Helmer BarcosHelmer Barcos
634310
Thank you for your answer and for the example! Unfortunately, theplaceholderis not what I need. A user should have possibility to edit earlier entered text using the text input. The placeholder does not give the user such possibility. As for the stylesheet, that is definitely not the cause (checked by commenting out all the stylesheets from my minimalistic example).
– yaskovdev
Dec 12 '18 at 6:30
1
Try whit themultiline={true}prop it lets you edit the value and shows the new one correctly. I edit my Expo please take a look there
– Helmer Barcos
Dec 12 '18 at 13:09
Thank you. Decided to implement the workaround you proposed (withmultiline={true}). Updated my question.
– yaskovdev
Jan 2 at 14:34
add a comment |
The problem is that you are not making proper use of the corresponding property or props of the TextInput Component. For a better understanding of their use, please read the official API documentation from React Native components in this case TextInput Component Documentation
You need to use the placeholder prop and it should works. It could be that there is another mistake on your StylesSheet.
I have created an Expo example for you just for showing the correct way. You can add your own code there if you want to experiment with it.
answered Dec 11 '18 at 22:15
Helmer BarcosHelmer Barcos
634310
Thank you for your answer and for the example! Unfortunately, theplaceholderis not what I need. A user should have possibility to edit earlier entered text using the text input. The placeholder does not give the user such possibility. As for the stylesheet, that is definitely not the cause (checked by commenting out all the stylesheets from my minimalistic example).
– yaskovdev
Dec 12 '18 at 6:30
1
Try whit themultiline={true}prop it lets you edit the value and shows the new one correctly. I edit my Expo please take a look there
– Helmer Barcos
Dec 12 '18 at 13:09
Thank you. Decided to implement the workaround you proposed (withmultiline={true}). Updated my question.
– yaskovdev
Jan 2 at 14:34
add a comment |
The problem is that you are not making proper use of the corresponding property or props of the TextInput Component. For a better understanding of their use, please read the official API documentation from React Native components in this case TextInput Component Documentation
You need to use the placeholder prop and it should works. It could be that there is another mistake on your StylesSheet.
I have created an Expo example for you just for showing the correct way. You can add your own code there if you want to experiment with it.
answered Dec 11 '18 at 22:15
Helmer BarcosHelmer Barcos
634310
The problem is that you are not making proper use of the corresponding property or props of the TextInput Component. For a better understanding of their use, please read the official API documentation from React Native components in this case TextInput Component Documentation
You need to use the placeholder prop and it should works. It could be that there is another mistake on your StylesSheet.
I have created an Expo example for you just for showing the correct way. You can add your own code there if you want to experiment with it.
answered Dec 11 '18 at 22:15
Helmer BarcosHelmer Barcos
634310
answered Dec 11 '18 at 22:15
Helmer BarcosHelmer Barcos
634310
answered Dec 11 '18 at 22:15
Helmer BarcosHelmer Barcos
634310
answered Dec 11 '18 at 22:15
Helmer BarcosHelmer Barcos
634310
634310
Thank you for your answer and for the example! Unfortunately, theplaceholderis not what I need. A user should have possibility to edit earlier entered text using the text input. The placeholder does not give the user such possibility. As for the stylesheet, that is definitely not the cause (checked by commenting out all the stylesheets from my minimalistic example).
– yaskovdev
Dec 12 '18 at 6:30
1
Try whit themultiline={true}prop it lets you edit the value and shows the new one correctly. I edit my Expo please take a look there
– Helmer Barcos
Dec 12 '18 at 13:09
Thank you. Decided to implement the workaround you proposed (withmultiline={true}). Updated my question.
– yaskovdev
Jan 2 at 14:34
add a comment |
Thank you for your answer and for the example! Unfortunately, theplaceholderis not what I need. A user should have possibility to edit earlier entered text using the text input. The placeholder does not give the user such possibility. As for the stylesheet, that is definitely not the cause (checked by commenting out all the stylesheets from my minimalistic example).
– yaskovdev
Dec 12 '18 at 6:30
1
Try whit themultiline={true}prop it lets you edit the value and shows the new one correctly. I edit my Expo please take a look there
– Helmer Barcos
Dec 12 '18 at 13:09
Thank you. Decided to implement the workaround you proposed (withmultiline={true}). Updated my question.
– yaskovdev
Jan 2 at 14:34
Thank you for your answer and for the example! Unfortunately, the
placeholder is not what I need. A user should have possibility to edit earlier entered text using the text input. The placeholder does not give the user such possibility. As for the stylesheet, that is definitely not the cause (checked by commenting out all the stylesheets from my minimalistic example).– yaskovdev
Dec 12 '18 at 6:30
Thank you for your answer and for the example! Unfortunately, the
placeholder is not what I need. A user should have possibility to edit earlier entered text using the text input. The placeholder does not give the user such possibility. As for the stylesheet, that is definitely not the cause (checked by commenting out all the stylesheets from my minimalistic example).– yaskovdev
Dec 12 '18 at 6:30
1
1
Try whit the
multiline={true} prop it lets you edit the value and shows the new one correctly. I edit my Expo please take a look there– Helmer Barcos
Dec 12 '18 at 13:09
Try whit the
multiline={true} prop it lets you edit the value and shows the new one correctly. I edit my Expo please take a look there– Helmer Barcos
Dec 12 '18 at 13:09
Thank you. Decided to implement the workaround you proposed (with
multiline={true}). Updated my question.– yaskovdev
Jan 2 at 14:34
Thank you. Decided to implement the workaround you proposed (with
multiline={true}). Updated my question.– yaskovdev
Jan 2 at 14:34
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%2f53732372%2ftextinput-from-react-native-does-not-show-entered-text%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
I think your are making some mistake in the styles. It is the TextInput component from react-native itself? cCan you please share a Minimal, Complete, and Verifiable example
– Helmer Barcos
Dec 11 '18 at 21:23
@HelmerBarcos, thank you for the quick comment. I am going to prepare the smallest possible project that reproduces the issue and update the question with the link to it.
– yaskovdev
Dec 11 '18 at 21:26
on Expo do you mean? it would be nice!
– Helmer Barcos
Dec 11 '18 at 21:28
Just created the project to reproduce using Expo: github.com/yaskovdev/sandbox/blob/master/…
– yaskovdev
Dec 11 '18 at 21:51
1
Good question. I just found out I have the same issue in my app. Weird behaviour
– Nikhil
Dec 12 '18 at 5:57