Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-native-animated-modal
Advanced tools
Readme
A customizable react-native animated modal.
This component enhances the original react-native modal by adding animations and many possible customizations while still providing nice defaults:
onModalShow
and onModalHide
P.S.: The modal will resize itself correctly on device rotation.
This library is available on npm, install it with: npm install --save react-native-animated-modal
.
import React, { Component } from 'react'
import { Text, TouchableOpacity, View } from 'react-native'
import Modal from 'react-native-animated-modal'
export default class AnimatedModalTester extends Component {
state = {
isModalVisible: false
}
_showModal = () => this.setState({ isModalVisible: true })
_hideModal = () => this.setState({ isModalVisible: false })
render () {
return (
<View style={{ flex: 1 }}>
<TouchableOpacity onPress={this._showModal}>
<Text>Show Modal</Text>
</TouchableOpacity>
<Modal isVisible={this.state.isModalVisible}>
<View style={{ flex: 1 }}>
<Text>Hello!</Text>
</View>
</Modal>
</View>
)
}
}
For a more complex example take a look at the /example
directory.
Name | Type | Default | Description |
---|---|---|---|
animationIn | string | 'slideInUp' | Modal show animation |
animationInTiming | number | 300 | Timing for the modal show animation (in ms) |
animationOut | string | 'slideOutDown' | Modal hide animation |
animationOutTiming | number | 300 | Timing for the modal hide animation (in ms) |
backdropColor | string | 'black' | The backdrop background color |
backdropOpacity | number | 0.70 | The backdrop opacity when the modal is visible |
backdropTransitionInTiming | number | 300 | The backdrop show timing (in ms) |
backdropTransitionOutTiming | number | 300 | The backdrop hide timing (in ms) |
isVisible | bool | REQUIRED | Show the modal? |
children | node | REQUIRED | The modal content |
onModalShow | func | () => null | Called when the modal is completely visible |
onModalHide | func | () => null | Called when the modal is completely hidden |
style | any | null | Style applied to the modal |
Take a look at react-native-animatable for available animations.
Pull requests and suggestions are welcome!
P.S.: Thanks @oblador for react-native-animatable!
FAQs
A simple React-Native animated modal
The npm package react-native-animated-modal receives a total of 7 weekly downloads. As such, react-native-animated-modal popularity was classified as not popular.
We found that react-native-animated-modal demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.