UIW Design for React Native

(Android & iOS)

Install

yarn add @uiw/react-native react-native-svg

Basic Usage

import React from 'react';
import { View } from 'react-native';
import { Icon } from '@uiw/react-native'

export default class Demo extends React.Component {
  render() {
    return (
      <View>
        <Icon name='apple' size={46} color='#50CB42' />
      </View>
    )
  }
}

Components

Layout

• Divider
• Flex
• Spacing
• WingBlank

Navigation

• Drawer
• MenuDropdown
• SwipeAction

Data Entry

• Button
• ButtonGroup
• CheckBox
• Input
• Radio
• SegmentedControl
• Slider
• Switch
• SearchBar
• SelectCascader

Data Display

• Avatar
• Badge
• Ellipsis
• Empty
• Grid
• Icon
• List
• Table
• Typography H1~H6 · <Del> · <S> · <U> · <Strong> · <Br /> · <P /> · <Hr /> · <Div />

Feedback

• Loader
• Modal
• MaskLayer
• Result
• Toast

Other

• @uiw/react-native-alipay
• @uiw/react-native-amap-geolocation

Development

yarn install

Run instructions for iOS:
  • cd react-native-uiw && react-native run-ios
  - or -
  • Open ReactNativeUIW/ios/ReactNativeUIW.xcworkspace in Xcode or run "xed -b ios"
  • Hit the Run button
Run instructions for Android:
  • Have an Android emulator running (quickest way to get started), or a device connected.
  • cd react-native-uiw && react-native run-android

⚠️ MacBook Pro with a M1

# Install ffi
sudo arch -x86_64 gem install ffi
# Re-install dependency
arch -x86_64 pod install

rm -rf ios/build
# https://github.com/react-navigation/react-navigation/issues/6071
cd ios/
pod install

# Clear pods.
pod deintegrate
# pod rm Podfile.lock
pod install
# Reinstall pods
pod install --repo-update --verbose

# Run Project
yarn run ios

• React Native upgrade helper