Month: December 2021

How to fix invalid JSON response error in WordPress

Post author By Mubarak Hossain
Post date December 21, 2021

Updating failed. The response is not a valid JSON response.

This error appears when edit and update your posts or pages on your WordPress website. You will see message saying “The response is not a valid JSON response” and updating that page would fail. In this article, I will show you how to fix the invalid JSON error in WordPress.

WordPress needs to communicate with the server while you are editing a post or page form WordPress admin and it getting responses from the web hosting server in the background. This response is in JSON format which is used to quickly transport data using JavaScript.

I getting this error when I move my wordpress website to another server.

Solution:

First please confirm your home and siteurl is ok on database wp_options table.

Please go to Settings => Permalinks page. From here, you need to review the WordPress permalink options. Please select “Post name” option form Permalink Settings and click on the Save Changes button to store your settings.

Also please confirm those code are available on the .htaccess file.

# BEGIN WordPress
# The directives (lines) between "BEGIN WordPress" and "END WordPress" are
# dynamically generated, and should only be modified via WordPress filters.
# Any changes to the directives between these markers will be overwritten.
<ifmodule mod_rewrite.c="">
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</ifmodule>

# END WordPress

Now site is ready to edit post or page from WordPress admin.

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.

Tags Error, JSON error, WordPress

React Native

React Native: Download or Save View Content as Image in gallery

Post author By Mubarak Hossain
Post date December 17, 2021

In this article, I will show you how we can download or save loop view content as image in React Native. For download or save view inner content, you want to ensure that you have react-native-view-shot and @react-native-community/cameraroll its dependencies.

Install npm package for view-shot and cameraroll

npm install react-native-view-shot --save
npm install @react-native-community/cameraroll --save

//On iOS, you might have to:
cd ios && pod install && cd ..

Make sure view-shot and cameraroll linked with Xcode

npx react-native link react-native-view-shot
npx react-native link @react-native-community/cameraroll

Configure Download View Inner Content

Now we write a const variable viewRefs to set each view ref for each loop view item. Also I have used userDataList loop data object.

//viewRefs is View container what area you want to share or download.
const viewRefs = React.useMemo(
	() => userDataList.map(()=> React.createRef()),
	[userDataList.join(',')]
);

Now we write a const method const downloadImage = async (index) => {} to download and save loop view, each item.

// download image
const downloadImage = async (index) => {
	try {
	  let viewCurrentImgRef = viewRefs[index].current;

	  // react-native-view-shot caputures component
	  const uri = await captureRef(viewCurrentImgRef, {
		  format: 'png',
		  quality: 0.8,
	  });

	  if (Platform.OS === 'android') {
		  const granted = await getPermissionAndroid();
		  if (!granted) {
			  return;
		  }
	  }

	  // cameraroll saves image
	  const image = CameraRoll.save(uri, 'photo');
	  if (image) {
			Alert.alert('Image saved', 'Successfully saved image to your gallery.',
				[{text: 'OK', onPress: () => {}}],
				{cancelable: false},
			);
	  }
	} catch (error) {
		console.log('error', error);
	}
};

Now we write a const method const getPermissionAndroid = async () => {} for Permissions storage, to save and download image. On my previous article I have explain how to Share View Content in loop each item.

// get permission on android
const getPermissionAndroid = async () => {
	try {
	  const granted = await PermissionsAndroid.request(
		PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
		{
		  title: 'Image Download Permission',
		  message: 'Your permission is required to save images to your device',
		  buttonNegative: 'Cancel',
		  buttonPositive: 'OK',
		},
	  );
	  if (granted === PermissionsAndroid.RESULTS.GRANTED) {
		  return true;
	  }
	  Alert.alert('Permission required', 'Permission is required to save images to your device',
		  [{text: 'OK', onPress: () => {}}],
		  {cancelable: false},
	  );
	} catch (err) {
	  // handle error as you please
	  //console.log('err', err);
	  Alert.alert('Save remote image', 'Failed to save Image: ' + err.message,
		  [{text: 'OK', onPress: () => console.log('OK Pressed')}],
		  {cancelable: false},
	  );
	}
};

Permission is required to read and write to the external storage. Open android/app/src/main/AndroidManifest.xml file and add those permissions to save or download image.

<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>

<application
.....
android:requestLegacyExternalStorage="true"
.....
>

React Native Download and Save View Content full Example code:

Here is full code for Download and Save view content loop items using React Native. You can move the code on your own created screen.

