diego3g

export default class MyComponent extends Component {
  render() {
    return (
      <View style={styles.container} />
    );
  }
}

const styles = StyleSheet.create({
  container: {

diego3g

import styles from './styles';

export default class MyComponent extends Component {
  render() {
    return (
      <View style={styles.container} />
    );
  }
}

diego3g

const styles = StyleSheet.create({
  container: {
    // My styles
  },
});

export default styles;

diego3g

// src/styles/index.js

import colors from './colors';
import fonts from './fonts';
import metrics from './metrics';
import general from './general';

export { colors, fonts, metrics, general };

// src/styles/colors.js

diego3g

// src/styles/index.js

import colors from './colors';
import fonts from './fonts';
import metrics from './metrics';
import general from './general';

export { colors, fonts, metrics, general };

diego3g

// src/styles/colors.js

const colors = {
  header: '#333333',
  primary: '#069',
};

export default colors;

diego3g

// src/styles/fonts.js

const fonts = {
  input: 16,
  regular: 14,
  medium: 12,
  small: 11,
  tiny: 10,
};

diego3g

// src/styles/metrics.js

import { Dimensions, Platform } from 'react-native';

const { width, height } = Dimensions.get('window');

const metrics = {
  smallMargin: 5,
  baseMargin: 10,
  doubleBaseMargin: 20,

diego3g

// src/styles/general.js

import metrics from './metrics';
import colors from './colors';
import fonts from './fonts';

const general = {
  container: {
    flex: 1,
    backgroundColor: colors.background,

diego3g

import { StyleSheet } from 'react-native';
import { general } from 'styles';

const styles = StyleSheet.create({
  ...general,
});

export default styles;