Followers

React Native Alert/Modal Position

 React Native Alert/Modal Position


How do you dynamically place Modal/Alert at top/bottom/center of your screen?





Example: 

Step1: Place an image that fits the whole screen.
Step2: Place a button at the footer that updates the modal position 
Step3: Place a Modal and change the position each time the button is clicked


Solution:

Step1: Place Image to fit to the whole screen providing flex:1 and resizeMode: "cover". 
Step2: Store the positions as in the code and place a button at footer of the screen, on pressing the button pass the Modal position stored at the top in the function in order to view the modal at respective positions on the screen as such top/center/bottom.
Step3: Place a Modal below the Image View or the View where you need to overlay the Alert and render the visibility, style params from the variable predefined and updated in the function.

All set to overlay the alert and change its position on button click. Find the same in the code below


import Modal, { ModalFooter, ModalButton, ModalTitle, ModalContent } from 'react-native-modals';
// Variable used to set the Modal Title, Body, Visibility, Position
const [Title, setTitle] = useState(null)
const [alertVisiblity, setalertVisiblity] = useState(false)
const [Body, setBody] = useState(null)
const [modalPos ,setModalPos] = useState("center")
const [modalMarTop ,setModalMarTop] = useState(0)
const [modalMarBottom ,setModalMarBottom] = useState(0)
let CENTER_POS = "center"
let TOP_POS = "flex-start"
let BOTTOM_POS = "flex-end"
//Update position of your Modal on screen and also other styles needed to set on your modal can be updated here
function updateModalPos(pos) {
setModalPos(pos)
switch (pos) {
case "center":
setModalMarTop(0)
setModalMarBottom(0)
break;
case "flex-start":
setModalMarTop("25%")
setModalMarBottom(0)
break;
case "flex-end":
setModalMarTop(0)
setModalMarBottom("25%")
break;
default:
setModalMarTop(0)
setModalMarBottom(0)
break;
}
setTitle("Alert")
setBody("Change the image")
setalertVisiblity(true)
}
return (
<View style={styles.container}>
<Image
source={require('../assets/posts/post-img-1.jpg')}
style={styles.imageViewStyle}
/>
<View style={styles.footer}>
<TouchableOpacity
onPress={() => {
updateModalPos(TOP_POS) //Pass position where you want to see your modal on the screen
}
}
style={styles.footerButton}
>
<Text style={styles.textStyle}>Change Image</Text>
</TouchableOpacity>
</View>
<Modal
style={{ justifyContent: modalPos, marginTop: modalMarTop, marginBottom: modalMarBottom }}
width={0.9}
visible={alertVisiblity}
rounded
actionsBordered
onTouchOutside={() => {
setalertVisiblity(false);
}}
modalTitle={
<ModalTitle title={Title} />}
footer={
<ModalFooter>
<ModalButton
text="Ok"
bordered
onPress={() => {
setalertVisiblity(false);
}}
key="button-1"
/>
</ModalFooter>
}
>
<ModalContent
style={{ marginTop: 10, backgroundColor: '#fff' }}
>
<Text style={{ alignSelf: "center", fontSize: fonts.fontTV }}>{Body}</Text>
</ModalContent>
</Modal>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
imageViewStyle: {
flex: 1,
width: "100%",
resizeMode: "cover", // or 'stretch'
}, footer: {
width: "100%",
justifyContent: 'center',
alignItems: 'center',
margin: 'auto',
position: "absolute",
backgroundColor: "white",
bottom: 0,
justifyContent: "center",
borderWidth: 1,
borderColor: production.colorTheme,
color: production.colorTheme,
},
footerButton: {
width: "100%",
backgroundColor: "#337AB7",
borderRadius: 5,
height: 40,
alignItems: "center",
justifyContent: "center",
marginTop: 10,
marginBottom: 10
}, textStyle: {
color: "white",
fontSize: fonts.fontTV,
width: "80%",
height: 40,
padding: 10,
textAlign: "center",
},
});
view raw ModalPosition hosted with ❤ by GitHub


Stay tuned to my posts  and do share your valuable thoughts if any queries or you would like to share anything on this topic in the comment section and please do like and share my post if this was helpful.


Hope this helped you!!


Post a Comment

0 Comments