design-system

Installation

To install the Design System components package, run the following command:

npm install dexypher-design-system
# or
yarn add dexypher-design-system

Peer Dependencies

Make sure that you have the required peer dependencies installed:

npm install react-native-svg react-native-picker-select react-native-modal react-native-date-picker dayjs @react-native-picker/picker
# or
yarn add react-native-svg react-native-picker-select react-native-modal react-native-date-picker dayjs @react-native-picker/picker

Also make sure to install the pods for os

cd ios && pod install

Setup

1. Providers

Wrap your application with the DSConfigsProvider from the design system:

import { DSConfigsProvider } from "dexypher-design-system";

export default function App() {
  // font usually should be a capitalized string
  // product is the project that is using the package: "pharma" | "labs" | "sns" | "med" | "workspace";

  return <DSConfigsProvider product="pharma" font="FiraCode" app={<App />} />;
}

2. Importing Components

You can import and use the components as follows:

import { Button } from "dexypher-design-system";

function MyScreen() {
  return (
    <SobrusButton
      type="primary"
      size="lg"
      label="Submit"
      icon="left"
      iconXml={icon("#fff")}
      onPress={() => console.log("Button Pressed")}
    />
  );
}