Typing StyleSheet

StyleSheet is a React Native API used to create styles for components.

import { StyleSheet } from "react-native";

const styles = StyleSheet.create({
    container: {
        flex: 1
    }
});

The created styles can be used with components such as View, Text, TextInput, and Image.

Import StyleSheet from React Native.

import { StyleSheet } from "react-native";

TypeScript can understand the React Native StyleSheet API through its available type definitions.

const styles = StyleSheet.create({
    container: {
        padding: 20
    }
});

The create() method is used to define styles.

import {
    View,
    StyleSheet
} from "react-native";

const styles = StyleSheet.create({
    container: {
        padding: 20
    }
});

<View style={styles.container}>
    ...
</View>

const styles = StyleSheet.create({
    title: {
        fontSize: 24,
        fontWeight: "bold"
    }
});

<Text style={styles.title}>
    Student Details
</Text>

• Keeps styles organized.
• Makes styles reusable.
• Improves code readability.
• Makes components easier to maintain.
• Works naturally with React Native components.

React Native provides many style properties.

const styles = StyleSheet.create({
    box: {
        width: 200,
        height: 100,
        padding: 10,
        margin: 10
    }
});

TypeScript helps provide editor suggestions while writing these properties.

React Native uses Flexbox for layout.

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center"
    }
});

The flexDirection property accepts valid React Native direction values.

const styles = StyleSheet.create({
    row: {
        flexDirection: "row"
    },

    column: {
        flexDirection: "column"
    }
});

Incorrect values can be identified by TypeScript-aware development tools.

const styles = StyleSheet.create({
    heading: {
        fontSize: 24,
        fontWeight: "bold",
        textAlign: "center"
    }
});

These styles can be applied to a Text component.

const styles = StyleSheet.create({
    input: {
        borderWidth: 1,
        borderRadius: 8,
        padding: 10,
        marginBottom: 12
    }
});

The style can be reused for multiple TextInput components.

const styles = StyleSheet.create({
    image: {
        width: 120,
        height: 120,
        borderRadius: 60
    }
});

StyleSheet can also be used with Image components.

A StyleSheet can contain multiple named styles.

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 20
    },

    title: {
        fontSize: 24
    },

    input: {
        borderWidth: 1,
        padding: 10
    },

    buttonArea: {
        marginTop: 20
    }
});

Multiple styles can be combined using an array.

<Text
    style={[
        styles.title,
        styles.center
    ]}
>
    Welcome
</Text>

This is useful when common and specific styles need to be combined.

Styles can be selected based on application state.

const [active, setActive] =
    useState<boolean>(true);

<View
    style={[
        styles.box,
        active && styles.activeBox
    ]}
>
    ...
</View>

TypeScript ensures that active is a boolean.

React Native provides style-related types that can be used when a component accepts custom styles.

import {
    StyleProp,
    ViewStyle
} from "react-native";

These types are useful for reusable components.

A custom component can accept an optional View style.

interface BoxProps {
    style?: StyleProp<ViewStyle>;
}

This allows the parent component to provide additional View styles.

import {
    View,
    StyleProp,
    ViewStyle
} from "react-native";

interface BoxProps {
    style?: StyleProp<ViewStyle>;
}

function Box({
    style
}: BoxProps): React.JSX.Element {

    return (
        <View
            style={[
                styles.box,
                style
            ]}
        />
    );
}

For reusable components that accept Text styles, React Native provides TextStyle.

import {
    StyleProp,
    TextStyle
} from "react-native";

interface TitleProps {
    style?: StyleProp<TextStyle>;
}

For reusable Image components, ImageStyle can be used.

import {
    StyleProp,
    ImageStyle
} from "react-native";

interface PhotoProps {
    style?: StyleProp<ImageStyle>;
}

Different React Native components can have different style types.

interface ComponentProps {
    containerStyle?: StyleProp<ViewStyle>;
    textStyle?: StyleProp<TextStyle>;
}

This allows a reusable component to accept styles for both its container and its text.

interface CardProps {
    style?: StyleProp<ViewStyle>;
}

function Card({
    style
}: CardProps): React.JSX.Element {

    return (
        <View
            style={[
                styles.card,
                style
            ]}
        >
            ...
        </View>
    );
}

The component keeps its default style while allowing additional styles.

Styles can also be calculated from values stored in variables.

const padding: number = 20;

const styles = StyleSheet.create({
    container: {
        padding: padding
    }
});

TypeScript ensures that padding is a number.

• Using invalid style property names.
• Using incorrect value types.
• Passing TextStyle to a View-only component.
• Using any instead of proper style types.
• Overusing inline styles when styles can be reused.
• Forgetting to import required style types.

TypeScript-aware tools can help identify incorrect style values while writing React Native code.

const styles = StyleSheet.create({
    title: {
        fontSize: 24,
        fontWeight: "bold"
    }
});

Using proper React Native style properties improves code safety and editor assistance.

• Use StyleSheet.create() for reusable styles.
• Keep styles organized by component purpose.
• Use StyleProp<ViewStyle> for custom View style props.
• Use StyleProp<TextStyle> for custom Text style props.
• Use StyleProp<ImageStyle> for custom Image style props.
• Use style arrays when combining styles.
• Avoid unnecessary use of any.

import {
    View,
    Text,
    StyleSheet,
    StyleProp,
    ViewStyle
} from "react-native";

interface CardProps {
    title: string;
    style?: StyleProp<ViewStyle>;
}

function Card({
    title,
    style
}: CardProps): React.JSX.Element {

    return (
        <View style={[styles.card, style]}>
            <Text style={styles.title}>
                {title}
            </Text>
        </View>
    );
}

import React from "react";

import {
    View,
    Text,
    StyleSheet,
    StyleProp,
    ViewStyle,
    TextStyle
} from "react-native";

interface CardProps {
    title: string;
    description: string;
    style?: StyleProp<ViewStyle>;
    titleStyle?: StyleProp<TextStyle>;
}

function InfoCard({
    title,
    description,
    style,
    titleStyle
}: CardProps): React.JSX.Element {

    return (
        <View style={[styles.card, style]}>

            <Text
                style={[
                    styles.title,
                    titleStyle
                ]}
            >
                {title}
            </Text>

            <Text style={styles.description}>
                {description}
            </Text>

        </View>
    );
}

export default function App(): React.JSX.Element {

    return (
        <View style={styles.container}>

            <InfoCard
                title="React Native"
                description="Learn React Native with TypeScript."
            />

            <InfoCard
                title="TypeScript"
                description="Write safer mobile applications."
                style={styles.secondCard}
                titleStyle={styles.specialTitle}
            />

        </View>
    );
}

const styles = StyleSheet.create({

    container: {
        flex: 1,
        padding: 20
    },

    card: {
        padding: 20,
        borderWidth: 1,
        borderRadius: 10,
        marginBottom: 15
    },

    secondCard: {
        padding: 25
    },

    title: {
        fontSize: 22,
        fontWeight: "bold",
        marginBottom: 8
    },

    specialTitle: {
        fontSize: 26
    },

    description: {
        fontSize: 16
    }

});

TypeScript helps make styling code easier to understand and maintain. It is especially useful when reusable components accept custom styles.

• Better style-related editor suggestions
• Safer custom style props
• Better reusable components
• Clearer component APIs
• Easier refactoring
• Fewer type-related mistakes

StyleSheet is an important part of React Native development. With TypeScript, we can create reusable and type-safe style props using types such as ViewStyle, TextStyle, and ImageStyle.

You should now understand StyleSheet.create(), reusable styles, style arrays, conditional styles, and typed style props for custom React Native components.