React Native Elevation 阴影无法正常工作

Question

I am new to React Native, I tried to create a component for my radio button but I encountered some issue with the Style when I added the elevation, and it is adding the shadow inside the View instead of outside of the View

Here is my code

import {Text, View, StyleSheet} from 'react-native';
import {RadioButton} from 'react-native-paper';
import {
    ScrollView,
    TextInput,
    TouchableOpacity,
} from "react-native-gesture-handler";

function Chosen({values, onChange, defaultIndex, selectedIndexAtt, renderComponent}){
    const [index, setIndex] = useState(defaultIndex ? defaultIndex : 0);

    const getRadioStatus = (itemIndex) => {
        return index == itemIndex ? 'checked' : 'unchecked';
    }

    const handleRadioPress = (itemIndex) => {
        setIndex(itemIndex);
        onChange(itemIndex);
    }

    return(
        <ScrollView style={styles.container}>
            <View style={styles.containerRow}>
                {values.map((item, index)=> {
                    return (<View style={styles.itemContainer}>
                        <View style={styles.item}>
                            {renderComponent(item)}
                            <View style={styles.radioButton}>
                                <RadioButton value={item[selectedIndexAtt ? selectedIndexAtt : index]} 
                                    status={getRadioStatus(item[selectedIndexAtt ? selectedIndexAtt : index])}
                                    onPress={() => {
                                        handleRadioPress(item[selectedIndexAtt ? selectedIndexAtt : index])
                                    }}/>
                            </View>
                        </View>
                    </View>)
                })}
            </View>
        </ScrollView>
    );
}

const styles = StyleSheet.create({
    container:{
        flexDirection: 'column',
        flex: 1
    },
    containerRow:{
        flexDirection: 'row',
        flexWrap: 'wrap',
    },
    itemContainer: {
        width: "50%",
        padding: 1
    },
    item: {
        flexDirection: 'row',
        margin: 10,
        borderWidth: 1,
        borderColor: 'rgba(105,105,105,0.6)',
        borderRadius: 15,
        elevation: 0.1
    },
    radioButton: {
        justifyContent: 'center',
        flex: 1,
        alignItems: 'flex-end'
    }
});

export default Chosen;

and here is how I call it from the parent

<Chosen values={dummyData} defaultIndex={dummyData[0].id} selectedIndexAtt='id' renderComponent={(item) => {
                    return (
                        <View>
                            <Text>{item.name}</Text>
                        </View>
                    )
                }} onChange={onChange}></Chosen>

and the result is this:

elevation shadow issue

Can someone please help me with this?

Answer 1

You have to provide this for a shadow in react native. Change the values according to your need.

shadowColor: "#000",
shadowOffset: {
    width: 0,
    height: 10,
},
shadowOpacity: 0.5,
shadowRadius: 10,
elevation: 20,