How do I type a function inside the stylesheet in React Native CLI?

Question

import { StyleSheet, TextStyle, ViewStyle, ImageStyle } from 'react-native';

export const styles = StyleSheet.create({
    spacing: (marginBottom: number) => {
        return {
            marginBottom,
        }
    }
});

The error returned was:

Type '(marginBottom: number) => { marginBottom: number; }' is not assignable to type 'ViewStyle | TextStyle | ImageStyle'.ts(2322)

The code even works, but returns the mentioned error. Usage is supposed to be like this:

<View style={styles.spacing(50)}>
    <Button title={'Login'} onPress={handleSign} />
</View>

Does this answer your question? [Can I make dynamic styles in React Native?](https://stackoverflow.com/questions/29363671/can-i-make-dynamic-styles-in-react-native) — user18309290, Nov 28 '22 at 14:40

score 0 · Answer 1 · answered Nov 28 '22 at 14:42

0

I think that's not allowed to pass to functions/class to StyleSheet.create.

You can apply static style and inline style like this:

<View style={[styles.myStaticStyle, { marginBottom:50 }]}>
    <Button title={'Login'} onPress={handleSign} />
</View>

You can apply style.prop conditionally like this:

<View style={[i > 20 ? { marginBottom:50 } : null]}>
    <Button title={'Login'} onPress={handleSign} />
</View>

answered Nov 28 '22 at 14:42

Michael Bahl

2,941
1
13
16

I can even do that, because it works. I think it's a typing problem. – NathanMoreira Nov 28 '22 at 14:53

How do I type a function inside the stylesheet in React Native CLI?

1 Answers1