![Namecheap Takes Down Polyfill.io Service Following Supply Chain Attack](https://cdn.sanity.io/images/cgdhsj6q/production/6af25114feaaac7179b18127c83327568ff592d1-1024x1024.webp?w=800&fit=max&auto=format)
Security News
Namecheap Takes Down Polyfill.io Service Following Supply Chain Attack
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
react-native-js-only-modal
Advanced tools
Readme
If you are new to react-native
you will find that react-native
already has a Modal component that you could already use.
Now the diffrient between the this and what react-native
already have is that, first this is only js
library, it dose not use any native code
and also dose not reuse react-native
Modal component like other libraries.
Which make it much faster at rendering and easier to customize.
Smooth enter/exit animations Plain simple and flexible APIs Customizable backdrop styling Listeners for the modal animations ending Resize itself correctly on device rotation
The library available at npm install react-native-js-only-modal
Since react-native-js-only-modal
dose not include any native code and use only js
when need it to be able to reach the root of the app.
In APP
components add the Provider
around the whole component
import { Provider } from './ModalProvider';
const App =()=> {
return (
<Provider>
...Your components here
</Provider>
)
}
`import { Modal } from './ModalProvider';`
function WrapperComponent() {
// show the Modal by setting `visible` = true
const [visible, setVisible] = React.useState(false);
return (
<View>
<Modal visible={visible} style={[styles.container, styles.center]}>
<View style={{ flex: 1 }}>
<Text>I am the modal content!</Text>
</View>
</Modal>
</View>
);
}
const styles = StyleSheet.create({
center: {
width: '90%',
maxHeight: 200,
backgroundColor: 'white',
flex: undefined,
borderWidth: 1,
borderRadius: 5,
borderColor: 'red',
justifyContent: 'center',
backgroundColor: 'white',
padding: 8,
},
});
The isVisible prop is the only prop you'll really need to make the modal work: you should control this prop value by saving it in your wrapper component state and setting it to true or false when needed.
Modal
already has transparent
background so by setting style you can customize it however you like.
Name | Type | Default | Description |
---|---|---|---|
visible | boolean | REQUIRED | Show the modal? |
onCloseRequest | Function | undefined | Triggered when the backdrop gets clicked/swaped |
hideBackDrop | boolean | false | Do not show backdrop |
backDropStyle | StyleProp<ViewStyle> | undefined | override the default style, eg opacity , backgroundColor |
style | StyleProp<ViewStyle> | undefined | Modal Content Style |
containerStyle | StyleProp<ViewStyle> | undefined | The Modal wrapper style, You can specify the position of the content by for example add justifyContent: "flex-start" to make the Modal apear at the top |
easing | string | "ease" | Timing function for the animation. Valid values: custom function or linear, ease, ease-in, ease-out, ease-in-out, ease-in-cubic, ease-out-cubic, ease-in-out-cubic, ease-in-circ, ease-out-circ, ease-in-out-circ, ease-in-expo, ease-out-expo, ease-in-out-expo, ease-in-quad, ease-out-quad, ease-in-out-quad, ease-in-quart, ease-out-quart, ease-in-out-quart, ease-in-quint, ease-out-quint, ease-in-out-quint, ease-in-sine, ease-out-sine, ease-in-out-sine, ease-in-back, ease-out-back, ease-in-out-back. See react-native-animatable for more info |
animationIn | string | "slideInDown" | Specify the animation when the Modal appear eg visible= true see react-native-animatable for other animations |
animationOut | string | "slideOutUp" | Specify the animation when the Modal disappear eg visible= false see react-native-animatable for other animations |
direction | string | "normal" | Direction of animation, especially useful for repeating animations. Valid values: normal, reverse, alternate, alternate-reverse. |
duration | number | 100 | For how long the animation will run (milliseconds). |
onAnimationBegin | Function | undefined | A function that is called when the animation has been started. |
onAnimationEnd | Function | undefined | A function that is called when the animation has been completed successfully or cancelled. Function is called with an endState argument, refer to endState.finished to see if the animation completed or not. |
useNativeDriver | boolean | false | Whether to use native or JavaScript animation driver. Native driver can help with performance but cannot handle all types of styling. |
dimensions | string | "screen" | The library gets the Dimensions by screen or window . This is useFull when using FullScreen mode so that the backdrop takes all the screen. When using react-native-web is best to use window instead of screen |
disableBackHandler | boolean | false | When clicking mobile back button onCloseRequest will be called if specified |
I am using react-native-animatable for animations, so you can see there what animation it offers.
Modal
dose not containe ScrollView
so you have to add it if you want to use any.
FAQs
An enhanced, animated, customizable Modal for React Native. This is a javascript only Modal
The npm package react-native-js-only-modal receives a total of 2 weekly downloads. As such, react-native-js-only-modal popularity was classified as not popular.
We found that react-native-js-only-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
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.
Security News
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.