React Native: Dynamic multiple input fields and add more field

In this article, I will show you how we can implement multiple input fields dynamically with add more rows on click on Add More button with React Native.

If you don’t know how to create this React Native dynamic multiple input fields, then hope this article can help you. In this example initially screen came with two row with 6 input fileds such as (UserId, StartAmount and EndAmount). We can added multiple row by click on add more rows. I have write another article to validate multiple inputs.

Here we defined first two rows with 6 input fileds with (userId, startAmount and endAmount) and each fields error key.

const [formInputs, setFormInputs] = React.useState([
	{key: "", userId: "", userIdError: "", startAmount: "", startAmountError: "", endAmount: "", endAmountError: ""},
	{key: "", userId: "", userIdError: "", startAmount: "", startAmountError: "", endAmount: "", endAmountError: ""},
]);

Here we added method for Add More form inputs lines.

const handleAddMoreLine = () => {
	const _inputs = [...formInputs];
	_inputs.push({key: "", userId: "", userIdError: "", startAmount: "", startAmountError: "", endAmount: "", endAmountError: ""});
	setFormInputs(_inputs);
}

Dynamic Multiple Input full Example code:

Here is full code with dynamic multiple input field example. You can move the code on your own created screen.

import React from 'react';
import { SafeAreaView, ScrollView, StyleSheet, Text, View, TextInput, Button } from 'react-native';

const App = ({ navigation }) => {
    const [formInputs, setFormInputs] = React.useState([
        {key: "", userId: "", userIdError: "", startAmount: "", startAmountError: "", endAmount: "", endAmountError: ""},
        {key: "", userId: "", userIdError: "", startAmount: "", startAmountError: "", endAmount: "", endAmountError: ""},
    ]);

    //Add more inputs rows
    const handleAddMoreLine = () => {
        const _inputs = [...formInputs];
        _inputs.push({key: "", userId: "", userIdError: "", startAmount: "", startAmountError: "", endAmount: "", endAmountError: ""});
        setFormInputs(_inputs);
    }

    //Filter numeric value and remove all unnecessary characters
    function filterOnlyNumericValue(value){
        return value.replace(/[^0-9]/g,'');
    }

    //Set userId Input Values
    const inputHandleUserId = (text, key)=>{
        const _formNumberInputs = [...formInputs];
        _formNumberInputs[key].key = key;
        _formNumberInputs[key].userId = filterOnlyNumericValue(text);
        setFormInputs(_formNumberInputs);
    }

    //Validation userId Input Values
    const handleValidUserId = (text, key)=>{
        const _userIdValid = [...formInputs];
        _userIdValid[key].key = key;
        if((key==0) && (text==null || text=="")){
            _userIdValid[key].userIdError = 'Required!';
        } else {
            _userIdValid[key].userId = filterOnlyNumericValue(text);
            _userIdValid[key].userIdError = "";
        }
        setFormInputs(_userIdValid);
    }

    //Set StartAmount Input Values
    const inputHandleStartAmount = (text, key)=>{
        const _startAmountInputs = [...formInputs];
        _startAmountInputs[key].key = key;
        _startAmountInputs[key].startAmount = filterOnlyNumericValue(text);
        setFormInputs(_startAmountInputs);
    }

    //Validation StartAmount Input Values
    const handleValidStartAmount = (text, key)=>{
        const _startAmountValid = [...formInputs];
        _startAmountValid[key].key = key;
        if((key==0) && (text==null || text=="")){
            _startAmountValid[key].startAmountError = 'Required!';
        } else {
            _startAmountValid[key].startAmount = filterOnlyNumericValue(text);
            _startAmountValid[key].startAmountError = "";
        }
        setFormInputs(_startAmountValid);
    }

    //Set EndAmount Input Values
    const inputHandleEndAmount = (text, key)=>{
        const _endAmountInputs = [...formInputs];
        _endAmountInputs[key].key = key;
        _endAmountInputs[key].endAmount = filterOnlyNumericValue(text);
        setFormInputs(_endAmountInputs);
    }

    //Validation EndAmount Input Values
    const handleValidEndAmount = (text, key)=>{
        const _endAmountValid = [...formInputs];
        _endAmountValid[key].key = key;
        if((key==0) && (text==null || text=="")){
            _endAmountValid[key].endAmountError = 'Required!';
        } else {
            _endAmountValid[key].endAmount = filterOnlyNumericValue(text);
            _endAmountValid[key].endAmountError = "";
        }
        setFormInputs(_endAmountValid);
    }

    //Submit form date to your API end point
    const handlePressSubmitButton = () => {
        console.log(formInputs);
        //Submit form data to API
    }

    return (
        <safeareaview style="{styles.safeAreaContainer}">
            <scrollview contentcontainerstyle="{styles.scrollView}">
                <view style="{styles.mainContainer}">
                    <text style="{{fontSize:" 16,="" fontweight:="" 'bold',="" margintop:="" 30,="" marginbottom:="" 30}}="">Multiple Input Fields with Add more</text>
                    <view style="{styles.submitFormWrapper}">
                        {formInputs.map((input, key)=>(
                            <view key="{(key+1)}" style="{styles.submitFormRow}">
                                <view style="{[styles.submitFormCol," {alignitems:="" 'flex-start'}]}="">
                                    <textinput value="{input.userId}" onchangetext="{(text)="> inputHandleUserId(text, key)}
                                        onEndEditing={(e) => handleValidUserId(e.nativeEvent.text, key)}
                                        keyboardType="numeric"
                                        textAlign="center"
                                        returnKeyType="next"
                                        style={[styles.formNumberInputStyle, {fontSize: 22, borderColor: (input.userIdError!="")?'#e74c3c':'#dfdfdf'}]} />

                                    {(input.userIdError != "") ? (
                                        <view style="{styles.errorTextViewStyle}">
                                            <text style="{styles.errorTextStyle}">{input.userIdError}</text>
                                        </view>
                                    ) : null }
                                </textinput></view>
                                <view style="{styles.submitFormCol}">
                                    <textinput value="{input.startAmount}" onchangetext="{(text)="> inputHandleStartAmount(text, key)}
                                        onEndEditing={(e) => handleValidStartAmount(e.nativeEvent.text, key)}
                                        keyboardType="numeric"
                                        textAlign="center"
                                        returnKeyType="next"
                                        style={[styles.formNumberInputStyle, {color: '#e74c3c'}]} />

                                    {(input.startAmountError != "") ? (
                                        <view style="{styles.errorTextViewStyle}">
                                            <text style="{styles.errorTextStyle}">{input.startAmountError}</text>
                                        </view>
                                    ) : null }
                                </textinput></view>
                                <view style="{[styles.submitFormCol," {alignitems:="" 'flex-end'}]}="">
                                    <textinput value="{input.endAmount}" onchangetext="{(text)="> inputHandleEndAmount(text, key)}
                                        onEndEditing={(e) => handleValidEndAmount(e.nativeEvent.text, key)}
                                        keyboardType="numeric"
                                        textAlign="center"
                                        returnKeyType="go"
                                        style={[styles.formNumberInputStyle, {color: '#e74c3c'}]} />

                                    {(input.endAmountError != "") ? (
                                        <view style="{styles.errorTextViewStyle}">
                                            <text style="{styles.errorTextStyle}">{input.endAmountError}</text>
                                        </view>
                                    ) : null }
                                </textinput></view>
                            </view>
                        ))}
                    </view>
                    <view style="{styles.submitFormButtons}">
                        <view style="{{" width:="" '50%',="" paddingleft:="" 0,="" paddingright:="" 8="" }}="">
                            <button title="{"Add" more="" line"}="" type="clear" onpress="{()" ==""> handleAddMoreLine()}
                              buttonStyle={styles.buttonAddMoreStyle}
                              titleStyle={styles.buttonAddMoreTitleStyle}
                            />
                        
                        <view style="{{" width:="" '50%',="" paddingleft:="" 8,="" paddingright:="" 0="" }}="">
                            </view></button><button title="{"Submit"}" type="clear" raised="{true}" onpress="{()" ==""> handlePressSubmitButton()}
                                buttonStyle={styles.formSubmitButton}
                                titleStyle={styles.formSubmitButtonText}
                            />
                        
                    
                
            
        
    );
}

