react-native-paper CARD component not hidding when i use a fab button

Question

I am trying to activate a fab button to have options on a screen, in addition to that my screen has a list of REACT-NATIVE-PAPER cards, but it cannot hide the card behind the shadow of the modal, it is as if it had a elevation or a very high zIndex, I tried to decrease the zIndex but it doesn't work, thanks, this is a image of project https://i.sstatic.net/7aNns.jpg

import React, { Component } from 'react';
import { FAB } from 'react-native-paper';
import { View, ScrollView } from 'react-native';
import AppbarNavigation from '../../components/appbar_navegation'
import ProjectCard from '../../components/project_card'

import styles from './style'

class Home extends Component {

  state = {
    open: false,
  };

  _onStateChange = ({ open }) => this.setState({ open });


  render() {

    const { navigation } = this.props;

    const { open } = this.state;


    return (
      <>
        <AppbarNavigation
          title='Proyectos'
          search
          searchfunction={() => console.log("funcion de buscar")}
          navigation={() => { navigation.toggleDrawer(); }}
        />


        <FAB.Group
          style={styles.fabgroup}
          open={open}
          disabled
          icon={open ? 'close' : 'plus'}
          actions={[

            { icon: 'star', label: 'Star', onPress: () => console.log('Pressed star') },
            { icon: 'email', label: 'Email', onPress: () => console.log('Pressed email') },
            { icon: 'bell', label: 'Remind', onPress: () => console.log('Pressed notifications') },
          ]}
          onStateChange={this._onStateChange}
          onPress={() => {
            if (open) {

            }
          }}
        />


        <View>
          <ScrollView [style={styles.scrollView}][1]>
            <View style={styles.menuContainer}>
              <ProjectCard
                imageProject={{ uri: 'https://picsum.photos/700' }}
                nameProject='proyecto'
                projectClient='Name User'
                projectProperty='NPH'
                projectModificate='13 Min'
                projectAuthor='Miller Watson'
              />
            </View>
            

          </ScrollView>
        </View>
      </>
    );
  }
}
export default Home;

Answer 1

The solution is the components orden, so the script is update to this:

export default class Home extends Component {

 state = {
   open: false,
 };

 _onStateChange = ({ open }) => this.setState({ open });


 render() {

   const { navigation } = this.props;

   const { open } = this.state;


   return (
     <>
       <AppbarNavigation
         title='Proyectos'
         search
         searchfunction={() => console.log("funcion de buscar")}
         navigation={() => { navigation.toggleDrawer(); }}
       /> 

       <View>
         <ScrollView [style={styles.scrollView}][1]>
           <View style={styles.menuContainer}>
             <ProjectCard
               imageProject={{ uri: 'https://picsum.photos/700' }}
               nameProject='proyecto'
               projectClient='Name User'
               projectProperty='NPH'
               projectModificate='13 Min'
               projectAuthor='Miller Watson'
             />
           </View>


           

         </ScrollView>
       </View>

<FAB.Group
         style={styles.fabgroup}
         open={open}
         disabled
         icon={open ? 'close' : 'plus'}
         actions={[

           { icon: 'star', label: 'Star', onPress: () => console.log('Pressed star') },
           { icon: 'email', label: 'Email', onPress: () => console.log('Pressed email') },
           { icon: 'bell', label: 'Remind', onPress: () => console.log('Pressed notifications') },
         ]}
         onStateChange={this._onStateChange}
         onPress={() => {
           if (open) {

           }
         }}
       />


     </>
   );
 }
}