@muratoner/semantic-ui-react-native

Semantic UI Kit For React Native

Avatar	Button	Checkbox	Divider

Icon	LabeledButton	ProgressBar	Title

SocialIcon Button	?	?	?

Get Started

Installation

Step 1: Install @muratoner/semantic-ui-react-native

# yarn
yarn add @muratoner/semantic-ui-react-native
# or with npm
npm i @muratoner/semantic-ui-react-native --save

Step 2: Install react-native-vector-icons

If you have already installed react-native-vector-icons as a dependency for your project you can skip this step. Otherwise run the following command:

Manual linking of react-native-vector-icons is not necessary if you're using react-native@0.60.0 or above since it is done automatically. This will throw an error though it won't prevent the application from running. To fix this you'll simply have to run react-native unlink react-native-vector-icons and the process will run as expected.

# yarn
yarn add react-native-vector-icons
# or with npm
npm i --save react-native-vector-icons

# link
react-native link react-native-vector-icons

If you have any issues installing react-native-vector-icons, check out their installation guide here.

Usage

Start using the components or try it on Snack here.

import { Button, LabeledButton } from '@muratoner/semantic-ui-react-native';

<Button
  disabled
  loading
  outline
  title="Add Friend"
  color="red"
  iconName="user"
  iconType="FontAwesome"
/>;
<LabeledButton
  outline
  pointing
  color="primary"
  label="Forks"
  labelIcon="fork"
  labelIconType="AntDesign"
  title="1,048"
/>;

Components

• [ ] Accordion
• [ ] Actionsheet
• [x] Avatar
• [ ] Avatar Group
• [x] Badge
• [ ] BottomSheet
• [ ] Breadcrumb
• [x] Button
• [ ] ButtonGroup
• [ ] Card
• [x] Center
• [ ] Color Picker
• [x] Column
• [x] CheckBox
• [ ] CheckBoxGroup
• [ ] Comment
• [ ] Collapse
• [x] Divider
• [ ] Dimmer
• [ ] Feed
• [ ] Flag
• [x] Flex
• [ ] Grid
• [ ] Header
• [ ] HTML style headings
• [x] Icon
• [x] Inset
• [ ] Image
• [ ] Input
• [ ] Label
• [ ] ListItem
• [ ] Loader
• [ ] Message
• [ ] Overlay
• [ ] Placeholder
• [ ] Pricing
• [x] Progress
• [ ] Rating
• [ ] RadioGroup
• [x] Row
• [ ] SearchBar
• [ ] Segment
• [x] Stack
• [ ] Statistic
• [ ] Step
• [ ] Slider
• [ ] Social Icons / Social Icon Buttons
• [ ] Tab
• [ ] Table
• [x] Title
• [ ] Tooltip