@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

Required peer dependency: react-native-keyboard-controller

Every component that has to step aside for the keyboard (BottomSheet, Autocomplete, the chat participant modal) follows it through this library rather than React Native's KeyboardAvoidingView, which configures its animation before it commits — so a render already in flight takes it and the padding lands with no animation at all — and which animates nothing on the way back.

npx expo install react-native-keyboard-controller react-native-reanimated react-native-worklets

It brings native modules, so it needs a development build; Expo Go ships its own copy. The three are installed directly and not left to npm: a native module's compiled side must match the package in node_modules, and expo-doctor fails when a native peer dependency is only resolved transitively.

The app then mounts KeyboardProvider above everything else, otherwise those components raise at their first keyboard:

import { KeyboardProvider } from "react-native-keyboard-controller";

const App = () => (
  <KeyboardProvider>
    <ThemeProvider>{...}</ThemeProvider>
  </KeyboardProvider>
);

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
  • TimeRangePicker component
• expo-localization
  • DatePicker component
  • DateRangePicker component
• expo-document-picker, expo-image-picker, expo-linking
  • File component
• expo-image
  • Avatar component
  • Select component (image options)
  • TimeLineEvents component
• expo-router
  • HeaderBackButton component
  • ModalIconButton component
• expo-status-bar
  • ModalLayout 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 and expo-dev-client
  • Autocomplete component
  • CardProductList component
  • Chat 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