# React Native USIT UI

![npm version](https://badge.fury.io/js/react-native-usit-ui.svg)

**React Native components created by USIT (University Center for Information
Technology) - University in Oslo**

# Getting Started

```bash
$ yarn add react-native-usit-ui
```

## Installing Vector Icons
### Linking is no longer necessary as of RN >= 0.60
These components depends on `react-native-vector-icons`, so make sure to run:

```bash
$ yarn add react-native-vector-icons
$ react-native link react-native-vector-icons
```

or follow the
[official instructions](https://github.com/oblador/react-native-vector-icons#installation).

## Installing react-native-svg
### Linking is no longer necessary as of RN >= 0.60
```bash
$ yarn add react-native-svg
$ react-native link react-native-svg
```

or follow the
[official instructions](https://github.com/react-native-community/react-native-svg)

Please notice that the correct `react-native-svg` version has to correspond to the
`react-native` and `react` version used in your project.

## Testing react-native-usit-ui locally
react-native-usit-ui can be developed locally by removing any local node_modules from this repo, and installing only production dependencies using
```bash
yarn --production
```
Using the local version in an app can be done by adding the local repo as a file dependency (linking does not work properly with Metro).
Example where react-native-usit-ui is in the parent directory.
```bash
yarn add file:../react-native-usit-ui
```

# Components

Here is a list of all components included in this library:

* [Button](./docs/Button.md)
* [SingleOptionList](./docs/SingleOptionList.md)
* [MultipleOptionList](./docs/MultipleOptionList.md)
* [MenuButton](./docs/MenuButton.md)
* [UiOFooter](./docs/UiOFooter.md)
* [Divider](./docs/Divider.md)
* [Stepper](./docs/Stepper.md)
* [Slider](./docs/Slider.md)
* [Accordion](./docs/Accordion.md)
* [FloatingButton](./docs/FloatingButton.md)
* [AchievementModal](./docs/AchievementModal.md)
* [CircularTimeSlider](./docs/CircularTimeSlider.md)
* [GradientBackground](./docs/GradientBackground.md)
* [ProgressCircle](./docs/ProgressCircle.md)
* [ProgressBar](./docs/ProgressBar.md)
* [CircularSlider](./docs/CircularSlider.md)