Overlay component for React Native, same as Modal component. contains: Overlay(fixed View), Toast(message), Picker(select), DateTime, Dialog.
Contact me: me@caoyongfeng.com
Why create this package ?
- Modal component is not applicable in some scenarios.
- Why some UI components need to reference native modules ? e.g. Toast、Picker ......
- Why are the development and experience of Android and iOS inconsistent ? e.g. Picker、DateTime ......
- I want to make some things easier and consistent.
Demo:
Toast(done)- Dialog
Picker(done)DateTime(done)
npm install rn-overlay --save
import the rn-overlay package in the lauche file （PROJECT/index.js）
// import rn-overlay in the first line, this will save some trouble.
import 'rn-overlay';
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);import React from 'react';
// the Overlay is rn-overlay
import { View, Button, Overlay } from 'react-native';
class App extends React.Component {
constructor(props) {
super(props);
}
onOverlayShow() {
console.log('Overlay shown');
}
onOverlayClose() {
console.log('Overlay closed');
}
render() {
return <View style={{paddingTop: 200}}>
<Button title="Show a Overlay" onPress={() => this.overlay.show()}/>
<Overlay
// ref for the overlay
ref={ele => this.overlay = ele}
// callback function when the Overlay shown
onShow={this.onOverlayShow}
// callback function when the Overlay closed
onClose={this.onOverlayClose}
// style of the Overlay, same as View component
style={{justifyContent:"center"}}>
<View style={{paddingVertical:80, backgroundColor:"white"}}>
<Button title="Close the Overlay" onPress={() => this.overlay.close()}/>
</View>
</Overlay>
</View>;
}
}
export default App;Why not use prop visible to control the display status of Overlay ?
Overlay does not belong to any Screen. if allowed to do that, it will easily cause confusion.
You can also use it in js code:
import React from 'react';
// the [ Overlay ] is rn-overlay
import { View, Button, Overlay } from 'react-native';
class App extends React.Component {
constructor(props) {
super(props);
}
onOverlayShowClick = () => {
// Overlay.show() will create a instance of Overlay and show it.
// if a Modal component is showing, the Overlay will cover the Modal component.
let overlay = Overlay.show({
// style of the Overlay
style: {
justifyContent: 'center'
},
// content of the Overlay
children: <View style={{paddingVertical:80, backgroundColor:"white"}}>
<Button title="Close the Overlay" onPress={() => { overlay.close(); }}/>
</View>,
// callback function when the Overlay shown
onShow: () => {
console.log('Overlay shown');
},
// callback function when the Overlay closed
onClose: function() {
console.log('Overlay closed');
setTimeout(() => {
// the [ this ] is the instance of Overlay. this === overlay variable
this.show(); // show it again
}, 3000);
}
});
}
render() {
return <View style={{paddingTop: 200}}>
<Button title="Show a Overlay" onPress={this.onOverlayShowClick}/>
</View>;
}
}
export default App;if content of the Overlay contains dynamic data, then should pass a function to the children param.
import React from 'react';
import { View, Button, Text, Overlay } from 'react-native';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
n: 0
};
}
onOverlayShowClick = () => {
let overlay = Overlay.show({
style: {
justifyContent: 'center'
},
// pass a function to the children param
children: () => <View style={{paddingVertical:80, backgroundColor:"white"}}>
<Text style={{textAlign:"center"}}>{this.state.n}</Text>
<Button title="Click Me" onPress={() => {
this.setState({ n: this.state.n + 1 });
// use apply() to display the latest data
overlay.apply();
}}/>
<Button title="Close the Overlay" onPress={() => { overlay.close(); }}/>
</View>,
onShow: () => {
console.log('Overlay shown');
},
onClose: function() {
console.log('Overlay closed');
}
});
}
render() {
return <View style={{paddingTop: 200}}>
<Button title="Show a Overlay" onPress={this.onOverlayShowClick}/>
</View>;
}
}
export default App;if the Overlay is shown in multiple Screens, the above code will not work properly. you can use scopeState to solve it.
Overlay.show({
style: {
justifyContent: 'center'
},
// scopeState: the state of the instance of Overlay
scopeState: {
n: 0
},
children: function(){
return <View style={{paddingVertical:80, backgroundColor:"white"}}>
{/* this is using state of the instance of Overlay */}
{/* [ this ] === current instance of Overlay */}
<Text style={{textAlign:"center"}}>{this.scopeState.n}</Text>
<Button title="Click Me" onPress={() => {
// the usage of setScopeState() is similar to setState()
this.setScopeState({ n: this.scopeState.n + 1 });
}}/>
<Button title="Close the Overlay" onPress={() => { this.close(); }}/>
</View>;
},
onShow: () => {
console.log('Overlay shown');
},
onClose: function() {
console.log('Overlay closed');
}
});
Object. The style of overlay. same as View Component .
Boolean. Default display status of the Overlay. default value: false.
Function. The onShow prop allows passing a function that will be called once the Overlay has been shown.
Function. The onClose prop allows passing a function that will be called once the Overlay has been closed.
Boolean. if true, allow press Back Nav at bottom of Android. default value: false.
Object. state of the instance of the Overlay.
create a instance of Overlay and show it.
params
options [ object ]
style: Object. The style of overlay. same as View Component .
scopeState: Object. state of the instance of the Overlay.
children: Element or Function. content of the Overlay.
onShow: Function. The onShow prop allows passing a function that will be called once the Overlay has been shown.
onClose: Function. The onClose prop allows passing a function that will be called once the Overlay has been closed.
enableBackPress: Boolean. if true, allow press Back Nav at bottom of Android. default value: false.
show the Overlay.
close the Overlay.
use apply() to display the latest data. same as forceUpdate().
change scopeState. is similar to setState()