Estoy haciendo un proyecto React Native como principiante, mientras creo un componente de botón, recibo el error con respecto a la desestructuración. Lo he comprobado varias veces pero no puedo resolverlo. Por favor ayuda.

Aquí está mi código:

 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, }, })

Aquí está el error que se muestra en mi bocadillo Expo:

 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