Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6290

How to pass parameters in StyleSheet in React native with Typescript

$
0
0

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?


Viewing all articles
Browse latest Browse all 6290

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>