have some problem with TouchableOpacity styles.
When I add alignSelf , alignItem or JustifyContent, I get the next error:
TS2769: No overload matches this call. Overload 1 of 2, '(props: TouchableOpacityProps | Readonly<TouchableOpacityProps>): TouchableOpacity', gave the following error. Type '{ backgroundColor: string; alignSelf: string; alignItems: string; justifyContent: string; height: number; width: number; marginBottom: number; borderColor: string; borderRadius: number; shadowColor: string; shadowOffset: { ...; }; shadowOpacity: number; shadowRadius: number; elevation: number; }' is not assignable to type 'StyleProp<ViewStyle>'. Type '{ backgroundColor: string; alignSelf: string; alignItems: string; justifyContent: string; height: number; width: number; marginBottom: number; borderColor: string; borderRadius: number; shadowColor: string; shadowOffset: { ...; }; shadowOpacity: number; shadowRadius: number; elevation: number; }' is not assignable to type 'ViewStyle'. Types of property 'alignItems' are incompatible. Type 'string' is not assignable to type 'FlexAlignType | undefined'. Overload 2 of 2, '(props: TouchableOpacityProps, context: any): TouchableOpacity', gave the following error. Type '{ backgroundColor: string; alignSelf: string; alignItems: string; justifyContent: string; height: number; width: number; marginBottom: number; borderColor: string; borderRadius: number; shadowColor: string; shadowOffset: { ...; }; shadowOpacity: number; shadowRadius: number; elevation: number; }' is not assignable to type 'StyleProp<ViewStyle>'. index.d.ts(5031, 5): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<TouchableOpacity> & Readonly<TouchableOpacityProps> & Readonly<...>' index.d.ts(5031, 5): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<TouchableOpacity> & Readonly<TouchableOpacityProps> & Readonly<...>'I've tried to put these 3 styles to view, and get the same error...
Here is my ts component
import React, {FC, ReactElement} from 'react';import {Text, TouchableOpacity} from 'react-native';import {BORDER_RADIUS, DIMENSIONS, SHADOW, TEXT_BASE} from '../../theme/theme';import {Colors} from '../../theme/colors';interface Props { buttonText: string; onPress: () => void;}const SubmitButtonPink: FC<Props> = (props): ReactElement => { const {buttonText, onPress} = props; return (<TouchableOpacity style={styles.enabled} onPress={onPress}><Text style={styles.textStyle}>{buttonText}</Text></TouchableOpacity> );};const styles = { enabled: { ...SHADOW.small, backgroundColor: Colors.mainColor, alignSelf: 'center', alignItems: 'center', justifyContent: 'center', height: 50, width: DIMENSIONS.width * 0.7, marginBottom: 15, borderColor: Colors.borderColor, borderRadius: BORDER_RADIUS.large, }, textStyle: { ...TEXT_BASE.textBold, color: Colors.white, },};export default SubmitButtonPink;Any idea why it's happens ?