I am making a comments section for my app with React-Native and building for ios. When the keyboard is up to post a comment I can't immedietley press the TouchableOpacity button that submits the post. I need to first press it to close the keyboard then press again to submit.
const CommentCreation = React.forwardRef((props, ref) => {
return (
<View style={commentCreationStyles.container} >
<TextInput
value={props.message}
ref={ref}
style={commentCreationStyles.input}
onChangeText={val => props.setMessage(val)}
autoFocus={false}
multiline={true}
returnKeyType={'next'}
placeholder={'Enter Your Comment'}
numberOfLines={5}
replyBool={props.replyBool}
/>
<TouchableOpacity
style={commentCreationStyles.submitButton}
onPress={props.addCommentEnabled ? () => {props.addComment(); Keyboard.dismiss()} : null}
>
<Ionicons name="ios-send" size={36} color="#D7D7D7" />
</TouchableOpacity>
</View>
)
})
I have tried keyboardShouldPersistTaps="handled" and its variations in conjunction with ScrollView in addition to View and replacing View. I have tried these on all levels of the tree. I'm at a loss, any help is greatly appreciated!
Add keyboardShouldPersistTaps='handled' in the first View as
<View style={commentCreationStyles.container} keyboardShouldPersistTaps='handled' >
Related
Im use this library react-native-swipe-gestures to listen to swipe left and right and inside it i have scrollview but not work ,
i search in the problem and i found that PanResonder prevent other interactions which implement in react-native-swipe-gestures library
code example :
<GestureRecognizer
// onSwipeUp={(state) =>{}}
// onSwipeDown={(state) =>{}}
onSwipeLeft={(state) => this.onSwipeLeft(state)}
onSwipeRight={(state) => this.onSwipeRight(state)}
config={{
velocityThreshold: 0.5,
directionalOffsetThreshold: 100
}}
style={Styles.baseContainer} >
<ScrollView onScroll={() => console.log('scrolled')}
style={styles.scroll_view} >
<Text style={{fontSize:96}}>Scroll this</Text>
<Text style={{fontSize:96}}>Scroll this</Text>
<Text style={{fontSize:96}}>Scroll this</Text>
<Text style={{fontSize:96}}>Scroll this</Text>
<Text style={{fontSize:96}}>Scroll this</Text>
</ScrollView>
</GestureRecognizer>
i need to fix this issue !!
Here is the code, it is very simple:
render() {
return (
<View>
<StatusBar hidden={true}/>
<View style={{height:0}}>
<Button>
<Text>this button should disappears</Text>
</Button>
</View>
<View style={{height:400}}>
<Text>other view</Text>
</View>
</View>
);
}
And here is the output screenshot:
As you can see, because the height of the view is 0, so the button's container is invisible, but why is the button still visible?
After some work, I found out that I have to set the 'other view' 's backgroundColor&height to overlap the button, like that:
<View style={{height:400,backgroundColor:'white'}}>
<Text>other view</Text>
</View>
Now the button will be invisible.
It's so strange, just Button component, I have tried several other components, they are all ok, is it a bug of Button?
Thanks Wong Kim Hau for his reminding, the Button component is from 'native-base', not 'react native'
I'm using react-native v0.44.0, native-base 2.1.3
just use the default Button component from 'react-native', it work fine.
I have a TextInput inside a ScrollView.
The scroll isn't working when the TextInput is on focus. This problem is only affecting Android.
setting
<ScrollView keyboardShouldPersistTaps="always"
in combination with the textInput component below (custom component that i created for text inputs to solve this issue) solved my problem:
<TouchableOpacity
activeOpacity={1}
onPress={()=>this.input.focus()}>
<View pointerEvents="none"
<TextInput
ref = {(input) => this.input = input}
/>
</View>
</TouchableOpacity>
In scrollView use keyboardShouldPersistTaps
<ScrollView keyboardShouldPersistTaps="handled">
it solve your problem
check docs here https://facebook.github.io/react-native/docs/scrollview.html#keyboarddismissmode
That is the expected behavior.
For more information Official TextInput documentation
You might want to try something like this: react-native-kayboard-aware-scroll-view
i use simple trick for TextInput and that work for me correctly .Should add this prop in TextInput :
<TextInput
multiline={true}
numberOfLines={1}
/>
This is a very good example: http://blog.arjun.io/react-native/mobile/cross-platform/2016/04/01/handling-the-keyboard-in-react-native.html
The thing that was really important for me was to add:
android:windowSoftInputMode="adjustResize"
in AndroidManifest.xml in order to focus the textInput
I handle in different ways to each platform (in Ios focus to inputText is enough,
don't forget to put this.scrollViewRef ref inside ScrollView that wrap inputText and put ref index the inputText
if (Platform.OS == 'android') {
this.inputRefs[field].measure((w, h, px, py, xPage, yPage) => {
this.scrollViewRef.scrollTo({ x: 0, y: yPage, animated: true })
this.inputRefs[field].focus()
})
}
this.inputRefs[field].focus()
I have this issue in both iOS Simulator and in real device too.
I have a Listview with Touchablehighlight. When i press the list at first, it ignores. It only functions when it is double clicked.Can anyone help me out with this.
Here i have a piece of code, that is inside my render function
<ListView dataSource= {ds.cloneWithRows(this.state.searchedAdresses)}
renderRow={this.renderAdress}
renderSeparator={this._renderSeperator}
enableEmptySections={true}
automaticallyAdjustContentInsets={false}
/>
renderAdress = (rowData, sectionID, rowID) => {
return (
<TouchableHighlight onPress = {this._onPressAddressList.bind(this,rowData.place_id,rowData.description)}underlayColor = '#a9a9a9' >
<View shouldRasterizeIOS={true} renderToHardwareTextureAndroid={true}>
<Text style={ styles.listTextInput } >{rowData.description</Text>
</View>
</TouchableHighlight>
);};
Thank you
I can think of 2 cases:
You have TextInput gaining the focus and when you tap your list view item the first time it removes focus from the input and hides the keyboard. This is described here.
They reported that this is an issue with emulator.
I want to implement show password feature in TextInput in React Native 0.30.0. I've implemented 'eye' button next to TextInput which change state of passwordHidden state variable. Here is my code:
...
<View style={[styles.passwordWrapper, styles.textInputBorder]}>
<TextInput
autoCapitalize={'none'}
autoCorrect={false}
clearButtonMode={'while-editing'}
style={[styles.textInput, styles.passwordInput]}
onChangeText={(password) => this.onPasswordChange(password)}
value={this.state.password}
secureTextEntry={this.state.passwordHidden}
multiline={false}
placeholder={Strings.password}
underlineColorAndroid={Colors.surfacePrimary}
/>
<TouchableOpacity style={styles.showPasswordButton} onPress={this.onPressShowPassword}>
<EntypoIcon color={Colors.surfacePrimary} name={this.state.passwordHidden ? 'eye' : 'eye-with-line'} size={20} />
</TouchableOpacity>
</View>
...
onPressShowPassword: function () {
var previousState = this.state.passwordHidden;
requestAnimationFrame(() => {
this.setState({
passwordHidden: !previousState,
});
});
},
Here's how password TextInput looks before clicking on button.
And after clicking:
And when I tap third time and start type then password is immediately cleared. I am not changing fontFamily in styles even in entire app.
Anybody can explain what is going on? Or just how to overcome that annoying behavior.
Workaround that is working for me, is removing focus from TextInput, when user clicks show/hide password. One way to do this, is to add ref (for example ref="password") to your TextInput and then call this.refs.password.blur()
changing the fontSize works for me:
fontSize: (this.state.showPassword) ? 24 : 23