title: React Native Elevation shadow does not work properly
body: <p>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 <code>View</code> instead of outside of the <code>View</code></p>
  <p>Here is my code</p>
  <pre><code>import {Text, View, StyleSheet} from 'react-native';
  import {RadioButton} from 'react-native-paper';
  import {
      ScrollView,
      TextInput,
      TouchableOpacity,
  } from &quot;react-native-gesture-handler&quot;;
  
  function Chosen({values, onChange, defaultIndex, selectedIndexAtt, renderComponent}){
      const [index, setIndex] = useState(defaultIndex ? defaultIndex : 0);
  
      const getRadioStatus = (itemIndex) =&gt; {
          return index == itemIndex ? 'checked' : 'unchecked';
      }
  
      const handleRadioPress = (itemIndex) =&gt; {
          setIndex(itemIndex);
          onChange(itemIndex);
      }
  
      return(
          &lt;ScrollView style={styles.container}&gt;
              &lt;View style={styles.containerRow}&gt;
                  {values.map((item, index)=&gt; {
                      return (&lt;View style={styles.itemContainer}&gt;
                          &lt;View style={styles.item}&gt;
                              {renderComponent(item)}
                              &lt;View style={styles.radioButton}&gt;
                                  &lt;RadioButton value={item[selectedIndexAtt ? selectedIndexAtt : index]} 
                                      status={getRadioStatus(item[selectedIndexAtt ? selectedIndexAtt : index])}
                                      onPress={() =&gt; {
                                          handleRadioPress(item[selectedIndexAtt ? selectedIndexAtt : index])
                                      }}/&gt;
                              &lt;/View&gt;
                          &lt;/View&gt;
                      &lt;/View&gt;)
                  })}
              &lt;/View&gt;
          &lt;/ScrollView&gt;
      );
  }
  
  const styles = StyleSheet.create({
      container:{
          flexDirection: 'column',
          flex: 1
      },
      containerRow:{
          flexDirection: 'row',
          flexWrap: 'wrap',
      },
      itemContainer: {
          width: &quot;50%&quot;,
          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;
  </code></pre>
  <p>and here is how I call it from the parent</p>
  <pre><code>&lt;Chosen values={dummyData} defaultIndex={dummyData[0].id} selectedIndexAtt='id' renderComponent={(item) =&gt; {
                      return (
                          &lt;View&gt;
                              &lt;Text&gt;{item.name}&lt;/Text&gt;
                          &lt;/View&gt;
                      )
                  }} onChange={onChange}&gt;&lt;/Chosen&gt;
  </code></pre>
  <p>and the result is this:</p>
  <p><a href="https://i.stack.imgur.com/6vrKi.png" rel="nofollow noreferrer">elevation shadow issue</a></p>
  <p>Can someone please help me with this?</p>