Skip to main content

Setup

Installation

  1. Install the library
npm install react-native-ui-lib
  1. Install mandatory peer dependencies
npm install react-native-reanimated react-native-gesture-handler
  1. For iOS, install pods
cd ios && pod install

Note: If you plan to use specific components, check the Optional Dependencies section. Some components may require additional peer dependencies.

  1. Follow Reanimated setup guide to complete the installation.

Required Dependencies

UILib requires the following peer dependencies for core functionality:

These packages are essential for animations and gesture handling capabilities.

Optional Dependencies

UILib supports additional features through optional dependencies. These packages are required only when using specific components:

PackageRequired For
@react-native-community/blurCard component's blur effects
@react-native-community/datetimepickerDate/time picker components
@react-native-community/netinfoNetwork connectivity features
react-native-haptic-feedbackHaptic feedback functionality
react-native-svgSVG-based components
react-native-shimmer-placeholderShimmer loading effects
react-native-linear-gradientGradient-based components
momentDate manipulation utilities

Install only the dependencies you need based on the components you plan to use in your application.

Native Dependencies

UILib uses several native dependencies to support its functionality. Some of these are mandatory, while others are required only for specific components.

Core Dependencies

These packages are required for basic functionality:

"react-native-gesture-handler": "<=2.14.1"
"react-native-reanimated": "<=3.16.7"

Component-Specific Dependencies

Install these based on the components you plan to use:

"@react-native-community/blur": ">=4.4.1"
"@react-native-community/datetimepicker": "^3.4.6"
"@react-native-community/netinfo": "^5.6.2" # Required for ConnectionStatusBar

Important: After installing native dependencies, run cd ios && pod install to complete the iOS setup.

Demo App

To explore the UILib demo app:

  1. Clone the repository
git clone git@github.com:wix/react-native-ui-lib.git
cd react-native-ui-lib
  1. Install dependencies
yarn
  1. Platform-specific setup:

For iOS:

cd ios && pod install

For Windows:

  • Replace export DEV_MODE with set DEV_MODE in scripts
  • Copy gradlew.bat from a recent React Native project to ./android/
  • Install Watchman:
    • Use prebuilt binary from official site
    • Or via Chocolatey: choco install watchman
  1. Run the app
# Start Metro bundler
yarn start

# Launch on iOS/Android
yarn ios
# or
yarn android

You can also open the project directly in Xcode or Android Studio.

Starter Kits

Thanks to Batyr we have these amazing starter kits