Actionsheet covers up screen behind it

[ydlooming]

Description

When opening an Actionsheet, instead of fading the background, it covers it up completely. Select works fine in the same setup.

CodeSandbox/Snack link

No response

Steps to reproduce

1. Create a screen to render custom button components (triggers for the Actionsheet)
2. Inside each button component, host an Actionsheet, similar to the example in the docks (fragment with two children - the button and the action sheet).
3. Have the state for open/closed inside the trigger component itself
4. Trigger the action sheet by pressing the button

Expected: the action sheet appears with a semi-transparent backdrop, still showing the content behind it. Actual: there is some view behind the backdrop which covers up the screen behind it.

This same setup works fine with Select. Here is a screenshot, inspecting the backdrops of both components:

gluestack-ui Version

1.1.22

Platform

• [ ] Expo
• [ ] React Native CLI
• [ ] Next
• [ ] Web
• [X] Android
• [X] iOS

Other Platform

No response

Additional Information

I also tried taking the Actionsheet out into the main screen that hosts the mapped buttons, but that didn't work either.

[rajat693]

please share the full contents of your package.json file, I need to check the versions of few packages.

[ydlooming]

Hello, @rajat693 . Here it is:

  "name": "myApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
...
  },
  "dependencies": {
    "@gluestack-style/react": "^1.0.52",
    "@gluestack-ui/config": "^1.1.18",
    "@gluestack-ui/themed": "^1.1.22",
    "@hookform/resolvers": "^3.3.4",
    "@react-native-async-storage/async-storage": "^1.23.1",
    "@react-navigation/native": "^6.1.17",
    "@react-navigation/native-stack": "^6.9.26",
    "@reduxjs/toolkit": "^2.2.3",
    "react": "18.2.0",
    "react-hook-form": "^7.51.3",
    "react-native": "0.73.6",
    "react-native-linear-gradient": "^2.8.3",
    "react-native-safe-area-context": "^4.9.0",
    "react-native-screens": "^3.30.1",
    "react-native-svg": "^13.4.0",
    "react-native-vector-icons": "^10.0.3",
    "react-redux": "^9.1.0",
    "yup": "^1.4.0"
  },
  "devDependencies": {
...
  },
  "engines": {
    "node": ">=18"
  }
}

[ydlooming]

@rajat693 hey, Rajat! Is there anything else you'd need?

[zainkhas]

If you're using KeyboardAvoidingView, try adding pointerEvents="box-none".

[ydlooming]

If you're using KeyboardAvoidingView, try adding pointerEvents="box-none".

@zainkhas thanks for you suggestion! Unfortunately that didn't work. @rajat693 Here's the structure of the host screen:

const Screen = () => {
  return (
    <SafeAreaView flex={1} bg="$white">
      <VStack flex={1} bg="$white" px={px} gap="$3" paddingTop={0} alignItems="center" justifyContent="center">
        {isLoading ? (
          <LoaderIcon />
        ) : (
          <KeyboardAvoidingView
            flex={1}
            behavior={isIos ? 'padding' : 'height'}
            keyboardVerticalOffset={isKeyboardVisible ? (isIos ? 100 : keyboardHeight) : undefined}
            pointerEvents="box-none"
          >
            <ScrollView flex={1}>
              <VStack gap="$1" pt="$5" pb="$8">
                {configurations
                  ? Object.values(configurations)?.map(field => {
                      return <ConfigurationInput key={field.name} field={field} chargePointId={chargePoint?.id} />;
                    })
                  : null}
                <GradientButton
                  startIcon={<SaveIcon color={white} />}
                  label={t('labels.save-changes')}
                  onPress={goToReboot}
                  disabled={isPending}
                />
              </VStack>
            </ScrollView>
          </KeyboardAvoidingView>
        )}
      </VStack>
    </SafeAreaView>
  );
};

The Actionsheet lives inside the ConfigurationInput component. Here's its code:

  return (
    <>
      <VStack>
        <Text ml="$2" variant="caption">
          {label}
        </Text>
        <Pressable onPress={() => setIsOpen(true)}>
          <HStack
            justifyContent="space-between"
            borderColor={getInputBorderColor({ error, isSuccess, isPending })}
            bg="$bluePrimary"
            borderRadius="$lg"
            borderWidth="$1"
            px="$3"
            h="$10"
            alignItems="center"
          >
            <Text variant="description" numberOfLines={1} maxWidth="85%">
              {selected.join(', ')}
            </Text>
            <Arrow direction={isOpen ? 'up' : 'down'} />
          </HStack>
        </Pressable>
        <InputMessage message={warning ?? error} type={warning ? 'warning' : 'error'} />
      </VStack>
      <Actionsheet bg="$bluePrimary" isOpen={isOpen} onClose={onClose} zIndex={-1}>
        <ActionsheetBackdrop />
        <ActionsheetContent pb="$12" maxHeight={screenHeight * 0.6}>
          <ActionsheetDragIndicatorWrapper>
            <ActionsheetDragIndicator />
          </ActionsheetDragIndicatorWrapper>
          <VStack gap="$3">
            <ActionsheetScrollView w="$full">
              <VStack gap="$2" w="$full" pt="$4">
                {items.map(({ value, label }) => {
                  const isSelected = selected.includes(value);

                  return (
                    <ActionsheetItem
                      key={value}
                      onPress={() => onItemPress(value)}
                      justifyContent="space-between"
                      bg="$bluePrimary"
                      borderRadius="$lg"
                    >
                      <ActionsheetItemText>{label}</ActionsheetItemText>
                      {/* Aria-label is necessary due to a typing bug in gluestack */}
                      <Checkbox
                        value={value}
                        isChecked={isSelected}
                        aria-label="checkbox"
                        onChange={() => onItemPress(value)}
                      >
                        <CheckboxIndicator mr="$2">
                          <CheckboxIcon as={Check} />
                        </CheckboxIndicator>
                      </Checkbox>
                    </ActionsheetItem>
                  );
                })}
              </VStack>
            </ActionsheetScrollView>
            <GradientButton onPress={handleSubmit} label={t('labels.save')} />
          </VStack>
        </ActionsheetContent>
      </Actionsheet>
    </>
  );
};

[rajat693]

Hi @ydlooming,

I tried to debug your issue, but it works fine for me. I'm attaching the GitHub repo below. If you still have issues, please share a GitHub repo or a minimal codebase that demonstrates the problem. repo - https://github.com/rajat693/rn-actionsheet-themed Thank you.

[ydlooming]

Hi @ydlooming,

I tried to debug your issue, but it works fine for me. I'm attaching the GitHub repo below. If you still have issues, please share a GitHub repo or a minimal codebase that demonstrates the problem. repo - https://github.com/rajat693/rn-actionsheet-themed Thank you.

@rajat693 ok, so it turns out you shouldn't put a backgroundColor on the StyleSheet component. That was the issue. Thanks for your assistance!