How to use the react-native-bpk-theming.getThemeAttributes function in react-native-bpk-theming

To help you get started, we’ve selected a few react-native-bpk-theming examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Skyscanner / backpack / native / packages / react-native-bpk-component-spinner / src / BpkSpinner.js View on Github external
const BpkSpinner = props => {
  const { small, type, ...rest } = props;
  const { theme } = props;
  let themeAttributes = getThemeAttributes(REQUIRED_THEME_ATTRIBUTES, theme);

  // Validate type.
  if (!Object.keys(SPINNER_TYPES).includes(type)) {
    throw new Error(
      `"${type}" is not a valid spinner type. Valid types are ${Object.keys(
        SPINNER_TYPES,
      ).join(', ')}`,
    );
  }

  // Validate that spinner is themeable and correct theming attribute has been
  // supplied. If not, disable theming.
  if (themeAttributes && type !== 'primary') {
    themeAttributes = null;
  }
github Skyscanner / backpack / native / packages / react-native-bpk-component-navigation-bar / src / BpkNavigationBar.android.js View on Github external
constructor(props) {
    super(props);
    this.theme = getThemeAttributes(
      ANDROID_THEME_ATTRIBUTES,
      this.props.theme || {},
    );
  }
github Skyscanner / backpack / native / packages / react-native-bpk-component-switch / src / BpkSwitch.js View on Github external
const BpkSwitch = props => {
  const { value, theme, ...rest } = props;
  const themeAttributes = getThemeAttributes(REQUIRED_THEME_ATTRIBUTES, theme);

  return (
github Skyscanner / backpack / native / packages / react-native-bpk-component-navigation-bar / src / BpkNavigationBar.ios.js View on Github external
constructor(props) {
    super(props);
    this.theme = getThemeAttributes(
      IOS_THEME_ATTRIBUTES,
      this.props.theme || {},
    );
  }
github Skyscanner / backpack / native / packages / react-native-bpk-component-button-link / src / BpkButtonLink.android.js View on Github external
const BpkButtonLink = (props: Props) => {
  const {
    accessibilityLabel,
    disabled,
    icon,
    iconAlignment,
    onPress,
    style,
    title,
    borderlessBackground,
    theme,
    textProps,
    ...rest
  } = props;

  const themeAttributes = getThemeAttributes(REQUIRED_THEME_ATTRIBUTES, theme);
  const themeStyle = themeAttributes
    ? { color: themeAttributes.buttonLinkTextColor }
    : null;

  const textStyle = [styles.text];
  const viewStyle = [styles.view];
  const iconStyle = [styles.icon];

  const accessibilityTraits = ['button'];

  if (iconAlignment === ICON_ALIGNMENTS.leading) {
    viewStyle.push(styles.viewLeading);
    iconStyle.push(styles.iconLeading);
  }

  if (themeStyle) {
github Skyscanner / backpack / native / packages / react-native-bpk-component-horizontal-nav / src / BpkHorizontalNavSelectedIndicator.js View on Github external
const BpkHorizontalNavSelectedIndicator = props => {
  const { theme, xOffset, width } = props;
  const style = [styles.selectedIndicator];

  const themeAttributes = getThemeAttributes(REQUIRED_THEME_ATTRIBUTES, theme);
  if (themeAttributes) {
    style.push({
      backgroundColor: themeAttributes.horizontalNavSelectedTextColor,
    });
  }

  const animationStyles = {
    transform: [
      {
        translateX: xOffset,
      },
    ],
    width,
  };
  return ;
};
github Skyscanner / backpack / native / packages / react-native-bpk-component-horizontal-nav / src / BpkHorizontalNavItem.js View on Github external
small,
    title,
    ...rest
  } = props;

  const accessibilityTraits = ['button'];
  const textSize = small ? 'sm' : 'base';
  const viewStyles = [styles.view];
  const textStyles = [styles.text];

  if (disabled) {
    accessibilityTraits.push('disabled');
    textStyles.push(styles.textDisabled);
  } else if (selected) {
    textStyles.push(styles.textSelected);
    const themeAttributes = getThemeAttributes(
      REQUIRED_THEME_ATTRIBUTES,
      theme,
    );

    if (themeAttributes) {
      textStyles.push({
        color: themeAttributes.horizontalNavSelectedTextColor,
      });
    }
  }

  if (small) {
    viewStyles.push(styles.viewSmall);
  }

  if (style) {
github Skyscanner / backpack / native / packages / react-native-bpk-component-navigation-bar / src / BpkNavigationBar.ios.js View on Github external
componentDidUpdate() {
    this.theme = getThemeAttributes(
      IOS_THEME_ATTRIBUTES,
      this.props.theme || {},
    );
  }
github Skyscanner / backpack / native / packages / react-native-bpk-component-button-link / src / BpkButtonLink.ios.js View on Github external
const BpkButtonLink = (props: Props) => {
  const {
    accessibilityLabel,
    disabled,
    icon,
    iconAlignment,
    large,
    onPress,
    title,
    theme,
    textProps,
    ...rest
  } = props;

  const themeAttributes = getThemeAttributes(REQUIRED_THEME_ATTRIBUTES, theme);
  const themeStyle = themeAttributes
    ? { color: themeAttributes.buttonLinkTextColor }
    : null;

  const viewStyle = [styles.view];
  const textStyle = [styles.text];
  const iconStyle = [styles.icon];

  const accessibilityTraits = ['button'];

  if (large) {
    viewStyle.push(styles.viewLarge);
  }

  if (iconAlignment === ICON_ALIGNMENTS.leading) {
    viewStyle.push(styles.viewLeading);
github Skyscanner / backpack / native / packages / react-native-bpk-component-navigation-bar / src / BpkNavigationBar.android.js View on Github external
componentDidUpdate() {
    this.theme = getThemeAttributes(
      ANDROID_THEME_ATTRIBUTES,
      this.props.theme || {},
    );
  }

react-native-bpk-theming

Backpack React Native theming utlities.

Apache-2.0
Latest version published 5 years ago

Package Health Score

70 / 100
Full package analysis

Similar packages