title: React Native app with same code but different result in iOS and Android
body: <p>I am new with React and I am taking a course in Udemy about React Native.
  I came across with a styling issue which using same code and StyleSheet property, the borderWith in a Text, it looks different in Android and iOS.</p>
  
  <p>When I was adding a thick "borderWith" to my Text component, in iOS the text it takes a bit of margin automatically from the border but Android mixes the border with the Text.
  I saw a solution that it is using the Platform module or file extension but I would like to know if I could avoid this case and have most of my code similar to both devices.</p>
  
  <pre><code>const BoxScreen = () =&gt; {
      return (
          &lt;View style={styles.viewStyle}&gt;
              &lt;Text style={styles.textStyle}&gt;Box screen&lt;/Text&gt;
          &lt;/View&gt;
      );
  };
  
  const styles = StyleSheet.create({
      viewStyle: {
          borderWidth: 3,
          borderColor: 'black',
      },
      textStyle: {
          borderWidth: 10,
          borderColor: 'red',
          // marginVertical: 20,
          marginHorizontal: 20,
      }
  }); 
  </code></pre>
  
  <p>Result in iOS:</p>
  
  <p><a href="https://i.stack.imgur.com/2nMLF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2nMLF.png" alt="Result in iOS"></a></p>
  
  <p>Result in Android:</p>
  
  <p><a href="https://i.stack.imgur.com/u5TDX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/u5TDX.png" alt="Result in Android"></a></p>