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>

React Native - keyboard visible-password android doesn't show numbers

I want the same keyboard password for a normal input
keyboardType="visible-password" only works in android, and that is ok to me, but when I try to apply this keyboard to a normal input, it doesn´t show the keyboard I want, with numbers at the top. Here what I wish:
Here what I get:
And here some code. Thank you if you can help me
<TextInput
text={getRutInputValue(text)}
label={label}
textValid={isCheckRut}
textError={textError}
maxLength={RUT_MAX_LENGTH}
onChangeTextValid={onChangeTextValid}
onChangeText={setRutInputValue}
keyboardType={Platform.OS === 'android' ? 'visible-password' : 'numbers-and-punctuation'}
autoComplete="off"
accessibilityLabel={accessibilityLabel}
/>

Unfortunately, visible-password type only works when the input has the secureTextEntry flag.
Check the guide https://lefkowitz.me/visual-guide-to-react-native-textinput-keyboardtype-options/ recomended by the react-native documentation.

<TextInput
text={getRutInputValue(text)}
label={label}
textValid={isCheckRut}
textError={textError}
maxLength={RUT_MAX_LENGTH}
onChangeTextValid={onChangeTextValid}
onChangeText={setRutInputValue}
secureTextEntry={this.state.password}
keyboardType={Platform.OS === 'android' ? 'visible-password' : 'numbers-and-punctuation'}
autoComplete="off"
accessibilityLabel={accessibilityLabel}
/>
Above code worked for me. Here I am setting this.state.password on change.
In documentation of react-native it has mentioned that to get visible-password we need to set secureTextEntry in the TextInput.
Sharing my reference link as well : https://mdmoin07.medium.com/react-native-hide-show-password-input-d4be4d0f70aa

How to prevent copy to clipboard in TextInput react-native on Android?

I want to prevent user to copy content in TextInput but it works only on iOS but not for Android. How can I do this on Android?
[Update]: As the link #patel-dhara has given below, I already read commit about contextMenuHidden property and found that only handle onLongClick event on Android. So, still can copy to clipboard on TextInput by double-tap to it.
Here is my code:
<TextInput
style={styles.input}
placeholder="Password"
placeholderTextColor="rgba(255, 255, 255, 0.7)"
underlineColorAndroid="transparent"
secureTextEntry={isHidePass}
returnKeyType="go"
autoCapitalize="none"
onChangeText={this.handleTextChange}
onSubmitEditing={this.handleLogin}
ref={this.passwordRef}
contextMenuHidden
onBlur={() => Clipboard.setString('')}
onFocus={() => Clipboard.setString('')}
onSelectionChange={() => Clipboard.setString('')}
/>

you can use contextMenuHidden property of TextInput. It will work on both Platform Android and iOS.
<TextInput contextMenuHidden={true} />
but, It may be supported after react-native version 0.55. for more info link.
commit link for that: link

Try this:
<TextInput caretHidden={true} selectTextOnFocus={false} />

use this:
<View pointerEvents="none">
<TextInput ... />
</View>
Checkout pointer events for view:
https://facebook.github.io/react-native/docs/view#pointerevents
Another Option:
Try clearing the clipboard
<TextInput onFocus={() => Clipboard.setString('')} onSelectionChange={() => Clipboard.setString('')}/>

I you want to avoid pasting below solution works for me. I am clearing keyboard on onTouchEnd event
const [text1, setText1] = useState('')
const clearClipboard = () =>{
Clipboard.setString('')
}
const onChangeText = (text) =>{
//For android 12+ clipboard autofill option, dont allow text change more than one char..which means user is typing.
if(text1.length+1 >= text.length){
setText1(text)
}
}
<TextInput onChangeText={onChangeText} value={text1} contextMenuHidden={true} onTouchEnd={clearClipboard}></TextInput>

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()

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>