UIW Design for React Native
---
(Android & iOS)
## Install
```bash
yarn add @uiw/react-native react-native-svg
```
## Basic Usage
```jsx
import React from 'react';
import { View } from 'react-native';
import { Icon } from '@uiw/react-native'
export default class Demo extends React.Component {
render() {
return (
)
}
}
```
## Components
#### Layout
- [Divider](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/Divider/README.md)
- [Flex](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/Flex/README.md)
- [Spacing](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/Spacing/README.md)
- [WingBlank](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/WingBlank/README.md)
#### Navigation
- [Drawer](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/Drawer/README.md)
- [MenuDropdown](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/MenuDropdown/README.md)
- [SwipeAction](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/SwipeAction/README.md)
#### Data Entry
- [Button](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/Button/README.md)
- [ButtonGroup](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/ButtonGroup/README.md)
- [CheckBox](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/CheckBox/README.md)
- [Input](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/Input/README.md)
- [Radio](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/Radio/README.md)
- [SegmentedControl](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/SegmentedControl/README.md)
- [Slider](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/Slider/README.md)
- [Switch](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/Switch/README.md)
- [SearchBar](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/SearchBar/README.md)
- [SelectCascader](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/SelectCascader/README.md)
#### Data Display
- [Avatar](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/Avatar/README.md)
- [Badge](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/Badge/README.md)
- [Ellipsis](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/Ellipsis/README.md)
- [Empty](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/Empty/README.md)
- [Grid](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/Grid/README.md)
- [Icon](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/Icon/README.md)
- [List](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/List/README.md)
- [Table](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/Table/README.md)
- [Typography](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/Typography/README.md) [`H1~H6`](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/Typography/README.md#标题) · [``](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/Typography/README.md#删除线) · [``](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/Typography/README.md#删除线) · [``](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/Typography/README.md#下划线) · [``](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/Typography/README.md#加粗) · [`
`](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/Typography/README.md#换行) · [``](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/Typography/README.md#段落) · [`
`](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/Typography/README.md#水平线) · [``](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/Typography/README.md#div)
#### Feedback
- [Loader](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/Loader/README.md)
- [Modal](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/Modal/README.md)
- [MaskLayer](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/MaskLayer/README.md)
- [Result](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/Result/README.md)
- [Toast](https://github.com/uiwjs/react-native-uiw/tree/master/packages/core/src/Toast/README.md)
## Other
- [@uiw/react-native-alipay](https://github.com/uiwjs/react-native-alipay)
- [@uiw/react-native-amap-geolocation](https://github.com/uiwjs/react-native-amap-geolocation)
## Development
```
yarn install
```
```bash
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
```bash
# Install ffi
sudo arch -x86_64 gem install ffi
# Re-install dependency
arch -x86_64 pod install
```
```bash
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](https://react-native-community.github.io/upgrade-helper/)