Styles folder - gabrielrangel95/react-native-folder-structure GitHub Wiki

Inside the styles folder, we have three files:

  • index.ts (where we export everything)
  • metrics.ts (where we have all the metrics of the app)
  • colors.ts (where we have the colors pattern of the app).

Ex: colors.ts

<colors.ts>

const colors =  {
  white: '#FFF',
  lighter: '#F2F2F2',
  light: '#DDD',
  regular: '#999',
  dark: '#666',
  darker: '#111',
  black: '#000',

  primary: '#2783ef',
  primaryDark: '#1e579a',
  secundary: '#9F81BE',
  danger: '#ff0000',

  transparent: 'transparent',
  whiteTransparent: 'rgba(255, 255, 255, 0.2)',
  darkTransparent: 'rgba(0, 0, 0, 0.6)',
  regularTransparent: 'rgba(0, 0, 0, 0.3)'
};

export { colors };

Ex: metrics.ts

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

const SCREEN_WIDTH = Dimensions.get('window').width;
const SCREEN_HEIGHT = Dimensions.get('window').height;
const IS_SMALL_PHONE = SCREEN_WIDTH < 350;
const IS_SHORT_PHONE = SCREEN_HEIGHT < 600;
const IS_TALL_PHONE = SCREEN_HEIGHT > 800;

const metrics = {
  SCREEN_WIDTH,
  SCREEN_HEIGHT,
  IS_SMALL_PHONE,
  IS_TALL_PHONE,
  IS_SHORT_PHONE
};

export { metrics }

Ex: index.ts

import { colors } from './colors';
import { metrics } from './metrics';

export { colors, metrics };
⚠️ **GitHub.com Fallback** ⚠️