styles.js

// 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

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

export default colors;

// src/styles/fonts.js

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

export default fonts;

// src/styles/metrics.js

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

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

const metrics = {
  smallMargin: 5,
  baseMargin: 10,
  doubleBaseMargin: 20,
  screenWidth: width < height ? width : height,
  screenHeight: width < height ? height : width,
  tabBarHeight: 54,
  navBarHeight: (Platform.OS === 'ios') ? 64 : 54,
  statusBarHeight: (Platform.OS === 'ios') ? 20 : 0,
  baseRadius: 3,
};

export default metrics;

// src/styles/general.js

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

const general = {
  container: {
    flex: 1,
    backgroundColor: colors.background,
  },
  section: {
    margin: metrics.doubleBaseMargin,
  },
  sectionTitle: {
    color: colors.text,
    fontWeight: 'bold',
    fontSize: fonts.regular,
    alignSelf: 'center',
    marginBottom: metrics.doubleBaseMargin,
  },
};

export default general;