Questions tagged [react-native-textinput]

240 questions
12
votes
2 answers

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 Component. Here is my code const SignInScreenC = props…
VjLxmi
  • 400
  • 1
  • 4
  • 17
12
votes
2 answers

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 follows
Naveed Sheriffdeen
  • 940
  • 6
  • 18
  • 37
11
votes
1 answer

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, shadowOffset: { height: 0, width:…
ketimaBU
  • 901
  • 4
  • 15
  • 35
8
votes
1 answer

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 . regardless of keyboard language /…
Abdul Sadik Yalcin
  • 1,744
  • 2
  • 19
  • 50
7
votes
1 answer

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 elements. For instance, when the user is typing…
7
votes
3 answers

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 any event if TextInput is focused. It automatically…
6
votes
2 answers

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 password shifts out and to the left of the input…
5
votes
1 answer

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 will come bottom of the screen. If user scroll the…
Krisna
  • 2,854
  • 2
  • 24
  • 66
5
votes
2 answers

Hide the bottom image view when showing keyboard react-native

How I can hide this picture... Thank you for any help!
4
votes
0 answers

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 ( !TextInputValue.trim() && …
Fred A
  • 1,602
  • 1
  • 24
  • 41
4
votes
0 answers

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. (Think Sticky notes). In order to put the sticky…
4
votes
0 answers

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 example Keyboard.dismiss()) Tap TextInput again…
4
votes
1 answer

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 work around on this? Here is the code I am working…
4
votes
1 answer

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 (
Ryan Pergent
  • 4,432
  • 3
  • 36
  • 78
4
votes
0 answers

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 immediately. Here is what I get: Screen A is first…
Ryan Pergent
  • 4,432
  • 3
  • 36
  • 78
1
2 3
15 16