[Error] - A props object containing a "key" prop is being spread into JSX

[Tokiarivelo]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-indicators@0.17.0 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-indicators/src/components/indicator/index.js b/node_modules/react-native-indicators/src/components/indicator/index.js
index b2de0a8..feb3c21 100644
--- a/node_modules/react-native-indicators/src/components/indicator/index.js
+++ b/node_modules/react-native-indicators/src/components/indicator/index.js
@@ -175,6 +175,7 @@ export default class Indicator extends PureComponent {
   render() {
     let { hideAnimation } = this.state;
     let { count, hidesWhenStopped, ...props } = this.props;
+    const { key, ...rest } = props;
 
     if (hidesWhenStopped) {
       props.style = []
@@ -182,7 +183,7 @@ export default class Indicator extends PureComponent {
     }
 
     return (
-      <Animated.View {...props}>
+      <Animated.View key={key} {...rest}>
         {Array.from(new Array(count), this.renderComponent, this)}
       </Animated.View>
     );
diff --git a/node_modules/react-native-indicators/src/components/material-indicator/index.js b/node_modules/react-native-indicators/src/components/material-indicator/index.js
index bf7edc4..0bde608 100644
--- a/node_modules/react-native-indicators/src/components/material-indicator/index.js
+++ b/node_modules/react-native-indicators/src/components/material-indicator/index.js
@@ -107,7 +107,7 @@ export default class MaterialIndicator extends PureComponent {
     };
 
     return (
-      <Animated.View style={styles.layer} {...{ key: index }}>
+      <Animated.View style={styles.layer} key={index}>
         <Animated.View style={layerStyle}>
           <Animated.View style={[containerStyle, offsetStyle]} collapsable={false}>
             <Animated.View style={viewportStyle}>
diff --git a/node_modules/react-native-indicators/src/components/pulse-indicator/index.js b/node_modules/react-native-indicators/src/components/pulse-indicator/index.js
index 53bcf92..e452df8 100644
--- a/node_modules/react-native-indicators/src/components/pulse-indicator/index.js
+++ b/node_modules/react-native-indicators/src/components/pulse-indicator/index.js
@@ -51,7 +51,7 @@ export default class PulseIndicator extends PureComponent {
     };
 
     return (
-      <Animated.View style={styles.layer} {...{ key: index }}>
+      <Animated.View style={styles.layer} key={index}>
         <Animated.View style={pulseStyle} />
       </Animated.View>
     );
diff --git a/node_modules/react-native-indicators/src/components/skype-indicator/index.js b/node_modules/react-native-indicators/src/components/skype-indicator/index.js
index 8a988df..1a0304f 100644
--- a/node_modules/react-native-indicators/src/components/skype-indicator/index.js
+++ b/node_modules/react-native-indicators/src/components/skype-indicator/index.js
@@ -68,7 +68,7 @@ export default class SkypeIndicator extends PureComponent {
     };
 
     return (
-      <Animated.View style={[styles.layer, layerStyle]} {...{ key: index }}>
+      <Animated.View style={[styles.layer, layerStyle]} key={index}>
         <Animated.View style={ballStyle} />
       </Animated.View>
     );
diff --git a/node_modules/react-native-indicators/src/components/ui-activity-indicator/index.js b/node_modules/react-native-indicators/src/components/ui-activity-indicator/index.js
index dcde1e5..468e560 100644
--- a/node_modules/react-native-indicators/src/components/ui-activity-indicator/index.js
+++ b/node_modules/react-native-indicators/src/components/ui-activity-indicator/index.js
@@ -61,7 +61,7 @@ export default class UIActivityIndicator extends PureComponent {
     };
 
     return (
-      <Animated.View style={[styles.layer, layerStyle]} {...{ key: index }}>
+      <Animated.View style={[styles.layer, layerStyle]}  key={index}>
         <Animated.View style={barStyle} />
       </Animated.View>
     );
diff --git a/node_modules/react-native-indicators/src/components/wave-indicator/index.js b/node_modules/react-native-indicators/src/components/wave-indicator/index.js
index 2de37d5..1fbe5ce 100644
--- a/node_modules/react-native-indicators/src/components/wave-indicator/index.js
+++ b/node_modules/react-native-indicators/src/components/wave-indicator/index.js
@@ -64,7 +64,7 @@ export default class WaveIndicator extends PureComponent {
     };
 
     return (
-      <Animated.View style={styles.layer} {...{ key: index }}>
+      <Animated.View style={styles.layer} key={index}>
         <Animated.View style={waveStyle} />
       </Animated.View>
     );

This issue body was partially generated by patch-package.

[liam-hp]

@Tokiarivelo's solution works. Here's a step-by-step for future searchers:

1. Install patch-package and postinstall-postinstall: npm i patch-package postinstall-postinstall
2. Create a file called patches/react-native-indicators+0.17.0.patch in your root dir and paste in the above diff
3. Run rm -rf node_modules package-lock.json to clear your packages
4. Then npm i to reinstall your packages
5. And npx patch-package --error-on-fail to force run patch-package (in case postinstall didn't work)
6. Finally expo start -c to clear cache and rerun locally

[prhasn]

Thanks. This is the updated patch to include bar-indicator

diff --git a/node_modules/react-native-indicators/src/components/bar-indicator/index.js b/node_modules/react-native-indicators/src/components/bar-indicator/index.js
index ad06a55..133949e 100644
--- a/node_modules/react-native-indicators/src/components/bar-indicator/index.js
+++ b/node_modules/react-native-indicators/src/components/bar-indicator/index.js
@@ -94,7 +94,7 @@ export default class BarIndicator extends PureComponent {
     };
 
     return (
-      <View style={containerStyle} {...{ key: index }}>
+      <View style={containerStyle} key={index}>
         <Animated.View style={topStyle} />
         <Animated.View style={bottomStyle} />
       </View>
diff --git a/node_modules/react-native-indicators/src/components/indicator/index.js b/node_modules/react-native-indicators/src/components/indicator/index.js
index b2de0a8..feb3c21 100644
--- a/node_modules/react-native-indicators/src/components/indicator/index.js
+++ b/node_modules/react-native-indicators/src/components/indicator/index.js
@@ -175,6 +175,7 @@ export default class Indicator extends PureComponent {
   render() {
     let { hideAnimation } = this.state;
     let { count, hidesWhenStopped, ...props } = this.props;
+    const { key, ...rest } = props;
 
     if (hidesWhenStopped) {
       props.style = []
@@ -182,7 +183,7 @@ export default class Indicator extends PureComponent {
     }
 
     return (
-      <Animated.View {...props}>
+      <Animated.View key={key} {...rest}>
         {Array.from(new Array(count), this.renderComponent, this)}
       </Animated.View>
     );
diff --git a/node_modules/react-native-indicators/src/components/material-indicator/index.js b/node_modules/react-native-indicators/src/components/material-indicator/index.js
index bf7edc4..0bde608 100644
--- a/node_modules/react-native-indicators/src/components/material-indicator/index.js
+++ b/node_modules/react-native-indicators/src/components/material-indicator/index.js
@@ -107,7 +107,7 @@ export default class MaterialIndicator extends PureComponent {
     };
 
     return (
-      <Animated.View style={styles.layer} {...{ key: index }}>
+      <Animated.View style={styles.layer} key={index}>
         <Animated.View style={layerStyle}>
           <Animated.View style={[containerStyle, offsetStyle]} collapsable={false}>
             <Animated.View style={viewportStyle}>
diff --git a/node_modules/react-native-indicators/src/components/pulse-indicator/index.js b/node_modules/react-native-indicators/src/components/pulse-indicator/index.js
index 53bcf92..e452df8 100644
--- a/node_modules/react-native-indicators/src/components/pulse-indicator/index.js
+++ b/node_modules/react-native-indicators/src/components/pulse-indicator/index.js
@@ -51,7 +51,7 @@ export default class PulseIndicator extends PureComponent {
     };
 
     return (
-      <Animated.View style={styles.layer} {...{ key: index }}>
+      <Animated.View style={styles.layer} key={index}>
         <Animated.View style={pulseStyle} />
       </Animated.View>
     );
diff --git a/node_modules/react-native-indicators/src/components/skype-indicator/index.js b/node_modules/react-native-indicators/src/components/skype-indicator/index.js
index 8a988df..1a0304f 100644
--- a/node_modules/react-native-indicators/src/components/skype-indicator/index.js
+++ b/node_modules/react-native-indicators/src/components/skype-indicator/index.js
@@ -68,7 +68,7 @@ export default class SkypeIndicator extends PureComponent {
     };
 
     return (
-      <Animated.View style={[styles.layer, layerStyle]} {...{ key: index }}>
+      <Animated.View style={[styles.layer, layerStyle]} key={index}>
         <Animated.View style={ballStyle} />
       </Animated.View>
     );
diff --git a/node_modules/react-native-indicators/src/components/ui-activity-indicator/index.js b/node_modules/react-native-indicators/src/components/ui-activity-indicator/index.js
index dcde1e5..468e560 100644
--- a/node_modules/react-native-indicators/src/components/ui-activity-indicator/index.js
+++ b/node_modules/react-native-indicators/src/components/ui-activity-indicator/index.js
@@ -61,7 +61,7 @@ export default class UIActivityIndicator extends PureComponent {
     };
 
     return (
-      <Animated.View style={[styles.layer, layerStyle]} {...{ key: index }}>
+      <Animated.View style={[styles.layer, layerStyle]}  key={index}>
         <Animated.View style={barStyle} />
       </Animated.View>
     );
diff --git a/node_modules/react-native-indicators/src/components/wave-indicator/index.js b/node_modules/react-native-indicators/src/components/wave-indicator/index.js
index 2de37d5..1fbe5ce 100644
--- a/node_modules/react-native-indicators/src/components/wave-indicator/index.js
+++ b/node_modules/react-native-indicators/src/components/wave-indicator/index.js
@@ -64,7 +64,7 @@ export default class WaveIndicator extends PureComponent {
     };
 
     return (
-      <Animated.View style={styles.layer} {...{ key: index }}>
+      <Animated.View style={styles.layer} key={index}>
         <Animated.View style={waveStyle} />
       </Animated.View>
     );