ReactNative Component and Styles Snippet

snippets.cson

'.source.js':
  'ReactNative Component':
    'prefix': 'rnc'
    'body': """
    'use strict';

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

    class ${1:Component} extends React.Component {
      render() {
        return (
          $2
        );
      }
    }

    export default ${1:Component};
    """

  'Import Styles':
    'prefix': 'is'
    'body': "import styles from './styles';"

  'ReactNative Style':
    'prefix': 'rns'
    'body': """
    'use strict';

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

    module.exports = StyleSheet.create({
      ${1:Attribute}: ${2:Value},
    });
    """
    
  'React Native Stateless Function':
    'prefix': 'rnsf'
    'body': """
    'use strict';

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

    export default function(props){
      return (
        <${1:Component}>
          $2
        </${1:Component}>
      );
    };
    """

Notes

Very quickly, you'll want to split up the component tag from its style. Here is a way to start: in the same component folder, you are invited to create 2 files, a $componentName.js, and a styles.js. The $componentName.js import the corresponding styles through import styles from './styles';.

Usage

Example

Add your snippet into Atom