Keyboard hides automatically on key press in react native - reactjs

Question

I'm creating a form, where I need to input the data in the field. But as soon as I press the key, the keyboard is hiding automatically and I'm unable to do persistent typing.
Suppose, I'm typing a Product name or stock anything the typing is persistent but when I type in variants section on every keypress keyboards hides automatically.
Here is the codebase-
AddNewProductScreen.js
....
constructor(props) {
super(props);
this.state = {
product: {
name: '',
category: '',
type: 'packet',
brand: '',
variants: [
{
value: '',
price: '',
},
],
stock: '',
},
};
....
<Input
inputContainerStyle={{borderBottomColor: 'transparent'}}
inputComponent={() => (
<View>
{this.state.product.variants.map((item, index) => (
<View key={index} style={[mainStyles.row, {marginTop: 10}]}>
<View style={mainStyles.col6}>
<Input
label="Value"
placeholder="500 gm or 1 pc"
value={this.state.product.variants[index].value}
onChangeText={value => {
let variants = this.state.product.variants;
variants[index].value = value;
this.setState({
product: {
...this.state.product,
variants,
},
});
}}
/>
</View>
<View style={mainStyles.col5}>
<Input
label="Price"
keyboardType="numeric"
placeholder="50"
value={this.state.product.variants[index].price}
onChangeText={price => {
let variants = this.state.product.variants;
variants[index].price = price;
this.setState({
product: {
...this.state.product,
variants,
},
});
}}
/>
</View>
<View style={[mainStyles.col1, {justifyContent: 'center'}]}>
<Icon
name="times"
size={25}
color="red"
type="font-awesome"
containerStyle={{
display: `${
this.state.product.variants.length > 1 ? 'flex' : 'none'
}`,
}}
onPress={() => {
let variants = this.state.product.variants;
variants.splice(index, 1);
this.setState({
product: {
...this.state.product,
variants,
},
});
}}
/>
</View>
</View>
))}
</View>
)}
/>
....
Expectation: Inside the variants input(Value & Price), I need persistent typing as of other input fields.
Thanks in advance.
P.S- adding the screenshot for reference

Answer 1

{this.state.product.variants.map((item, index) => (
<View key={index} style={[mainStyles.row, {marginTop: 10}]}>
<View style={mainStyles.col6}>
<Input
label="Value"
placeholder="500 gm or 1 pc"
value={this.state.product.variants[index].value}
onChangeText={value => {
let variants = this.state.product.variants;
variants[index].value = value;
this.setState({
product: {
...this.state.product,
variants,
},
});
}}
/>
</View>
Problem here is that this.state.product.variants is changing based on values in the input fields, and thus the contents in this list is mounted again on each keypress. I suggest you try an approach that does not map the input fields and they will remain in the component tree throughout the lifecycle of the parent.