open-index/open-npm huggingface dataset:
npm package: @remobile/react-lifecycle
Description: A lifecycle for react and react-native
Author: YunJiang.Fang
Latest version: 1.0.0

# React LifeCycle (remobile)
A react lifecycle for react and react-native

## Installation
```sh
npm install @remobile/react-lifecycle --save
```
### Usage
```js
var LifeCycle = require('@remobile/react-lifecycle');
module.exports = React.createClass({
    mixins: [LifeCycle('view', 1)],
    ...
});
```
### Params
- LifeCycle(tag, level)
    - tag : tag for component, e.g: 'view'
    - level : level of component

### Console
```js
|______: [view]:getDefaultProps
app.js:11464 |___: [app]:getDefaultProps
app.js:11459 |___: [app]:getInitialState
app.js:11469 |___: [app]:componentWillMount
app.js:11459 |______: [view]:getInitialState
app.js:11469 |______: [view]:componentWillMount
app.js:11473 |______: [view]:componentDidMount
app.js:11473 |___: [app]:componentDidMount
app.js:11481 |___: [app]:shouldComponentUpdate[nextProps: Object {} nextState: Object {curPage: Object, rightPage: Object} ]
app.js:11486 |___: [app]:componentWillUpdate[nextProps: Object {} nextState: Object {curPage: Object, rightPage: Object} ]
app.js:11477 |______: [view]:componentWillReceiveProps[nextProps: Object {curPage: Object, rightPage: Object} ]
app.js:11481 |______: [view]:shouldComponentUpdate[nextProps: Object {curPage: Object, rightPage: Object} nextState: Object {} ]
app.js:11486 |______: [view]:componentWillUpdate[nextProps: Object {curPage: Object, rightPage: Object} nextState: Object {} ]
app.js:11490 |______: [view]:componentDidUpdate[prevProps: Object {curPage: Object, rightPage: undefined} prevState: Object {} ]
app.js:11490 |___: [app]:componentDidUpdate[prevProps: Object {} prevState: Object {curPage: Object} ]
```
npm package: @remobile/react-native-3d-panel
Description: A 3d left menu like old version QQ
Author: YunJiang.Fang
Latest version: 1.0.2

# React Native 3D Left Menu (remobile)
A 3d left menu like old version QQ.

## Installation
```sh
npm install @remobile/react-native-3d-panel --save
```

## Usage

### Example
```js
'use strict';

var React = require('react');
var ReactNative = require('react-native');
var {
    StyleSheet,
    Image,
} = ReactNative;

var Panel = require('@remobile/react-native-3d-panel');
var Menu = require('../person/Settings');
var image = require('./1.jpg');

module.exports = React.createClass({
    render() {
        const menu = (
            <Menu />
        );
        return (
            <Panel leftMenu={menu}>
                <Image
                    resizeMode='stretch'
                    source={image}
                    style={styles.image}>
                </Image>
            </Panel>
        )
    }
});

var styles = StyleSheet.create({
    image: {
        width: sr.w,
        height: sr.h,
    },
});
```

## Screencasts

