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