React Native Elevation shadow does not work properly

by

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?

83 thoughts on “React Native Elevation shadow does not work properly”

  26. 386175 365244Even though youre any with the lucky enough choices, it comes evidently, even though capture the fancy of the particular coveted by ly folks other valuable you you meet may possibly effectively have hard times this specific dilemma. pre owned awnings 429282

    Reply

Leave a Comment