Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

256
Views
React native error: Binding invalid left-hand side in object destructuring pattern, what does this mean?

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.

Here is my code:

   import React from 'react';
   import {TouchableOpacity, Text, StyleSheet} from 'react-native';
    
   export const RoundedButton = ({
      style: {},
      textStyle: {},
      size: 125,
      ...props
    }) => {
      return (
        <TouchableOpacity style ={[styles(size).radius, style]}>
          <Text style = {[styles(size).text, textStyle]}>{props.title}</Text>
        </TouchableOpacity>
      )
    
    };
    
    const styles = (size) => StyleSheet.create({
      radius: {
        borderRadius: size/2,
        width: size,
        height: size,
        alignItems: 'center',
        borderColor: '#fff',
        borderWidth: 2,
      },
    
      text: {
        color: '#fff',
        fontSize: size/3,
      },
    })

Here is the error shown in my Expo snack:

src/components/RoundedButton.js: Binding invalid left-hand side in object destructuring pattern (8:8)
   6 |   style: {},
   7 |   textStyle: {},
>  8 |   size: 125,
     |         ^
   9 |   ...props
  10 | }) => {
  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: {},
>  8 |   size: 125,
     |         ^
   9 |   ...props
  10 | }) => {
  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 (<anonymous>)
    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
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!