TypeError: Invalid attempt to spread non-iterable instance

This is because it is a runtime error, not a "compile time" error.

Is there a line number associated with the error? Based on the question being about the spread operator I'll assume it's this line: newArticlesData=[...prevData,...response.data]. I assume your prevData is iterable, but is your response data? Try newArticlesData=[...prevData, response.data]?

Here's an example of invalid spread operator use:

function trySpread(object) {
  let array;
  try {
    array = [...object];
    console.log('No error', array);
  } catch(error) {
    console.log('error', error);
  }
}

// error
trySpread({});
trySpread({foo: 'bar'});
trySpread(4);

// no error
trySpread([]);
trySpread(['foobar']);
trySpread('foobar');

I was getting this crash in release android build only. release ios build and android debug build working perfectly.

After spending a few hours found solutions from the internet.

edit your .babelrc and add following into your plugins

[
      "@babel/plugin-transform-spread",
      {
        "loose": true
      }
    ]

so Here is my .babelrc file

{
  "presets": [
    "module:metro-react-native-babel-preset"
  ],
  "plugins": [
    "syntax-trailing-function-commas",
    "@babel/plugin-transform-flow-strip-types",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-regenerator",
    "@babel/plugin-transform-async-to-generator",
    "@babel/plugin-transform-runtime",
    [
      "@babel/plugin-transform-spread",
      {
        "loose": true
      }
    ]
  ],
  "sourceMaps": true
}

I hope this answer helps someone and save few hours :)

I removed prevData and replaced it with this.state.articlesData. I also change the logic so at the begining when articlesData is empty, it doesn't merge two objects, instead just uses the response.data.

if(propSearch=="" || propSearch==null && this.state.currentPage!=1 && refresh!=true){
    newData=[...this.state.articlesData,...response.data]
}
else{
    newData=response.data
}

this.state.currentPage!=1 is pretty much the same as oldData != empty

It workes now.

this is because you play around with objects but you trying to copy objects in the array

convert this line

newArticlesData = [...prevData, ...response.data];

to

 newArticlesData = {...prevData, ...response.data};

Your problem solved my code for this is

 fetch(url, {
      method: 'GET',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        'x-sh-auth': userToken || userStoredToken,
      },
    })
      .then(response => response.text())
      .then(async responseText => {
        let responseData = JSON.parse(responseText);
        console.log('responseData HomeWhatsNewUser', responseData);
        if (responseData.code == 200) {
          setpageNumberwhatsnewap(pageNumberwhatsnewapi + 1);
          setiSloding(false);
          setWhatsNewAPiUser({...WhatsNewAPiUser, ...responseData});
          // setWhatsNewAPiUser(responseData);
          // setLoadMoreNewUserApiLink(responseData.load_more_url);
        } else {
          if (responseData.message === 'Your are un authorize') {
            await AsyncStorage.removeItem('@userData');
            await AsyncStorage.removeItem('@userToken');
            props.navigation.navigate('HomeScreen');
          }
          Toast.show({
            text1: responseData.message,
          });
          setiSloding(false);
        }
      })
      .catch(error => {
        setiSloding(false);
        console.log(error, 'error from APi');
      });
  };