Make background dark grey when react native Modal is opened - react-native

Question

I am using a react-native Modal, and I am trying to get the background to dim to a dark grey when it opens. I can't seem to get it to do this! I have tried adding a Main View and setting the backgroundColor of that to dark grey when the modal is opened, but it doesn't work. I have also tried setting the backgroundColor of the Modal to be dark grey when it opens - also doesn't work. How can I achieve this please? This is my code:
Link to Snack: https://snack.expo.dev/#steph510/simple-modal
App.js
import * as React from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import Constants from 'expo-constants';
// You can import from local files
import Sortby from './components/Sortby';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default class App extends React.Component {
state = {
showSortby: false,
};
startSortByHandler = () => {
this.setState({
showSortby: true,
});
};
endSortByHandler = () => {
this.setState({
showSortby: false,
});
};
getSortValues = () => {
this.endSortByHandler()
}
getShowInGridViewList = () => {
const gridFieldArray = [
{"text":"Organization","key":"0.7204364607892255"},
{"text":"Document No","key":"0.11948720939854396"},
{"text":"Warehouse","key":"0.5981352662697218"},
{"text":"Business Partner","key":"0.3617080891091381"},
{"text":"Partner Address","key":"0.9242697027340077"},
{"text":"Movement Date","key":"0.19100558269330914"}]
return gridFieldArray;
};
render() {
return (
<View style={styles.container}>
<Card>
<Sortby
visible={this.state.showSortby}
onCancel={this.endSortByHandler}
showInGridViewList={this.getShowInGridViewList}
onOK={this.getSortValues}
></Sortby>
<Button title={'Open Modal'} onPress={this.startSortByHandler}></Button>
</Card>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#FFFFCC',
padding: 8,
}
});
SortBy.js
import React from "react";
import {View, Text, Modal, StyleSheet, Button, FlatList,} from "react-native";
import { RadioButton } from "react-native-paper";
export default class Sortby extends React.Component {
constructor(props) {
super(props);
}
state = {
selectedIndex: 0,
radioButtonValue: 'asc',
};
onRadiochange = (index, value) => {
this.setState({
radioButtonValue: value,
selectedIndex: index
});
};
render() {
return (
<Modal visible={this.props.visible} transparent={true}>
<View style={styles.modalStyles}>
<View style={styles.fieldsContainer}>
<FlatList
data={this.props.showInGridViewList()}
extraData={this.state}
renderItem={(itemData) => {
const index = itemData.index;
return (
<View style={styles.fieldItem}>
<Text style={styles.fieldText}>{itemData.item.text}</Text>
<View style={styles.radioButtonContainer}>
<RadioButton.Group onValueChange={value => this.onRadiochange(index, value)}>
<View style={styles.singleRadioButtonContainer}>
<Text>Asc</Text>
<RadioButton
color='#5d86d7'
value="asc"
status={ this.state.selectedIndex === index && this.state.radioButtonValue === 'asc' ? 'checked' : 'unchecked'}
/>
</View>
<View style={styles.singleRadioButtonContainer}>
<Text>Desc</Text>
<RadioButton
color='#5d86d7'
value="desc"
status={ this.state.selectedIndex === index && this.state.radioButtonValue === 'desc' ? 'checked' : 'unchecked'}
/>
</View>
</RadioButton.Group>
</View>
</View>
);
}}
alwaysBounceVertical={false}
/>
</View>
<View style={styles.buttonContainer}>
<View style={styles.button}>
<Button title="OK" color={"#5d86d7"} onPress={this.props.onOK}></Button>
</View>
<View style={styles.button}>
<Button
title="Cancel"
color={"#5d86d7"}
onPress={this.props.onCancel}
></Button>
</View>
</View>
</View>
</Modal>
);
}
}
const styles = StyleSheet.create({
modalStyles: {
height: "auto",
width: "90%",
flexDirection: "column",
justifyContent: "flex-start",
alignItems: "center",
backgroundColor: "#fff",
borderColor: "#777",
borderWidth: 1,
marginLeft: 20,
},
fieldsContainer: {
width: "100%",
},
fieldItem: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
paddingLeft: 12,
borderBottomWidth: 1,
borderBottomColor: "#ebebeb",
},
fieldText: {
color: "#444",
},
radioButtonContainer: {
flexDirection: "row",
justifyContent: "flex-start",
alignItems: "center",
},
singleRadioButtonContainer: {
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
marginRight: 10,
},
buttonContainer: {
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
},
button: {
width: "100%",
marginHorizontal: 8,
},
});

Answer 1

Here is a solution I found: https://snack.expo.dev/C1gQM9bvD
I assume that the Modal from react-native does not support this directly since in their docs they do not mention anything like this.
However, you can check this library, I used it multiple times and you can customize it.

Answer 2

I have created a container style then I applied the rgba values for backgroundColor e.g:
modalStyles:{
flex: 1,
//backgroundColor: 'transparent',
backgroundColor: 'rgba(0,0,0,0.7)',
alignItems: 'center',
justifyContent: 'center',
},
Then inside the modal I created my actual modal dialog inside it.

Answer 3

Did you try the customBackdrop prop?
<Modal
visible={this.props.visible}
statusBarTranslucent={true}
customBackdrop={<View style={{backgroundColor: '#FFFFCC'} />}
>