Separating styles from component code

Let's assume we want to build a Button component.

A simple button will look something like this:

Button.component.js

import React, { Component } from 'react';
import { StyleSheet, Text, View} from 'react-native';

class Button extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.buttonText}> Press Me! </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    padding: 10,
    alignItems:'center',
    justifyContent:'center',
    backgroundColor: '#43a1c9',
  },
  buttonText: {
    fontSize: 20,
    textAlign: 'center'
  }
});

export default Button;

This will produce a nice looking button component. But we suggest that you move the styles to a different file Button.component.style.js.

Modifying the code we get.

Button.component.js

import React, { Component } from 'react';
import { StyleSheet, Text, View} from 'react-native';
import styles from './Button.component.style.js';

class Button extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.buttonText}> Press Me! </Text>
      </View>
    );
  }
}

export default Button;

Button.component.style.js

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  container: {
    padding: 10,
    alignItems:'center',
    justifyContent:'center',
    backgroundColor: '#43a1c9',
  },
  buttonText: {
    fontSize: 20,
    textAlign: 'center'
  }
});

This has a few benefits:

• This makes the component code much cleaner. The style is present in its own separate file.
• This allows you to write two different style files for Android and iOS if required. Thus, you can keep the same functionality but the button can look different based on the requirement for the platform.

For example:

Button.component.js

import React, { Component } from 'react';
import { StyleSheet, Text, View} from 'react-native';
import styles from './Button.component.style.js';

class Button extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.buttonText}> Press Me! </Text>
      </View>
    );
  }
}

export default Button;

iOS specific style

Button.component.style.ios.js

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  container: {
    padding: 10,
    alignItems:'center',
    justifyContent:'center',
    backgroundColor: '#43a1c9',
  },
  buttonText: {
    fontSize: 20,
    textAlign: 'center'
  }
});

Android specific style

Button.component.style.android.js

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  container: {
    padding: 10,
    borderWidth: 1,
    alignItems:'center',
    justifyContent:'center',
    backgroundColor: '#d2843b'
  },
  buttonText: {
    fontSize: 20,
    textAlign: 'center'
  }
});

Thus by simply moving the styles into a separate file, we could achieve a style code that behaves exactly the way we needed on different platforms. Also, we could reuse the component logic.

Conclusion

In Web, we have lots of production grade tools like Sass, Less, etc which allow us to write modular, scoped CSS which is easier to manage. These tools then take care of building all our style code into one cohesive stylesheet for our entire application. In React Native, we must think of styling in a slightly different manner. By doing some pre-planning and organization before writing the code for the components, we can reduce code duplication and unnecessary confusions. It takes a bit of getting used to, but styling in React Native is as powerful as CSS for the web and is the fastest way to build multi-platform native applications.