How to use the react-native-bpk-theming.makeThemePropType 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-navigation-bar / src / BpkNavigationBar.ios.js View on Github external
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) {
github Skyscanner / backpack / native / packages / react-native-bpk-component-horizontal-nav / src / theming.js View on Github external
* 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 };
github Skyscanner / backpack / native / packages / react-native-bpk-component-button-link / src / common-types.js View on Github external
* 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,
  },
github Skyscanner / backpack / native / packages / react-native-bpk-component-navigation-bar / src / BpkNavigationBar.android.js View on Github external
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) {
github Skyscanner / backpack / native / packages / react-native-bpk-component-spinner / src / BpkSpinner.js View on Github external
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 };
github Skyscanner / backpack / native / packages / react-native-bpk-component-switch / src / BpkSwitch.js View on Github external
},
  });
  return colors;
};

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

  return (

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