Skip to content

Commit

Permalink
feat(ui): drawer component
Browse files Browse the repository at this point in the history
* feat(ui): drawer component
* Revert "feat(template): add ui-kitten template projects"
  • Loading branch information
artyorsh authored and 32penkin committed Aug 28, 2019
1 parent 2decd53 commit e98f3ea
Show file tree
Hide file tree
Showing 33 changed files with 800 additions and 345 deletions.
28 changes: 23 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,32 @@ There is a huge variety of customizable layouts, use “as is” or add new bloc

## Quick Start

Start a new app with UI Kitten template from a scratch:
Install UI Kitten and Eva Design System packages via npm:

```bash
react-native init --template ui-kitten
npm i react-native-ui-kitten @eva-design/eva
```

This will setup a new React Native application configured with UI Kitten.
Refer to the [Documentation][link:doc-where-start] for more options to start.
Modify your application root:

```jsx
import React from 'react';
import { mapping, light as lightTheme } from '@eva-design/eva';
import { ApplicationProvider, Layout } from 'react-native-ui-kitten';

const App = () => (
<ApplicationProvider
mapping={mapping}
theme={lightTheme}>
<Layout style={{flex: 1}}/>
</ApplicationProvider>
);

export default App;
```

The code above will configure your application component to apply Eva Design System styling magic.
Read the [Design System guide][link:doc-theme-system] for more details.

## How can I support the developers?
- Star our GitHub repo :star:
Expand All @@ -65,7 +83,7 @@ We're always happy to receive your feedback!
[link:travis]: https://travis-ci.com/akveo/react-native-ui-kitten
[link:coveralls]: https://coveralls.io/github/akveo/react-native-ui-kitten?branch=master
[link:doc-homepage]: https://akveo.github.io/react-native-ui-kitten
[link:doc-where-start]: https://akveo.github.io/react-native-ui-kitten/docs/getting-started/where-to-start
[link:doc-theme-system]: https://akveo.github.io/react-native-ui-kitten/docs/design-system/eva-design-system-intro
[link:kitten-tricks]: https://github.com/akveo/kittenTricks
[link:eva-icons]: https://github.com/akveo/eva-icons
[link:akveo-homepage]: https://akveo.com
Expand Down
7 changes: 2 additions & 5 deletions docs/src/articles/getting-started/where-to-start.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,12 @@ UI Kitten is a framework of UI components powered by Eva Design System for your

## Quick start tutorials

- **[Start a new App](guides/start-a-new-app)**
**[Install UI Kitten](guides/install-ui-kitten)**

This tutorial explains how to setup React Native app with UI Kitten from a scratch.

- **[Install into existing App](guides/install-into-existing-app)**
This tutorial explains how to setup React Native app with UI Kitten.

Please consider creating an issue on GitHub if your use case is not described above. But we kindly ask to always look through the documentation and the list of existing issues first.


<hr>

## I'm new to React Native or mobile development
Expand Down
37 changes: 0 additions & 37 deletions docs/src/articles/guides/install-existing.md

This file was deleted.

30 changes: 0 additions & 30 deletions docs/src/articles/guides/install-new.md

This file was deleted.

54 changes: 54 additions & 0 deletions docs/src/articles/guides/install.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
# Install UI Kitten

If you don't have any code yet, please consider checking <a href="https://facebook.github.io/react-native/docs/getting-started" target="_blank">React Native Getting Started</a> documentation for help creating your app.

<hr>

## Installation

We recommend to develop React Native with expo-cli, you can install it with the following command.

```bash
npm i -g expo-cli
```

<hr>

## Create a New Project

A new project can be created using Expo CLI tools.

```bash
expo init PROJECT-NAME
```
<hr>

## Install UI Kitten and Eva Design System

```bash
npm i react-native-ui-kitten @eva-design/eva
```

<hr>

## Configure Application Root

At this step you have everything in place, let's configure UI Kitten to be used in your app.

```js
import * as React from 'react';
import { mapping, light as lightTheme } from '@eva-design/eva';
import { ApplicationProvider, Layout } from 'react-native-ui-kitten';

const App = () => (
<ApplicationProvider
mapping={mapping}
theme={lightTheme}>
<Layout style={{flex: 1}}/>
</ApplicationProvider>
);

export default App;
```

That's it. UI Kitten is ready now.
24 changes: 24 additions & 0 deletions docs/src/assets/images/components/drawer.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/src/assets/images/overview/drawer.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
29 changes: 16 additions & 13 deletions docs/src/structure.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,23 +33,12 @@ export const structure = [
children: [
{
type: 'page',
name: 'Start a new App',
name: 'Install UI Kitten',
children: [
{
type: 'block',
block: 'markdown',
source: 'guides/install-new.md',
},
],
},
{
type: 'page',
name: 'Install into existing App',
children: [
{
type: 'block',
block: 'markdown',
source: 'guides/install-existing.md',
source: 'guides/install.md',
},
],
},
Expand Down Expand Up @@ -334,6 +323,20 @@ export const structure = [
},
],
},
{
type: 'tabs',
name: 'Drawer',
icon: 'drawer.svg',
source: [
'Drawer',
],
overview: [
{
name: 'Drawer',
images: ['drawer.png'],
},
],
},
{
type: 'tabs',
name: 'ViewPager',
Expand Down
Loading

0 comments on commit e98f3ea

Please sign in to comment.