onContentSizeChange doesn't seem to fire properly on Android. Event is fired on mount, but isn't fired on text height change. Identical code works fine for iOS:
<TextInput
editable = {true}
multiline = {true}
[...]
onContentSizeChange={(event) => {
this.setState({height: event.nativeEvent.contentSize.height});
}}
style={{height: Math.max(35, this.state.height)}}
/>
https://github.com/facebook/react-native/issues/6552#issuecomment-269989962
In Android onContentSizeChange is called only once
use onChange instead of onContentSizeChange.
Code
<TextInput
editable = {true}
multiline = {true}
[...]
onChange={(event) => {
this.setState({height: event.nativeEvent.contentSize.height});
}}
style={{height: Math.max(35, this.state.height)}}
/>
Setting the value after each change fixed the problem for me
<TextInput
multiline={true}
onChangeText={(text) => {
this.setState({text});
}}
onContentSizeChange={(event) => {
this.setState({height: event.nativeEvent.contentSize.height});
}}
style={{height: this.state.height}}
value={this.state.text}
/>
Related
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'
here is my code the input not submit to the onsubmit function
<TextInput
autoCapitalize={"none"}
style={[styles.textInput, black, semi_h4]}
returnKeyType="done"
numberOfLines={1}
blurOnSubmit={false}
onSubmitEditing={event => {
Keyboard.dismiss();
this.onSubmit();
}}
placeholder="Pin *"
placeholderTextColor={"#313131"}
ref={input => (this.c_pin = input)}
/>
please tell me how to working onsubmitediting
you have to pass text from submit event to the function,
<TextInput
onSubmitEditing={(event) => this.onSubmit(event.nativeEvent.text)}
/>
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 want to make a text input readonly in my RN application. I tried to set an editable prop but it did not work properly. How can I achieve this?
<DetailInput
inputStyle={styles.inputStyles}
height={120}
width={width - 40}
multiline={true}
numberOfLines={6}
underlineColorAndroid="transparent"
maxLength={500}
editable={!userRegistrationInProgress}
onChangeText={value => this.statementChangedHandler(value)}
/>
const detailInput = props => {
return (
<TextInput
{...props}
style=
{[
props.inputStyle,
{ height: props.height, width: props.width},
!props.valid && props.touched ? props.invalidInput : null
]}
/>
);
}
export default detailInput;
<TextInput
value = "Read Only"
editable = {false}
/>
Set editable false to read only TextInput.
A better readonly Text input:
<View pointerEvents="none">
<TextInput value="I am read only" editable={false} />
</View>
https://facebook.github.io/react-native/docs/view#pointerevents
I am using Custom Keyboard. In that I am using CustomTextInput in place of TextInput. All works well but I want to focus input field in function.
<CustomTextInput customKeyboardType="hello"
onFocus={() => this.onFocus('fieldname')}
selectTextOnFocus={ true }
ref="TextInput"
underlineColorAndroid = 'transparent'
onChangeText={(value) => this.setState({fieldname:this.onChange(value)})}
/>
In Function something like below :-
function () {
Keyboard.dismiss();
this.refs.TextInput.focus();
}
But I am getting an error :- this.refs.TextInput.focus is not a function.
Basically my focus() function is not working.
Please help!
I tried this.refs['TextInput'].focus() and it works for me. You can write a function for Textinput's onFocus and within this function dimiss default keyboard, lunch your customized keyboard and focus again on your TextInput. I hope it will help.
This is my code:
<TextInput
style={{ height: 40, width: 200 }}
ref="TextInput"
/>
<TouchableOpacity
onPress={() => { (this.refs['TextInput'] as any).focus() }}>
<Text>Press to focus</Text>
</TouchableOpacity>