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 };