Usage Guide

Usage Guide

This guide will help you to use the UILaunch design system in your React Native project. You can find the components and their usage in the Components section of the documentation.

ThemeProvider

The UI Library provides a ThemeProvider component and a theme object that contains the design tokens and styles for the components. You can use the ThemeProvider to wrap your app and provide the theme to all components. The theme prop is optional, but it is recommended to use it to ensure that all components have access to the theme and styles defined in the library.

Example

// App.js
import appTheme from '@madefordevs1999/ui-launch-native/system/theme/appTheme';
import ThemeProvider from '@madefordevs1999/ui-launch-native/system/theme/ThemeProvider';
import AppNavigation from './navigation/AppNavigation';

const App: React.FC = () => {
  return (
    <ThemeProvider theme={appTheme}>
      <AppNavigation />
    </ThemeProvider>
  );
};

export default App;

This theme works with all styled components in the library through @shopify/restyle and react-native-reanimated libraries. You can use the theme object to access the design tokens and styles in your components via the useTheme hook from this library.

// ExampleComponent.tsx
import useTheme from '@madefordevs1999/ui-launch-native/system/theme/useTheme';
import { View } from 'react-native';

const ExampleComponent: React.FC = () => {
  const theme = useTheme();

  return (
    <View style={{ backgroundColor: theme.colors.LayerActive }}>
      {/* Your component code */}
    </View>
  );
};
export default ExampleComponent;

The useTheme hook returns the theme object that contains all the design tokens and styles defined in the library. You can use this object to access the colors, typography, spacing, and other design tokens in your components.