bpk-styles

bpk-styles

Common styles for React Native components.

Installation

Check the main Readme for a complete installation guide.

Shadows

The package includes definitions for the Backpack shadows. These are available as objects that can be spread in style definitions. These are iOS only and need to be complemented with an appropriate elevation for Android.

Usage

import React from 'react';
import { StyleSheet } from 'react-native';
import {
  colorWhite,
  borderRadiusXs,
  elevationBase,
  elevationLg,
} from '@skyscanner/bpk-foundations-react-native/tokens/base.react.native';
import { shadows } from 'backpack-react-native/bpk-styles';

const styles = StyleSheet.create({
  component: {
    backgroundColor: colorWhite,
    borderRadius: borderRadiusXs,
    ...Platform.select({
      ios: shadows.base(),
      android: {
        elevation: elevationBase,
      },
    }),
  },
  componentFocused: Platform.select({
    ios: shadows.large(),
    android: {
      elevation: elevationLg,
    },
  }),
});

const MyComponent = props => {
  const { focused, children } = props;
  return (
    <View style={[styles.component, focused && styles.componentFocused]}>
      {children}
    </View>
  );
};

export default MyComponent;

Gradients

The package includes definitions for the Backpack gradients. These are available as objects that can be spread in the props of a LinearGradient from react-native-linear-gradient.

Usage

import React from 'react';
import { View } from 'react-native-linear-gradient';
import LinearGradient from 'react-native-linear-gradient';
import {
  colorWhite,
  borderRadiusXs,
  elevationBase,
  elevationLg,
} from '@skyscanner/bpk-foundations-react-native/tokens/base.react.native';
import { gradients } from 'bpk-styles';

const MyComponent = props => {
  return (
    <View>
      <LinearGradient {...gradients.primary()}>{children}</LinearGradient>
      <LinearGradient {...gradients.primary(gradients.ANGLES.down)}>
        {children}
      </LinearGradient>
    </View>
  );
};

export default MyComponent;

API

The gradients.primary function takes an optional argument indicating the direction(given by the start to end) of the gradient. The valid directions are available in gradients.ANGLES and are:

• ANGLES.down
• ANGLES.right
• ANGLES.left
• ANGLES.up
• ANGLES.topLeft
• ANGLES.topRight
• ANGLES.bottomLeft
• ANGLES.bottomRight