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-jsmodal
Advanced tools
Readme
A lot of backward incompatible changes in v0.22.0
. Please, Read the Docs before upgrading to v0.22.0
npm install --save react-native-jsmodal
# OR
yarn add react-native-jsmodal
The Component can not be used until ModalPortal
is mounted.
You should register in your app root. For example:
import { ModalPortal } from 'react-native-jsmodal';
import { Provider } from 'react-redux';
const Root = () => {
return (
<Provider store={store}>
<App />
<ModalPortal />
</Provider>
);
}
import { Modal, ModalContent } from 'react-native-jsmodal';
import { Button } from 'react-native'
<View style={styles.container}>
<Button
title="Show Modal"
onPress={() => {
this.setState({ visible: true });
}}
/>
<Modal
visible={this.state.visible}
onTouchOutside={() => {
this.setState({ visible: false });
}}
>
<ModalContent>
{...}
</ModalContent>
</Modal>
</View>
show
import { ModalPortal } from 'react-native-jsmodal';
const id = ModalPortal.show((
<View>
{...}
</View>
));
update
ModalPortal.update(id, {
children: (
<View>
<Text>Updated</Text>
</View>
),
});
dismiss
ModalPortal.dismiss(id);
dismissAll
ModalPortal.dismissAll(id);
import { Modal, SlideAnimation, ModalContent } from 'react-native-jsmodal';
<View style={styles.container}>
<Modal
visible={this.state.visible}
modalAnimation={new SlideAnimation({
slideFrom: 'bottom',
})}
>
<ModalContent>
{...}
</ModalContent>
</Modal>
</View>
import { Modal, ModalContent } from 'react-native-jsmodal';
import { Button } from 'react-native'
<View style={styles.container}>
<Modal
visible={this.state.visible}
swipeDirection={['up', 'down']} // can be string or an array
swipeThreshold={200} // default 100
onSwipeOut={(event) => {
this.setState({ visible: false });
}}
>
<ModalContent>
{...}
</ModalContent>
</Modal>
</View>
import { Modal, ModalTitle, ModalContent } from 'react-native-jsmodal';
<View style={styles.container}>
<Modal
visible={this.state.visible}
modalTitle={<ModalTitle title="Modal Title" />}
>
<ModalContent>
{...}
</ModalContent>
</Modal>
</View>
import { Modal, ModalFooter, ModalButton, ModalContent } from 'react-native-jsmodal';
<View style={styles.container}>
<Modal
visible={this.state.visible}
footer={
<ModalFooter>
<ModalButton
text="CANCEL"
onPress={() => {}}
/>
<ModalButton
text="OK"
onPress={() => {}}
/>
</ModalFooter>
}
>
<ModalContent>
{...}
</ModalContent>
</Modal>
</View>
Prop | Type | Default | Note |
---|---|---|---|
visible | boolean | false | |
rounded | boolean | true | |
useNativeDriver | boolean | true | |
children | any | ||
modalTitle? | React Element | You can pass a modalTitle component or pass a View for customizing titlebar | |
width? | Number | Your device width | The Width of modal, you can use fixed width or use percentage. For example 0.5 it means 50% |
height? | Number | 300 | The Height of modal, you can use fixed height or use percentage. For example 0.5 it means 50% |
modalAnimation? | FadeAnimation | animation for modal | |
modalStyle? | any | ||
containerStyle? | any | null | For example: { zIndex: 10, elevation: 10 } |
animationDuration? | Number | 200 | |
overlayPointerEvents? | String | Available option: auto , none | |
overlayBackgroundColor? | String | #000 | |
overlayOpacity? | Number | 0.5 | |
hasOverlay? | Boolean | true | |
onShow? | Function | You can pass shown function as a callback function, will call the function when modal shown | |
onDismiss? | Function | You can pass onDismiss function as a callback function, will call the function when modal dismissed | |
onTouchOutside? | Function | () => {} | |
onHardwareBackPress? | Function | () => true | Handle hardware button presses |
onMove? | Function | () => {} | |
onSwiping? | Function | () => {} | |
onSwipeRelease? | Function | () => {} | |
onSwipingOut? | Function | () => {} | |
onSwipeOut? | Function | ||
swipeDirection? | string or Array<string> | [] | Available option: up , down , left , right |
swipeThreshold? | number | 100 | |
footer? | React Element | null | for example: <View><Button text="DISMISS" align="center" onPress={() => {}}/></View> |
Prop | Type | Default | Note |
---|---|---|---|
title | String | ||
style? | any | null | |
textStyle? | any | null | |
align? | String | center | Available option: left , center , right |
hasTitleBar? | Bool | true |
Prop | Type | Default | Note |
---|---|---|---|
children | any | ||
style? | any | null |
Prop | Type | Default | Note |
---|---|---|---|
children | ModalButton | ||
bordered? | Boolean | true | |
style? | any | null |
Prop | Type | Default | Note |
---|---|---|---|
text | String | ||
onPress | Function | ||
align? | String | center | Available option: left , center , right |
style? | any | null | |
textStyle? | any | null | |
activeOpacity? | Number | 0.6 | |
disabled? | Boolean | false | |
bordered? | Boolean | false |
Prop | Type | Default | Note |
---|---|---|---|
visible | Boolean | ||
opacity | Number | 0.5 | |
onPress? | Function | ||
backgroundColor? | string | #000 | |
animationDuration? | Number | 200 | |
pointerEvents? | String | null | Available option: auto , none |
useNativeDriver? | Boolean | true |
new FadeAnimation({
initialValue: 0, // optional
animationDuration: 150, // optional
useNativeDriver: true, // optional
})
Param | Type | Default | Note |
---|---|---|---|
initialValue | Number | 0 | |
animationDuration? | Number | 150 | |
useNativeDriver? | Boolean | true |
new ScaleAnimation({
initialValue: 0, // optional
useNativeDriver: true, // optional
})
Param | Type | Default | Note |
---|---|---|---|
initialValue | Number | 0 | |
useNativeDriver | Boolean | true |
new SlideAnimation({
initialValue: 0, // optional
slideFrom: 'bottom', // optional
useNativeDriver: true, // optional
})
Param | Type | Default | Note |
---|---|---|---|
initialValue | Number | 0 | |
slideFrom | String | bottom | Available option: top , bottom , left , right |
useNativeDriver | Boolean | true |
import { Animated } from 'react-native';
import { Animation } from 'react-native-jsmodal';
class CustomAnimation extends Animation {
in(onFinished) {
Animated.spring(this.animate, {
toValue: 1,
useNativeDriver: this.useNativeDriver,
}).start(onFinished);
}
out(onFinished) {
Animated.spring(this.animate, {
toValue: 0,
useNativeDriver: this.useNativeDriver,
}).start(onFinished);
}
getAnimations() {
return {
transform: [{
translateY: this.animate.interpolate({
inputRange: [0, 1],
outputRange: [800, 1],
}),
}],
};
}
}
yarn
yarn run build
yarn test
FAQs
React Native Modals Library for IOS & Android.
The npm package react-native-jsmodal receives a total of 21 weekly downloads. As such, react-native-jsmodal popularity was classified as not popular.
We found that react-native-jsmodal 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.