Passing Styles Based on Parent Component in React Native

Question

I have a component that is being passed a style so..

TextFile.js:

 
  This is a li         


        

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.

Answer 2

In my initial TextFile, I passed style as an argument, and in the styles array, just used style as the second item in the array.

const TextFile = ({ text, style }) => (
   <Text style=([styles.text, style])> {text} </Text>
);

Whenever TextFile gets used, it will apply any styles being given within that component, and/or default to the initial styles it's being given in styles.text.

Thank you @Li357!