React Native Style Guide

This certainly makes it easier to write platform-specific code, but imagine having to declare the font family or indeed any base styles for each platform everywhere we want to use a Text component in our application. For web developers who are used to the inheritance pattern of CSS, this kind of repetition just won’t do. Fortunately, we can recreate a different sort of inheritance pattern for styles using JavaScript. For our projects, we create a common directory inside the main js directory. This folder houses commonly-reused components throughout the app. For example, we can declare common Text and Header components like so: /* * @providesModule CommonText */ import React from 'react' ; import ReactNative from 'react-native' ; import PlatformStyleSheet from 'PlatformStyleSheet' ; const styles = PlatformStyleSheet.create({ font : { ios : { fontFamily : ‘Arial’, }, android : { fontFamily : ‘Roboto’, }, }, h2 : {

Coming from a web development background, having to maintain styles for both Android and iOS takes some getting used to. React Native ships with a couple ways to handle this. For complex components with vast disparities, it might be a good idea to separate out iOS and Android components into separate files.  For our purposes here, I will focus on the approach we are using with the Platform module. As the example below illustrates, importing the Platform module into a stylesheet will tap into React Native’s platform-detection logic and apply the appropriate styles. In this case, we are applying a base font family for each platform. import { Platform, StyleSheet } from 'react-native' ; const styles = StyleSheet.create({ container: { flex: 1 , ...Platform. select ({ ios: { fontFamily: 'Arial' , }, android: { fontFamily: 'Roboto' , }, }), }, }); While this pattern is useful, it’s a little verbose.

Main reasons why to use: it grows like a crazy and even faster than ReactJS: The main reason why the React Native may be a good choice for you is that it grows like a crazy: