LivenessCameraModule not compatible with bootstrap 5

[marcelcaferati]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Liveness

How is your app built?

CRA

What browsers are you seeing the problem on?

Chrome, Firefox, Microsoft Edge, Safari, iOS (React Native), Android (React Native)

Which region are you seeing the problem in?

us-east-1

Please describe your bug.

When using bootstrap 5 the Freshness Canva wont show up, the screen wont flash the colors which will reduce the Confidence level in about 25-30 points.

The error happens because the this component has a "hidden" property in the line 176

Bootstrap has a CSS property inside their reset module which adds display block to every component with the "hidden" property

What's the expected behaviour?

The amplify liveness component is supposed to work without being affected by other libraries, since aws launched their face liveness feature, people will start integrating it inside their existing aplications.

Help us reproduce the bug!

Import the default and complete boostrap and run the example from this tutorial
https://ui.docs.amplify.aws/react/connected-components/liveness

Code Snippet

[hidden] {
  display: none !important;
}

<View
  as="canvas"
  ref={freshnessColorRef}
  className={LivenessClassNames.FreshnessCanvas}
  hidden
/>

Console log output

No response

Additional information and screenshots

No response

[reesscot]

@marcelcaferati See: #4413 (comment) for a workaround

I'm going to mark this as closed without a plan to fix. We do try to be good "neighbors" with other design systems/tooling but the issue here is really with Bootstrap css overreaching with its hidden attribute !important styling. Please feel free to open a new issue if there is anything else we can help with.