import React from 'react';
import { SafeAreaView, ScrollView, StyleSheet, Text, View, PermissionsAndroid, Alert, Platform, TouchableOpacity } from 'react-native';
import { captureRef } from 'react-native-view-shot';
import CameraRoll from '@react-native-community/cameraroll';
import AntDesign from 'react-native-vector-icons/AntDesign';

const userDataList = [{id: 1, name: "Name One", email: "user1@extendfeature.com", phone: "+8801xxxxxxxx1", balance: 50},
        {id: 2, name: "Name Two", email: "user2@extendfeature.com", phone: "+8801xxxxxxxx2", balance: 30},
        {id: 3, name: "Name Three", email: "user3@extendfeature.com", phone: "+8801xxxxxxxx3", balance: 10},
        {id: 4, name: "Name Four", email: "user4@extendfeature.com", phone: "+8801xxxxxxxx4", balance: 40},
        {id: 5, name: "Name Five", email: "user5@extendfeature.com", phone: "+8801xxxxxxxx5", balance: 70},
        {id: 6, name: "Name Six", email: "user6@extendfeature.com", phone: "+8801xxxxxxxx6", balance: 20},
        {id: 7, name: "Name Seven", email: "user7@extendfeature.com", phone: "+8801xxxxxxxx6", balance: 80}];

const App = ({ navigation }) => {
    //viewRefs is View container what area you want to share or download.
    const viewRefs = React.useMemo(
        () => userDataList.map(()=> React.createRef()),
        [userDataList.join(',')]
    );

    // get permission on android
    const getPermissionAndroid = async () => {
        try {
          const granted = await PermissionsAndroid.request(
            PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
            {
              title: 'Image Download Permission',
              message: 'Your permission is required to save images to your device',
              buttonNegative: 'Cancel',
              buttonPositive: 'OK',
            },
          );
          if (granted === PermissionsAndroid.RESULTS.GRANTED) {
              return true;
          }
          Alert.alert('Permission required', 'Permission is required to save images to your device',
              [{text: 'OK', onPress: () => {}}],
              {cancelable: false},
          );
        } catch (err) {
          // handle error as you please
          //console.log('err', err);
          Alert.alert('Save remote image', 'Failed to save Image: ' + err.message,
              [{text: 'OK', onPress: () => console.log('OK Pressed')}],
              {cancelable: false},
          );
        }
    };

    // download image
    const downloadImage = async (index) => {
        try {
          let viewCurrentImgRef = viewRefs[index].current;

          // react-native-view-shot caputures component
          const uri = await captureRef(viewCurrentImgRef, {
              format: 'png',
              quality: 0.8,
          });

          if (Platform.OS === 'android') {
              const granted = await getPermissionAndroid();
              if (!granted) {
                  return;
              }
          }

          // cameraroll saves image
          const image = CameraRoll.save(uri, 'photo');
          if (image) {
                Alert.alert('Image saved', 'Successfully saved image to your gallery.',
                    [{text: 'OK', onPress: () => {}}],
                    {cancelable: false},
                );
          }
        } catch (error) {
            console.log('error', error);
        }
    };

    return (
        <SafeAreaView style={styles.safeAreaContainer}>
            <ScrollView contentContainerStyle={styles.scrollView}>
                <View style={styles.mainContainer}>
                    <Text style={{fontSize: 16, fontWeight: 'bold', marginTop: 10, marginBottom: 10}}>List of items</Text>
                    <View style={styles.userListWrapper}>
                        {userDataList.map((item, index)=>(
                            <View key={(index+1)} style={styles.userListRow}>
                                <View style={styles.userListViewRef} ref={viewRefs[index]}>
                                    <View style={styles.userListItem}>
                                        <View style={styles.userListCol}>
                                            <Text style={styles.userItemBoldText}>User ID: {item.id}</Text>
                                            <Text style={styles.userItemBoldText}>{item.name}</Text>
                                            <Text style={styles.userItemNormalText}>{item.email}</Text>
                                            <Text style={styles.userItemNormalText}>{item.phone}</Text>
                                        </View>
                                        <View style={[styles.userListCol, {alignItems: 'flex-end'}]}>
                                            <Text style={styles.userItemBoldText}>Balance</Text>
                                            <Text style={styles.userItemBoldText}>${parseFloat(item.balance).toFixed(2)}</Text>
                                        </View>
                                    </View>
                                    <View style={styles.userItemShareWrapper}>
                                        <View style={{ width: '50%', paddingLeft: 0, paddingRight: 8 }}>
                                            <TouchableOpacity style={styles.shareActionButton} onPress={()=> console.log('Click on Share button')}>
                                                <AntDesign name="sharealt" color={'#131313'} size={20} />
                                                <Text style={styles.shareActionLabel}>Share</Text>
                                            </TouchableOpacity>
                                        </View>
                                        <View style={{ width: '50%', paddingLeft: 8, paddingRight: 0 }}>
                                            <TouchableOpacity style={styles.shareActionButton} onPress={()=> downloadImage(index)}>
                                                <AntDesign name="download" color={'#131313'} size={20} />
                                                <Text style={styles.shareActionLabel}>Download</Text>
                                            </TouchableOpacity>
                                        </View>
                                    </View>
                                </View>
                            </View>
                        ))}
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
}

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',
    },
    userListWrapper: {
        width: '100%',
        paddingLeft: 5,
        paddingRight: 5,
    },
    userListRow: {
        width: '100%',
        backgroundColor: '#dfdfdf',
        borderWidth: 3,
        borderColor: '#dfdfdf',
        marginBottom: 20,
    },
    userListViewRef: {
        width: '100%',
        backgroundColor: '#ffffff',
    },
    userListItem: {
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    userListCol: {
        width: '50%',
        alignItems: 'flex-start',
        justifyContent: 'center',
        paddingTop: 5,
        paddingBottom: 8,
        paddingLeft: 8,
        paddingRight: 8,
    },
    userItemBoldText: {
        fontSize: 17,
        color: '#313131',
        fontWeight: 'bold',
    },
    userItemNormalText: {
        fontSize: 15,
        color: '#313131',
        fontWeight: 'normal',
    },
    userItemShareWrapper: {
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        borderTopWidth: 2,
        borderColor: '#dfdfdf',
    },
    shareActionButton: {
        width: '100%',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        paddingTop: 3,
        paddingBottom: 3,
    },
    shareActionLabel: {
        fontWeight: 'normal',
        fontSize: 12,
        color: '#006c85',
        textAlign: 'center',
        lineHeight: 14,
    },
});

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.

