@getsoren/react-native-design-system

Design System for mobile

Installation

Basic installation:

npm:

npm install @getsoren/react-native-design-system

pnpm:

pnpm add @getsoren/react-native-design-system

yarn:

yarn add @getsoren/react-native-design-system

bun:

bun add @getsoren/react-native-design-system

Optional peer dependencies

If you want to use the following components, you need to install the following dependencies:

• @react-native-community/datetimepicker and expo-localization
  • TimePicker component
  • DatePicker component
  • DateRangePicker component
  • DateTimePicker component
• expo-document-picker, expo-image-picker, expo-linking
  • File component
• expo-image
  • Avatar component
  • CardSupplier component
  • Select component (image options)
  • TimeLineEvents component
• expo-router
  • HeaderBackButton component
  • ModalIconButton component
• expo-status-bar
  • Modal component
• expo-maps
  • MapMarkers component
• react-native-safe-area-context
  • Autocomplete component
  • BottomFixedButton component
  • BottomSheetContent component
  • Header component
• react-native-svg
  • Icon component
• expo-file-system, expo-sharing, react-native-web
  • Lightbox component
• @shopify/flash-list adn expo-dev-client
  • Autocomplete component
  • CardProductList component
  • CardProductHorizontalList component
  • CardProductLargeHorizontalList component
  • CardSupplierList component

Installation with all optional dependencies

npm:

npm install @getsoren/react-native-design-system @react-native-community/datetimepicker expo-document-picker expo-image expo-image-picker expo-linking expo-localization expo-router expo-status-bar react-native-maps react-native-safe-area-context react-native-svg

pnpm:

pnpm add @getsoren/react-native-design-system @react-native-community/datetimepicker expo-document-picker expo-image-picker expo-linking expo-localization expo-router expo-status-bar react-native-maps react-native-safe-area-context react-native-svg

yarn:

yarn add @getsoren/react-native-design-system @react-native-community/datetimepicker expo-document-picker expo-image-picker expo-linking expo-localization expo-router expo-status-bar react-native-maps react-native-safe-area-context react-native-svg

bun:

bun add @getsoren/react-native-design-system @react-native-community/datetimepicker expo-document-picker expo-image-picker expo-linking expo-localization expo-router expo-status-bar react-native-maps react-native-safe-area-context react-native-svg

Usage

import { ThemeProvider } from "@getsoren/react-native-design-system";

const App = () => {
  return (
    <ThemeProvider>
      <MyComponent />
    </ThemeProvider>
  );
};

Load custom font

import { ThemeProvider } from "@getsoren/react-native-design-system";
import { useFonts } from "expo-font";
import * as SplashScreen from "expo-splash-screen";

const App = () => {
  const [loaded, error] = useFonts({
    "Poppins-Medium": require("../assets/fonts/Poppins-Medium.ttf"), // 500
    "Poppins-Regular": require("../assets/fonts/Poppins-Regular.ttf"), // 400
    "Poppins-SemiBold": require("../assets/fonts/Poppins-SemiBold.ttf"), // 600
  });

  useEffect(() => {
    if (loaded || error) {
      SplashScreen.hideAsync().then();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  return (
    <ThemeProvider
      fonts={{
        medium: "Poppins-Medium",
        regular: "Poppins-Regular",
        semiBold: "Poppins-SemiBold",
      }}
    >
      <MyComponent />
    </ThemeProvider>
  )
};

Contributing

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

License

MIT