Setup
Installation
- Install the library
npm install react-native-ui-lib
- Install mandatory peer dependencies
npm install react-native-reanimated react-native-gesture-handler
- 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.
- Follow Reanimated setup guide to complete the installation.
Required Dependencies
UILib requires the following peer dependencies for core functionality:
react-native-reanimated
- Follow the Reanimated setup guidereact-native-gesture-handler
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:
Package | Required For |
---|---|
@react-native-community/blur | Card component's blur effects |
@react-native-community/datetimepicker | Date/time picker components |
@react-native-community/netinfo | Network connectivity features |
react-native-haptic-feedback | Haptic feedback functionality |
react-native-svg | SVG-based components |
react-native-shimmer-placeholder | Shimmer loading effects |
react-native-linear-gradient | Gradient-based components |
moment | Date 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:
- Clone the repository
git clone git@github.com:wix/react-native-ui-lib.git
cd react-native-ui-lib
- Install dependencies
yarn
- Platform-specific setup:
For iOS:
cd ios && pod install
For Windows:
- Replace
export DEV_MODE
withset 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
- 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