Tags React Native, Save Image, Save View

React Native

React Native: Share view content in loop or Share list each item

Post author By Mubarak Hossain
Post date December 11, 2021

In this article, I will show you how we can share view content with other apps in React Native. To use this share view inner content, you want to ensure that you have react-native-view-shot and react-native-share its dependencies.

npm install react-native-view-shot --save
npm install react-native-share --save

//On iOS, you might have to:
cd ios && pod install && cd ..

Installation Sharing View Inner Content

Now we write a const variable viewRefs to set each view ref for each loop view item. Also I have used userDataList loop data object.

//viewRefs is View container what area you want to share or download.
const viewRefs = React.useMemo(
	() => userDataList.map(()=> React.createRef()),
	[userDataList.join(',')]
);

Now we write a const method const shareImage = async (index) => {} to share loop view, eache item.

const shareImage = async (index) => {
	try {
	  let viewCurrentImgRef = viewRefs[index].current;

	  //capture component
	  const uri = await captureRef(viewCurrentImgRef, {
		format: 'png',
		quality: 0.8,
	  });

	  // share
	  const shareResponse = await Share.open({url: uri});
	} catch (error) {
	  console.log('error', error);
	}
}

React Native Sharing View Content full Example code:

Here is full code for sharing view content with other apps using React Native. You can move the code on your own created screen.

