React Native with redux: what is a good way to store-manage dynamic styles?

Question

I am creating an app with some style differences in portrait-landscape rendering. For example the navigation bar height can be different and there are several sizes that I want to keep under strict control to make sure certain control/text fit to screen without scrolling.

I am fine with calculating stylesheets dynamically or caching them with either own utilities or utilities like react-native-extended-stylesheet yet.. where to store the calculated sheets for portrait landscape?

Possible options 1. A module level variable in my style.js. Possibly calculated on demand and cached later. I'd need to pass screen size to it though 2. Make styles a part of a state and update it on orientation changes action 3. Anything else

What makes most sense? What do you use in your applications?

Answer 1

I think a stylesheet library should take care about caching styles for landscape/portrait layouts and developer should just write styles and component logic.
I'm working on it currently here: https://github.com/vitalets/react-native-extended-stylesheet/issues/9
Until it is ready I think the best option is to cache on module level.

const styleLandscape = ...
const stylePorttrait = ...

Putting styles into component state will mix it with logic data that seems not good.