https://github.com/codersera-repo/expo-modal
Shows the modal full screen on the react-native window
https://github.com/codersera-repo/expo-modal
expo expo-modal react-native
Last synced: 5 months ago
JSON representation
Shows the modal full screen on the react-native window
- Host: GitHub
- URL: https://github.com/codersera-repo/expo-modal
- Owner: codersera-repo
- Created: 2019-06-28T07:46:24.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2020-03-22T13:14:33.000Z (over 6 years ago)
- Last Synced: 2025-08-09T05:53:48.258Z (11 months ago)
- Topics: expo, expo-modal, react-native
- Language: JavaScript
- Size: 11.7 KB
- Stars: 2
- Watchers: 0
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Installation
`npm install expo-modal --save`
**Background**
In browser css, we have display style attribute and it has the following possible values
- static
- relative
- absolute
- fixed
But in react-native `fixed` is missing which essentially means that you can't have an element with the display:fixed styling.
You can have `absolute` but as you know `absolute` puts the element relative to the parent and not to the window.
Now, what if you have a use case. Like if you have a modal, which covers the full screen.
This is not possible with react-native.
To solve that problem, you can add a element at the top of the tree, and tweak its visibility through react.
This library does the exact same thing.
One more thing to note here is that, in android, the zIndex behaves differently and it is important to have the element render at the last if you want it to come on the top of the UI.
**Usage**
In your entry app.js file add Modal component.
```
/*App.js*/
import (wrapIntoModal} from 'expo-modal';
export default class App extends React.Component {
render() {
return
wrapIntoModal(
{/*other components*/}
)
}
}
```
Now in the component, where you want to display the modal, simply call showModal(yourComponent). `yourComponent` will be shown in the center of your modal.
You can always tweak the styling by passing containerStyle props.
**Full example**
```import React from 'react';
import {Video} from 'expo';
import {Dimensions, StyleSheet, Text, TouchableHighlight, TouchableOpacity, View} from 'react-native';
import {dismissModal, Modal, showModal, wrapIntoModal} from 'expo-modal';
const {height, width} = Dimensions.get('window');
export default class App extends React.Component {
render() {
// innerComponent is the one that'll be displayed within the modal, you have full control of its styling.
const innerComponent =
Hello world
dismissModal()} >close modal
;
const appContainer =
{showModal(innerComponent)}}
>
Touch Here
;
return wrapIntoModal(appContainer, {{backgroundColor: 'blue'}})
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
videoPlayer: {
position: 'relative',
width: '100%',
aspectRatio:3/2,
},
});
```