@janbox/rn-core-ui

Ichiba private react-native design system

Installation

npm install @janbox/rn-core-ui

or

yarn add @janbox/rn-core-ui

Usage

// ---- using Button Component ------
import { Button, ButtonTypes, ButtonSizes } from "@janbox/rn-core-ui";

// ...

<Button
  buttonSize={ButtonSizes.MEDIUM}
  buttonStyle={ButtonTypes.SECONDARY_ONE}
  onPress={() => setButtonDisable(true)}
  isLoading
  isDisabled
  name="Click me"
/>;

// ---- using Tab Component ------
import {
  ITabView,
  ITabBarItem,
  ITabItemProps,
  TabModel,
} from "@janbox/rn-core-ui";

// ...
const App = (second) => {
  const [index, setIndex] = React.useState < number > 0;
  const routes: Array<TabModel> = [];

  const renderTabIcon = (props: ITabItemProps) => {
    return <ITabBarItem {...props} />;
  };

  const renderScene = React.useCallback(({ tab }: { tab: TabModel }) => {
    switch (tab.key) {
      case "Button":
        return <ButtonTab />;
      default:
        return <></>;
    }
  }, []);

  return (
    <ITabView
      onIndexChange={setIndex}
      renderScene={renderScene}
      navigationState={{ index, routes }}
      renderTabIcon={renderTabIcon} // ---- custom ItemTabbar
      // disableSwipe       // ----- disable Swipe tab
      isFixed // ----- styles Fixed tabbar
    />
  );
};

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

Developer Guide

See the develop guide to learn how to setup repository and the development workflow for ichiba Mobile Developer.

Template Use

• React-native-cli
• Template create-react-native-library
• Manager/Testing template Storybook for React Native