title: React - Global styles
body: <p>(I think this is not opinion based, I am asking for the common use of something, in order to achieve a good refactored code)</p>
  <p>How to properly use global styles in a React Project? I have seen lot of people using it, but what's the idea? I mean, is this a module to define ultra-generalized styles, or just a file in which we write styles that are common in other components?</p>
  <p>Currently, this is my project structure:</p>
  <pre><code>app/
  
     components/
        Profile/
           Header.js
           styles/
               styles.js
  
     screens/
         Profile/
             Profile.js
             EditProfile.js
             styles/
                 styles.js
  
     theme/
        theme.js
  
     styles/
        globalStyles.js
     
     utils/
  
     lib/
  
     ...
  </code></pre>
  <p>Until now, I was just writing all styles inside components, and having long files of styles wasn't really good. That is why I decided to move the specific styles from each component inside a external modules (specific for each concept/component).</p>
  <p>But, whats about globalStyles.js? Why should developers use it?</p>
  <p>Right now, I am thinking about coding something like this, but seems super bad idea, I mean, it is just like if I am applying the idea of &quot;global styles&quot; incorrectly, because these styles seems so simple, and an app can perfectly have multiple types of texts, of multiple dimensions, which might be the consequence of a limited UI or a giant globalStyles file...</p>
  <pre><code>import { StyleSheet } from &quot;react-native&quot;;
  
  export default StyleSheet.create({
    /*
      Flex column containers ??? 
    */
    flexContainer: {
      flex: 1,
    },
    flexCenteredContainer: {
      flex: 1,
      justifyContent: &quot;center&quot;,
      alignItems: &quot;center&quot;,
    },
    flexVerticallyCenteredContainer: {
      flex: 1,
      justifyContent: &quot;center&quot;,
    },
    flexHorizontallyCenteredContainer: {
      flex: 1,
      alignItems: &quot;center&quot;,
    },
    /* 
      Flex row containers ????
    */
    flexRowContainer: {
      flexDirection: &quot;row&quot;,
    },
    flexRowCenteredContainer: {
      flexDirection: &quot;row&quot;,
      justifyContent: &quot;center&quot;,
      alignItems: &quot;center&quot;,
    },
    flexRowVerticallyCenteredContainer: {
      flexDirection: &quot;row&quot;,
      alignItems: &quot;center&quot;,
    },
    flexRowHorizontallyCenteredContainer: {
      flexDirection: &quot;row&quot;,
      justifyContent: &quot;center&quot;,
    },
    flexReversedRowContainer: {
      flexDirection: &quot;row-reverse&quot;,
    },
    flexReversedRowCenteredContainer: {
      flexDirection: &quot;row-reverse&quot;,
      justifyContent: &quot;center&quot;,
      alignItems: &quot;center&quot;,
    },
    flexReversedRowVerticallyCenteredContainer: {
      flexDirection: &quot;row-reverse&quot;,
      alignItems: &quot;center&quot;,
    },
    flexReversedRowHorizontallyCenteredContainer: {
      flexDirection: &quot;row-reverse&quot;,
      justifyContent: &quot;center&quot;,
    },
    /* 
      Texts, ... ???
    */
  });
  </code></pre>