0.2.1 • Published 7 years ago
react-native-zoombox v0.2.1
react-native-zoombox
A zoomable Box for React Native
Installation
npm install --save react-native-zoomboxUsage
import ZoomBox from 'react-native-zoombox';
class ZoomBoxExample extends React.Component {
render() {
return (
<ZoomBox>
<Image
style = {{ flex: 1 }}
source = {{ uri: 'http://www.placehold.it/800x600' }} />
</ZoomBox>
);
}
}Properties
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | #000 | Background color of modal |
backgroundOpacity | float | 1 | Opacity of modal background |
underlayColor | string | #fff | Underlay color of touchable |
hideStatusBar | boolean | true | Fullscreen modal with hidden status bar (There is a Bug on Android with Modals, where a hidden StatusBar is not working correctly, see: RN Issue #7474) |
swipeToClose | boolean | false | Close modal on vertical or horizontal swipe (WIP works, but opacity does not change in both dimension) |
customHeader | function(closeAction) | NULL | Function, that returns markup for a custom header with invokes the closeAction |
customContent | function | children | Use different content in modal |
customAnimation | function(startValue, endValue) | NULL | Function, that returns custom animation for opening/closing the modal. Default: Animated.spring(startValue, {toValue: endValue, tension: 30, friction: 7}) |
inModalProps | object | null | Set different properties to content when in modal |
Example
For more examples check the demo folder
Custom header function
This is an example for a custom header:
_customHeader(closeModal) {
return (
<TouchableHighlight onPress = {closeModal}>
<Text style = {styles.closeButton}>Close</Text>
</TouchableHighlight>
)
}Custom animation function
This is an example for a custom animation:
_customAnimation(startValue, endValue) {
return (
Animated.timing(
startValue,
{toValue: endValue, duration: 1000}
)
)
}