import React from 'react';
import { SafeAreaView, ScrollView, StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { captureRef } from 'react-native-view-shot';
import Share from 'react-native-share';
import AntDesign from 'react-native-vector-icons/AntDesign';

const userDataList = [{id: "1", name: "Name One", email: "user1@extendfeature.com", phone: "+8801xxxxxxxx1", balance: 50},
        {id: "2", name: "Name Two", email: "user2@extendfeature.com", phone: "+8801xxxxxxxx2", balance: 30},
        {id: "3", name: "Name Three", email: "user3@extendfeature.com", phone: "+8801xxxxxxxx3", balance: 10},
        {id: "4", name: "Name Four", email: "user4@extendfeature.com", phone: "+8801xxxxxxxx4", balance: 40},
        {id: "5", name: "Name Five", email: "user5@extendfeature.com", phone: "+8801xxxxxxxx5", balance: 70},
        {id: "6", name: "Name Six", email: "user6@extendfeature.com", phone: "+8801xxxxxxxx6", balance: 20},
        {id: "7", name: "Name Seven", email: "user7@extendfeature.com", phone: "+8801xxxxxxxx6", balance: 80}];

const App = ({ navigation }) => {
    //viewRefs is View container what area you want to share or download.
    const viewRefs = React.useMemo(
        () => userDataList.map(()=> React.createRef()),
        [userDataList.join(',')]
    );

    const shareImage = async (index) => {
        try {
          let viewCurrentImgRef = viewRefs[index].current;

          // capture component
          const uri = await captureRef(viewCurrentImgRef, {
            format: 'png',
            quality: 0.8,
          });

          // share
          const shareResponse = await Share.open({url: uri});
        } catch (error) {
          console.log('error', error);
        }
    };

    return (
        <SafeAreaView style={styles.safeAreaContainer}>
            <ScrollView contentContainerStyle={styles.scrollView}>
                <View style={styles.mainContainer}>
                    <Text style={{fontSize: 16, fontWeight: 'bold', marginTop: 10, marginBottom: 10}}>List of items</Text>
                    <View style={styles.userListWrapper}>
                        {userDataList.map((item, index)=>(
                            <View key={(index+1)} style={styles.userListRow}>
                                <View style={styles.userListViewRef} ref={viewRefs[index]}>
                                    <View style={styles.userListItem}>
                                        <View style={styles.userListCol}>
                                            <Text style={styles.userItemBoldText}>User ID: {item.name}</Text>
                                            <Text style={styles.userItemBoldText}>{item.name}</Text>
                                            <Text style={styles.userItemNormalText}>{item.email}</Text>
                                            <Text style={styles.userItemNormalText}>{item.phone}</Text>
                                        </View>
                                        <View style={[styles.userListCol, {alignItems: 'flex-end'}]}>
                                            <Text style={styles.userItemBoldText}>Balance</Text>
                                            <Text style={styles.userItemBoldText}>${parseFloat(item.balance).toFixed(2)}</Text>
                                        </View>
                                    </View>
                                    <View style={styles.userItemShareWrapper}>
                                        <View style={{ width: '50%', paddingLeft: 0, paddingRight: 8 }}>
                                            <TouchableOpacity style={styles.shareActionButton} onPress={()=> shareImage(index)}>
                                                <AntDesign name="sharealt" color={'#131313'} size={20} />
                                                <Text style={styles.shareActionLabel}>Share</Text>
                                            </TouchableOpacity>
                                        </View>
                                        <View style={{ width: '50%', paddingLeft: 8, paddingRight: 0 }}>
                                            <TouchableOpacity style={styles.shareActionButton} onPress={()=> downloadImage(index)}>
                                                <AntDesign name="download" color={'#131313'} size={20} />
                                                <Text style={styles.shareActionLabel}>Download</Text>
                                            </TouchableOpacity>
                                        </View>
                                    </View>
                                </View>
                            </View>
                        ))}
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
}

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',
    },
    userListWrapper: {
        width: '100%',
        paddingLeft: 5,
        paddingRight: 5,
    },
    userListRow: {
        width: '100%',
        backgroundColor: '#dfdfdf',
        borderWidth: 3,
        borderColor: '#dfdfdf',
        marginBottom: 20,
    },
    userListViewRef: {
        width: '100%',
        backgroundColor: '#ffffff',
    },
    userListItem: {
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    userListCol: {
        width: '50%',
        alignItems: 'flex-start',
        justifyContent: 'center',
        paddingTop: 5,
        paddingBottom: 8,
        paddingLeft: 8,
        paddingRight: 8,
    },
    userItemBoldText: {
        fontSize: 17,
        color: '#313131',
        fontWeight: 'bold',
    },
    userItemNormalText: {
        fontSize: 15,
        color: '#313131',
        fontWeight: 'normal',
    },
    userItemShareWrapper: {
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        borderTopWidth: 2,
        borderColor: '#dfdfdf',
    },
    shareActionButton: {
        width: '100%',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        paddingTop: 3,
        paddingBottom: 3,
    },
    shareActionLabel: {
        fontWeight: 'normal',
        fontSize: 12,
        color: '#006c85',
        textAlign: 'center',
        lineHeight: 14,
    },
});

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.

Tags React Native, Share Loop Item, Share View

React Native

