Can I pass a Stylesheet and custom prop in the same component?-CodePudding

This is what I have currently and it works fine:

<View style = {styles.text}>
       <Text style = {{color: colors.text}}> hello this is a sample image with text</Text>
 </View>

I am using dark mode, so I added a const {colors} = useTheme(); to the top of my file. However, I cannot call that custom color prop inside a stylesheet like:

text: {
        marginBottom: 15,
        fontWeight: 'bold',
        fontSize: 20,
        **color: colors.text**
    },

Dark mode won't work this way.

I am sure there is a fix for this, which I will look into into the future.

For now, my current question is: can I pass a Stylesheet and a custom styling option into the same component?

<View>
       <Text style = {styles.text} && {{color: colors.text}}> hello this is a sample image with text</Text>
 </View>

for example

CodePudding user response：

You can use

<Text style={[styles.text, {color: colors.text}]}>Sample</Text>;

<Text style={{...styles.text, color: colors.text}}>Sample</Text>