CODEWITHSUNDEEP
javascriptreactjsreact-native
Dres
Dres

Reputation: 1499

Passing Styles Based on Parent Component in React Native

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?

Upvotes: 3

Views: 5542

Answers (2)

Dres
Dres

Reputation: 1499

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!

Upvotes: 0

Andrew Li
Andrew Li

Reputation: 57924

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.

Upvotes: 14

Related Questions