Before you start

⚠️ Request access to the registry to download the package. You can do this by filling the Access Request Form.
Once you have access, copy the .npmrc file to the root of your project. This file contains the necessary configuration to access the private registry where the package is hosted.
Expose the NPM_TOKEN environment variable in your terminal or CI/CD pipeline. This token is required to authenticate and download the package from the private registry.
Ensure you have a React Native project set up with React Native CLI. If you don't have one, you can create a new React Native project reading the React Native documentation.

Installation Guide for UILaunch Design System

Follow these steps to install correctly the UILaunch design system and all it required dependencies in your React Native project.

First install the main package

npm install @madefordevs1999/ui-launch-native

yarn add @madefordevs1999/ui-launch-native

Install the required dependencies

npm install react-native-svg react-native-reanimated react-native-gesture-handler @gorhom/bottom-sheet @shopify/restyle

yarn add react-native-svg react-native-reanimated react-native-gesture-handler @gorhom/bottom-sheet @shopify/restyle

Ensure to install the compatible versions of the dependencies. You can check the [peerDependencies](in the package.json) of this library to see the required versions.

Some libraries may require additional setup steps. For example, react-native-reanimated requires you to add the following line to your babel.config.js file:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
};

This is important to ensure that the library works correctly with the latest version of React Native.

Install the fonts

To use the custom fonts included in this library, you need to install them in your project. You can do this by running the following command:

npx react-native link @madefordevs1999/ui-launch-native

This will link the fonts to your project and make them available for use in your components.

By default, this library is not exposing custom native code. However, if you want to use the native code for some libraries, is probably that you need to add some configuration in your android/app/build.gradle file or run the following command for iOS:

npx pod-install

This will ensure that the native code is correctly linked to your project and that you can use the features provided by the library.

Use the ThemeProvider at the root of your app

To use the components and styles provided by this library, you need to wrap your app with the ThemeProvider component. This will ensure that all components have access to the theme and styles defined in the library.

// App.js
import ThemeProvider from '@madefordevs1999/ui-launch-native/system/theme/ThemeProvider';
import React from 'react';

const App = () => {
  return (
    <ThemeProvider>
      {/* Your app components go here */}
    </ThemeProvider>
  );
};

export default App;

Ensure to import the gesture handler root view correctly if you are using the `react-native-gesture-handler` library

If you are using the react-native-gesture-handler library, you need to ensure that you are importing the GestureHandlerRootView correctly in your app. This is important to ensure that the gesture handler works correctly with the components provided by this library.

// App.js
import ThemeProvider from '@madefordevs1999/ui-launch-native/system/theme/ThemeProvider';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import React from 'react';
import { SafeAreaView } from 'react-native';

const App = () => {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <ThemeProvider>
        <SafeAreaView style={{ flex: 1 }}>
          {/* Your app components go here */}
        </SafeAreaView>
      </ThemeProvider>
    </GestureHandlerRootView>
  );
};
export default App;

This will ensure that the gesture handler works correctly with the components provided by this library and that you can use the features provided by the library.

Start your app

Now you can start your app and see the components in action. You can use the following command to start your app:

npx react-native run-android

npx react-native run-ios

This will start your app and you should see the components provided by this library in action. You can now start using the components and styles provided by this library in your app. You can check the components documentation to see how to use each component and the available props. You can also check the tokens documentation to see the available tokens and how to use them in your app.

Installation Guide