IConstants | EF React Native Style Framework

The constants interface provides primitive values for various styling aliases. They can be used as default values for static styles

example

Using the Constants ```ts import { StyleSheet } from 'react-native';

import { constants } from '@ef-carbon/react-native-style';

export default StyleSheet.create({ container: { // Spacing margin: constants.spacing.normal, padding: constants.padding.normal,

// Borders
borderRadius: constants.border.radius.normal,
borderWidth: constants.border.width.normal,

// Colours
borderColor: constants.colour.grey.darker,
backgroundColor: constants.colour.grey.lightest,

}, text: { // Fonts fontSize: constants.font.size.normal, lineHeight: constants.font.lineHeight.normal, }, }); `

Hierarchy

IConstants

Implemented by

Constants

Index

Properties

animation

animation: IAnimation

Provides timings and easings aliases to use with animations in an application

example: Using the Constants ```ts import { Animated } from 'react-native'; import { constants } from '@ef-carbon/react-native-style'; const value = new Animated.Value(0); Animated.timing(value, { easing: constants.animation.easing.normal, duration: constants.animation.timing.normal, toValue: 1 }).start(); ```
see: IAnimation
see: Animation

border

border: IBorder

Aliases that are related to border styling. Can provide width, radius and other useful aliases

example: Using the Constants ```ts import { StyleSheet } from 'react-native'; import { constants } from '@ef-carbon/react-native-style'; export default StyleSheet.create({ container: { borderRadius: constants.border.radius.normal, borderWidth: constants.border.width.normal, }, }); ```
see: IBorder
see: Border

colour

colour: IColours

A large set of aliased colours. Follow the Material Design colour names.

example: Using the Constants ```ts import { StyleSheet } from 'react-native'; import { constants } from '@ef-carbon/react-native-style'; export default StyleSheet.create({ blue: { borderColor: constants.colour.blue.darker, backgroundColor: constants.colour.blue.lightest, }, orange: { borderColor: constants.colour.orange.darker, backgroundColor: constants.colour.orange.lightest, }, deepPurple: { borderColor: constants.colour.deepPurple.darker, backgroundColor: constants.colour.deepPurple.lightest, }, }); ```
see: IColours
see: Colours

font

font: IFont

Aliases that are related to font styling. Can provide sizing, spacing and other useful aliases

example: Using the Constants ```ts import { StyleSheet } from 'react-native'; import { constants } from '@ef-carbon/react-native-style'; export default StyleSheet.create({ text: { fontSize: constants.font.size.normal, lineHeight: constants.font.lineHeight.normal, }, }); ```
see: IFont
see: Font

opacity

opacity: IOpacity

Opacity aliases that can be used to specify the transparency of objects.

example: Using the Constants ```ts import { StyleSheet } from 'react-native'; import { constants } from '@ef-carbon/react-native-style'; export default StyleSheet.create({ transparent: { opacity: constants.opacity.transparent, }, translucent: { opacity: constants.opacity.translucent, }, semi: { opacity: constants.opacity.semi, }, cloudy: { opacity: constants.opacity.cloudy, }, opaque: { opacity: constants.opacity.opaque, }, }); ```
see: IOpacity
see: Opacity

safe

safe: ISafe

Provides orientation safe spacing values that can be used on views to avoid notches. They must be applied dynamically as the values change depending on the orientation of the device. Usually the Padding and Margin mixins are used instead.

example: Using the Constants ```ts import * as React from 'react'; import { Text, View } from 'react-native'; import { constants } from '@ef-carbon/react-native-style'; class ThemedComponent extends React.PureComponent { render(): React.ReactNode { const safe: ViewStyle = { paddingTop: constants.safe.top, paddingLeft: constants.safe.left, paddinRight: constants.safe.right, paddingBottom: constants.safe.bottom, }; return ( Hey, there! ); } }; ```
example: Padding Mixin ```ts import * as React from 'react'; import { Text, View } from 'react-native'; import { padding } from '@ef-carbon/react-native-style'; class ThemedComponent extends React.PureComponent { render(): React.ReactNode { return ( Hey, there! ); } }; ```
see: ISafe
see: Safe
see: Padding
see: Margin

spacing

spacing: ISpacing

Aliases that are related to spacings. These are used for the padding and margin, usually the Padding and Margin mixins are used instead

example: Using the Constants ```ts import { StyleSheet } from 'react-native'; import { constants } from '@ef-carbon/react-native-style'; export default StyleSheet.create({ container: { margin: constants.spacing.normal, padding: constants.padding.normal, }, }); ```
example: Padding Mixin ```ts import { StyleSheet } from 'react-native'; import { padding } from '@ef-carbon/react-native-style'; export default StyleSheet.create({ container: { ...padding.normal, }, }); ```
see: ISpacing
see: Spacing
see: Padding
see: Margin

timing

timing: ITiming

Timings can be used to provide a consistent feel for durations in an application. They are usually used for delays to provide a consistent feel.

example: Using the Constants ```ts import { constants } from '@ef-carbon/react-native-style'; setTimeout(doWork, constants.timing.normal); ```
see: ITiming
see: Timing