Skip to content

Instantly share code, notes, and snippets.

@maxgfr
Created July 17, 2020 19:27
Show Gist options
  • Save maxgfr/a7b855c0a11cb05a46bec92411208d34 to your computer and use it in GitHub Desktop.
Save maxgfr/a7b855c0a11cb05a46bec92411208d34 to your computer and use it in GitHub Desktop.
Make our own convenient OverlayContainer. The trick is to use absolute with 100% size (cf : https://github.com/onmyway133/blog/issues/254)
// @flow
import React from 'react'
import { View, StyleSheet } from 'react-native'
type Props = {
behind: React.Component,
front: React.Component,
under: React.Component
}
// Show something on top of other
export default class OverlayContainer extends React.Component<Props> {
render() {
const { behind, front, under } = this.props
return (
<View style={styles.container}>
<View style={styles.center}>
<View style={styles.behind}>
{behind}
</View>
{front}
</View>
{under}
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
height: 100,
justifyContent: 'center',
},
center: {
width: '100%',
height: '100%',
alignItems: 'center',
justifyContent: 'center',
},
behind: {
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
left: 0,
top: 0,
width: '100%',
height: '100%'
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment