el-native v1.0.1

EL NATIVE

Just Another React Native Components Library.

What is this repository for?

• The intended use for this repository is serving as a component library to develop react-native applications.

Getting Started

To use this library in your project, just install it using npm and the repository url.

$ npm install el-native --save

That's it.

Then, import the components that you want to use:

import { Map } from 'el-native';

And that would do the trick.

How to Contribute

Clone this repository

$ git clone git@github.com:MedicalWebExperts/el-native.git

Running the application for development

1. Install the dependencies

$ cd el-native
$ npm install

2. Run the application

$ react-native run-ios

or

$ react-native run-android

3. Running Storybook

$ npm run storybook

This command will show a storybook instance at: http://localhost:7007.

4. Running Tests

$ npm test

To update the snapshots:

$ npm test -- -u

To watch the test suite:

$ npm run test:watch

5. Component Documentation

• To document the components we are using react-docgen. Follow the docs to document your components.

*Everytime a component is added, modified or deleted, run:

$ npm run updateDocs

This command will update the docs.json file placed in the root of this repository. Add this file to commit and submit it with your changes.

6. Building the app to publish

$ npm run prepublish

or:

$ npm run build

For Android development

Reverse the port for the emulator

$ adb reverse tcp:7007 tcp:7007

Structure of the Components Directory

src/

All the components are placed under the src/ folder. If you want to create a new component use the following structure:

src/
├── index.js
├── MyComponent
│   ├── __snapshots__
│   ├── MyComponent.js
│   ├── styles.js
│   └── MyComponent.test.js

Generate component

Set bash script permissions:

$ chmod +x generate-component.sh

Generate component:

$ npm run generate MyComponent

Storybook

This project has configured a storybook. If you run the application as discribed in step 1, you will have an intereactive storybook and ready to use at: http://localhost:7007. You will be able to select the component from the stories list and preview it in the emulator.

If you want to add an story to the storybook, you can add it in the storybook/ folder at the root of this repository.

import React from 'react';
import { storiesOf } from '@storybook/react-native';

import { MyComponent } from '../../../src';

storiesOf('MyComponent', module).add('default', () => <MyComponent />);

Checkout the storybook documentation for more examples.