How to combine a styles object with an inline style in React Native?

Question

I am trying to combine an inline style transform: [{ rotate: '180deg'}] with an already existing styles object styles.buttonText without modifying the styles object. I have tried the following ways:

<Text style={{...styles.buttonText, transform: [{ rotate: '180deg'}]}}>^</Text>

and

<Text style={{...styles.buttonText, ...{transform: [{ rotate: '180deg'}]}}}>^</Text>

and

<Text style={Object.assign({}, styles.buttonText, {transform: [{ rotate: '180deg'}]})}>^</Text>

But I keep getting this same error message:

TypeError: In this environment the sources for assign MUST be an object. This error is a performance optimization and not spec compliant.

Does anyone know what is going on or how I can get this to work?

AmerllicA · Accepted Answer · 2018-09-25 07:28:18Z

16

If you want to combine styles on a element you have to pass an array to the style property. The last item in the array will take precedence.

e.g:

<Text style={[styles.buttonText, {transform: [{ rotate: '180deg' }]}]}>^</Text>

see style docs

edited Sep 25, 2018 at 7:28

AmerllicA

33.2k18 gold badges146 silver badges170 bronze badges

answered Feb 16, 2018 at 13:46

devlighted

2112 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to combine a styles object with an inline style in React Native?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related