0

I am want to float my home icon above the tab bar but it gets cut can someone suggest how to do that.. aim also attaching the screenshot and navigation stack structure

stack navigation
  -1. drawer nav
     -a. Tab nav

enter image description here

            position: 'absolute',
            bottom: 20,
            height: 58,
            width: 58,
            borderRadius: 58,
            backgroundColor: colors.primaryColor,
            justifyContent: 'center',
            alignItems: 'center',
            shadowColor: '#000',
            shadowOffset: {
              width: 0,
              height: 3,
            },
            shadowOpacity: 0.29,
            shadowRadius: 4.65,
            elevation: 7,

            flex: 1,
Shailendra Gupta
  • 1,054
  • 6
  • 15

1 Answers1

0

Did you try to play with the zIndex property of each of the component ? or maybe the overflow property ? ... hard to say without having a look at the code structure.

Another solution would be to build a component for the button you want to overlap.

JSharles
  • 565
  • 1
  • 5
  • 16
  • Just to be more specific, I would suggest to add a zindex: 0 in the parent component and a zindex:1 in the child. Once again, the solution could be different depending on the way you structured the code. – JSharles Aug 19 '21 at 19:24