Atlas Design System

A themable design system library with core components used in a React Native App. Designed for Atlas Workout app and EzBudget budget app.

Installation

Atlas Design System 3.x requires the React Native New Architecture. React Native ≥ 0.83 (Expo SDK ≥ 55) and Reanimated ≥ 4 only. For older projects, stay on [email protected].

Atlas Design System relies on a few peer dependencies that need to be present in your project. Install everything at once with npm:

npm install atlas-design-system @react-native-vector-icons/ionicons @react-native-community/datetimepicker informed moment react-native-reanimated react-native-worklets react-native-safe-area-context

—or with Yarn:

yarn add atlas-design-system @react-native-vector-icons/ionicons @react-native-community/datetimepicker informed moment react-native-reanimated react-native-worklets react-native-safe-area-context

After the packages are installed, make sure to install the iOS pods:

npx pod-install ios

Using Expo? You can rely on expo install to ensure the correct versions:

npx expo install atlas-design-system @react-native-vector-icons/ionicons @react-native-community/datetimepicker react-native-reanimated react-native-worklets react-native-safe-area-context

Note • Requires the New Architecture — React Native ≥ 0.83 and React ≥ 19.1. The legacy architecture was removed in React Native 0.85, and Reanimated 4 does not support it. • Reanimated 4 moved worklets into a separate package. Your babel.config.js must use react-native-worklets/plugin (not the old react-native-reanimated/plugin). On Expo SDK ≥ 55, babel-preset-expo wires this up for you. • Wrap your app in SafeAreaProvider from react-native-safe-area-context — TitleBar, Sheet, and BottomSheet read safe-area insets. • Some peer dependencies (@react-native-community/datetimepicker, informed, moment) are optional — only install them if you use the components that need them. @react-native-vector-icons/ionicons is required; several components import it directly. • Follow the React-Native-Reanimated installation guide. • After installing, run npx pod-install to link native iOS dependencies.

Usage

// 1. Import the ThemeContext and a theme. You can make your own or use the provided light theme ATLAS_LIGHT
import { ThemeContext, ATLAS_LIGHT } from "atlas-design-system";

export default function MyThemedApp() {
  return (
    // 2. Wrap your app with the ThemeContext.Provider and provide your theme
    <ThemeContext.Provider value={ATLAS_LIGHT}>
      <MyApp />
    </ThemeContext.Provider>
  );
}

import { Text } from "atlas-design-system";
import { View } from "react-native";

// 3. Use the components
export default function MyApp() {
  return (
    <View>
      <Text category="h1">Welcome to My App</Text>
    </View>
  );
}

Running the example app

The example app is provided as a way to test and develop the design system. It also serves as a gallery showcasing all the components and features.

To run the example app, execute:

cd example && yarn && yarn ios