react-native-lightbox
A stateful <LightBox/> component for React Native, mainly featuring the ability to render arbitrary content once expanded.
🚀 Getting Started
Via npm:
npm install --save @cawfree/react-native-lightbox
Or using yarn:
yarn add @cawfree/react-native-lightbox
✏️ Example
import React from 'react';
import {
View,
TouchableOpacity,
Text,
} from 'react-native';
import LightBox from '@cawfree/react-native-lightbox';
const {
width,
height,
} = Dimensions.get('window');
// XXX: Note that instead of using `renderOpen` to dynamically render children,
// you can not specify this function and have it render the default children.
export default class Example extends React.Component {
state = {
open: false,
}
render() {
const {
open,
} = this.state;
return (
<View
style={{
flex: 1,
backgroundColor: 'blue',
}}
>
<TouchableOpacity
style={{
width: 50,
height: 50,
backgroundColor: 'red',
}}
onPress={() => this.setState({
open: true,
})}
>
<LightBox
open={open}
renderBackdrop={() => (
<View
style={{
flex: 1,
backgroundColor: '#000000AA',
}}
/>
)}
onRequestClose={() => this.setState({
open: false,
})}
>
<View
style={{
width: 50,
height: 50,
backgroundColor: 'yellow',
}}
>
</View>
</LightBox>
</TouchableOpacity>
</View>
);
}
}