title: React native error: Binding invalid left-hand side in object destructuring pattern, what does this mean?
body: <p>I am doing a React Native project as a beginner, while creating a button component, I'm getting the error regarding destructuring. I have checked multiple times but am not able to resolve it. Please help.</p>
  <p>Here is my code:</p>
  <pre><code>   import React from 'react';
     import {TouchableOpacity, Text, StyleSheet} from 'react-native';
      
     export const RoundedButton = ({
        style: {},
        textStyle: {},
        size: 125,
        ...props
      }) =&gt; {
        return (
          &lt;TouchableOpacity style ={[styles(size).radius, style]}&gt;
            &lt;Text style = {[styles(size).text, textStyle]}&gt;{props.title}&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
        )
      
      };
      
      const styles = (size) =&gt; StyleSheet.create({
        radius: {
          borderRadius: size/2,
          width: size,
          height: size,
          alignItems: 'center',
          borderColor: '#fff',
          borderWidth: 2,
        },
      
        text: {
          color: '#fff',
          fontSize: size/3,
        },
      })
  </code></pre>
  <p>Here is the error shown in my Expo snack:</p>
  <pre><code>src/components/RoundedButton.js: Binding invalid left-hand side in object destructuring pattern (8:8)
     6 |   style: {},
     7 |   textStyle: {},
  &gt;  8 |   size: 125,
       |         ^
     9 |   ...props
    10 | }) =&gt; {
    11 |   return (
    Evaluating src/components/RoundedButton.js
    Evaluating src/features/focus/Focus.js
    Evaluating App.js
    Loading App.js
  Error: /src/components/RoundedButton.js: Binding invalid left-hand side in object destructuring pattern (8:8)
  
     6 |   style: {},
     7 |   textStyle: {},
  &gt;  8 |   size: 125,
       |         ^
     9 |   ...props
    10 | }) =&gt; {
    11 |   return (
      at Object.eval (src/components/RoundedButton.js:1:113)
      at eval (src/components/RoundedButton.js:2:4)
      at eval (src/components/RoundedButton.js:3:3)
      at eval (&lt;anonymous&gt;)
      at [snack internals]
      at Object.a ([snack internals]
      at e.evaluate ([snack internals]
      at Ze ([snack internals]
      at [snack internals]
      at https://snack-web-player.s3.us-west-1.amazonaws.com/v2/43/static/js/app.82f7ca86.chunk.js:1:14450
  </code></pre>