I wanna create a custom button component that can pass props to the StyleSheet. At this project, the props I wanna send is the hexcode so the component can have different colors based on the color props that are passed to the component. So, I have written this
type Props = { backgroundColor: string; borderColor: string;};export const CustomButton = ({ backgroundColor, borderColor,}: Props) => { return (<TouchableOpacity style={styles({ backgroundColor, borderColor }).container}></TouchableOpacity> );const styles = ({ backgroundColor, borderColor }: Props) => StyleSheet.create({ container: { backgroundColor: backgroundColor, borderColor: borderColor, }, });
The idea is to pass the props to the component, and then pass it to the styles on the Touchable component. But, this doesn't work. This always gives me this error on styles({ backgroundColor, borderColor}).container
Argument of type "{ backgroundColor, borderColor }" is not assignable to parameter of type "Props".
So, what went wrong? How am I supposed to pass the props to the StyleSheet?