title: React Native: Different styles applied on orientation change
body: <p>I'm developing a <strong>React Native</strong> application to be deployed as a native application on iOS and Android (and Windows, if possible).</p>
  
  <p>The problem is that we want the layout to be different <strong>depending on screen dimensions and its orientation.</strong></p>
  
  <p>I've made some functions that return the <strong>styles object</strong> and are called on every component render's function, so I am able to apply different styles at application startup, but if the orientation (or screen's size) changes once the app has been initialized, they aren't recalculated nor reapplied.</p>
  
  <p>I've added listeners to the top rendered so it updates its state on orientation change (and it forces a render for the rest of the application), but the subcomponents are not rerendering (because, in fact, <strong>they have not been changed</strong>).</p>
  
  <p>So, <strong>my question is:</strong> how can I make to have styles that may be <strong>completely different</strong> based on screen size and orientation, just as with <strong>CSS Media Queries</strong> (which are rendered on the fly)?</p>
  
  <p><em>I've already tried <a href="https://github.com/adbayb/react-native-responsive" rel="noreferrer">react-native-responsive</a> module without luck.</em></p>
  
  <p>Thank you!</p>