3

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",
    }
})
Nikitas IO
  • 696
  • 5
  • 20

1 Answers1

3

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({ })

Nikitas IO
  • 696
  • 5
  • 20
  • As they are independent, I would expect no interference even without `const`. – Philippe Feb 11 '23 at 23:31
  • That's what I expected too but not using `const` creates this bug. The problem probably occurs after all of the components get compiled into one app. – Nikitas IO Feb 12 '23 at 14:00