Passing Styles Based on Parent Component in React Native

Question

I have a <Text> component that is being passed a style so..

TextFile.js:

<Text style={styles.text}> 
  This is a line of text and this might be a second line 
</Text>

screenFile.js:

<View style={styles.viewContainer}>
    <TextFile style={styles.textWithinContainer}>
</View>

textFiles/styles.js:

text: {
    fontSize: 20,
    color: 'black',
    fontWeight: '400',
}

screenFiles/styles.js:

textWithinContainer: {
    textAlign: 'center',
}

textAlign within textWithInContainer is not being applied. If I add textAlign: 'center' to styles.text gives me the style I want but it's being used in different screens and I only want it centered in the screenFile. I want the styles from styles.textWithinContainer to override the styles in styles.text. How would I go about this?

Answer 1

You aren't delegating the styles you pass to TextFile to the actual Text element in TextFile. What you can do is add the styles together by passing an array of style objects to apply it:

<Text style={[styles.text, props.style]}> 
  This is a line of text and this might be a second line 
</Text>

From the React Native documentation:

You can also pass an array of styles - the last style in the array has precedence, so you can use this to inherit styles.

Thus, if you pass textAlign in textWithContainer, it'll be applied in the Text component, and it can be reused as you wish without textAlign.