const styles = StyleSheet.create({
    safeAreaContainer: {
        flex: 1,
        backgroundColor: '#ffffff',
    },
    scrollView: {
         flexGrow: 1,
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'flex-start',
    },
    mainContainer: {
         width: '100%',
         height: '100%',
         backgroundColor: '#e7ebf1',
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'flex-start',
    },
    submitFormWrapper: {
        width: '100%',
        backgroundColor: '#ffffff',
        paddingTop: 15,
        paddingLeft: 10,
        paddingRight: 10,
    },
    submitFormRow: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        borderRadius: 6,
        marginBottom: 10,
    },
    submitFormCol: {
        width: '33.33%',
        alignItems: 'center',
        justifyContent: 'center',
        paddingLeft: 2,
        paddingRight: 2,
    },
    formNumberInputStyle: {
        width: '100%',
        maxWidth: 105,
        height: 42,
        backgroundColor: "#ffffff",
        borderRadius: 4,
        paddingTop: 3,
        paddingBottom: 3,
        paddingLeft: 6,
        paddingRight: 6,
        fontSize: 18,
        fontWeight: 'bold',
        borderWidth: 2,
        borderColor: '#cccccc',
    },
    errorTextViewStyle: {
        width: '100%',
        alignItems: 'center',
        justifyContent: 'center',
    },
    errorTextStyle: {
        fontFamily: 'Roboto-Regular',
        fontWeight: '400',
        fontSize: 11,
        color: '#ff0000',
        textAlign: 'center',
        backgroundColor: "#ffffff",
        paddingLeft: 2,
        paddingRight: 2,
        alignSelf: 'center',
    },
    submitFormButtons: {
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        marginTop: 15,
        marginBottom: 15,
        paddingLeft: 8,
        paddingRight: 8,
    },
    buttonAddMoreStyle: {
        width: '100%',
        height: 48,
        backgroundColor: '#e74c3c',
        borderWidth: 1,
        borderColor: '#e74c3c',
    },
    buttonAddMoreTitleStyle: {
        fontFamily: 'Roboto-Medium',
        fontWeight: '500',
        fontSize: 12,
        color: '#ffffff',
        textAlign: 'center',
    },
    formSubmitButton: {
        width: '100%',
        height: 48,
        backgroundColor: '#098e09',
        borderWidth: 1,
        borderColor: '#098e09',
    },
    formSubmitButtonText: {
        fontSize: 14,
        color: '#ffffff',
        textAlign: 'center',
        fontWeight: 'bold',
        textTransform: 'uppercase',
    },
});

export default App;

Done, now run your app using following command:

npx react-native run-android

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Hope it will help you.

Dynamic Multiple Input full Example code:

Related Articles

Related Articles

Recent Posts

Categories

Important Links