React Native Style Guide

1 Using Index management state 2. Detach edit state and view state 3. Proper state sharing 4. Universal Reducer State sharing 5. Connected Selector consolidation Processing

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: