How to pass parameters in StyleSheet in React native with Typescript

Question

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?

Answer 1

To do what you are stating you have to pass parameters to your StyleSheet and define it at the top of your component

So in your component do such...

Add parameters to your StyleSheet definition.

export const styling = (someBoolean:boolean) =>
  StyleSheet.create({
    conditionalStyle:{
        marginTop: someBoolean ? 20 : 5
    }
});

Import the Style Function (If from an external file).

import styling from ...

Define styles in your Component.

const Header:FC<HeaderProps> = ({ someBoolean }) => (

    const styles = styling(someBoolean);

    <View style={styles.conditionalStyle}>
      <Text></Text>
    </View>
);

And this way of sending parameters to the StyleSheet will allow you to programmatically update different style values through useState or Redux

Answer 2

Another option is to define different styles for different occasions and condition them during passing to View

Styles defined outside the component:

const style = StyleSheet.create({
  button: {
    backgroundColor: 'white',
    padding: 20
  },
  buttonDisabled: {
    backgroundColor: 'grey'
  },
});

Usage:

<View style={[style.button, isDisabled && style.buttonDisabled]}>
    <Text></Text>
</View>

Of course this option has some limits - like it wont solve your problem if you want to pass the value of some styles(for example: you want to pass the margin value). But if it's already defined and you want to on/off some additional styles, then it may be good option and pretty well readable.