Screenshot
i want to hidden this area
What shall I do?
thanks
<TextInput
returnKeyType={'default'}
autoFocus
style={{ paddingBottom: 97,height: 238,padding: 0}}
// blurOnSubmit={true}
multiline={true}
// onSubmitEditing={onConfirm}
// maxLength={30}
// autoCorrect={false}
clearButtonMode={'always'}
textContentType={'none'}
placeholder={'Please enter note'}
placeholderTextColor={'#454545'}
value={note}
enablesReturnKeyAutomatically
caretHidden
keyboardType="default"
blurOnSubmit={false}
contextMenuHidden={false}
inputAccessoryViewID={inputAccessoryViewID}
// disableFullscreenUI={false}
onChangeText={noteChanged}
></TextInput>
Remove these props from TextInput
enablesReturnKeyAutomatically
returnKeyType={'default'}
Related
I'm using react-native-paper TextInput to show email icon on the left side of text input and that icon should be green (#22C55E) but it's still showing the default color.
<TextInput
placeholder={t('Email')}
style={styles.textInput}
mode="outlined"
outlineColor={Colors.transparent}
activeOutlineColor={Colors.hostessGreen}
theme={{ roundness: 16 }}
left={
<TextInput.Icon
icon={'email-outline'}
color="#22C55E"
style={styles.leftIcon as StyleProp<ViewStyle>}
size={responsiveFontSize(3)}
/>
}
/>
You have to add iconColor='#22C55E' add in place of color="#22C55E" props in TextInput.Icon.you will be able to change color easily.
<TextInput
placeholder={t('Email')}
style={styles.textInput}
mode="outlined"
outlineColor={Colors.transparent}
activeOutlineColor={Colors.hostessGreen}
theme={{ roundness: 16 }}
left={
<TextInput.Icon
icon={'email-outline'}
iconColor="#22C55E"
style={styles.leftIcon as StyleProp<ViewStyle>}
size={responsiveFontSize(3)}
/>
}
/>
I have a number of TextInput in my react-native application and I want that if user clicks on next key, the next input must be focused. I am trying to do this with returnKeyType prop passed to all the TextInput. However this doesn't work as intended ,i.e. next input is not focused. And my code for same looks like
<TextInput
ref={firstInputForDaysInterestTextInputRef}
value={closingCosts.firstInputForDaysInterest}
onChangeText={value =>
onStateChange('firstInputForDaysInterest', value)
}
onEndEditing={event =>
onEndEditing(
'firstInputForDaysInterest',
event.nativeEvent.text,
)
}
placeholderTextColor={colors.placeholderColor}
placeholder={constants.common.zeroPlaceholder}
autoCapitalize="none"
returnKeyType="next"
onFocus={() => onFocus(elementName)}
keyboardType="decimal-pad"
style={[
styles.textInput,
styles.textInputWidth,
styles.textInputMargin,
]}
/>
The workaround that I thought was passing ref and then focusing the next input onEndEditing, but if I does this the textinput will not be closed when I tap outside the textInput. So how can I make my text input to focus on next one?
You can use onSubmitEditing prop to focus the next input for example:
const firstInputForDaysInterestTextInputRef = React.useRef()
const secondInputForDaysInterestTextInputRef = React.useRef()
return (
<View style={styles.container}>
<TextInput
ref={firstInputForDaysInterestTextInputRef}
placeholderTextColor={'gray'}
placeholder={'first'}
autoCapitalize="none"
returnKeyType="next"
keyboardType="decimal-pad"
onSubmitEditing={()=>secondInputForDaysInterestTextInputRef.current?.focus()}
style={[
styles.textInput,
styles.textInputWidth,
styles.textInputMargin,
]}
/>
<TextInput
ref={secondInputForDaysInterestTextInputRef}
placeholderTextColor={'gray'}
placeholder={'second'}
autoCapitalize="none"
returnKeyType="next"
onFocus={() => alert('I am focused !')}
keyboardType="decimal-pad"
style={[
styles.textInput,
styles.textInputWidth,
styles.textInputMargin,
]}
/>
</View>
);
Example on Snack
If you want to hide the textinput (hide keyboard) when pressing somewhere else in the app, wrap it it like this for example:
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.container}>
<TextInput />
</View>
</TouchableWithoutFeedback>
Don't forget to import TouchableWithoutFeedback and Keyboard from 'react-native'
I'm using react-native-paper Modal.
I used KeyboardAvoidingView but its not working. It working fine in android ,But it's not working in IOS.
I have specify behaviour as padding, position, height of KeyboardAvoidingView but it doesn't work
Please give any solution.
Screenshot on Android [1]: https://i.stack.imgur.com/UETKh.jpg
Screenshot on IOS[2]: https://i.stack.imgur.com/SIDib.png
My code is as below:
<Modal
contentContainerStyle={{ backgroundColor: 'white', padding: 20, borderRadius: 10, marginLeft: 30, marginRight: 30 }}
animationType="fade"
visible={this.state.dialogVisible}
>
<KeyboardAvoidingView behavior='padding' enabled>
<Text style={styles.descDialogInqueryFor}> Inquire for </Text>
<TextInput
autoFocus={true}
maxLength={50}
underlineColorAndroid={'transparent'}
style={styles.inpuTextDialog}
placeholder='Name'
placeholderTextColor='#C7C7CD'
onChangeText={(text) => this.setState({ name: text })}
></TextInput>
<TextInput
autoCompleteType={'email'}
maxLength={40}
underlineColorAndroid={'transparent'}
style={styles.inpuTextDialog}
placeholder='Email'
placeholderTextColor='#C7C7CD'
onChangeText={(text) => this.validateEmail(text)}
></TextInput>
<Text style={[styles.errorText, { display: this.state.displayEmailError }]}>Invalid email address</Text>
<TextInput
autoCompleteType={'email'}
maxLength={40}
underlineColorAndroid={'transparent'}
style={styles.inpuTextDialog}
placeholder='Email'
placeholderTextColor='#C7C7CD'
onChangeText={(text) => this.validateEmail(text)}
></TextInput>
<Text style={[styles.errorText, { display: this.state.displayPhoneError }]}>Invalid phone number</Text>
<TextInput
maxLength={30}
underlineColorAndroid={'transparent'}
style={styles.inpuTextDialog}
placeholder='Subject'
placeholderTextColor='#C7C7CD'
onChangeText={(text) => this.setState({ subject: text })}
></TextInput>
<TextInput
blurOnSubmit={true}
multiline={true}
underlineColorAndroid={'transparent'}
style={styles.messageInpuText}
placeholder='Message'
placeholderTextColor='#C7C7CD'
onChangeText={(text) => this.setState({ message: text })}
></TextInput>
<Button style={styles.sendButtonDialog} onPress={() => this.sendInquire()}>
<Text style={styles.sendButtonText}>Send</Text>
</Button>
</KeyboardAvoidingView>
</Modal>
You just add KeyboardSpacer in the Modal
In my experience, if you don't want any issue about keyboard you need using scrollview and observer keyboard show/hide for animal fix layout. Custom yourself.
I have get this issue too and because I support many version ios so using KeyboardAvoidingView can not fix all of them and sometime get some hidden issue just appear when you have many user using special version.
Android auto scroll content when layout change so you no need to do anything to fix layout when keyboard show. If you check KeyboardAvoidingView for ios maybe it effects to android. So observer keyboard show and custom yourself will be best that is mine sugess.
PS I remember KeyboardAvoidingView have contentOffSet attribute to fix animation scroll when keyboard change state. But I very confused how to using it fixable for all version ios and after many trying time I custom myself. Hope my experience can help you see the right way in your case
I've been trying to get my TextInput to focus (open keyboard) when I tap anywhere within the (gray) multiline box, but it is only detecting taps on lines with text (or the placeholder).
Is there any way to force the TextInput to focus when I click anywhere on the gray area?
<ScrollView style={{ flex: 1}}>
<View style = {Style.dropdownField}>
<Dropdown
label={'Motivo'}
data={this.props.remiseExcusesData}
value={this.state.remiseExcuses.value}
onChangeText={(value,index, data)=> this.setState({remiseExcuses:data[index]})}
/>
</View>
<View style = {{ height:150, marginHorizontal:20, backgroundColor:'#f9f9f9', marginTop:20}}>
<TextInput
style={Style.minitextInput}
placeholder={'Escribir motivo'}
textAlign={'left'}
autoCorrect={false}
autoCapitalize={'none'}
underlineColorAndroid='transparent'
multiline
onChangeText={(text) => this.setState({motive:text}) }
value={this.state.motive}
onFocus={() => console.log('Fire only on tap')}
/>
</View>
</ScrollView>
You can use this for handle the focus of gray box.
<TouchableOpacity style = {{ height:150, marginHorizontal:20, backgroundColor:'#f9f9f9', marginTop:20}} onPress={this.onPressGrayBox}>
<TextInput
ref="textInput"
style={{ height: 150, textAlignVertical: 'top' }}
placeholder={'Escribir motivo'}
textAlign={'left'}
autoCorrect={false}
autoCapitalize={'none'}
underlineColorAndroid='transparent'
multiline
onChangeText={(text) => this.setState({motive:text}) }
value={this.state.motive}
/>
</TouchableOpacity>
declare the method to handle the action, this will help to set textinput focus automatically.
onPressGrayBox=()=>{
this.refs.textInput.focus()
}
This steps helps me, please use
You can handle something like
<View style = {{ height:150, marginHorizontal:20, backgroundColor:'#f9f9f9', marginTop:20}}>
<TextInput
style={{ height: 150, textAlignVertical: 'top' }}
placeholder={'Escribir motivo'}
textAlign={'left'}
autoCorrect={false}
autoCapitalize={'none'}
underlineColorAndroid='transparent'
multiline
onChangeText={(text) => this.setState({motive:text}) }
value={this.state.motive}
onFocus={() => console.log('Fire only on tap')}
/>
</View>
I have some TextInput components inside a ScrollView. The problem si that if I am closing the keyboard with return or android back button, the TextInput selected is still focused and I have to tap two times to focus another TextInput.
Here are the components I am using:
<ScrollView style = {styles.scroll}>
<KeyboardAvoidingView styles={styles.container} behavior = 'padding' enabled>
<View style={styles.header1}><Text style={styles.title}>Blue Line Notes</Text></View>
<View style={styles.headerDesign}></View>
<View style={styles.header2}></View>
<View style = {styles.items}>
<TextInput
style = {styles.subject}
onChangeText={(noteTitle)=> this.setState({noteTitle})}
value={this.state.noteTitle}
placeholder='Raport Number/Note Indentifier'
placeholderTextColor='grey'
underlineColorAndroid='transparent'>
</TextInput>
</View>
<View style = {styles.items}>
<TextInput
style = {styles.calltype}
multiline = {true}
numberOfLines = {3}
onChangeText={(callType)=> this.setState({callType})}
value={this.state.callType}
placeholder='Call Type/Other Information'
placeholderTextColor='grey'
underlineColorAndroid='transparent'>
</TextInput>
</View>
<View style = {styles.items}>
<TextInput
multiline = {true}
numberOfLines = {8}
style={styles.textInput}
placeholder='Notes'
onChangeText={(noteText)=> this.setState({noteText})}
value={this.state.noteText}
placeholderTextColor='grey'
underlineColorAndroid='transparent'>
</TextInput>
</View>
<View style = {styles.items}>
<TouchableOpacity onPress = { this.saveNote.bind(this)} style={styles.addButton}>
<Text style={styles.addButtonText}>SAVE</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
</ScrollView>
What I think I need to do is to lose the focus of the TextInput when the keyboard closes. That is something I am struggling with. Can someone show me how to do it properly?
Try keyboardShouldPersistTaps="handled" as ScrollView attribute. I tried the same on your given code and it worked. You can look more into the property details here.
Hope this will help!