I'm building a Login form in react native with 2 textinputs, one for the mobile phone number and one for the password. The mobile phone input also has the possibility to select the country code with a dropdown, as shown in the following images:
From the main screen component, I insert the two textinputs as custom components:
<CustomInput type="phone" style={/* ... */} ...props />
<CustomInput type="password" style={/* ... */} ...props />
Then, in the phone CustomInput I position the dropdown with position: 'absolute' and custom top/left positioning. I also used the zIndex property in order to display the dropdown above the actual TextInputs, and it works great. The dropdown is composed by a list of
<TouchableOpacity onPress={/* do stuff */}>
<Text>text</Text>
</TouchableOpacity>
While there are no problems on iOS, on Android the buttons that overlaps with the password textinput are not tapped, i.e. when I actually tap them, the underlying TextInput gains focus instead on triggering the TouchableOpacity onPress property. I tried different combinations of zIndex without success.
Is there any possible workaround for this issue, like forcing the tap priority of elements positioned one over the other?
Related
I've been using the Swipeable component from react-native-gesture-handler to handle my swipeable list items, but Swipeable is causing lag on the JS thread during the initial render, according to my profilers. So I've decided to switch to ListItem.Swipeable from React Native Elements. The initial render lag is gone, which is great, but it requires too much drag to swipe from left to right and vice versa. I've looked through the documentation of Listem.Swipeable, but I don't see any way to manipulate the drag.
Is there a way to change the drag value?
Relevant ListItemSwipeable component:
<ListItem.Swipeable
rightWidth={ScreenWidth / 2}
rightContent={() => <Buttons />}
>
<KeyboardAvoidingView style={{ flex: 1 }}>
<AccordionListItem item={item} />
</KeyboardAvoidingView>
</ListItem.Swipeable>
TextInputs at the bottom of the screen in a FlatList automatically and immediately dismiss the keyboard on focus, making it impossible to write anything in it.
The issue is reproducible easily on a blank react-native init project. I tested it in Nexus 5x simulator and real device. I reproduce the bug every time on 0.61.
Related to https://github.com/facebook/react-native/issues/13745
Just add one props in your FlatList as below:
<FlatList
keyboardDismissMode={'none'}
.....
</FlatList>
Chears.!
Just don't give the component reference to the Flatlist footer because when we update state of the component then arrow function creates a new reference that's why TextInput loses it's focus. Just return direct View to the Flatlist footer.
<FlatList
data={...}
ListFooterComponent={renderYourFooter()}
/>
or
<FlatList
data={...}
ListFooterComponent={<View>
<TextInput/>
</View>}
/>
I have a bunch of text inputs:
<View style={styles.container}>
<View style={styles.textBoxContainer}>
<TextBoxMA
style={styles.textBox}
placeholder={Labels.USERNAME_PLACEHOLDER}
value={userName}
onChangeText={this.handleTextChange("userName")}
/>
</View>
<View style={styles.textBoxContainer}>
<TextBoxMA
style={styles.textBox}
placeholder={Labels.EMAIL_PLACEHOLDER}
value={email}
onChangeText={this.handleTextChange("email")}
/>
</View>
//here I need to put a Picker, or select element in html terms
</View>
Now, if I put a Picker like this:
<View
style={styles.textBoxContainer}>
<Picker
selectedValue={documentType}
onValueChange={this.handleDocumentTypeChange}
>
<Picker.Item label="ID" value="1" />
<Picker.Item label="Passport" value="212" />
</Picker>
</View>
I get a nice, clean picker in Android. But in iOS I get a picker whose items overlap with the rest of the text boxes and it takes a lot of space. So it destroys all the layout.
I understand that native components corresponding to a dropdown list in the two platforms are different. But how do you handle this?
I've taken a look at AirBnB's app which's been written in React native. In iOS, the view containing the picker slides from the bottom when a corresponding field is clicked (like the Gender field. It looks like a text input but it's not. It just causes the picker to show). And in Android, it's just a modal view with items in the radio button form. They've probably done lots of extra work to achieve that.
Do I need to show picker depending on the platform or is there a built in way to achieve this?
You can use community solutions like
react-native-picker-select
Or
react-native-picker-modal-view
Or
react-native-picker
Or you can build your own solution and do what ever you want you can style and position and even animate your component as you like.
I am using KeyboardAvoidingView with ScrollView and TextInput. When the first few TextInput get focused, the keyboard appears and shifts the TextInput too high out of the screen.
I have tried putting the KeyboardAvoidingView as parent tag and ScrollView as child and vice versa. I've also played with props for KeyboardAvoidingView (keyboardVerticalOffset, behavior, etc). However, non of them worked. I have also tested react-native-keyboard-aware-scrollview package and did not work at all.
<KeyboardAvoidingView behavior={'position'}>
<ScrollView>
<TextInput/>
<TextInput/>
<TextInput/>
...
</ScrollView>
</KeyboardAvoidingView>
Expected behavior: When the input is located at the area, close to top, the keyboard must not shifts the screen up. (The distance between keyboard and the focused input must not be big)
You can change the props behavior={'position'} to behavior={'padding'}. In my case it solves the problem.
I have a code like this:
<View>
<View></View>
<ScrollView>
<View>
<TextInput/>
</View>
</ScrollView>
<View></View>
</View>
How can I handle it to response correctly to keyboard?
Both android and ios???
i have 2 permenant views top and bottom of the screen, this views pushed up on keyboard show
Your question is really unclear, but what I think you need is KeyboardAvoidingView.
It's a built-in React Native component that resizes based on the keyboard height.
To make sure the keyboard is not overlapping any important bits of your layout such as your text Input wrap your whole screen in KeyboardAvoidingView
https://facebook.github.io/react-native/docs/keyboardavoidingview
Solved!!
I solved it by handling the display of elements (views) on keyboard show and hide by keyboard in react native docs