Develop Reference

How to add data manually into the SectionedMultiSelect on the runtime?

Here is my code, it works for the code that was already entered well. But I want to be able to just input some additional data on the go while it's working. We have a web version that does this. But how to do this with react native? I am not really sure that sectionedmultiselect is capable of this anyway.
<View style={styles.input}>
<Text style={styles.header}>Rakip Firma :</Text>
<SectionedMultiSelect
onToggleSelector={() => enemyList()}
items={itemsEnemy}
IconRenderer={Icon}
uniqueKey="id"
subKey="children"
selectText="Rakip seçin"
showDropDowns={true}
readOnlyHeadings={true}
onSelectedItemsChange={onSelectedEnemyChange}
selectedItems={selectedEnemy}
searchPlaceholderText="Ara.."
confirmText="Onayla"
selectedText="ürün seçildi"
colors={{ chipColor: 'blue', disabled: 'blue' }}
expandDropDowns={true}
/>
</View>

I want to clear the text input by providing a clear button. While iOS has support for this, I did not find any solution for android

I am totally new to React Native. I have a textinput area, I want users to clear the text they have entered completely by clicking on a button. React native provides clearButtonMode, but that is only for iOS. Looking for a solution on android devices. Here is my textinput..
<View style={editProfileStyle.textinputView}>
<TextInput
underlineColorAndroid={"rgba(0,0,0,0)"}
style={editProfileStyle.textInput}
placeholder="Enter your Name"
value={this.state.name}
onChangeText={name => this.setState({ name: name })}
/>
</View>

You have two option :
You can simply change the state.name to empty string (ie : this.setState({name : ''})
Based on RN docs , You can use clear() , You have first need to get reference to your TextInput <TextInput ref={input => { this.textInput = input }} />
and then when you need to clear you text use : this.textInput.clear()

How to correctly trim user input in React Native?

I have TextInput that receives onChangeText as a prop:
<TextInput
...
value={this.state.myString}
onChangeText={this.updateInput.bind(this)}
/>
And updateInput is represented as:
updateInput(newString) {
this.setState({ myString: newString.trim() });
}
This works for Android only. Is there some way to trim user input on both platforms (iOS, Android)?
Update
Actually, string is processed as trimmed, but you can still type as many whitespaces as you want on iOS. And if you type two whitespaces in a row the dot appears like it would be the end of the sentence. This is undesirable behaviour, is there a way to avoid it?
Link with example video: https://streamable.com/dzl3c

One way to trim like this with onChangeText property with value.trim(). Here is a working example on my RN 0.62.*
<TextInput
name="email"
type="text"
keyboardType="email-address"
keyboardAppearance="light"
returnKeyType="next"
onChangeText={value => { setValue('email', value.trim(), true) }}
blurOnSubmit={false}
onSubmitEditing={() => this.password.focus()}
autoCapitalize="none"
autoCorrect={true}
textContentType="emailAddress"
editable={!isLoading}
placeholder={Strings.INPUT_EMAIL_ADDRESS}
placeholderTextColor={Theme.GRAY_LIGHT_COLOR}
color={Theme.GRAY_DARK_COLOR}
style={[styles.input, { borderColor: errors.email ? Theme.ORANGE_COLOR : Theme.PRIMARY_DARK_COLOR }]}
ref={ref => this.email = ref} />

When you are submitting form add trim() to that value.

React Native keyboard (multiline)

My question is for the keyboard type that appears when doing a multiline textinput.
<TextInput
keyboardType="default"
multiline={false}
editable={true}
onChangeText={(text) => this.updateSharedObject({note: text})}
value={this.state.data.note}
placeholder="Press to type..."
placeholderTextColor="#c0c0c0"
underlineColorAndroid="transparent"
autoCapitalize="sentences"
style={[styles.textArea, {height: this.state.height}]}
onContentSizeChange={(e) =>
this.updateSize(e.nativeEvent.contentSize.height)}
/>
When a user tries to type in the field they get this kind of keyboard.
The problem is I need to make the field a multiline field. When I set it to true the keyboard becomes this.
Is there anyway to keep the first keyboard layout while still making it multiline? I have been looking everywhere but have not found anything to help.

<TextInput returnKeyType='done' />

undefined exception while calling focus method on TextInput ref

I am trying to implement the solution proposed here for setting the focus on the next TextInput. The solution is proposed for iOS but I think it should also work for Android.
However I am getting the following exception:
undefined is not a function (evaluating '_this3.refs.Second.focus()')
I am using this Floating Label as my Text Input component. Here is my code:
<FloatingLabel
label='First'
ref='First'
validationRegex={/[A-Za-z0-9 ]+/}
value={this.props.First}
style={commonStyles.formInput}
onSubmitEditing={(event) => {this.refs.Second.focus()}}
onChangeText={(text) => this.onUpdate('First', text)}>
First</FloatingLabel>
<FloatingLabel
label='Second'
ref='Second'
style={commonStyles.formInput}
value={this.props.Second}
validationRegex={/(^([a-zA-Z]{5})([0-9]{4})([a-zA-Z]{1})$)/}
onChangeText={(text) => this.onUpdate('Second', text)}>
Second</FloatingLabel>
Can somebody help me in solving the exception? (RN 0.29, Android)
onSubmitEditing={(event) => {console.log(this.refs.Second)}} //works fine
Why am I unable to call the focus method?

this.refs.Second is a FloatingLabel object which don't have a method named "focus".
You can add a focus function to FloatingLabel component like below:
focus() {
this.refs.textInput.focus();
},
and add a ref to the TextInput in render
<View style={elementStyles}>
{this._renderLabel()}
<TextInput
ref={'textInput'}
{...props}
>
</TextInput>
</View>