title: Css Top Z-index cover bottom Scroll View
body: <p>I am using React Native Typescript for my. In My app there are three elements one is Map, bottom-sheet (which position is absolute) and One button. I have created one custom bottom sheet. Bottom-sheet is animated Scrollable. Inside the Bottom-sheet I used Custom search bar and under the search bar there is <code>Flat-list</code> where I am rendering the data.   In <strong>IOS</strong> simulator I can see the FlatList card under the Button. which is really bad from UI (<a href="https://i.stack.imgur.com/XBKGN.png" rel="nofollow noreferrer">IOS-Image</a>) but in Android it looks perfect <a href="https://i.stack.imgur.com/uKVQD.png" rel="nofollow noreferrer">Android-simulator</a>. I want to hide the flat-List data which is coming under the button. I tried background color white and tried with <code>height</code>, <code>width</code>, <code>bottom</code>.But none of of work. I want to make efficient css position instead of hard code position. But I don't know how to fixed it.</p>
  <p><strong>I share my code in <a href="https://snack.expo.dev/@alakdam/rude-soylent" rel="nofollow noreferrer">Expo-snacks</a></strong></p>
  <p><strong>This is my custom Bottom-sheet</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> import React from "react";
      import {
        SafeAreaView,
        StyleSheet,
        Text,
        useWindowDimensions,
        TouchableOpacity,
        View,
      } from "react-native";
      import Animated, {
        Extrapolate,
        interpolate,
        useAnimatedGestureHandler,
        useAnimatedStyle,
        withTiming,
      } from "react-native-reanimated";
      import { PanGestureHandler } from "react-native-gesture-handler";
      import styled from "styled-components/native";
      
      interface Props {
        panY: number;
        children: React.ReactNode;
      }
      export default function BottomSheet({ panY, children }: Props) {
        const { height } = useWindowDimensions();
      
        const gestureHandler = useAnimatedGestureHandler(
          {
            onStart(_, context) {
              context.startY = panY.value;
            },
            onActive(event, context) {
              panY.value = context.startY + event.translationY;
            },
            onEnd() {
              if (panY.value &lt; -height * 0.4) {
                panY.value = withTiming(-(height * 0.6));
              } else {
                panY.value = withTiming(0);
              }
            },
          },
          [height]
        );
      
        const animatedStyle = useAnimatedStyle(() =&gt; {
          return {
            transform: [
              {
                translateY: interpolate(panY.value, [-1, 0], [-1, 0], {
                  extrapolateLeft: Extrapolate.EXTEND,
                  extrapolateRight: Extrapolate.CLAMP,
                }),
              },
            ],
          };
        });
      
        return (
          &lt;PanGestureHandler onGestureEvent={gestureHandler}&gt;
            &lt;Animated.View
              style={[styles.container, { top: height * 0.7 }, animatedStyle]}
            &gt;
              {children}
            &lt;/Animated.View&gt;
          &lt;/PanGestureHandler&gt;
        );
      }
      
      const styles = StyleSheet.create({
        container: {
          position: "absolute",
          top: 0,
          left: 0,
          right: 0,
          backgroundColor: "white",
          shadowColor: "black",
          shadowOffset: {
            height: -6,
            width: 0,
          },
          shadowOpacity: 0.1,
          shadowRadius: 5,
          borderTopEndRadius: 15,
          borderTopLeftRadius: 15,
        },
      });</code></pre>
  </div>
  </div>
  </p>
  <p><strong>This is My App component</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useState } from "react";
      import {
        StyleSheet,
        Text,
        View,
        Dimensions,
        useWindowDimensions,
        SafeAreaView,
        StatusBar,
        RefreshControl,
      } from "react-native";
      import styled from "styled-components/native";
      import MapView from "react-native-maps";
      import { useSharedValue } from "react-native-reanimated";
      import { FlatList } from "react-native-gesture-handler";
      
      import BottomSheet from "./ActionSheet";
      import BottomButton from "./BottomButton";
      import SafeAreaWrapper from "./SafeAreaWrapper";
      import SearchBar from "./SearchBar";
      
      const { width, height } = Dimensions.get("screen");
      const api =
        "http://open-api.myhelsinki.fi/v1/events/?distance_filter=60.1699%2C24.9384%2C10&amp;language_filter=en&amp;limit=100";
      
      const initialRegion = {
        latitudeDelta: 15,
        longitudeDelta: 15,
        latitude: 60.1098678,
        longitude: 24.7385084,
      };
      
      export default function App() {
        const { width, height } = useWindowDimensions();
        const [loading, setLoading] = useState(false);
        const [data, setData] = React.useState([]);
      
        const updateState = async () =&gt; {
          try {
            const response = await fetch(api);
            const data = await response.json();
            setData(data.data);
          } catch (error) {
            console.log("failed to catch", error);
          }
        };
      
        React.useEffect(() =&gt; {
          updateState();
        }, []);
      
        const y = useSharedValue(0);
        return (
          &lt;SafeAreaWrapper&gt;
            &lt;Container&gt;
              &lt;MapContent&gt;
                &lt;MapView style={styles.mapStyle} initialRegion={initialRegion} /&gt;
              &lt;/MapContent&gt;
              &lt;BottomSheet panY={y}&gt;
                &lt;Content&gt;
                  &lt;SearchContainer&gt;
                    &lt;SearchBar placeholder={"write some thing"} /&gt;
                  &lt;/SearchContainer&gt;
                  {data &amp;&amp; data === undefined ? (
                    &lt;Text&gt;loading&lt;/Text&gt;
                  ) : (
                    &lt;HeroFlatList
                      data={data}
                      showsVerticalScrollIndicator={false}
                      refreshControl={
                        &lt;RefreshControl
                          enabled={true}
                          refreshing={loading}
                          onRefresh={updateState}
                        /&gt;
                      }
                      keyExtractor={(_, index) =&gt; index.toString()}
                      renderItem={({ item, index }) =&gt; {
                        const image = item?.description.images.map((img) =&gt; img.url);
                        const startDate = item?.event_dates?.starting_day;
      
                        return (
                          &lt;EventContainer key={index}&gt;
                            &lt;EventImage
                              source={{
                                uri:
                                  image[0] ||
                                  "https://res.cloudinary.com/drewzxzgc/image/upload/v1631085536/zma1beozwbdc8zqwfhdu.jpg",
                              }}
                            /&gt;
                            &lt;DescriptionContainer&gt;
                              &lt;Title ellipsizeMode="tail" numberOfLines={1}&gt;
                                {item?.name?.en}
                              &lt;/Title&gt;
                              &lt;DescriptionText&gt;
                                {item?.description?.intro ||
                                  "No description available"}
                              &lt;/DescriptionText&gt;
                              &lt;DateText&gt;{startDate}&lt;/DateText&gt;
                            &lt;/DescriptionContainer&gt;
                          &lt;/EventContainer&gt;
                        );
                      }}
                    /&gt;
                  )}
                &lt;/Content&gt;
              &lt;/BottomSheet&gt;
              &lt;ButtonContainer&gt;
                &lt;BottomButton
                  title={"Save"}
                  onPress={() =&gt; {
                    console.log("jjj");
                  }}
                /&gt;
              &lt;/ButtonContainer&gt;
            &lt;/Container&gt;
          &lt;/SafeAreaWrapper&gt;
        );
      }
      
      const styles = StyleSheet.create({
        mapStyle: {
          width: width,
          height: height, // I DON'T KNOW HOW TO CONVERT THEM INTO STYLED COMPONENT
        },
      });
      
      const HeroFlatList = styled(FlatList).attrs({
        contentContainerStyle: {
          paddingTop: 20,
          paddingBottom: 2000, // BAD PRACTICE
          flexGrow: 1, //SEEMS LIKE IT DOES NOT WORK
        },
      })`
        height: 2000px; // BAD PRACTICE
      `;
      
      const MapContent = styled.View`
        flex: 1;
      `;
      
      const Content = styled.View`
        flex: 1;
        padding: 20px;
      `;
      
      const Container = styled.View`
        flex: 1;
      `;
      
      const ButtonContainer = styled.View`
        background-color: #fdfbfb; // My Button container
      `;
      
      const TextName = styled.Text`
        color: orange;
        font-weight: bold;
      `;
      
      const SearchContainer = styled.View`
        margin-bottom: 5px;
      `;
      
      const Title = styled.Text`
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 5px;
      `;
      
      const DescriptionText = styled(Title)`
        font-size: 14px;
        opacity: 0.7;
      `;
      
      const DateText = styled(Title)`
        font-size: 14px;
        opacity: 0.8;
        color: #0099cc;
      `;
      
      const EventImage = styled.Image`
        width: 70px;
        height: 70px;
        border-radius: 70px;
        margin-right: 20px;
      `;
      
      const DescriptionContainer = styled.View`
        width: 200px;
      `;
      
      const EventContainer = styled.View`
        flex-direction: row;
        padding: 20px;
        margin-bottom: 10px;
        border-radius: 20px;
        background-color: rgba(0, 0, 0, 0.8);
      `;</code></pre>
  </div>
  </div>
  </p>