Skip to main content

Getting Started

React Native Eyecandy is a library of reusable UI components for React Native, it includes a wide variety of components like buttons, text inputs, icons, and more. The goal of this library is to create a set of reusable components that have a consistent look and feel across different projects. By doing this, we hope to make it easier for React Native developers to create beautiful and user-friendly apps.

Installation​

This library requires the following packages to be installed correctly:

npm install @nomada-sh/react-native-eyecandy

Installing dependencies into an Expo managed project​

  1. In your project directory, run:

    expo install react-native-gesture-handler react-native-reanimated react-native-svg react-native-haptic-feedback react-native-image-picker @react-native-masked-view/masked-view

  2. To finalize installation of react-native-gesture-handler, add the following at the top (make sure it's at the top and there's nothing else before it) of your entry file, such as index.js or App.js:

    import 'react-native-gesture-handler';

    Note: If you are building for Android or iOS, do not skip this step, or your app may crash in production even if it works fine in development. This is not applicable to other platforms.

  3. To finalize installation of react-native-reanimated, add Reanimated's babel plugin to your babel.config.js:

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

    After you add the Babel plugin, restart your development server and clear the bundler cache: expo start --clear

Installing dependencies into a bare React Native project​

  1. In your project directory, run:

    npm install react-native-gesture-handler react-native-reanimated react-native-svg react-native-haptic-feedback react-native-image-picker @react-native-masked-view/masked-view

    From React Native 0.60 and higher, linking is automatic. So you don't need to run react-native link.

    If you're on a Mac and developing for iOS, you need to install the pods (via Cocoapods) to complete the linking.

    npx pod-install ios

  2. To finalize installation of react-native-gesture-handler, add the following at the top (make sure it's at the top and there's nothing else before it) of your entry file, such as index.js or App.js:

    import 'react-native-gesture-handler';

    Note: If you are building for Android or iOS, do not skip this step, or your app may crash in production even if it works fine in development. This is not applicable to other platforms.

  3. To finalize installation of react-native-reanimated, configure it following the installation guide.