Semantic UI Kit For React Native

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"
/>;

Ready Components

[ ] Accordion
[x] Avatar
[ ] Avatar Group
[ ] Badge
[ ] BottomSheet
[ ] Breadcrumb
[x] Button
[ ] ButtonGroup
[ ] Card
[ ] CheckBox
[ ] Comment
[x] Divider
[ ] Dimmer
[ ] Feed
[ ] Flag
[ ] Grid
[ ] Header
[ ] HTML style headings
[x] Icon
[ ] Image
[ ] Input
[ ] Label
[ ] ListItem
[ ] Loader
[ ] Message
[ ] Overlay
[ ] Placeholder
[ ] Pricing
[x] Progress
[ ] Rating
[ ] SearchBar
[ ] Segment
[ ] Statistic
[ ] Step
[ ] Slider
[ ] Social Icons / Social Icon Buttons
[ ] Tab
[ ] Table
[x] Title
[ ] Tooltip

Download Details:

Author: muratoner

Source Code: https://github.com/muratoner/semantic-ui-react-native

#react #react-native #mobile-apps