Skip to content

jacklam718/react-native-modal-component

Repository files navigation

React Native Modal Component

React Native Modal Component for iOS & Android.

Pull request are welcomed. Please follow the Airbnb style guide Airbnb JavaScript

Try it with Exponent

Installation

yarn

yarn add react-native-modal-component

npm

npm install --save react-native-modal-component

peerDependencies

  • react-native-deprecated-custom-components >= ^0.1.1

Usage with ModalComponent

import { View, Text, TouchableOpacity } from 'react-native'; import ModalComponent from 'react-native-modal-component';
Modal content
const content = ( <View style={{ flex: 1, justifyContent: 'center', padding: 20, backgroundColor: 'rgba(0, 0, 0, 0.2)' }}> <View style={{ padding: 30, backgroundColor: '#fff', height: undefined, width: undefined }}> <Text style={{ color: '#000' }}> React Native Modal Component{'\n'} </Text> </View> </View> );
<ModalComponent ref={(modal) => { this.modal = modal; }} content={content} dismissOnHardwareBackPress showCloseButton={false} leftItem={{ title: 'CLOSE', layout: 'title', onPress: () => { this.modal.dismiss(() => { console.log('callback'); }); }, }} > <View style={{ flex: 1, backgroundColor: 'white' }}> <TouchableOpacity onPress={() => { this.modal.show(); }} > <Text>Show Modal</Text> </TouchableOpacity> </View> </ModalComponent>

About

React Native Modal for IOS and Android

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published