Is there a need to use StyleSheet.create?

Question

I am defining styles in this manner:

const styles = StyleSheet.create({
    container: {},
    tabContent: {
        alignItems: "flex-start",
        flexDirection: "column",
        padding: 21
    },
    tabHeader: {
        flex: 0,
        fontSize: 10,
        paddingTop: 10,
    },
    tabText: {
        flex: 0,
        fontSize: 14,
        paddingTop: 10,
        textAlign: "left"
    },
})

However, one time I forgot to use StyleSheet.create and used a plain object:

const styles = {
    container: {},
    tabContent: {
        alignItems: "flex-start",
        flexDirection: "column",
        padding: 21
    },
    tabHeader: {
        flex: 0,
        fontSize: 20,
        paddingTop: 10,
    },
    tabText: {
        flex: 0,
        fontSize: 14,
        paddingTop: 10,
        textAlign: "left"
    },
}

Surprisingly it worked. Is there a need to use StyleSheet.create to define styles or can one use plain objects?

Answer 1

I think its still better to use StyleSheet where possible as its more performant than using regular objects.

From React Native Docs:

Performance:

• Making a stylesheet from a style object makes it possible to refer to it by ID instead of creating a new style object every time.
• It also allows to send the style only once through the bridge. All subsequent uses are going to refer an id (not implemented yet).

Remember seeing something somewhere (think it was a github issue) with a similar question and someone saying it's still better to use StyleSheet for performance.

Hope this helps!