Styles from one custom React Native component remove styles from another custom component

Question

So I created 2 custom React Native components and imported them to my App.js file, but it seems that the styles from the 1st component are interfering with the styles from 2nd component. Both of these 2 custom components have their own custom styles and are independent of one another. However, only the styles from the 2nd component seem to be working. It's as if the styles from the one component cancel out the styles from the other component:

Component1:

import { Text, StyleSheet } from 'react-native';

function Component1({children}) {
    return (<Text style={styles.component1Styles]}>{children}</Text>);
}

export default Component1;

styles = StyleSheet.create({
    component1Styles: {
        fontFamily: 'open-sans',
        fontSize: 20,
        color: "white",
    }
})

Component2:

import { Text, StyleSheet } from 'react-native';

function Component2({children}) {
    return (<Text style={styles.component2Styles]}>{children}</Text>);
}

export default Component2;

styles = StyleSheet.create({
    component2Styles: {
        fontFamily: 'open-sans-bold',
        fontSize: 30,
        color: "black",
    }
})

Answer 1

Solution

The styles from the one component interfere with styles of the other component because they are not being saved as constants. Use const styles = StyleSheet.create({ }) instead of styles = StyleSheet.create({ })