How to add Lottie animation in Alert in react native - javascript

on sumit buttoe event i am calling below fuction ,where i am opening one Alert and insid ethe alert I want opne LottieAnimation , like when I click on button first Alet will open with animation till the time response is coming , after getting the response I'll chnage animation ans close the Alert , normal alert is comign but with Animation nothin is coming . Please help. I have atteched image .
blockSimNumber = async () => {
{this.props.isWalletEnable &&
Alert.alert(
'
<View style={{ height: deviceHeight, width: deviceWidth }}>
<LottieView source={require('../animations/wallet.json')} autoPlay loop />
</View>
<View style={{ height: deviceHeight, width: deviceWidth }}>
<LottieView source={require('../animations/success_tick.json')} autoPlay loop />
</View>
Hang on !',
'We are creating your wallet for you',
[
{
text: 'Close',
onPress: () => console.log('Cancel Pressed'),
style: 'Cancel',
},
]
)
}
// <View style={{ height: deviceHeight, width: deviceWidth }}>
// <LottieView source={require('../animations/wallet.json')} autoPlay loop />
// </View>
await this.props.updatePhysicalResource(this.props.physicalResourceId);
}

Just use a modal instead of an Alert
Here's how to use a modal:
import { View, Modal } from 'react-native';
import LottieView from 'lottie-react-native'
[...]
constructor(props) {
super(props)
this.state = {
IsModalVisible: false
}
}
render(){
return(
<Modal
animationType="fade"
style={{flex: 1}}
transparent={true}
visible={this.state.IsModalVisible}
onRequestClose={() => this.setState({IsModalVisible: false})}
>
<View style={{backgroundColor: 'white', justifyContent: 'center', alignItems: 'center', height: '40%', width: '90%'}}>
<LottieView style={{height: '50%', width: '50%'}} source={require('../animations/success_tick.json')} autoPlay loop />
</View>
</Modal>
)
}
Then just change the IsModalVisible value to true when you want to (This is just a example)

Related

Lottie file animation play when selected (Expo)

I want it to play only when the card is selected, if the card is not selected it simply displays the lottie file but nothing is being played. Right now I get an error of cannot read property 'play' of null. When I remove the animationPress() and get the file to run it also start at the mentioned initialSegment that I'm passing into it.
What am I doing wrong here?
My card that the Lottie file is in:
const animation = useRef(null);
const animationPress = () => {
animation.current.play();
}
return(
{filteredData.map((item, index) => {
return (
<>
<TouchableOpacity onPress={() => setSelected(item), animationPress()}>
<View style={[{ alignItems: 'center' }, selected.id == item.id ? { paddingTop: 10 } : { paddingTop: 20 }]}>
<CardioCard style={selected.id == item.id ? { backgroundColor: 'green', fontFamily: 'ssb_SemiBold' } : {}} >
<CardItem style={[styles.card, selected.id == item.id ? { backgroundColor: 'green' } : {}]}>
<Text>
< LottieView
ref={animation}
source={require('../../assets/images/heartbeat.json')}
initialSegment={68,135}
autoPlay={true}
loop={true}
style={{ width: 100, height: 100 }} />
</Text>
</CardItem>
</CardioCard>
<Text style={[{ fontSize: 18, color: 'hsl(98, 0%, 11%)', paddingLeft: 15 }, selected.id == item.id ? { fontFamily: 'ssb_SemiBold' } : {}]}>{item.name}</Text>
</View>
</TouchableOpacity>
</>
)
})}
...
)
Edit
I also tried to do useState for the autoplay and loop button so they would be false but when the button is pressed it would turn true but the animation wouldn't load even after the button press.
const [playAnimation, setPlayAnimation] = useState(false);
<TouchableOpacity onPress={() => setPlayAnimation(true)}>
<LottieView
source={require('../../assets/images/heartbeat.json')}
autoPlay={playAnimation}
loop={playAnimation}
style={{ width: 100, height: 100 }}
/>
</TouchableOpacity>
this is driving me nuts and idk what to do anymore.
I'm new to react-native but I guess it's like react. Not sure to correctly understand the issue.
In this case, shouldn't you use animation.current instead of animation as your lottieView ref? or at least ensure that your ref animation is defined (not null) so that the container can be mounted even if not launched, this is also for your animationPress function. Also you should disable the autoPlay I guess (since you want to trigger the animation with a button).
< LottieView
ref={animation.current}
source={require('../../assets/images/heartbeat.json')}
initialSegment={68,135}
autoPlay={false}
loop={true}
style={{ width: 100, height: 100 }} />
or
{animation && < LottieView
ref={animation}
source={require('../../assets/images/heartbeat.json')}
initialSegment={68,135}
autoPlay={false}
loop={true}
style={{ width: 100, height: 100 }} />}
And of course
const animationPress = () => {
if(animation?.current) {
animation.current.play();
}
}

How to call Alert onPress and pass some parameters in React Native

