How to use react-native-bpk-theming - 10 common examples

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

export type Props = {
  title: TitleProp,
  theme: ?IOSTheme,
  leadingButton: ?Element,
  trailingButton: ?Element,
  subtitleView: ?Element,
  // FIXME: We need a better flow type for style
  style: any,
};

class BpkNavigationBar extends Component {
  theme: ?IOSTheme;

  static propTypes = {
    title: TITLE_PROPTYPE.isRequired,
    theme: makeThemePropType(IOS_THEME_ATTRIBUTES),
    leadingButton: PropTypes.element,
    trailingButton: PropTypes.element,
    subtitleView: PropTypes.element,

    style: ViewPropTypes.style,
  };

  static defaultProps = {
    theme: null,
    leadingButton: null,
    trailingButton: null,
    subtitleView: null,
    style: null,
  };

  constructor(props) {

* Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

// If theming is ever expanded to support other types, this should be changed
// to something akin to BpkButton's theming functions.
/* @flow */
import { makeThemePropType } from 'react-native-bpk-theming';

const REQUIRED_THEME_ATTRIBUTES: Array = [
  'horizontalNavSelectedTextColor',
];
const themePropType = makeThemePropType(REQUIRED_THEME_ATTRIBUTES);

export { REQUIRED_THEME_ATTRIBUTES, themePropType };

* Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* @flow */

import { type Node } from 'react';
import PropTypes from 'prop-types';
import { makeThemePropType } from 'react-native-bpk-theming';

export const REQUIRED_THEME_ATTRIBUTES: Array = ['buttonLinkTextColor'];

const themePropType = makeThemePropType(REQUIRED_THEME_ATTRIBUTES);

export const ICON_ALIGNMENTS = {
  leading: 'leading',
  trailing: 'trailing',
};

export type CommonProps = {
  onPress: (event: SyntheticEvent<>) => void,
  title: string,
  disabled: boolean,
  accessibilityLabel: ?string,
  icon: ?Node,
  iconAlignment: $Keys,
  theme: ?{
    buttonLinkTextColor: string,
  },

export type Props = {
  title: TitleProp,
  theme: ?AndroidTheme,
  leadingButton: ?Element,
  trailingButton: ?Element,
  subtitleView: ?Element,
  // FIXME: We need a better flow type for style
  style: any,
};

class BpkNavigationBar extends Component {
  theme: ?AndroidTheme;

  static propTypes = {
    title: TITLE_PROPTYPE.isRequired,
    theme: makeThemePropType(ANDROID_THEME_ATTRIBUTES),
    leadingButton: PropTypes.element,
    trailingButton: PropTypes.element,
    subtitleView: PropTypes.element,

    style: ViewPropTypes.style,
  };

  static defaultProps = {
    theme: null,
    leadingButton: null,
    trailingButton: null,
    subtitleView: null,
    style: null,
  };

  constructor(props) {

themeAttributes = null;
  }

  return (
    // eslint-disable-next-line backpack/use-components
    
  );
};

const propTypes = {
  small: PropTypes.bool,
  theme: makeThemePropType(REQUIRED_THEME_ATTRIBUTES),
  type: PropTypes.oneOf(Object.keys(SPINNER_TYPES)),
};

BpkSpinner.propTypes = propTypes;

BpkSpinner.defaultProps = {
  small: false,
  theme: null,
  type: 'primary',
};

export default withTheme(BpkSpinner);
export { propTypes, SPINNER_TYPES };

constructor(props) {
    super(props);
    this.theme = getThemeAttributes(
      ANDROID_THEME_ATTRIBUTES,
      this.props.theme || {},
    );
  }

const BpkSwitch = props => {
  const { value, theme, ...rest } = props;
  const themeAttributes = getThemeAttributes(REQUIRED_THEME_ATTRIBUTES, theme);

  return (

constructor(props) {
    super(props);
    this.theme = getThemeAttributes(
      IOS_THEME_ATTRIBUTES,
      this.props.theme || {},
    );
  }

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) {