I have just switched my Javascript react native project to a Typescript project, but when I changed it, I got a lot of errors on inserting functions in StyleSheet()
Previously i used to do it like this:
const Header = ({ someBoolean }) => (<View style={styles.conditionalStyle(someBoolean)}><Text></Text></View>);const styles = StyleSheet.create({ conditionalStyle: (someBoolean) => ({ marginTop: someBoolean ? 20 : 5 })});
But when i switched to typescript, it started throwing these errors:
Type `(absolute: any) => { height: number; width: number; display: string; flexDirection: string; borderBottomLeftRadius: number; borderBottomRightRadius: number; position: string; zIndex: number;}` is not assignable to type `ViewStyle | TextStyle | ImageStyle` ts(2322)Header.tsx(81, 3):The expected type comes from property `containerMain` which is declared here on type `NamedStyles<any> | NamedStyles<{ container: { height: number; width: number; display: "flex"; flexDirection: "row"; borderBottomLeftRadius: number; borderBottomRightRadius: number; }; ... 8 more ...; screen: (absolute: any) => { ...; };}> | NamedStyles<...>`
Here is an example of what my code looks like:
const Header: FC<HeaderProps> = ({ someBoolean }) => (<View style={styles.conditionalStyle(someBoolean)}><Text></Text></View>);const styles = StyleSheet.create({ conditionalStyle: (someBoolean) => ({ // ERROR marginTop: someBoolean ? 20 : 5 })});
Is there an alternative way to pass conditional styles/props?