EDS Mobile Components

A React Native component library implementing the Equinor Design System.

Installation

pnpm add @equinor/eds-mobile-components

Peer dependencies

This library requires the following peer dependencies:

pnpm add expo-font react-native-gesture-handler react-native-reanimated react-native-svg

Make sure to follow the installation instructions for each:

• react-native-gesture-handler
• react-native-reanimated
• react-native-svg

Getting started

Load the fonts and assets required by the library in your root component, and wrap your app in the EDSProvider:

import { EDSProvider, useEDS } from "@equinor/eds-mobile-components";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { StatusBar } from "expo-status-bar";

export default function App() {
    const [hasLoadedEds, edsLoadError] = useEDS();

    if (!hasLoadedEds) {
        return null;
    }

    return (
        <SafeAreaProvider>
            <EDSProvider colorScheme="light" density="comfortable">
                <Navigation />
                <StatusBar />
            </EDSProvider>
        </SafeAreaProvider>
    );
}

The EDSProvider gives you access to:

• Color scheme — switch between light and dark mode
• Density — switch between comfortable and spacious layouts

Theming

Create stylesheets that respond to the current theme using EDSStyleSheet:

import { EDSStyleSheet, useStyles } from "@equinor/eds-mobile-components";

const themeStyles = EDSStyleSheet.create((token) => ({
    container: {
        backgroundColor: token.colors.bg.neutral.surface,
        borderRadius: token.geometry.border.containerBorderRadius,
    },
}));

const MyComponent = () => {
    const styles = useStyles(themeStyles);
    return <View style={styles.container} />;
};

The token object resolves based on the current configuration, so colours adapt automatically to light/dark mode.

Passing props to stylesheets

For conditional styling, pass additional props as a second argument:

const themeStyles = EDSStyleSheet.create(
    (token, props: { highlight?: boolean }) => ({
        container: {
            backgroundColor: props.highlight
                ? token.colors.bg.accent.fillEmphasis.default
                : token.colors.bg.neutral.surface,
        },
    })
);

const MyComponent = ({ highlight }: { highlight?: boolean }) => {
    const styles = useStyles(themeStyles, { highlight });
    return <View style={styles.container} />;
};

Components

• Inputs — Button, Input, SelectionControls (Radio, Switch, Checkbox)
• Display — Typography, Icon
• Utilities — EDSProvider, Portal, PressableHighlight, ErrorBoundary

The library is actively growing and more components will be added with each release.

Hooks

• useEDS — load fonts and assets
• useStyles — resolve themed stylesheets
• useToken — access design tokens directly
• useBreakpoint — respond to screen size changes

License

MIT