How to use react-native-modal - 9 common examples
To help you get started, we’ve selected a few react-native-modal examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
EdgeApp / edge-react-gui / src / modules / UI / components / PasswordReminderModal / components / Modal.ui.js View on Github 
export type ItemState = {}
Modal.Item = class Item extends Component {
render () {
return
}
}
// BODY /////////////////////////////////////////////////////////////////////////////
export type BodyProps = {
children: Node,
style?: Object
}
export type BodyState = {}
Modal.Body = class Body extends Component {
render () {
return
}
}
// FOOTER /////////////////////////////////////////////////////////////////////////////
export type FooterProps = {
children: Node,
style?: Object
}
export type FooterState = {}
Modal.Footer = class Footer extends Component {
render () {
return
}import { Text, View } from 'react-native'
import Modal from 'react-native-modal'
import styles from './modalStyles.js'
export { Modal }
export default Modal
// CONTAINER /////////////////////////////////////////////////////////////////////////////
export type ContainerProps = {
children: Node,
style?: Object
}
export type ContainerState = {}
Modal.Container = class Container extends Component {
render () {
return
}
}
// FEATURED_ICON /////////////////////////////////////////////////////////////////////////////
export type FeaturedIconProps = {
children: Node,
style?: Object
}
export type FeaturedIconState = {}
Modal.FeaturedIcon = class FeaturedIcon extends Component {
render () {
return (export type TitleState = {}
Modal.Title = class Title extends Component {
render () {
return
}
}
// DESCRIPTION /////////////////////////////////////////////////////////////////////////////
export type DescriptionProps = {
children: Node,
style?: Object
}
export type DescriptionState = {}
Modal.Description = class Description extends Component {
render () {
return
}
}
// ITEM /////////////////////////////////////////////////////////////////////////////
export type ItemProps = {
children: Node,
style?: Object
}
export type ItemState = {}
Modal.Item = class Item extends Component {
render () {
return
}export type ContainerState = {}
Modal.Container = class Container extends Component {
render () {
return
}
}
// FEATURED_ICON /////////////////////////////////////////////////////////////////////////////
export type FeaturedIconProps = {
children: Node,
style?: Object
}
export type FeaturedIconState = {}
Modal.FeaturedIcon = class FeaturedIcon extends Component {
render () {
return (
)
}
}
// HEADER /////////////////////////////////////////////////////////////////////////////
export type HeaderProps = {
children: Node,
style?: Object
}
export type HeaderState = {}export type BodyState = {}
Modal.Body = class Body extends Component {
render () {
return
}
}
// FOOTER /////////////////////////////////////////////////////////////////////////////
export type FooterProps = {
children: Node,
style?: Object
}
export type FooterState = {}
Modal.Footer = class Footer extends Component {
render () {
return
}
}return (
)
}
}
// HEADER /////////////////////////////////////////////////////////////////////////////
export type HeaderProps = {
children: Node,
style?: Object
}
export type HeaderState = {}
Modal.Header = class Header extends Component {
render () {
return
}
}
// TITLE /////////////////////////////////////////////////////////////////////////////
export type TitleProps = {
children: Node,
style?: Object
}
export type TitleState = {}
Modal.Title = class Title extends Component {
render () {
return
}export type DescriptionState = {}
Modal.Description = class Description extends Component {
render () {
return
}
}
// ITEM /////////////////////////////////////////////////////////////////////////////
export type ItemProps = {
children: Node,
style?: Object
}
export type ItemState = {}
Modal.Item = class Item extends Component {
render () {
return
}
}
// BODY /////////////////////////////////////////////////////////////////////////////
export type BodyProps = {
children: Node,
style?: Object
}
export type BodyState = {}
Modal.Body = class Body extends Component {
render () {
return
}export type HeaderState = {}
Modal.Header = class Header extends Component {
render () {
return
}
}
// TITLE /////////////////////////////////////////////////////////////////////////////
export type TitleProps = {
children: Node,
style?: Object
}
export type TitleState = {}
Modal.Title = class Title extends Component {
render () {
return
}
}
// DESCRIPTION /////////////////////////////////////////////////////////////////////////////
export type DescriptionProps = {
children: Node,
style?: Object
}
export type DescriptionState = {}
Modal.Description = class Description extends Component {
render () {
return
}Image,
Navigator,
} = React;
var UserActions = require('../Actions/UserActions');
var UserStore = require('../Stores/UserStore');
var Video = require('react-native-video');
var Modal = require('react-native-modal');
var LinearGradient = require('react-native-linear-gradient');
var UserActions = require('../Actions/UserActions');
var styles = require('./Styles');
var UserStoreSync = require('../Mixins/UserStoreSync');
var DeviceHeight = require('Dimensions').get('window').height;
var LoginScreen = React.createClass({
mixins: [UserStoreSync, Modal.Mixin],
login() {
UserActions.newFacebookSession();
},
afterUpdateUserFromStore() {
var user = UserStore.getState();
if (user.get('email')) {
this.props.navigator.replace({id: 'user-info'});
}
},
showModalTransition(transition) {
transition('opacity', {duration: 200, begin: 0, end: 1});
transition('height', {duration: 200, begin: DeviceHeight * 2, end: DeviceHeight});react-native-modal
An enhanced React Native modal