![demo](https://github.com/remobile/react-native-3d-panel/blob/master/screencasts/demo.jpg)

#### Props
- `leftMenu: PropTypes.Component.required`
- `children: PropTypes.Component.required`
- `speed: PropTypes.number.required` default:500
- `menuWidth: PropTypes.number.required` default:Dimensions.get('window').width*2/3
npm package: @remobile/react-native-action-sheet
Description: A pure js ActionSheet like ios ActionSheet, support ios and android
Author: YunJiang.Fang
Latest version: 1.0.2

# React Native ActionSheet (remobile)
A pure js ActionSheet like ios ActionSheet, support ios and android

## Installation
```sh
npm install @remobile/react-native-action-sheet --save
```

## Usage

### Example
```js
'use strict';

var React = require('react');
var ReactNative = require('react-native');
var {
    StyleSheet,
    TouchableOpacity,
    View,
} = ReactNative;

var ActionSheet = require('@remobile/react-native-action-sheet');
var Button = require('@remobile/react-native-simple-button');

module.exports = React.createClass({
    getInitialState() {
        return {
            show: false
        };
    },
    onCancel() {
        this.setState({show:false});
    },
    onOpen() {
        this.setState({show:true});
    },
    render() {
        return (
            <View style={styles.container}>
                <Button onPress={this.onOpen}>Photo</Button>
                <ActionSheet
                    visible={this.state.show}
                    onCancel={this.onCancel} >
                    <ActionSheet.Button>Capture</ActionSheet.Button>
                    <ActionSheet.Button>Photo</ActionSheet.Button>
                    <ActionSheet.Button>Camera</ActionSheet.Button>
                </ActionSheet>
            </View>
        );
    },
});

var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center'
    },
});
```

## Screencasts

![loading](https://github.com/remobile/react-native-action-sheet/blob/master/screencasts/demo.gif)

##ActionSheet
#### Props
- `visible : PropTypes.boolean.isRequired` - must use state to control ActionSheet visible
- `onCancel : PropTypes.func.isRequired` - use to hide ActionSheet
- `cancelText : PropTypes.string` - default is 'Cancel'

##ActionSheet.Button
#### Props
- `buttonStyle : TouchableOpacity.propTypes.style` - set button style
- `textStyle : Text.propTypes.style` - set button text style
- `onPress : PropTypes.func` - callback for button click
npm package: @remobile/react-native-audio
Description: A audio player for react-native
Author: YunJiang.Fang
Latest version: 1.0.0

# React Native Audio (remobile)
A audio phone number for react-native

## Installation
```sh
npm install @remobile/react-native-audio --save
```
### Installation (iOS)
* Drag RCTAudio.xcodeproj to your project on Xcode.
* Click on your main project file (the one that represents the .xcodeproj) select Build Phases and drag libRCTAudio.a from the Products folder inside the RCTAudio.xcodeproj.
* Look for Header Search Paths and make sure it contains both $(SRCROOT)/../../../react-native/React as recursive.

### Installation (Android)
```gradle
...
include ':react-native-audio'
project(':react-native-audio').projectDir = new File(settingsDir, '../node_modules/@remobile/react-native-audio/android')
```

* In `android/app/build.gradle`

```gradle
...
dependencies {
    ...
    compile project(':react-native-audio')
}
```

* register module (in MainApplication.java)

```java
......
import com.remobile.audio.RCTAudioPackage;  // <--- import

......

@Override
protected List<ReactPackage> getPackages() {
   ......
   new RCTAudioPackage(),            // <------ add here
   ......
}

```

## Usage

### Example
```js
var React = require('react');
var ReactNative = require('react-native');
var {
    StyleSheet,
    View,
} = ReactNative;


var Button = require('@remobile/react-native-simple-button');
var Audio = require('@remobile/react-native-audio');

module.exports = React.createClass({
    play() {
        if (this.player) {
            this.player.stop();
            this.player.release();
            this.player = null;
        } else {
            this.player = new Audio('file:///sdcard/1.mp3', (error) => {
                if (!error) {
                    this.player.play(()=>{
                        this.player.release();
                        this.player = null;
                    });
                } else{
                    Toast('播放失败');
                }
            });
        }
    },
    render() {
        return (
            <View style={styles.container}>
                <Button onPress={this.play}>
                    play
                </Button>
            </View>
        );
    },
});


var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'space-around',
        alignItems: 'center',
        backgroundColor: 'transparent',
    }
});
```

### method
- `isLoaded()`
- `enable()`
- `play(onEnd)`
- `stop()`
- `release()`
- `getDuration()`
- `getNumberOfChannels()`
- `getVolume()`
- `setVolume(volume)`
- `getPan(volume)`
- `setPan(pan)`
- `getNumberOfLoops()`
- `setNumberOfLoops(times)`
- `getCurrentTime()`
- `setCurrentTime(time)`
npm package: @remobile/react-native-cache-image
Description: A cache-image for react-native
Author: YunJiang.Fang
Latest version: 1.0.7

# React Native CacheImage (remobile)
    A cache-image for react-native
* When use web image, this module will find the web image's url corresponding image file is exist or not, if exist, it will use local exist file, and check this CacheImage's old url and new url, if old url is the same as new url, do noting. if not, sub old url's ref and add new url's ref, if old url's ref is 0, delete old url corresponding image file.
* it also will check total storage, total storage is 1024*1024*50, when local file total size is above total storage, it will delete the oldest local file and clear corresponding record.

## Installation
```sh
npm install @remobile/react-native-cache-image --save
```
## Usage

### Example
```js
'use strict';

var React = require('react');
var ReactNative = require('react-native');
var {
    StyleSheet,
    View,
} = ReactNative;

var CacheImage = require('@remobile/react-native-cache-image');

var SERVER = 'http://192.168.1.117:3000/';

module.exports = React.createClass({
    render: function() {
        return (
            <View style={styles.container}>
                <CacheImage
                    resizeMode='stretch'
                    defaultSource={app.img.tabnav_list}
                    url={SERVER+"1.png"}
                    style={styles.image}
                    />
                <CacheImage
                    resizeMode='stretch'
                    defaultSource={app.img.tabnav_list}
                    url={SERVER+"2.png"}
                    style={styles.image}
                    />
                <CacheImage
                    resizeMode='stretch'
                    defaultSource={app.img.tabnav_list}
                    url={SERVER+"3.png"}
                    style={styles.image}
                    />
            </View>
        );
    }
});

var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    image: {
        width:200,
        height:200,
    }
});
```

#### Props
This module supports react-native Image's props all.
- `defaultSource : PropTypes.string.isRequired` - local image for default image
- `url : PropTypes.string.isRequired` - the url of web image
    * format: 'http://{server}/{name}.png' or 'http://{server}/{name}.jpg'
    * must have jpg or png suffix
    * {name} must have version. e.g: first version is verison1.jpg, when you want to update image, you can use verison2.jpg, otherwise this module will not download image
npm package: @remobile/react-native-cache-module
Description: Cache dynamic loading third party react-native app/module for react-native
Author: YunJiang.Fang
Latest version: 1.0.0

# React Native Cache Module (remobile)
Cache dynamic loading third party react-native app/module for react-native
## Installation
```sh
npm install @remobile/react-native-cache-module --save
```

## Usage

### Example
```js
'use strict';

var React = require('react');
var ReactNative = require('react-native');
var {
    StyleSheet,
    View,
} = ReactNative;

var Button = require('@remobile/react-native-simple-button');
var CacheModule = require('@remobile/react-native-cache-module');
var Module = require('@remobile/react-native-module');

module.exports = React.createClass({
    test() {
        CacheModule.getModulePath('http://localhost:3001/fang').then((path)=>{
            Module.load(path, 'SimpleApp', {fang:1, yun:2}, (result)=>{
                Toast(JSON.stringify(result));
            });
        });
    },
    render() {
        return (
            <View style={styles.container}>
                <Button onPress={this.test}>测试</Button>
            </View>
        );
    }
});


var styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'transparent',
        justifyContent: 'space-around',
        paddingVertical: 150,
    },
});
```
### Screencasts

![demo](https://github.com/remobile/react-native-cache-module/blob/master/screencasts/demo.gif)

### Method
- `getModulePath(url): PropTypes.function.Promize` Promize resolve the local path of module

### Server Static Files
```
$ls -R
fang

./fang:
ios.zip      version.json
```

* ios.zip is the ios js bundle and resource
* version.json format like below:

```
{
    "ios": 1,
    "android": 1,
}
```

### see detail use
* https://github.com/remobile/react-native-template
npm package: @remobile/react-native-call
Description: A call phone number for react-native
Author: YunJiang.Fang
Latest version: 1.0.1

# React Native Call (remobile)
A call phone number for react-native

## Installation
```sh
npm install @remobile/react-native-call --save
```
### Installation (iOS)
* Drag RCTCall.xcodeproj to your project on Xcode.
* Click on your main project file (the one that represents the .xcodeproj) select Build Phases and drag libRCTCall.a from the Products folder inside the RCTCall.xcodeproj.
* Look for Header Search Paths and make sure it contains both $(SRCROOT)/../../../react-native/React as recursive.

### Installation (Android)
```gradle
...
include ':react-native-call'
project(':react-native-call').projectDir = new File(settingsDir, '../node_modules/@remobile/react-native-call/android')
```

* In `android/app/build.gradle`

```gradle
...
dependencies {
    ...
    compile project(':react-native-call')
}
```

* register module (in MainApplication.java)

```java
......
import com.remobile.call.RCTCallPackage;  // <--- import

......

@Override
protected List<ReactPackage> getPackages() {
   ......
   new RCTCallPackage(),            // <------ add here
   ......
}

```

## Usage

### Example
```js
var React = require('react');
var ReactNative = require('react-native');
var {
    StyleSheet,
    View,
} = ReactNative;


var Button = require('@remobile/react-native-simple-button');
var Call = require('@remobile/react-native-call');

module.exports = React.createClass({
    callNumber() {
        Call.callNumber(()=>{
          }, ()=>{},
          "085186810083",
          true,
        );
    },
    render() {
        return (
            <View style={styles.container}>
                <Button onPress={this.callNumber}>
                    CallNumber
                </Button>
            </View>
        );
    },
});


var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'space-around',
        alignItems: 'center',
        backgroundColor: 'transparent',
    }
});
```

### Method
* `callNumber` (success, failure, number, bypassAppChooser)
    * bypassAppChooser on support for android
npm package: @remobile/react-native-call-state
Description: a phone call state detection for react-native,include ios and android
Author: honggao
Latest version: 1.0.4

### Installation
npm install @remobile/react-native-call-state --save

### Installation (Android)
- settings.gradle `
include ':react-native-call-state'
project(':react-native-call-state').projectDir = new File(settingsDir, '../node_modules/@remobile/react-native-call-state/android')`

- build.gradle `compile project(':react-native-call-state')`

- MainApplication`new CallStatePackage()`

### Installation (iOS)
- Project navigator->Libraries->Add Files to 选择 @remobile/react-native-call-state/ios/RCTCallState.xcodeproj
- Project navigator->Build Phases->Link Binary With Libraries 加入 libRCTCallState.a

### Usage 使用方法

    const CallState =  require('react-native-call-state');
    componentWillMount() {
        CallState.startListener();
        this.subscription = DeviceEventEmitter.addListener('callStateUpdated', data => { console.warn(JSON.stringify(data)); });
    }
    componentWillUnmount() {
        CallState.stopListener();
    }
npm package: @remobile/react-native-capture
Description: A cordova media capture for react-native, support for ios and android
Author: YunJiang.Fang
Latest version: 1.0.2

# React Native Capture (remobile)
A cordova capture for react-native, support for ios and android

## Installation
```sh
npm install @remobile/react-native-capture --save
```
### Installation (iOS)
* Drag RCTCapture.xcodeproj to your project on Xcode.
* Click on your main project file (the one that represents the .xcodeproj) select Build Phases and drag libRCTCapture.a from the Products folder inside the RCTCapture.xcodeproj.
* Look for Header Search Paths and make sure it contains both $(SRCROOT)/../../../react-native/React as recursive.

### Installation (Android)
```gradle
...
include ':react-native-capture'
project(':react-native-capture').projectDir = new File(settingsDir, '../node_modules/@remobile/react-native-capture/android')
```

* In `android/app/build.gradle`

```gradle
...
dependencies {
    ...
    compile project(':react-native-capture')
}
```

* register module (in MainApplication.java)

```java
......
import com.remobile.capture.RCTCapturePackage;  // <--- import

......

@Override
protected List<ReactPackage> getPackages() {
   ......
   new RCTCapturePackage(),            // <------ add here
   ......
}

```

## Usage

### Example
```js
var React = require('react');
var ReactNative = require('react-native');
var {
    StyleSheet,
    View,
    Image
} = ReactNative;

var Capture = require('@remobile/react-native-capture');
var Button = require('@remobile/react-native-simple-button');

module.exports = React.createClass({
    getInitialState () {
        return {
            filePath: '',
        };
    },
    taskVideo() {
        Capture.captureVideo((mediaFiles)=>{
            let filePath = mediaFiles[0].fullPath;
            this.setState({filePath});
        }, ()=>{
            Toast('录制失败');
        }, {limit:1});
    },
    render() {
        const {filePath} = this.state;
        return (
            <View style={styles.container}>
                <Button onPress={this.taskVideo}>摄像</Button>
                <Text>{filePath}</Text>
            </View>
        );
    },
});


var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'space-around',
        alignItems: 'center',
        backgroundColor: 'transparent',
    },
});
```

### HELP
* look https://github.com/apache/cordova-plugin-media-capture


### thanks
* this project come from https://github.com/apache/cordova-plugin-media-capture

### see detail use
* https://github.com/remobile/react-native-template
npm package: @remobile/react-native-card-list
Description: A react-native card list write in js
Author: YunJiang.Fang
Latest version: 1.0.2

# React Native Card List (remobile)
A react-native card list write in js

## Installation
```sh
npm install @remobile/react-native-card-list --save
```

## Usage

### Example
```js
'use strict';

var React = require('react');
var ReactNative = require('react-native');
var {
    StyleSheet,
    View,
    Text,
    Dimensions,
} = ReactNative;
var CardList = require('@remobile/react-native-card-list');
var {width, height} = Dimensions.get('window');

var LIST = [
    {color: 'red'},
    {color: 'blue'},
    {color: 'darkgray'},
    {color: 'pink'},
    {color: 'green'},
    {color: 'yellow'},
    {color: 'red'},
    {color: 'blue'},
    {color: 'darkgray'},
    {color: 'pink'},
    {color: 'green'},
    {color: 'yellow'},
    {color: 'red'},
    {color: 'blue'},
    {color: 'darkgray'},
    {color: 'pink'},
    {color: 'green'},
    {color: 'yellow'}
];


module.exports = React.createClass({
    onClickCard(i) {
        Toast(i+'');
    },
    renderRow(data, i, width, height) {
        return (
            <View style={{width, height, backgroundColor:data.color, alignItems:'center'}}>
                <Text>{i}</Text>
            </View>
        )
    },
    render() {
        return (
            <View style={styles.container}>
                <CardList
                    list={LIST}
                    renderRow={this.renderRow}
                    height={300}
                    scrollOffset={1000}
                    panelHeight={height-100}
                    panelWidth={width-100}
                    offsetTop={50}
                    offsetLeft={50}
                    onClickCard={this.onClickCard}/>
            </View>
        );
    }
});


var styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 50,
    },
});
```

## Screencasts

![demo](https://github.com/remobile/react-native-card-list/blob/master/screencasts/demo.gif)

#### Props
- `list: PropTypes.list` card data list
- `height: PropTypes.number` card item height
- `panelHeight: propTypes.number` card container height
- `panelWidth: PropTypes.number` card container width
- `offsetTop: PropTypes.number` card container top offset of screen
- `offsetLeft: PropTypes.number` card container left offset of screen
- `scrollOffset: PropTypes.number` the offset of scroll
- `onClickCard: PropTypes.func [args: i]` the callback of click card, args i is card index of clicked card
- `renderRow: PropTypes.func [args: data, i, width, height]` row render function
npm package: @remobile/react-native-card-swiper
Description: A react-native card swiper write in js
Author: YunJiang.Fang
Latest version: 1.0.5

# React Native Card Swiper (remobile)
A react-native card swiper write in js

## Installation
```sh
npm install @remobile/react-native-card-swiper --save
```

## Usage

### Example
```js
'use strict';

var React = require('react');
var ReactNative = require('react-native');
var {
    StyleSheet,
    View,
    Text,
} = ReactNative;
var CardSwiper = require('@remobile/react-native-card-swiper');

module.exports = React.createClass({
    getDefaultProps: function() {
        return {
            vertical: false,
        };
    },
    renderRow(obj, index) {
        return (
            <View style={styles.panel}>
                <Text>{obj}</Text>
            </View>
        )
    },
    onPressRow(obj, index) {
        console.log('onPressRow', obj, index);
    },
    onChange(obj, index) {
        console.log('onChange', obj, index);
    },
    render() {
        const {vertical} = this.props;
        return (
            <View style={[styles.container, {paddingLeft: vertical ? 50 : 0}]}>
                <CardSwiper
                    list={[1, 2, 3]}
                    vertical={vertical}
                    width={vertical ? 180 : sr.tw}
                    height={vertical ? sr.th/2 : 150}
                    loop={true}
                    onPress={this.onPressRow}
                    onChange={this.onChange}
                    renderRow={this.renderRow}
                    />
            </View>
        );
    }
});


var styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 100,
    },
    panel: {
        backgroundColor: 'green',
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
});
```

## Screencasts

![vertical](https://github.com/remobile/react-native-card-swiper/blob/master/screencasts/vertical.gif)
![horizontal](https://github.com/remobile/react-native-card-swiper/blob/master/screencasts/horizontal.gif)

#### Props
- `list: PropTypes.list` card data list
- `index: PropTypes.number` card initial index: default(0)
- `width: PropTypes.number.required` card item width
- `height: PropTypes.number.required` card item height
- `loop: propTypes.boolean` swiper is loop: default(false)
- `vertical: propTypes.boolean` swiper derection is vertical: default(false)
- `renderRow: PropTypes.func [args: data, index]` row render function
- `onPress: PropTypes.func [args: data, index]` row press callback function
- `onChange: PropTypes.func [args: data, index]` row change callback function

#### Method
- `scrollTo(index)` scroll to index card
npm package: @remobile/react-native-clip-rect
Description: A clip react for react-native, the shape is center highlight and around darkness
Author: YunJiang.Fang
Latest version: 1.0.0

# React Native Clip Rect (remobile)
A clip react for react-native, the shape is center highlight and around darkness.

## Installation
```sh
npm install @remobile/react-native-clip-rect --save
```

## Usage

### Example
```js
'use strict';

var React = require('react');
var ReactNative = require('react-native');
var {
    StyleSheet,
    Image,
    View,
} = ReactNative;

var ClipRect = require('@remobile/react-native-clip-rect');

module.exports = React.createClass({
    render() {
        const overlayColor = 'rgba(0, 0, 0, 0.5)';
        return (
            <View style={styles.container}>
                <Image style={styles.image} source={app.img.splash_logo} />
                <View style={{flex: 1, backgroundColor: overlayColor}} />
                <View style={{flexDirection: 'row'}} >
                    <View style={{flex: 1, backgroundColor: overlayColor}} />
                    <ClipRect style={{width: 200, height: 200, borderRadius: 100, color: overlayColor}} />
                    <View style={{flex: 1, backgroundColor: overlayColor}} />
                </View>
                <View style={{flex: 1, backgroundColor: overlayColor}} />
            </View>
        )
    }
})
const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    image: {
        width: sr.w,
        height: sr.w,
        top: (sr.h-sr.w)/2,
        position: 'absolute',
    },
});
```

## Screencasts

![cricle](https://github.com/remobile/react-native-clip-rect/blob/master/screencasts/cricle.jpg)
![quadrangle](https://github.com/remobile/react-native-clip-rect/blob/master/screencasts/quadrangle.jpg)

#### Props
- `width: PropTypes.number.required`
- `height: PropTypes.number.required`
- `color: PropTypes.string.required`
- `borderRadius: PropTypes.number.optional`
- `borderTopLeftRadius: PropTypes.number.optional`
- `borderTopRightRadius: PropTypes.number.optional`
- `borderBottomRightRadius: PropTypes.number.optional`
- `borderBottomLeftRadius: PropTypes.number.optional`
npm package: @remobile/react-native-cordova
Description: A cordova plugin defines for react native on ios and android
Author: YunJiang.Fang
Latest version: 1.1.1

# React Native Cordova (remobile)
A cordova plugin defines for react native on ios and android

## Installation
```sh
npm install @remobile/react-native-cordova --save
```
### Installation (iOS)
* Drag RCTCordova.xcodeproj to your project on Xcode.
* Click on your main project file (the one that represents the .xcodeproj) select Build Phases and drag libRCTCordova.a from the Products folder inside the RCTCordova.xcodeproj.
* Look for Header Search Paths and make sure it contains $(SRCROOT)/../../../react-native/React as recursive.

* In your project, Look for Header Search Paths and make sure it contains $(SRCROOT)/../../react-native-cordova/ios/RCTCordova.
* then you can #import "CDVPlugin.h"

### Installation (Android)
* In Main project `build.gradle`
```gradle
...
include ':react-native-cordova'
project(':react-native-cordova').projectDir = new File(settingsDir, '../node_modules/@remobile/react-native-cordova/android/RCTCordova')
```

* In you project `build.gradle`

```gradle
...
dependencies {
    ...
    compile project(':react-native-cordova')
}
```

* then you can import com.remobile.cordova.* ;


## Usage
### IOS
```java
#import "CDVPlugin.h"
...
@interface CustomClass : CDVPlugin
@end
...

@implementation CustomClass
RCT_EXPORT_MODULE(RCTCustomClass)
RCT_EXPORT_CORDOVA_METHOD(test);
...
- (void) test:(CDVInvokedUrlCommand *)command {
...
}
....
@end
```
### Android
```java
import com.remobile.cordova.*;
...
public class CustomClass extends CordovaPlugin {
...
    public CustomClass(ReactApplicationContext reactContext) {
            super(reactContext);
        }
...
    @Override
    public String getName() {
        return "Sqlite";
    }
    @ReactMethod
    public void test(ReadableArray args, Callback success, Callback error) {
        executeReactMethod("test", args, success, error);
    }
    ...
    public boolean execute(String action, JSONArray args, final CallbackContext callbackContext) throws JSONException {
        if (action.equals("test")) {
            ....
            return true;
        }
        ....
        return false;
    }
}
```


# Project List
* [react-native-camera](https://github.com/remobile/react-native-camera)
* [react-native-contacts](https://github.com/remobile/react-native-contacts)
* [react-native-dialogs](https://github.com/remobile/react-native-dialogs)
* [react-native-file-transfer](https://github.com/remobile/react-native-file-transfer)
* [react-native-image-picker](https://github.com/remobile/react-native-image-picker)
* [react-native-sqlite](https://github.com/remobile/react-native-sqlite)
* [react-native-file](https://github.com/remobile/react-native-file)
* [react-native-zip](https://github.com/remobile/react-native-zip)
* [react-native-capture](https://github.com/remobile/react-native-capture)
* [react-native-capture](https://github.com/remobile/react-native-capture)
* [react-native-local-notifications](https://github.com/remobile/react-native-local-notifications)
npm package: @remobile/react-native-des
Description: A des crypto for react-native
Author: YunJiang.Fang
Latest version: 1.0.6

# React Native Des (remobile)
A des crypto for react-native

## Installation
```sh
npm install @remobile/react-native-des --save
```
### Installation (iOS)
* Drag RCTDes.xcodeproj to your project on Xcode.
* Click on your main project file (the one that represents the .xcodeproj) select Build Phases and drag libRCTDes.a from the Products folder inside the RCTDes.xcodeproj.
* Look for Header Search Paths and make sure it contains both $(SRCROOT)/../../../react-native/React as recursive.

### Installation (Android)
```gradle
...
include ':react-native-des'
project(':react-native-des').projectDir = new File(rootProject.projectDir, '../node_modules/@remobile/react-native-des/android/RCTDes')
```

* In `android/app/build.gradle`

```gradle
...
dependencies {
    ...
    compile project(':react-native-des')
}
```

* register module (in MainApplication.java)

```java
......
import com.remobile.des.RCTDesPackage;  // <--- import

......

@Override
protected List<ReactPackage> getPackages() {
   ......
   new RCTDesPackage(),            // <------ add here
   ......
}


## Usage

### Example
```js
var Des = require('@remobile/react-native-des');

Des.encrypt("fangyunjiang is a good developer", "ABCDEFGH", function(base64) {
    console.log(base64); //wWcr2BJdyldTHn4z3AxA0qBIdHQkIKmpqhTgNuRd3fAFXzvIO5347g==
    Des.decrypt(base64, "ABCDEFGH", function(text) {
        console.log(text); //fangyunjiang is a good developer
    }, function(){
        console.log("error");
    });
}, function() {
    console.log("error");
});
```

### method
- `encrypt(text, key, callback)`
- `encrypt(base64, key, callback)`


## Server Side
* see https://github.com/remobile/react-native-des/blob/master/server
* support java, nodejs, js, php (see example)
npm package: @remobile/react-native-image-crop
Description: A component for react-native crop image, such as edit user head
Author: YunJiang.Fang
Latest version: 1.0.3

# React Native Image Crop (remobile)
A component for react-native crop image,  such as edit user head.

## Installation
```sh
npm install @remobile/react-native-image-crop --save
```

## Usage

### Example
```js
'use strict';

var React = require('react');
var ReactNative = require('react-native');
var {
    StyleSheet,
    View,
    Text,
    Image,
    ImageEditor,
} = ReactNative;

var Button = require('@remobile/react-native-simple-button');
var ImageCrop = require('@remobile/react-native-image-crop');

module.exports = React.createClass({
    getInitialState() {
        return {
            croppedImageURI: '',
        };
    },
    edit() {
        const cropData = this.imageCrop.getCropData();
        ImageEditor.cropImage(
            'http://v1.qzone.cc/avatar/201407/07/00/24/53b9782c444ca987.jpg!200x200.jpg',
            cropData,
            (croppedImageURI) => {
                this.setState({croppedImageURI})
            },
            (error) => console.log(error)
        );
    },
    render() {
        return (
            <View style={styles.container}>
                <Button onPress={this.edit}>编辑</Button>
                <ImageCrop
                    imageWidth={200}
                    imageHeight={200}
                    ref={(ref)=>this.imageCrop = ref}
                    source={{uri:'http://v1.qzone.cc/avatar/201407/07/00/24/53b9782c444ca987.jpg!200x200.jpg'}} />
                <View style={styles.imageContainer}>
                    <Image
                        source={{uri: this.state.croppedImageURI}}
                        style={styles.image}
                        />
                </View>
            </View>
        );
    }
});

var styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    imageContainer: {
        height: 200,
        marginTop: 20,
        backgroundColor: 'white',
    },
    image: {
        marginLeft: sr.w/2-100,
        width: 200,
        height: 200,
    },
});
```

## Screencasts

![crop1](https://github.com/remobile/react-native-image-crop/blob/master/screencasts/crop1.jpg)
![crop2](https://github.com/remobile/react-native-image-crop/blob/master/screencasts/crop2.jpg)
![crop3](https://github.com/remobile/react-native-image-crop/blob/master/screencasts/crop3.jpg)

#### Props
- `imageWidth: PropTypes.number.required`  //must be image real origin imageWidth
- `imageHeight: PropTypes.number.required` //must be image real origin imageHeight
- `editRectWidth: PropTypes.number.optional` //default: 212 [the edit rect width]
- `editRectHeight: PropTypes.number.optional` //default: 212 [the edit rect height]
- `editRectRadius: PropTypes.number.optional` //default: 106, the rect is round
- `overlayColor: PropTypes.string.optional` //default: rgba(0, 0, 0, 0.5)
#### Functions
- `getCropData()` //return ImageEditor.cropImage's cropData widthout displaySize
npm package: @remobile/react-native-image-edit
Description: A image edit module for react-native support for ios and android
Author: YunJiang.Fang
Latest version: 1.0.1

# React Native ImageEdit (remobile)
A image edit for react-native support for ios and android

## Installation
```sh
npm install @remobile/react-native-image-edit --save
```

### Installation (iOS)
* Drag RCTImageEdit.xcodeproj to your project on Xcode.
* Click on your main project file (the one that represents the .xcodeproj) select Build Phases and drag libRCTImageEdit.a from the Products folder inside the RCTImageEdit.xcodeproj.
* Look for Header Search Paths and make sure it contains both $(SRCROOT)/../../../react-native/React as recursive.

### Installation (Android)
```gradle
...
include ':react-native-image-edit'
project(':react-native-image-edit').projectDir = new File(settingsDir, '../node_modules/@remobile/react-native-image-edit/android')
```

* In `android/app/build.gradle`

```gradle
...
dependencies {
    ...
    compile project(':react-native-image-edit')
}
```

* register module (in MainApplication.java)

```java
......
import com.remobile.imageedit.RCTImageEditPackage;  // <--- import

......

@Override
protected List<ReactPackage> getPackages() {
   ......
   new RCTImageEditPackage(),            // <------ add here
   ......
}

```

## Usage

### Example
```js
const ImageEdit = require('@remobile/react-native-image-edit');
......
async doRotate (isLeft) {
    const uri = this.state.image.uri;
    const image = await ImageEdit.edit(uri, [ { rotate: isLeft ? -90 : 90 } ]);
    this.setState({ image: null }, () => {
        this.setState({ image });
    });
},
async doFlip (isVertical) {
    const uri = this.state.image.uri;
    const image = await ImageEdit.edit(uri, [ { flip: isVertical ? { vertical: true } : { horizontal: true } } ]);
    this.setState({ image: null }, () => {
        this.setState({ image });
    });
},

```

### see detail use
* https://github.com/remobile/react-native-template
npm package: @remobile/react-native-image-picker
Description: A image picker for react-native, support for ios and android
Author: YunJiang.Fang
Latest version: 1.0.6

# React Native ImagePicker (remobile)
A image picker for react-native, support for ios and android

## Installation
```sh
npm install @remobile/react-native-image-picker --save
```
### Installation (iOS)
* Drag RCTImagePicker.xcodeproj to your project on Xcode.
* Click on your main project file (the one that represents the .xcodeproj) select Build Phases and drag libRCTImagePicker.a from the Products folder inside the RCTImagePicker.xcodeproj.
* Look for Header Search Paths and make sure it contains both $(SRCROOT)/../../../react-native/React as recursive.

### Installation (Android)
```gradle
...
include ':react-native-image-picker'
project(':react-native-image-picker').projectDir = new File(settingsDir, '../node_modules/@remobile/react-native-image-picker/android/RCTImagePicker')
```

* In `android/app/build.gradle`

```gradle
...
dependencies {
    ...
    compile project(':react-native-image-picker')
}
```

* register module (in MainApplication.java)

```java
......
import com.remobile.imagePicker.RCTImagePickerPackage;  // <--- import

......

@Override
protected List<ReactPackage> getPackages() {
   ......
   new RCTImagePickerPackage(),            // <------ add here
   ......
}

```

### Screencasts
* ios
<br>
![ios](https://github.com/remobile/react-native-image-picker/blob/master/screencasts/ios.gif)
<br>
* android
<br>
![android](https://github.com/remobile/react-native-image-picker/blob/master/screencasts/android.png)

## Usage

### Example
```js
var React = require('react');
var ReactNative = require('react-native');
var {
    StyleSheet,
    View,
} = ReactNative;

var ImagePicker = require('@remobile/react-native-image-picker');
var Button = require('@remobile/react-native-simple-button');
var Dialogs = require('@remobile/react-native-dialogs');

module.exports = React.createClass({
    onOpen() {
        var options = {maximumImagesCount: 10, width: 400};
        ImagePicker.getPictures(options, function(results) {
            var msg = '';
            for (var i = 0; i < results.length; i++) {
                msg += 'Image URI: ' + results[i] + '\n';
            }
            Dialogs.alert(msg);
        }, function (error) {
            Dialogs.alert('Error: ' + error);
        });
    },
    render() {
        return (
            <View style={styles.container}>
                <Button onPress={this.onOpen}>Photo</Button>
            </View>
        );
    },
});


var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'transparent',
    },
});
```

### HELP
* look https://github.com/wymsee/cordova-imagePicker


### thanks
* this project come from https://github.com/wymsee/cordova-imagePicker

### see detail use
* https://github.com/remobile/react-native-template
npm package: @remobile/react-native-maps-direction-uri
Description: a map direction use uri mode for react native, ios map,qq map,baidu map,iosa map be supported.
Author: honggao
Latest version: 1.0.4

### Installation
npm install @remobile/react-native-maps-direction-uri --save

### Installation (Android)
- settings.gradle `
include ':react-native-maps-direction-uri'
project(':react-native-maps-direction-uri').projectDir = new File(settingsDir, '../node_modules/@remobile/react-native-maps-direction-uri/android')`

- build.gradle `compile project(':react-native-maps-direction-uri')`

- MainApplication`new MapsDirectionUriPackage()`

### Installation (iOS)
- Project navigator->Libraries->Add Files to 选择 @remobile/react-native-maps-direction-uri/ios/RCTMapsDirectionUri.xcodeproj
- Project navigator->Build Phases->Link Binary With Libraries 加入 libRCTMapsDirectionUri.a

### Usage 使用方法
    const MapsDirectionUri =  require('react-native-maps-direction-uri');
    mapsDirection.startDirection({
            startLatitude:26.207149,
            startLongitude:114.593086,
            endLatitude:31.207149,
            endLongitude:118.593086,
            type(baidu,apple,iosa,google,qq)
        }, (data)=>{
            console.log('---------------data',data);
        });
npm package: @remobile/react-native-marquee
Description: A react-native card list write in js
Author: YunJiang.Fang
Latest version: 1.0.1

# React Native Marquee (remobile)
A react-native marquee list write in js

## Installation
```sh
npm install @remobile/react-native-marquee --save
```

## Usage

### Example
```js
'use strict';

var React = require('react');
var ReactNative = require('react-native');
var {
    StyleSheet,
    View,
    Text,
} = ReactNative;

var Button = require('@remobile/react-native-simple-button');
var Marquee = require('@remobile/react-native-marquee');

module.exports = React.createClass({
    getInitialState() {
        return {
            text:  '暗示健康等会拉时间段ksajdfkasdjkfasjdkfasldfjasdlf暗示健康等会拉',
            fontSize:  18,
            width:  200,
            lineHeight:  50,
            color:  'red',
        };
    },
    changeContent() {
        if (!this.contentFlag) {
            this.contentFlag = true;
            this.setState({
                text:  '1231238123981273981273981273912873912873129837129837',
            });
        } else {
            this.contentFlag = false;
            this.setState({
                text:  '暗示健康等会拉时间段ksajdfkasdjkfasjdkfasldfjasdlf暗示健康等会拉',
            });
        }
    },
    changeStyle() {
        if (!this.styleFlag) {
            this.styleFlag = true;
            this.setState({
                fontSize:  50,
                width:  100,
                lineHeight:  150,
                color:  'blue',
            });
        } else {
            this.styleFlag = false;
            this.setState({
                fontSize:  18,
                width:  200,
                lineHeight:  50,
                color:  'red',
            });
        }
    },
    render() {
        const {text, fontSize, color, width, lineHeight} = this.state;
        return (
            <View style={styles.container}>
                <Marquee style={[styles.label, {fontSize, color, width, lineHeight}]}>
                    {text}
                </Marquee>
                <Button onPress={this.changeContent}>改变内容</Button>
                <Button onPress={this.changeStyle}>改变样式</Button>
            </View>
        );
    }
});


var styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 100,
    },
    label: {
        color: 'red',
        fontSize: 18,
        fontWeight: '800',
        letterSpacing: 10,
        fontStyle: 'italic',
        lineHeight: 50,
        backgroundColor: 'green',
        paddingHorizontal: 20,
        width: 200,
        left: 100,
        overflow: 'hidden',
    },
});
```

## Screencasts

![demo](https://github.com/remobile/react-native-marquee/blob/master/screencasts/demo.gif)

#### Props
- `children: React.PropTypes.string.isRequired` show text
- `speed: React.PropTypes.number`  letter move speed, unit is ms, default is 10
- `spaceRatio: React.PropTypes.number` the space ratio of container width
- `style: PropTypes.style` view style and text style
npm package: @remobile/react-native-marquee-label
Description: A marquee label for react-native
Author: YunJiang.Fang
Latest version: 1.0.4

# React Native MarqueeLabel (remobile)
A marquee label for react-native
* if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ]

## Installation
```sh
npm install @remobile/react-native-marquee-label --save
```

### Installation (iOS)
* Drag RCTMarqueeLabel.xcodeproj to your project on Xcode.
* Click on your main project file (the one that represents the .xcodeproj) select Build Phases and drag libRCTMarqueeLabel.a from the Products folder inside the RCTMarqueeLabel.xcodeproj.
* Look for Header Search Paths and make sure it contains both $(SRCROOT)/../../../react-native/React as recursive.

### Installation (Android)
```gradle
...
include ':react-native-marquee-label'
project(':react-native-marquee-label').projectDir = new File(settingsDir, '../node_modules/@remobile/react-native-marquee-label/android/RCTMarqueeLabel')
```

* In `android/app/build.gradle`

```gradle
...
dependencies {
    ...
    compile project(':react-native-marquee-label')
}
```

* register module (in MainApplication.java)

```java
......
import com.remobile.marqueeLabel.RCTMarqueeLabelPackage;  // <--- import

......

@Override
protected List<ReactPackage> getPackages() {
   ......
   new RCTMarqueeLabelPackage(),            // <------ add here
   ......
}

```

## Usage

### Example
```js
'use strict';

var React = require('react');
var ReactNative = require('react-native');
var {
    StyleSheet,
    View
} = ReactNative;

var MarqueeLabel = require('@remobile/react-native-marquee-label');

module.exports = React.createClass({
    render: function() {
        return (
            <View style={styles.container}>
                <MarqueeLabel style={styles.marqueeLabel}
                    scrollDuration={3.0}
                    >
                    fangyunjiang is a good developer
                </MarqueeLabel>
            </View>
        );
    }
});

var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },

    marqueeLabel: {
        backgroundColor: 'blue',
        width:260,
        height:200,
        fontSize:30,
        fontWeight:'800',
        color:'white',
    }
});
```
### Screencasts

![loading](https://github.com/remobile/react-native-marquee-label/blob/master/screencasts/demo.gif)

### Props
- `text : PropTypes.string.isRequired`
- `scrollDuration : PropTypes.number` //seconds
- `marqueeType : PropTypes.string` //ios
- `fadeLength : PropTypes.number` //ios
- `leadingBuffer : PropTypes.number` //ios
- `trailingBuffer : PropTypes.number` //ios
- `isRepeat : PropTypes.bool` //android
- `startPoint : PropTypes.number` //android
- `direction : PropTypes.number` //android

### see detail use
* https://github.com/remobile/react-native-template
npm package: @remobile/react-native-qrcode
Description: A pure js show string as qrcode in react-native View.
Author: YunJiang.Fang
Latest version: 1.0.0

# React Native QRCode (remobile)
A pure js show string as qrcode in react-native View.

## Installation
```sh
npm install @remobile/react-native-qrcode --save
```

## Usage

### Example
```js
'use strict';
var React = require('react');
var ReactNative = require('react-native');

var {
    StyleSheet,
    View,
    Text,
} = ReactNative;

var QRCode = require('@remobile/react-native-qrcode');

module.exports = React.createClass({
    componentDidMount() {
        setTimeout(()=>{
            this.setState({a:"方运江 is a good developer"});
        }, 2000)
    },
    getInitialState() {
        return {
            text: '42550564@qq.com'
        };
    },
    render() {
        return (
            <View style={styles.container}>
                <QRCode
                    text={this.state.text}
                    width={156}
                    height={156}
                    />
                <Text>
                    {this.state.text}
                </Text>
            </View>
        );
    }
});

var styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },
});
```

## Screencasts

![demo](https://github.com/remobile/react-native-qrcode/blob/master/screencasts/demo.gif)

#### Props
- `text: PropTypes.string.isRequired`
- `width: PropTypes.number [default:256]`
- `height: PropTypes.number [default:256]`
- `typeNumber: PropTypes.number [default:4]`
- `colorDark: PropTypes.string [default:"#000000"]`
- `colorLight: PropTypes.string [default:"#ffffff"]`
- `correctLevel: PropTypes.number [default:QRCode.QRErrorCorrectLevel.H] see index.js for detail`

### thanks
* this project come from https://github.com/davidshimjs/qrcodejs