Here I am calling on alert function onPress on text field .
On calling that function I am trying to open alert and on confirm I am calling another function.
But it gets hang if I am calling "showAlert1()" . This function is getting called many times
I have to call showAlert() function onPress and I have to send some value in it . And on confirmation OK button on Alert box I have to upload to server.
showAlert1(code, name, version) {
console.log("data alaert abc", code, name, version);
Alert.alert(
'Confirmation',
'Are you sure you want to migrate this tariff',
[
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
style: 'Cancel',
},
{ text: 'Proceed', onPress: () => this.confirmTariffMigration(code, name, version) },
]
);
}
confirmTariffMigration = (code, name, version) => {
console.log("hhhhdhhdhdhdhhdd", code, name, version);
const objData = {
addofferingActionCode: '',
offeringCode: '',
offeringName: ''
}
this.props.updateTariffMigration(objData)
}
<View style={{ marginLeft: 5, marginRight: 5, marginTop: 10, backgroundColor: '#f1f1f1' }}>
{
tariffMigrationData.map((data, index) => {
return (
// <TouchableOpacity key={index} onPress={this.showAlert1(data)}>
<View style={{ marginBottom: 10, marginLeft: 5, marginRight: 5 }} key={index}>
<Card>
<CardItem header style={{ backgroundColor: '#fff', width: '100%', justifyContent: 'space-between', borderBottomColor: '#f1f1f1', borderBottomWidth: 1 }}>
<View style={{ flexDirection: 'column', justifyContent: 'space-between' }}>
<View>
<RegularText text={`${data.offering.name}`} style={{ fontWeight: 'bold' }} />
<SmallText text={` ID ${data.offering.code}`} textColor="grey" />
</View>
</View>
<View style={{
backgroundColor: 'blue',
borderRadius: 75, height: 25, paddingRight: 10, paddingLeft: 10, paddingTop: 5
}}>
<SmallText text={'Proceed'} onPress={this.showAlert1(data.offering.code, data.offering.version, data.offering.name)} textColor='white' />
</View>
</CardItem>
</Card>
</View>
)
}
}
</View>
Try to change :
<TouchableOpacity key={index} onPress={this.showAlert1(data)}>
to
<TouchableOpacity key={index} onPress={() => this.showAlert1(data)}>
And
showAlert1 (code,name,version) {
// code
}
To
showAlert1 = (code,name,version) => {
// code
}
Make Sure you have Imported "Alert" from 'react-native', not some other module.
https://i.stack.imgur.com/oMj8s.png
First of all, try changing this:
<SmallText text={'Proceed'} onPress={this.showAlert1(data.offering.code,data.offering.version,data.offering.name)} textColor='white' />
to:
<SmallText text={'Proceed'} onPress={() => this.showAlert1(data.offering.code,data.offering.version,data.offering.name)} textColor='white' />
Also try to change
showAlert1 (code,name,version) {
#code
}
to
showAlert1 = (code,name,version) => {
// code
}
as the Kishan Bharda answer addition. when we met the problem, we should know why not just correct.
as for how to pass the function to the component props, you can read the official blog, and get more details
when we want to pass params to props, here are two ways:
<TouchableOpacity key={index} onPress={() => this.showAlert1(data)}>
<TouchableOpacity key={index} onPress={this.showAlert1.bind(this,data)}>
when your do like your question
<TouchableOpacity key={index} onPress={this.showAlert1(data)}>
it is not pass the funtion, it is called not a reference.

Why always open Modal by default while opening a Screen in React-Native?

In my React-Native project, I want to use Modal inside render. I have declared one state variable like below-
this.state = {
ModalVisibleStatus: false
};
For showing the Modal I have declared a function-
ShowModalFunction(visible) {
this.setState({ModalVisibleStatus: visible});
}
And inside the render function I have just write show a Modal like below on a Button Press-
<Modal
transparent={false}
animationType={"slide"}
visible={this.state.ModalVisibleStatus}
onRequestClose={ () => { this.ShowModalFunction(!this.state.ModalVisibleStatus)} } >
<View style={{ flex:1, justifyContent: 'center', alignItems: 'center' }}>
<View style={styles.ModalInsideView}>
{/* Put All Your Components Here, Which You Want To Show Inside The Modal. */}
<Text style={styles.TextStyle}>Text Component With Some Sample Text In Modal. </Text>
<Button title="Click Here To Hide Modal" onPress={() => { this.ShowModalFunction(!this.state.ModalVisibleStatus)} } />
{/* Put All Your Components Here, Which You Want To Show Inside The Modal. */}
</View>
</View>
</Modal>
Now, the thing is whenever I start the Screen by default the Modal remains open. But I have declared the variable ModalVisibleStatus to false initially.
Here's the entire code of My Class-
HelloWorldApp.js
i
mport React, { Component } from 'react';
import {
Text, View, ScrollView, StyleSheet, Image, TextInput, NetInfo, TouchableOpacity,
TouchableHighlight, AsyncStorage, Modal, Alert, Button
} from 'react-native';
import { ICON_NOTE, ICON_TODO, ICON_TAG, ICON_REMINDER, ICON_URGENT, ICON_OFFICE, ICON_PERSONAL, ICON_WORK } from '../actions/ActionTypes';
import LoginScreen from '../components/LoginScreen';
export default class HelloWorldApp extends Component {
state = {
isLoading: false,
getValue: null,
ModalVisibleStatus: false
}
constructor() {
super();
this.state = {
title: '',
details: '',
timestamp: '',
status: '',
url: '',
mail: '',
phone: '',
category: '',
showLoader: false,
showAlert: false,
isNetConnected: true,
catImage: null,
}
};
updateImage(image, category) {
this.setState({
catImage: image,
category: category
})
}
updateValue(text, field) {
if (field == 'title') {
this.setState({
title: text
})
}
else if (field == 'details') {
this.setState({
details: text
})
}
}
ShowModalFunction(visible) {
this.setState({ ModalVisibleStatus: visible });
}
// net connection starts
async componentDidMount() {
const token = await AsyncStorage.getItem('token');
this.setState({ getValue: token });
}
render() {
console.log('#ZZZ2:', this.state.getValue);
return (
<View style={{ flex: 1 }}>
<ScrollView keyboardShouldPersistTaps={'handled'}>
<View style={styles.container}>
<View style={styles.inputContainerEmail}>
<Image style={styles.inputIcon} source={{ uri: this.state.catImage }} />
<TextInput style={styles.inputs}
placeholder="Title"
keyboardType="email-address"
underlineColorAndroid='transparent'
onChangeText={(text) => this.updateValue(text, 'title')} />
</View>
<View style={styles.inputContainerDetails}>
<TextInput style={styles.inputs}
placeholder="Details"
multiline
underlineColorAndroid='transparent'
onChangeText={(text) => this.updateValue(text, 'details')} />
</View>
<ScrollView horizontal={true}>
<View style={{ flexDirection: 'row', flex: 1, marginTop: 10, marginBottom: 10, marginRight: 20, marginLeft: 10 }}>
<TouchableOpacity style={{ justifyContent: 'center', alignItems: 'center', marginRight: 10 }}
onPress={() => { this.updateImage(ICON_NOTE, '1') }}>
<Image style={styles.inputIconCategory} source={{ uri: ICON_NOTE }} />
<Text style={{ marginLeft: 25, marginTop: 5 }}>Note</Text>
</TouchableOpacity>
</View>
</ScrollView>
<TouchableOpacity style={styles.buttonContainerRegister}
onPress={() => {
console.log("#Ctegory:" + this.state.category + "\n Token:" + this.state.getValue + "\nTitle:" + this.state.title + "\nDetails:" + this.state.details + "\Timestamp:" + this.state.timestamp)
}}
>
<Text>Save</Text>
</TouchableOpacity>
<Modal
transparent={false}
animationType={"slide"}
visible={this.state.ModalVisibleStatus}
onRequestClose={() => { this.ShowModalFunction(!this.state.ModalVisibleStatus) }} >
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<View style={styles.ModalInsideView}>
<Text style={styles.TextStyle}>Text Component With Some Sample Text In Modal. </Text>
<Button title="Click Here To Hide Modal" onPress={() => { this.ShowModalFunction(!this.state.ModalVisibleStatus) }} />
{/* Put All Your Components Here, Which You Want To Show Inside The Modal. */}
</View>
</View>
</Modal>
<Button onPress={() => { this.ShowModalFunction(true) }} title="Click Here To Show Modal" />
</View>
</ScrollView>
</View>
);
}
}
So, I want a solution to make the modal closed by default and open it when I click the Button.
That's because it's value is getting undefined. You need to define all states in the constructor.
isLoading:false,
getValue: null,
ModalVisibleStatus: false
cut these var's from state={...}and put them inside the this.state in constructor.
Add ModalVisibleStatus: false into your constructor and cut it from the state
constructor() {
super();
this.state = {
title:'',
details:'',
timestamp : '',
status: '',
url:'',
mail:'',
phone:'',
category:'',
showLoader:false,
showAlert: false,
isNetConnected: true,
catImage: null,
ModalVisibleStatus: false
}
};
put ModalVisibleStatus: false in this.state like this
this.state{
ModalVisibleStatus: false}
I believe that will work.
ShowModalFunction() {
this.setState({
ModalVisibleStatus: !this.state.ModalVisibleStatus
});
}

Trying to dismiss react-native modal when clicking outside of the box

So I am able to currently dismiss the modal when clicking outside of the box, but the issue is that when I click inside the box it still dismisses. I have tried adding pointerEvents="none", which does not seem to work.
Here is my code:
<View>
<Modal
animationType="slide"
transparent={true}
style={{width: '100%', alignSelf: 'center', height: '100%', justifyContent: 'flex-start', backgroundColor:'green'}}
visible={this.state.modalVisible}
onRequestClose={() => {
alert('Modal has been closed.');
}}>
<TouchableWithoutFeedback onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}}>
<View style={{ backgroundColor: 'red', flex: 1}} >
<View pointerEvents="none" style={{alignSelf: 'center', width: '80%', height: '50%', backgroundColor: 'purple', top: 100}}>
<Text pointerEvents="none" >Hello World!</Text>
</View>
</View>
</TouchableWithoutFeedback>
</Modal>
</View>
/**
* Sample React Native App
* https://github.com/facebook/react-native
* #flow
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
TouchableOpacity,
Modal,
TouchableWithoutFeedback
} from 'react-native';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
type Props = {};
export default class App extends Component<Props> {
constructor(props) {
super(props)
this.state = { modalVisible: true }
}
setModalVisible(modalVisible) {
this.setState({ modalVisible })
}
render() {
return (
<View>
<Modal
animationType="slide"
transparent={true}
style={{ width: '100%', alignSelf: 'center', height: '100%', justifyContent: 'flex-start', backgroundColor: 'green' }}
visible={this.state.modalVisible}
onRequestClose={() => {
alert('Modal has been closed.');
}}>
<TouchableWithoutFeedback onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}}>
<View style={{ backgroundColor: 'red', flex: 1 }} >
<TouchableWithoutFeedback onPress={() => { }}>
<View style={{ alignSelf: 'center', width: '80%', height: '50%', backgroundColor: 'purple', top: 100 }}>
<Text>Hello World!</Text>
</View>
</TouchableWithoutFeedback>
</View>
</TouchableWithoutFeedback>
</Modal>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});a
So I got it to work, which will only work with the react-native-modal. The modal that ships with react does not work for this use case.
Modal component provided by React Native doesn't provide many options to control it's behavior. I suggest you try react-native-community/react-native-modal instead.
This way solved for me by using react-native-community/react-native-modal and state to manage the visibility.
And properties onBackdropPress will be work. For elements to trigger the modal, you should set the state to true. See the code below
constructor(props){
super(props);
this.state = {
isVisible:false
}
<Modal
isVisible = {this.state.isVisible}
onBackdropPress = { () => this.setState({isVisible:false})}
backdropOpacity = {0.3}
style = {styles.modal}>
</Modal>
Setting the state directly from the Onpress event worked for me. that is instead of using this:
<TouchableWithoutFeedback onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}}>
You can change to :
<TouchableWithoutFeedback onPress={() => {
this.setState({modalVisible:false})}}>

Close react native modal by clicking on overlay?

Is it possible to close react native modal by clicking on overlay when transparent option is true? Documentation doesn't provide anything about it. Is it possible?
If I understood correctly, you want to close the modal when the user clicks outside of it, right ?
If yes, I searched for this some time ago and the only solution that I remember was this one (which is the one that
I've been using so far):
render() {
if (!this.state.modalVisible)
return null
return (
<View>
<Modal
animationType="fade"
transparent={true}
visible={this.state.modalVisible}
onRequestClose={() => {this.setModalVisible(false)}}
>
<TouchableOpacity
style={styles.container}
activeOpacity={1}
onPressOut={() => {this.setModalVisible(false)}}
>
<ScrollView
directionalLockEnabled={true}
contentContainerStyle={styles.scrollModal}
>
<TouchableWithoutFeedback>
<View style={styles.modalContainer}>
// Here you put the content of your modal.
</View>
</TouchableWithoutFeedback>
</ScrollView>
</TouchableOpacity>
</Modal>
</View>
)
}
// Then on setModalVisible(), you do everything that you need to do when closing or opening the modal.
setModalVisible(visible) {
this.setState({
modalVisible: visible,
})
}
Explanation
This is basically using a TouchableOpacity in the whole screen to get when the user clicks to close the modal. The TouchableWithoutFeedback is to avoid the TouchableOpacity to work inside of the Modal.
If you have a better solution, please share here.
Another solution:
// Modal.js
import React from 'react';
import {
TouchableWithoutFeedback,
StyleSheet,
Modal,
View,
} from 'react-native';
import t from 'prop-types';
class MyModal extends React.Component {
static propTypes = {
children: t.node.isRequired,
visible: t.bool.isRequired,
dismiss: t.func.isRequired,
transparent: t.bool,
animationType: t.string,
};
static defaultProps = {
animationType: 'none',
transparent: true,
};
render() {
const { props } = this;
return (
<View>
<Modal
visible={props.visible}
transparent={props.transparent}
onRequestClose={props.dismiss}
animationType={props.animationType}
>
<TouchableWithoutFeedback onPress={props.dismiss}>
<View style={styles.modalOverlay} />
</TouchableWithoutFeedback>
<View style={styles.modalContent}>
{props.children}
</View>
</Modal>
</View>
);
}
}
const styles = StyleSheet.create({
modalContent: {
flex: 1,
justifyContent: 'center',
margin: '5%',
},
modalOverlay: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
backgroundColor: 'rgba(0,0,0,0.5)'
},
});
export default MyModal;
Usage example:
// SomeScreen.js
import React from 'react';
import { View, Text, Button } from 'react-native';
import Modal from './Modal';
class SomeScreen extends React.Component {
state = {
isModalVisible: false,
};
showModal = () => this.setState({ isModalVisible: true });
hideModal = () => this.setState({ isModalVisible: false });
render() {
return (
<View>
<Button onPress={this.showModal} />
<Modal
visible={this.state.isModalVisible}
dismiss={this.hideModal}
>
<Text>Hello, I am modal</Text>
</Modal>
</View>
);
}
}
Simple solution. You need one touchableOpacity for clicking outside and another touchableOpacity for actual modal that will do nothing onPress.
import React, { Component } from 'react'
import { View, StyleSheet, TouchableOpacity, Modal} from 'react-native';
export class Modal extends Component {
constructor(props){
this.state = { modalVisible : true}
}
render() {
return (
<View>
<Modal
animationType="slide"
transparent={true}
visible={this.state.modalVisible}
onRequestClose={() => { this.setState({modalVisible: false})
}}
>
<TouchableOpacity style={styles.modalContainer} onPress={() => { this.setState({ modalVisible : false})}}>
<TouchableOpacity style={styles.modal} onPress={() => console.log('do nothing')} activeOpacity={1} >
Modal Content...
</TouchableOpacity>
</TouchableOpacity>
</Modal>
</View>
)
}
}
const styles = StyleSheet.create({
modalContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
modal: {
width: 155,
height: 300
},
});
export default Modal;
activeOpacity={1} just removes touchableOpacity fade effect
We can work it out by adding:
import { TouchableOpacity } from 'react-native';
<TouchableOpacity onPress={()=>this.setState({modalVisibilty:false})}>
<View style={{opacity:0, flex:1 }}/>
</TouchableOpacity>
under the window and another one above and change the layout style to fit your screen.
Explanation:
You will make 2 big hidden buttons to catch the user touch and change the modal visibility state to false.
Here is my simple implementation:
<TouchableWithoutFeedback onPress={}> // Code to close your modal goes here
<View style={styles.background}> // The view to drawn the background
<View
onStartShouldSetResponder={() => true}
style={styles.container}
> // The view to drawn your modal
// Your content
</View>
</Androw>
</View>
</TouchableWithoutFeedback>
I use TouchableWithoutFeedback since i do not want to change the background color when clicking on it. I also added onStartShouldSetResponder on the modal view to prevent closing the modal when you click inside the view.
I am also not using the Modal component because i done it using react-navigation.
I tried to implement some of the suggested answers, however none worked with buttons inside modal.
I was googling around and found out that instead of using TouchableWithoutFeedback, native component called Pressable allows you to check what you click on, therefore allows you to close only when clicked on it and not it's children.
return (
<View>
<Modal
animationType="slide"
transparent={true}
visible={visible}
onRequestClose={() => {
setVisible(false)}}
>
<Pressable
onPress={(event) => event.target == event.currentTarget && setVisible(false)}
style={styles.background}
>
<View style={styles.modal}>
//Content of the modal
</View>
</Pressable>
</Modal>
</View>
)
Found the answer here.
<Modal isVisible={this.state.isVisible}
onBackdropPress={() => this.setState({ isVisible: false })}>
<View style={{ flex: 1 }}>
<Text>I am the modal content!</Text>
</View>
</Modal>
<Modal
animationType="slide"
closeOnClick={true}
transparent={true}
visible={this.state.modalVisible}
>
<TouchableOpacity onPress={() => { this.setModalVisible(!this.state.modalVisible)}} style={{flex:1, justifyContent:'center', alignItems:'center',}}>
<View style={{flex:0.2,backgroundColor:'white', margin:20, borderRadius:20, borderWidth:2, borderColor:'gray'}}>
<Text style={{margin:20}}>모달 테스트</Text>
</View>
</TouchableOpacity>
</Modal>
this code is my solution.
The best and easy way to do it using TouchableWithoutFeedback and Modal of react-native is
<Modal
visible={visible}//modal visible true or false
onRequestClose={()=>onClose(false)} // function to close modal
transparent={true}
>
<TouchableWithoutFeedback
onPress={()=>onClose(false)}//outer button/view
<View style={{flex:1, backgroundColor:'rgba(0,0,0,0.5)'}}>//for transparent view, this is outer view
<TouchableWithoutFeedback>// outer button so any child view can be added
<View>// this inner view
<View>
//your content goes here
</View>
</View>
</TouchableWithoutFeedback>
</View>
</TouchableWithoutFeedback>
</Modal>
if you want to add flatlist better to provide height so the content won't go out of view
Simple solution with simple code, if you are using expo.
Here is a complete component which can you just copy and paste and get it working.
//MyModal.js
import React from 'react';
import { BlurView } from 'expo-blur';
import { View, StyleSheet, Modal, TouchableWithoutFeedback } from 'react-native';
export const MyModal = ({ children, visible, onRequestClose, onPressOverlay, }) => {
return (
<Modal
visible={visible}
transparent
animationType='none'
onRequestClose={onRequestClose}
>
<TouchableWithoutFeedback onPress={onPressOverlay}>
<BlurView
style={{ ...StyleSheet.absoluteFill }}
tint='dark'
intensity={100}
/>
</TouchableWithoutFeedback>
<View style={styles.container}>
{children}
</View>
</Modal>
);
};
const styles = StyleSheet.create({
container: {
height: '100%',
width: '100%',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
},
});
Now you can import it into your work-space and use it like this.
I'm using functional component and useState hook to show or hide the modal.
//yourScreen.js
import React, { useState } from 'react';
import { View, Button } from 'react-native';
import { MyModal } form './path/to/MyModal.js';
const YourScreen = () => {
const [modalVisible, setModalVisible] = useState(false);
return (
<View style={{ flex:1 }}>
<MyModal
visible={modalVisible}
onRequestClose={()=>{
setModalVisible(false);
}}
onPressOverlay={()=>{
setModalVisible(!modalVisible);
}}
>
// your modal content goes here
</MyModal>
<Button
title='Show Modal'
onPress={()=>{
setModalVisible(!modalVisible);
}}
/>
</View>
);
}
export default YourScreen;
Here is my solution,
import React from "react";
import {Modal, StyleSheet, TouchableOpacity, TouchableWithoutFeedback, View} from "react-native";
// make sure the styles props is passed to the model and contains modalContainer, as well as the childrenContainer style objects.
export default class DismissibleModal extends React.Component {
render() {
return (
<Modal
animationType="slide"
transparent={true}
visible={this.props.visible}
onRequestClose={() => {this.props.dismiss()}}>
<TouchableOpacity
style={Styles.modal}
activeOpacity={1}
onPressOut={() => {this.props.dismiss()}}>
<View style={[this.props.styles.modalContainer]}>
<TouchableWithoutFeedback>
<View style={[this.props.styles.childrenContainer]}>
{this.props.children}
</View>
</TouchableWithoutFeedback>
</View>
</TouchableOpacity>
</Modal>
)
}
}
const Styles = StyleSheet.create({
modal: {
flex: 1,
backgroundColor: 'transparent',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center'
},
modalView: {
backgroundColor: "white",
borderRadius: 10,
padding: 20,
paddingTop: 20,
alignItems: "center",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 9,
},
shadowOpacity: 0.50,
shadowRadius: 12.35,
elevation: 19,
},
});
#Gui Herzog answer are quite good, but makingTouchableOpacity as a parent component, it deals with conflict when it comes touching child component.
it's not good practice having a multiple component inside of TouchableOpacity, else all component inside TouchableOpacity parent will be clickable, best way to address this problem is, make your TouchableOpacity component in absolute position, with 100% width and height in screen.
here's some example:
Modal.js
export default function(props){
const { width, height } = Dimensions.get('window');
const hp = hp => (hp / 100) * height;
const wp = wp => (wp / 100) * width;
const size = size => Math.round((size / 100) * width);
return (
<KeyboardAvoidingView>
<TouchableOpacity
style={{ position: 'absolute', width: wp(100), height: hp(100) }}
onPress={props.onTouchOutSide}
/>
<ScrollView>
{/*...child*/}
</ScrollView>
</KeyboardAvoidingView>
)
}
You Welcome.
Here is the best solution for you just copy and paste. It will work definitely.
I also facing problem Here is the solution.
import React,{useState} from 'react';
import{Button,StyleSheet,View,TouchableOpacity,Modal} from 'react-native';
const App=()=>{
const [show, setShow] = useState(false);
return (
<View>
<TouchableOpacity style={{marginTop:200}}>
<Button title='show' onPress={()=>setShow(!show)}/>
</TouchableOpacity>
<Modal transparent={true} visible={show} animationType="slide">
<TouchableOpacity activeOpacity={1} style={{backgroundColor:'#000000aa',flex:1}} onPress={()=>setShow(!show)}/>
<View style={{backgroundColor:'#FFFFFF',flex: 1}}>
<View >
<Button title='close' onPress={()=>setShow(!show)}/>
</View>
</View>
</Modal>
</View>
)};
export default App;
You Can Check Another Example Here Also:
https://snack.expo.dev/#saurabh_chavan/model-with-border-radius
If you are using store solution like mobx or redux,
you can simply solve with the flag on store.
Below is the parent's code,
<Modal
animationType="fade"
transparent={true}
visible={uiControlStore.dialogVisible}
onRequestClose={() => {
uiControlStore.dialogVisible = false;
}}
>
<View
style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'rgba(0,0,0,0.6)' }}
onTouchStart={() => {
if (!uiControlStore.childClicked) uiControlStore.dialogVisible = false;
uiControlStore.childClicked= false;
}}
>
<YourCustomDialog />
</View>
</Modal>
and below is child's code. (using mobx)
const YourCustomDialog: React.FC = observer(() => {
const { uiControlStore } = useStores();
return (
<View
style={[styles.container, styles.border]}
onTouchStart={() => {
uiControlStore.childClicked= true;
}}
>
...
)
}
I realize I'm very late to this party. But I just stumbled upon this thread and Gui Herzog's answer was exactly what I was looking for. If you don't want to add any outside dependencies that is the way to go. Thanks!
However, I wanted to include some optional negative/positive action buttons in my component and grabbed them from react-native-paper for the material style.
That's when I realized react-native-paper probably have modals as well.
Here's their documentation:
https://callstack.github.io/react-native-paper/modal.html
They also have a component for Dialogs
https://callstack.github.io/react-native-paper/dialog.html
So I ended up with using the paper Dialog and it's well worth if if you're going to use the library throughout you app. Both Dialog and Modal handles the dismiss on click outside by default.
Here's a Dialog component created before realizing the Dialog component already exists.
I'll leave what I implemented here anyways as I think its a good template.
The component is in typescript. Make sure to have #types/react-native updated otherwise you might see some "No overload matches this call" errors.
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {Button, Modal, Portal} from 'react-native-paper';
interface Action {
action: () => void;
text: string;
}
interface Props {
closePressed: () => void;
negativeAction?: Action;
positiveAction?: Action;
title?: string;
text: string;
visible: boolean;
}
export const Dialog: React.FC<Props> = ({
closePressed,
negativeAction,
positiveAction,
title,
text,
visible,
}) => {
return (
<Portal>
<Modal
visible={visible}
onDismiss={closePressed}
contentContainerStyle={styles.modalContainer}>
<View style={styles.header}>
{title && (
<Text style={{fontWeight: 'bold', fontSize: 18, marginBottom: 10}}>
{title}
</Text>
)}
<Text style={styles.contentText}>{text}</Text>
</View>
<View style={styles.buttonContainer}>
{negativeAction && (
<Button mode="text" onPress={negativeAction.action}>
{negativeAction.text}
</Button>
)}
{positiveAction && (
<Button mode="text" onPress={positiveAction.action}>
{positiveAction.text}
</Button>
)}
</View>
</Modal>
</Portal>
);
};
const styles = StyleSheet.create({
modalContainer: {
borderRadius: 5,
backgroundColor: 'white',
padding: 10,
margin: 20,
},
header: {padding: 20},
contentText: {color: 'grey'},
buttonContainer: {
flexDirection: 'row',
justifyContent: 'flex-end',
paddingTop: 20,
},
});
Here is my perfectly working solution
MODAL CODE:
const ListInModal = ({ showListModal, onClose, data, onSelectItem }) => {
return (
<Modal animationType="none" transparent={true} visible={showListModal} onRequestClose={() => onClose(false)}>
<TouchableOpacity onPress={() => onClose(false)} style={styles.centeredView}>
<View style={styles.modalView}>
<ScrollView showsVerticalScrollIndicator={false}>
{data.map((item, index) => (
<>
<TouchableOpacity
onPress={() => {
onSelectItem(item);
onClose(false);
}}
style={{ height: 43, justifyContent: 'center' }}
>
<Text style={styles.itemLabel}>{item.label}</Text>
</TouchableOpacity>
{index <= data.length - 2 && (
<View
style={{
borderBottomColor: colors.white,
opacity: 0.2,
borderWidth: 1,
marginHorizontal: (24 / 375) * screenWidth,
}}
/>
)}
</>
))}
</ScrollView>
</View>
</TouchableOpacity>
</Modal>
);
};
STYLING:
const styles = StyleSheet.create({
centeredView: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#00000099',
},
modalView: {
marginHorizontal: wp('5%'),
marginVertical: hp('10%'),
backgroundColor: colors.popupBlack,
borderRadius: 20,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
itemLabel: {
fontSize: wp('5%'),
color: colors.white,
paddingHorizontal: (24 / 375) * screenWidth,
},
});
USAGE:
<ListInModal
data={projectState?.lvApplicationTypeList}
showListModal={showListModal}
onClose={(bool) => setshowListModal(bool)}
onSelectItem={(item) => onPressApplicationType(item.label)}
/>
I made it like this.
<Modal
visible={isVisible}
onRequestClose={() => setIsVisible(false)}
transparent={true}
>
<Pressable style={{
flex:1,
backgroundColor:'transparent',
}}
onPress={()=>setIsVisible(false)}
/>
{/* Here comes your component*/}
</Modal>
make your component with position:absoute so Pressable can cover the whole background.
#idiosync/react-native-modal is a hook based modal system.
https://www.npmjs.com/package/#idiosync/react-native-modal
You can add a onBackgroundPress function to the config object to achieve what you want:
useModal(
{
// all config params are optional apart from renderModal
renderModal: () => <MyModal onClose={() => setModalIsVisible(false)} someProp={someProp} />,
onBackgroundPress: () => setModalIsVisible(false),
animationTypeIn: AnimationType.SLIDE_TOP,
},
modalIsVisible,
[someProp] // dependencies array to trigger rerenders. Empty array is passed by default
)
2022 Answer - Using React Native Hooks
to Close a React Native Modal by clicking an Overlay is best done by using a Pressable button and TouchableOpacity
Example Below...
Import the Pressable and others from react-native
import React, { useState } from 'react';
import {
Pressable,
View,
Text,
TouchableOpacity,
ScrollView,
Modal,
TextInput,
StyleSheet,
} from 'react-native';
Then Set a State
const [modalVisible, setModalVisible] = useState(false);
Then Write and Design Your Modal
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
setModalVisible(!modalVisible);
}}
>
<TouchableOpacity
onPress={() => setModalVisible(false)}
style={styles.modalContainerStyle}
>
<Pressable
onPress={() => setModalVisible(true)}
style={styles.modalContent}
>
<ScrollView>
<View>
<Text style={styles.modalTitle}>TITLE HERE</Text>
<Text style={styles.modalText}>
OTHER SMALLER TEXT HERE
</Text>
<Text style={styles.modalFormText}>AN INPUT</Text>
<TextInput
style={styles.modalInput}
value={inputValue}
onChangeText={(inputValue) => handleInputValue(inputValue)}
placeholder={'example#email.com'}
/>
<View style={styles.btnView}>
<TouchableOpacity
onPress={() => setModalVisible(!modalVisible)}
underlayColor="white"
>
<View style={styles.buttonProceed}>
<Text style={styles.buttonText}>NEXT</Text>
</View>
</TouchableOpacity>
</View>
</View>
</ScrollView>
</Pressable>
</TouchableOpacity>
</Modal>
Now To Open Your Modal (Using a Text Button)
<Pressable onPress={() => setModalVisible(!modalVisible)}>
<Text style={styles.openModal}>Open Modal</Text>
</Pressable>
Finally Style Your Modal
modalContainerStyle: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'flex-end',
backgroundColor: 'rgba(0, 0, 0, 0.3)',
},
modalContent: {
borderTopLeftRadius: 27,
borderTopRightRadius: 27,
width: '100%',
height: '60%',
backgroundColor: '#FFFFFF',
paddingLeft: 33,
paddingRight: 33,
overflow: 'hidden',
},
modalTitle: {
marginTop: 43,
marginBottom: 14,
fontSize: 19,
lineHeight: 21,
color: 'black',
fontFamily: 'GraphikBold',
},
modalText: {
fontSize: 15,
lineHeight: 25,
marginBottom: 38,
color: 'black',
fontFamily: 'GraphikRegular',
},
modalFormText: {
marginBottom: 10,
fontSize: 15,
color: 'black',
fontFamily: 'GraphikMedium',
},
modalInput: {
marginBottom: 99,
height: 44,
paddingLeft: 17,
paddingRight: 17,
fontSize: 16,
borderRadius: 10,
marginBottom: 20,
borderWidth: 1,
fontFamily: 'GraphikRegular',
borderColor: 'rgba(118, 118, 118, 0.17)',
},
openModal: {
marginRight: 5,
textAlign: 'right',
color: '#ED2125',
fontFamily: 'GraphikMedium',
},
recently faced the issue, tried solving it using a two touchable opacity,
you can also turn off the closing on tapping anywhere behaviour by passing the isDismissable value to false.
import { View, Text, Modal, StyleSheet, TouchableOpacity } from 'react-native';
import React from 'react';
type PropType = {
open: boolean;
onClose: () => void;
isDismissable?: boolean;
children: JSX.Element | JSX.Element[];
};
const styles = StyleSheet.create({
modalRootContainer: {
flexGrow: 1,
},
outerContainer: {
height: '100%',
},
});
const BottomModal = ({
open,
onClose,
isDismissable = true,
children,
}: PropType) => {
return (
<Modal
visible={open}
transparent
onRequestClose={onClose}
animationType='slide'
>
<TouchableOpacity
style={styles.outerContainer}
activeOpacity={1}
onPress={() => {
if (isDismissable) onClose();
}}
>
<View style={styles.modalRootContainer}>
<TouchableOpacity activeOpacity={1}>{children}</TouchableOpacity>
</View>
</TouchableOpacity>
</Modal>
);
};
export default BottomModal;
*it's a very simple and effective solution I just applied it to my app and its works as I wanted.
just wrap your child component into TouchableOpacity
EXAMPLE:
<Modal
animationType="slide"
transparent={true}
visible={IsCamaraShow}
onRequestClose={() => {
setIsCamaraShow(!IsCamaraShow);
}}>
<View style={Styles.centeredView1}>
<TouchableOpacity style={Styles.centeredView1}
onPress={()=> setIsCamaraShow(!IsCamaraShow)}
activeOpacity={1}
>
<View style={Styles.modalView1}>
{cosnole.log( 'rest of your code') }
</View>
</TouchableOpacity>
</View>
</Modal>
Would recommend the following which worked well for me:
Use two <Pressable> components inside the modal
First one with opacity-1 and flex-1, no content and onPress that closes the modal
Second one with style according to how you want the modal content to show and text content inside
<Modal
animationType="slide"
transparent
visible={isModalVisible}
onRequestClose={() => setIsModalVisible(false)
>
<Pressable
onPress={() => setIsModalVisible(false)}
style={{flex: 1, opacity: 0}}
/>
<Pressable
style{{height: '25%', width: '100%', position: 'absolute', bottom: 0, justify-content: 'center', align-items: 'center'}}
>
<Text>Content of modal</Text>
</Pressable>
</Modal>
I have solved this in react native 0.64 by given below code
<Modal
isVisible={ModalVisible}
onBackdropPress={()=>{setModalVisible(false)}}
>
.
.
.
</Modal>
Hi I am using a lightweight popup react-native-easypopup it also closing itself when you tap out of popup.
npm i react-native-easypopup

Categories