alessiocancian / react-native-actionsheet

An elegant ActionSheet component for React Native.
MIT License
64 stars 24 forks source link

BlurView Conflict #27

Open perryneal11 opened 1 year ago

perryneal11 commented 1 year ago

Bug

Because the actionsheet is using the BlurView library, other areas that I use BlurView in are triggering the following error.

Screenshot 2023-11-17 at 11 37 02 PM

I installed using npm install @react-native-community/blur@latest

Environment info

Library Version
@alessiocancian/react-native-actionsheet "^2.4.2"
react-native "0.67.4",
"@react-native-community/blur": "^4.3.2"

Steps To Reproduce

I was not able to run the sample app, and I am working in a private repo. But this is the component causing the error.

Describe what you expected to happen:

1.I expect to be able to add a BlurView in my app without it conflicting with the actionsheet

Reproducible sample code

`            <BlurView
              style={{
                position: 'absolute',
                top: 0,
                left: 0,
                bottom: 0,
                right: 0,
              }}
              // viewRef={this.state.viewRef}
              blurType="dark"
              blurAmount={100}
              reducedTransparencyFallbackColor={AppStyle.colorTheme.black}
            />
            {Platform.OS === 'ios' && (
              <BlurView
                style={{
                  position: 'absolute',
                  top: 0,
                  left: 0,
                  bottom: 0,
                  right: 0,
                }}
                // viewRef={this.state.viewRef}
                blurType="dark"
                blurAmount={100}
                reducedTransparencyFallbackColor={AppStyle.colorTheme.black}
              />
            )}`

                  <ActionSheet
        ref={actionsheetRef}
        options={options}
        cancelButtonIndex={2}
        destructiveButtonIndex={1}
        onPress={index => imagePickerOption(index)}
      />
Waltari10 commented 3 months ago

Adding resolutions to your package.json should fix this. It prevents from having multiple different versions of the blur package in your deps.

 "resolutions": {
    "@react-native-community/blur": "4.4.0"
  },