I have a very simple TextInput component on a screen like and an onEndEditing method like so:
<TextInput
style={Styles.input}
placeholder='testing placeholder'
placeholderTextColor={Colors.gray}
onEndEditing={this.onEndEditing}
selectionColor={Colors.darkCursor}>
</TextInput>
onEndEditing = async (event): Promise<void> => {
console.log('in update');
};
It is inside of a FlatList which is wrapped in a KeyboardAvoidingView.
On Android, when the TextInput is tapped on and focused, if the onscreen keyboard pops up and overlaps the input, the input will lose focus and must be tapped on again. However, if the keyboard DOES NOT overlap the input, the input will keep its original focus. This does not happen on iOS.
I'm noticing that the onEndEditing method is called when the input loses focus from the keyboard overlap.
Update: Wrapping the FlatList in a ScrollView fixes it for whatever reason, but obviously that is not a good solution.
Related
When the keyboard is visible, I want to be able to press on one of the cells without having the keyboard hide first. Ideally it would be pressed and the keyboard hides after.
I have tried to set the address cell component's onStartShouldSetResponder to true and that had no effect.
<Pressable
onStartShouldSetResponder={() => true}
...
Is there something I am missing with how touch gestures are handled in React Native?
Adding keyboardShouldPersistTaps="always" to the FlatList component that renders the address cells seemed to solve this issue on iOS (have not tested on Android).
<FlatList
keyboardShouldPersistTaps="always"
...
/>
I'm using Gifted Chat for react native, but I'm getting strange behavior. When keyboard is down, messages are fine. When I tap on the keyboard to have it come up, it's also fine.. but the moment I start typing, the messages jump up. The only way to get them back again is to close the keyboard. Here is how it looks:
What am I doing wrong here? Here is the code:
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior="padding"
keyboardVerticalOffset={Platform.select({
ios: () => 0,
android: () => 100
})()}
>
<GiftedChat
handleChoosePhoto={handleChoosePhoto}
forceGetKeyboardHeight
showUserAvatar
renderChatFooter={renderChatFooter}
isAnimated
scrollToBottom
onInputTextChanged={e => emitTyping(user._id, otherUser, e)}
showAvatarForEveryMessage
messages={messages}
onSend={msg => onSend(msg)}
user={user}
/>
</KeyboardAvoidingView>
This component is returned as a functional component, not wrapped in anything else and not in conflict with anything else. The strange thing is that if I get rid of behavior="padding", it doesn't jump... but then the TextInput element is not visible.
I fixed this by removing forceGetKeyboardHeight
You don't need KeyboardAvoidingView in giftedChat the component handles it's own keyboard so just remove that component
Focussing of textinput of last item in flatlist appears keyboard but immeadiately keyboard disappears. In order to solve this,using a property removeClippedSubviews={false} of flatlist fixes this issue but it causes to another issue i.e,
Whenever an item is focussed aleardy in flatlist and tries to scrolling up the items, items are scrolling upto pagination limit and then right after items are scrolling down to the item that is focussed already of flatlist(focussed item appears on top of flatlist interms of visibility).Since it is not allowing scrolling up further.
Is there any property or workaround to fix these two issues? Do anyone got this issue? please provide solution if there is any?
Flatlist without "removeClippedSubviews={false}" property, scrolling is fine but for focussing of textinput of last item of flatlist causes keyboard appears and disappears.(keyboard should not disappear)
2.Using SafeAreaView, keeping flatlist in scrollview are also not working.
<FlatList style={styles.flatListSection}
keyExtractor={(item, index) => index.toString()}
data={this.state.serverData}
renderItem={this.iterateFlatListItem}
ItemSeparatorComponent={ () => this.seperatorComponent() }
ListFooterComponent={this.renderFooter.bind(this)}
onEndReachedThreshold={0.5}
onEndReached={()=>this.handleLoadMore()}
keyboardShouldPersistTaps='always'
extraData={this.props}
ref={ (r) => this.refFlatlist=r }/>
Scrolling up should work without scroll down automatically when textinput is focussed
Focus of text input of last item of flatlist, keyboard should not diappear once it appears unleass we dismiss it manually
I am creating a custom dropdown component in React Native. I want to close it contents, when user presses screen outside of the component on any other part of the application.
However, I cannot know if user pressed outside the component. Is there a global OnPress event that can accessed or some other way, kindly let me know.
Edited:
add a logic when you click dropdown it should create a transparent view covering wholescreen in a absolute position.
Do it Like this:
// inside render
<Fragment>
<Nested>
<DropDown/>
</Nested>
{isDrop &&
<View style={styles.container} // height:'100%', width:'100%', backgroundColor:transparent , position: 'absolute'
//Trigger for pressing outside DropDown
onResponderStart={() => { condition for dropdown}}
//Required to start interacting with touches
onStartShouldSetResponder={(e) => {return true}}/>}
</Fragment>
DropDown component and view with touch must be the same level
I have a component that is basically a TouchableOpacity with a few TextInputs wrapped inside.
It has two states: expanded and unExpanded. When it's unExpanded, the TextInputs are disabled, and by clicking the TouchableOpacity it transits to the expanded state, where TouchableOpacity is disabled and TextInputs are editable.
However, the disabled TextInputs are taking away the clicks. TouchableOpacity is only clickable in the empty space. How can I make the entire TouchableOpacity to be clickable?
There is a prop in react-native that controls whether or not a View can be the target of touch events. Give your disabled TextInput's pointerEvents={'none'} prop like this;
<TextInput pointerEvents={'none'} />