Questions tagged [react-native-textinput]
The react-native-textinput tag has no usage guidance.
react-native-textinput
253
questions
329
votes
25
answers
378k
views
React Native: How to select the next TextInput after pressing the "next" keyboard button?
I defined two TextInput fields as follows:
<TextInput
style = {styles.titleInput}
returnKeyType = {"next"}
autoFocus = {true}
placeholder = "Title" />
<TextInput
style = {...
- 3,521
13
votes
2
answers
22k
views
How to wrap text within multiline react native textInput
I am trying to implement a multiline text input in react native, but when user types the text doesn't get wrapped but gets written horizontally on the same line,
the code for my text input is as ...
12
votes
2
answers
6k
views
Keyboard dismisses while typing TextInput in nested functional component React Native
I have this strange issue, keyboard keeps closing while typing when TextInput is placed inside Child Functional Component. This issue does not exist if TextInput is placed directly under Parent ...
- 420
11
votes
1
answer
12k
views
React native TextInput box-shadow
I want to apply a shadow on TextInput, as shown here:
I am making this style, using shadow, and elevation for android:
shadowColor: colors.shadowColor,
shadowOpacity: 0.5,
shadowRadius: 3,
...
- 931
9
votes
1
answer
6k
views
React-native - TextInput decimal-pad showing comma instead of a dot on iOS
Some iOS devices seems to be showing a , (comma) instead of a . on the decimal-pad. I believe this is to do with the keyboard language / locale. Is there a way I can force the decimal-pad to show a . ...
- 1,804
7
votes
3
answers
7k
views
How to handle back button when TexInput is focused
This is a react-native question for Android.
How can I handle the back button in Android when a TextInput is focused?
BackHandler.addEventListener('hardwareBackPress'. () => {}) does not catch ...
7
votes
1
answer
3k
views
React native - Click not trigger on button when an input is focused
I'm currently building a React native mobile app on Android, and I realized that when an input is focused (for the user to type something on his keyboard), the click event doesn't apply on other ...
- 143
6
votes
2
answers
5k
views
Hide the bottom image view when showing keyboard react-native
How I can hide this picture...
Thank you for any help!
- 91
6
votes
2
answers
728
views
React Native TextInput: why does secureEntryText shift outside of input box and have ellipsis?
I have TextInput components in my React Native app, and when I added secureEntryText: 'true' for the password input, I noticed two things:
1) As I'm typing the password, the left edge of the typed ...
- 1,111
5
votes
3
answers
4k
views
My React Native Text Input is losing focus after each character is entered
I have a TextBox Component which renders an Input box in my React Native app. It uses react-native-paper:
import * as React from 'react';
import {View} from 'react-native';
import {TextInput} from '...
- 3,693
5
votes
1
answer
3k
views
React native: Android soft keyboard push the View up
I have made one custom animated bottom sheet. It has two snap points. It starts top of the screen, if scroll the Animated card down it will come middle of the screen , again scroll down the card it ...
- 3,253
5
votes
0
answers
2k
views
TextInput with securTextEntry automatically clear when type something after losing the focus
I have an TextInput with secureTextEntry set as true. When I do the following steps this input unnecessarily clear all it's content:
Type something in the TextInput
Make any action to lose focus (as ...
4
votes
2
answers
2k
views
Override/Disable iOS Smart Punctuation in TextInput
React Native 0.59.9 with device running iOS 11, and Smart Punctuation enabled. This iOS feature automatically converts entered text into more visually-pleasing notations.
Examples:
double hyphen --...
- 2,671
4
votes
2
answers
4k
views
TextInput - different height in Android vs iOS
I'm quite new to React Native and so far most of my testing has been in the iOS simulator. Now I'm cleaning up the small issues in the appearance in the Android Emulator. I'm struggling with one ...
- 959
4
votes
3
answers
25k
views
Textinput minimum length React native
Is there a way to limit the textinput between a minimum length and maximum length. Suppose I want to limit the textinput length between 5 and 15, how do I do that ?
- 269
4
votes
1
answer
8k
views
react native text input keyboard how to show dot instead of comma?
I have an issue in react-native text input ios and I want to show a numeric keyboard. Here is the code that describes very well:
<TextInput
keyboardType={'numeric'}
onChangeText={(...
- 148
4
votes
1
answer
2k
views
TextInput on React-native-paper is not working
I wanted to get an input on Card from react native paper. I tried to put the textInput in card, card.title, card.content or card.actions, and it is not working, what am I doing wrong? is there any ...
- 612
4
votes
0
answers
493
views
React Native Textinput backspace won't fire if textinput value is empty in Android
As titled,
I need the backspace event to alter other states in the component.
const onKeyPressHandler = ({ nativeEvent }) => {
if (nativeEvent.key === 'Backspace') {
if (
!...
- 1,702
4
votes
0
answers
694
views
Prevent ScrollView from scrolling to TextInput on focus or edit. React Native. Android
I have a couple of views that I have implemented a way for the user to drag them around the screen to place them where they want them. Each of these views has an editable text field inside of them. (...
- 57
4
votes
0
answers
1k
views
React-navigation focus on input blurs immediately when going back to previous screen
I want to focus on a textinput when I navigate to a new screen. This works when I add a screen to the stack, but not when I go back in the stack.
Instead, the input focuses for a second and blurs ...
- 4,948
4
votes
0
answers
873
views
Horizontal scrollview auto scroll if textInput text is long enough
I've create a tab application with a paging horizontal scroll view has 3 pages like this
<ScrollView
showsHorizontalScrollIndicator={false}
style={{ flex: 1 }}
contentContainerStyle={{ ...
- 2,203
3
votes
2
answers
4k
views
Problem Keyboard hide after write one char in TextInput (textinput inside Flatlist Header)
i spent two days on this problem , the problem is :
when i placed a TextInput inside a Flatlist , the behavior of the TextInput Changed , the Keyboard lose focus after every character writed.
Version
...
- 83
3
votes
1
answer
8k
views
How to display search type Android keyboard in react-native
I've got a text input in my app which I use as a search bar and I know that Android has an API to display a search type keyboard and I'm wondering how I can use it in react-native.
I've looked in the ...
3
votes
3
answers
5k
views
How to get the current number of lines in String of TextInput?
After entering text in TextInput
I want to know the currunt number of lines in TextInput.
Or
The current number of strings is also possible.
I've tried string.split('\n').length, but this code does ...
- 1,195
3
votes
2
answers
5k
views
TextInput clears text when secureTextEntry is true
Hello I am using TextInput of react native and there is an eye option to view or hide password. When I set secureTextEntry to true and type another character in input it clears all previous data and ...
- 291
3
votes
1
answer
2k
views
Keyboard closed on click on button in react native
I have creating a comment modal in which user can add comment. This section has a list of comments and a text input field to enter comments and a button to submit comment but the problem is the I ...
- 131
3
votes
2
answers
1k
views
Press on textinput hides modal react-native-modal
I am rendering Flatlist which render list of items each item have button and modal inside it when the button pressed the modal shall open, each modal have some text inputs inside it
so the hierarchy ...
3
votes
1
answer
649
views
Change color of single word in react native textinput
Is it possible to change the color of a single word within a textinput in react native?
For example, when mentioning someone in a textinput when commenting:
Hello @user
I would like "@user" ...
- 2,221
3
votes
1
answer
866
views
ReactNative - How to exclude format when using paste on TextInput
React Native : 0.61.4
If paste formatted text into my TextInput, the styles of TextInput are ignored.
<TextInput
multiline
scrollEnabled={false}
inputAccessoryViewID="reviewButton"
...
- 1,195
3
votes
1
answer
6k
views
How to use react native TextInput selection props?
I have the following simple component:
function TestComp() {
const [selection, setselection] = React.useState({ start: 0, end: 0 });
return (
<View style={{ justifyContent: "...
- 4,948
3
votes
2
answers
6k
views
React Native TypeScript TextInput not working
I am trying to learn react native by doing a basic application. I followed many tutorials available online and made the following class for a login screen:
import React, { Component } from "react";
...
- 7,985
3
votes
1
answer
1k
views
react-native get selection text start and end from text component
I used Text component reference:
https://facebook.github.io/react-native/docs/text.html
with property selectable={true}, is there any solution to get the user text selection start and end on Text ...
- 31
3
votes
0
answers
535
views
Why is my TextInput out of sync with state when I give rapid inputs?
I'm creating a typing race game with React Native which is producing an unexpected bug on Android.
When the user finishes typing a word/spacebar, I set the input state to an empty string.
However, if ...
- 43
3
votes
0
answers
349
views
Determining how many characters can fit on a single line of TextInput
I have a TextInput that has a dynamic placeholder which can extend beyond a single line. I want to truncate this placeholder with an ellipses before it starts wrapping to the next line. The ...
- 1,925
3
votes
1
answer
3k
views
How to make TextInput only accept up to 2 decimal places with a max value?
Here's my code snippet of a TextInput component in React-Native:
The render on the simulator looks like this:
I want to make the input field only accept decimal number <= 11.99 to mimic the ...
- 754
3
votes
0
answers
997
views
React Native TextInput - How can I change the keyboard language dynamically
Problem:
I have two TextInput fields one for the username that must be in English and the second input is for the name that will take the name in Arabic so here I need to switch the keyboard language ...
- 963
2
votes
3
answers
10k
views
Props in custom components React native + Typescript
I've got a problem with access to onChangeText in my custom component.
Here is the code of my component:
import React from 'react';
import {TextInput, StyleSheet} from 'react-native';
type Props=
{
...
2
votes
1
answer
5k
views
Passing refs on React Native with TypeScript: (property) React.MutableRefObject<null>.current: null Object is possibly 'null'.ts(2531)
I have several fields on a React Native form and I would like that the focus jump from one to the next one each time the user validate the field with the virtual keyboard.
I came up with something ...
- 3,207
2
votes
1
answer
15k
views
Force focus ReactNative TextInput
I'm having trouble force focussing a react native TextInput field.
It's focused when the page loads with autofocus={true}.
But after blurring I would need to press the text input field, but that's ...
2
votes
3
answers
2k
views
How to add red asterisk in react native TextInput placeholder?
Inside TextInput, I want to have a red asterisk after placeholder text which is grey in color.
<TextInput
keyboardType="numeric"
placeholder={t('Enter OTP')}
...
- 161
2
votes
3
answers
8k
views
React Native Text Input focus with useRef using Typescript
I have an issue with focusing the next input in React Native. I use just one input called GeneralTextInput.tsx in the whole app.
In this example I have 2 inputs ==> 1.Group Name, 2.Group ...
- 156
2
votes
1
answer
823
views
React Native TextInput - Scroll to left when value is updated
I have a single line TextInput that can be updated via other parts of the UI.
My issue is that sometimes, the text can be long. And in this case, when I update the value, the TextInput scrolls all the ...
- 589
2
votes
4
answers
9k
views
How to get values from TextInput
I'm stuck in a apparently simple function.
How can I get a value (string) from a TextInput?
Here an extract of the code:
const Insert = props => {
const [enteredName, setEnteredName] = useState(...
- 565
2
votes
1
answer
6k
views
React Native Error: Attempting to run JS driven animation on animated node that has been moved to "native" earlier by starting an animation
I am using version 0.61.4 of React Naive and I found it a strange problem.
When focusing on TextInput(with default props) I get the following error:
Attempting to run JS driven animation on ...
- 18.3k
2
votes
2
answers
3k
views
How to use the useState hook to handle multiple textInputs that are dynamic from a FlatList in React Native?
I have a functional component that is a screen and I need to handle some state. I do not want to refactor my code to make it a class component and I would like to make use of hooks. I have a component ...
- 33
2
votes
1
answer
2k
views
Stopping multiline textInput component to scroll inside ScrollView
I am working on React Native in which I want to stop multiline textinput component's scroll inside ScrollView. How we can achieve it? Android Specially!
2
votes
1
answer
1k
views
React Native TextInput color issue in fullscreen landscape mode
I have a simple TextInput in my react-native Android app. And it opens as fullscreen when focused in landscape mode. However in the fullscreen keyboard mode, both the background and foreground is ...
- 2,384
2
votes
3
answers
2k
views
TextInput in FlatList Item
I have a problem like picture below:
Text
As you guy can see I have info on every item: name and stock. Now I want to update stock on single item by type a number to text Input But when I type 3 into ...
- 59
2
votes
2
answers
3k
views
How to disable backspace key in TextInput in React Native?
I'm using TextInput and i'd like the first symbol in the TextInput to be constant. So if the length of the text is one symbol i could ignore backspaces and onChangeText event could be ignored.
The ...
- 21
2
votes
1
answer
130
views
Long text inside TextInput aligment in React native
I have a TextInput in React native. If i change the value using keyboard it works fine but, if i change it programmatically using a useState var then, if the text is too long, the text alignment ...
- 105