https://github.com/pallyoung/react-native-modalui

react-native-modalui
https://github.com/pallyoung/react-native-modalui

Last synced: 14 days ago
JSON representation

react-native-modalui

• Host: GitHub
• URL: https://github.com/pallyoung/react-native-modalui
• Owner: pallyoung
• License: mit
• Created: 2017-11-09T07:28:29.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-04-25T06:23:11.000Z (over 6 years ago)
• Last Synced: 2024-12-06T11:18:38.851Z (about 1 month ago)
• Language: JavaScript
• Size: 237 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-modalui · [![npm version](https://badge.fury.io/js/react-native-modalui.svg)](https://badge.fury.io/js/react-native-modalui) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

react-native-modalui provide you react-native modal with more animation type.

* Features(#features)

* Preview(#preview)

* Usage(#usage)

* API Reference(#api-reference)

* Example(#example)

## Features

react-native build-in modal provide only few animation type,and once you can only use one modal,but in some condition, we need more then one modal.the react-native-modalui can support this condition,and provide you more animation type.

## Preview

![preview](asset/preview.gif)

## Usage

```

import React, { Component } from 'react';

import {

  StyleSheet,

  Text,

  View,

  TouchableOpacity

} from 'react-native';

import Modal from 'react-native-modalui';

export default class App extends Component<{}> {

  constructor(...props){

    super(...props);

    this.state = {

      isVisible:false,

      animationType:'none'

    }

  }

  _showModal=(animationType)=>{

    this.setState({isVisible:true,animationType})

  }

  _hideModal=()=>{

    this.setState({isVisible:false})

  }

  render() {

    return (

      

        this._showModal('slideLeft')}>

          FROM LEFT

        

        

        

          HIDE

        

        

      

    );

  }

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

  },

  button:{

    height:60,

    width:120,

    justifyContent: 'center',

    alignItems: 'center',

    backgroundColor:'#667823'

  },

  text:{

    color:'#333333'

  }

});

```

## API Reference

### props

| Name | Type| Default | Description |

| --- | --- | --- | --- |

| animationType | string | 'slideUp' |  animation type |

| easing | object | Easing.ease | animation timing function |

| duration | number | 200 |  animation duration |

| onBackButtonPress | func | () => null | Called when the Android back button is pressed |

| onBackdropPress | func | () => null | Called when the backdrop is pressed |

| isVisible | bool | **REQUIRED** | Show the modal? |

| onModalShow | func | () => null | Called when the modal is completely visible |

| onModalHide | func | () => null | Called when the modal is completely hidden |

| style | any | null | Style applied to the modal |

## Example

```

cd example && npm install

```

now,you can run the example in the example directory.