title: Is it possible to display component's shadow above an other component in the same View with using map function ? React Native
body: <p>I’m creating a menu with React Native and it’s 3 components one below the others. I want to add shadows on the bottom of each component to add a little bit of perspective.
  I want to create 3 buttons one below the others and I want to add shadow to create perspective.</p>
  <p>My issue is that because of the map  function, all of my components are in the same View.
  I want to find a way to add shadow without having a View into another (I find it quite messy).</p>
  <p>I tried:
  <code>position: &quot;absolute&quot;</code>.</p>
  <p>but it doesn’t really work as my components pile up on each other instead of being below one another.</p>
  <p>If anyone can help me it would be a pleasure.</p>
  <p>Here is my code</p>
  <p>Menu.js:</p>
  <pre><code>import React from &quot;react&quot;
  import {View, StyleSheet} from &quot;react-native&quot;
  import {StatusBar} from 'expo-status-bar';
  import { useNavigation} from &quot;@react-navigation/native&quot;;
  import Button from &quot;../components/Menu/Button&quot;;
  
  const styles = StyleSheet.create({
      container: {
          flex: 1
      }
  });
  
  const SCREENS = [
      {
          id: &quot;play&quot;,
          name: &quot;Play&quot;,
          color: &quot;#F77F00&quot;,
          image: &quot;&quot;,
      },
      {
          id: &quot;cards&quot;,
          name: &quot;Cards&quot;,
          color: &quot;#FCBF49&quot;,
          image: &quot;&quot;
      },
      {
          id: &quot;settings&quot;,
          name: &quot;Settings&quot;,
          color: &quot;#003049&quot;,
          image: &quot;&quot;
      }
  ]
  
  const Menu = () =&gt; {
      const {navigate} = useNavigation();
      return (
          &lt;View style={styles.container}&gt;
              {
                  SCREENS.map(screen =&gt; (
                      &lt;Button
                          key={screen.id}
                          label={screen.name}
                          color={screen.color}
                          image={screen.image}
                          onPress={() =&gt; navigate(screen.id)}/&gt;
                  ))
              }
          &lt;/View&gt;
      )
  }
  
  export default Menu;
  </code></pre>
  <p>Button.js:</p>
  <pre><code>import React from &quot;react&quot;
  import {TouchableOpacity, StyleSheet, Dimensions, Text} from &quot;react-native&quot;;
  
  const {width, height} = Dimensions.get(&quot;window&quot;);
  
  const styles = StyleSheet.create({
      container: {
          width: width,
          height: height / 4,
          shadowOffset: {width: 0, height: 10},
          shadowOpacity: 0.5,
          flex: 1,
          justifyContent: &quot;center&quot;,
          alignItems: &quot;center&quot;,
      },
      text: {
          color: &quot;white&quot;,
          fontSize: 64,
          shadowOffset: {height: 5},
          shadowOpacity: 0.5
      }
  })
  
  const Button = ({label, color, onPress}) =&gt; {
      return (
          &lt;TouchableOpacity style={[styles.container, {backgroundColor: color}]} onPress={onPress}&gt;
              &lt;Text style={styles.text}&gt;{label}&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
      )
  }
  
  export default Button;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/nfg9x.png" rel="nofollow noreferrer">Here is my result</a> (haven't the possibility to embed image).</p>
  <p><a href="https://i.stack.imgur.com/bYIhG.png" rel="nofollow noreferrer">And this is what I want</a></p>