How to place action button above react-navigation tab bar

[ugrdursun]

Hello,

I am using action button on one specific screen on my app.

What I need is; when user goes to that screen, I want action button to render above tab bar.

Normal screen:

https://i.imgur.com/NA3ZUgd.png

The screen which i use action button:

https://i.imgur.com/eiQ7drK.png

As you see its stucking behind tab bar, here is my tabbar component:

`function MyTabBar({ state, descriptors, navigation }) {
  return (
    <View style={{ flexDirection: 'row',backgroundColor:"#fff", height:50, bottom:hasNotch ? 20 : 5, borderRadius:50, width:Dimensions.get('screen').width*0.9, position:'absolute', zIndex: 50000, alignSelf:'center',  justifyContent:"center",alignItems:"center",
    
    
    shadowColor: "#000",
shadowOffset: {
	width: 0,
	height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,

elevation: 5,
    
    }}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label =
          options.tabBarLabel !== undefined
            ? options.tabBarLabel
            : options.title !== undefined
            ? options.title
            : route.name;

        const isFocused = state.index === index;

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };

        const onLongPress = () => {
          navigation.emit({
            type: 'tabLongPress',
            target: route.key,
          });
        };

        return (
          <TouchableOpacity
            accessibilityRole="button"
            accessibilityStates={isFocused ? ['selected'] : []}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={options.tabBarTestID}
            onPress={onPress}
            onLongPress={onLongPress}
            style={{ flex: 1, alignItems:"center", }}
          >
            <Icon name={label == 'MainScreen' ? 'home' : 'users'} /* color='#fff' */ type='feather'>

            </Icon>
{/*             <Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
              {label}
            </Text> */}
          </TouchableOpacity>
        );
      })}
    </View>
  );
}`

I tried to give greater zIndex to Action button but did not work, how can i solve this ?

[nathguen]

You can use offsetY up to 30.

https://github.com/mastermoo/react-native-action-button#actionbutton-1

BTW, I don't see any <ActionButton ...> in the example you've provided. Were you asking specifically for the react-native-action-button library specifically, or just generally? If you're asking generally, StackOverflow is probably the better forum for such an inquiry.