React Native: Form Validation Multiple Input Fields

Post author By Mubarak Hossain
Post date December 11, 2021

In this article, I will show you how we can validate multiple input fields. On my previous article I have discus how to implement Multiple Input Fields with add more rows with React Native. In this article I will make first row inputs are require of multiple rows.

Validate Multiple Input Fields

If you don’t know how to validate React Native multiple input fields before submit form data. I hope this article can help you to validate multiple input fields.

Now we write a function function validateFormMultipleFields() to validate multiple input fields.

//Function for validate form multiple inputs
function validateFormMultipleFields(){
	let isValid = true;

	formInputs.map((input, key)=>{
		handleValidUserId(input.userId, key);
		handleValidStartAmount(input.startAmount, key);
		handleValidEndAmount(input.endAmount, key);

		if(input.userIdError!="" || input.startAmountError!="" || input.endAmountError!=""){
			isValid = false;
			return;
		}
	});

	return isValid;
}

Now we write another form submit handle method const handlePressSubmitButton = () => {} to validate multiple input fields when a user submit form data to API end point.

const handlePressSubmitButton = () => {
	if(!validateFormMultipleFields()){
		console.log('Form data is not valid. And not ready to submit.');
		return;
	} else {
		//Form data going to submit on API
		console.log('Form data is valid and ready to submit.');
		console.log(formInputs);
	}
}

Validate Multiple Input full Example code:

Here is full code for validate multiple input fields with React Native. 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=="")){ //Make first row field is required
            _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=="")){ //Make first row field is required
            _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=="")){ //Make first row field is required
            _endAmountValid[key].endAmountError = 'Required!';
        } else {
            _endAmountValid[key].endAmount = filterOnlyNumericValue(text);
            _endAmountValid[key].endAmountError = "";
        }
        setFormInputs(_endAmountValid);
    }

    //Function for validate form multiple inputs
    function validateFormMultipleFields(){
        let isValid = true;

        formInputs.map((input, key)=>{
            handleValidUserId(input.userId, key);
            handleValidStartAmount(input.startAmount, key);
            handleValidEndAmount(input.endAmount, key);

            if(input.userIdError!="" || input.startAmountError!="" || input.endAmountError!=""){
                isValid = false;
                return;
            }
        });

        return isValid;
    }

    //Submit form date to your API end point
    const handlePressSubmitButton = () => {
        if(!validateFormMultipleFields()){
            console.log('Form data is not valid. And not ready to submit.');
            return;
        } else {
            //Form data going to submit on API
            console.log('Form data is valid and ready to submit.');
            console.log(formInputs);
        }
    }

    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 }
                                </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', borderColor: (input.startAmountError!="")?'#e74c3c':'#dfdfdf'}]} />

                                    {(input.startAmountError != "") ? (
                                        <View style={styles.errorTextViewStyle}>
                                            <Text style={styles.errorTextStyle}>{input.startAmountError}</Text>
                                        </View>
                                    ) : null }
                                </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: '#098e09', borderColor: (input.endAmountError!="")?'#e74c3c':'#dfdfdf'}]} />

                                    {(input.endAmountError != "") ? (
                                        <View style={styles.errorTextViewStyle}>
                                            <Text style={styles.errorTextStyle}>{input.endAmountError}</Text>
                                        </View>
                                    ) : null }
                                </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>
                        <View style={{ width: '50%', paddingLeft: 8, paddingRight: 0 }}>
                            <Button title={"Submit"} type="clear" raised={true}
                                onPress={() => handlePressSubmitButton()}
                                buttonStyle={styles.formSubmitButton}
                                titleStyle={styles.formSubmitButtonText}
                            />
                        </View>
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
}

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

Tags Multiple Inputs, React Native, Validate

React Native

React Native: Dynamic multiple input fields and add more field

Post author By Mubarak Hossain
Post date December 11, 2021

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.

Tags Multiple Inputs, React Native

Updating failed. The response is not a valid JSON response.

Solution:

Install npm package for view-shot and cameraroll

Make sure view-shot and cameraroll linked with Xcode

Configure Download View Inner Content

React Native Download and Save View Content full Example code:

Installation Sharing View Inner Content

React Native Sharing View Content full Example code:

Done, now run your app using following command:

Validate Multiple Input Fields

Validate Multiple Input full Example code:

Done, now run your app using following command:

Dynamic Multiple Input full Example code:

Recent Posts

Categories

Important Links