Allow user press through lottie animation when pointerEvents='none'

[sdg9]

React Native supports pointerEvents but they don't work as expected with LottieView.

Scenario

<View>
  <LottieView 
    pointerEvents="none"
    style={{ position: 'absolute', zIndex: 1, width: 500 }}
    source={require('./someAnimation.json')}
    autoPlay={true}
  />
  <TextInput placeholder="Type here" />
</View>

• LottieView is absolutely positioned with zIndex of 1 so that animations play on top of existing content.
• The pointerEvents="none" prop is added to LottieView so that lower zIndex components can receive touch events.
• It does not work as expected as the outermost View of LottieView's implementation doesn't receive the prop.

Proposed Solution

Let the outermost View receive the pointerEvents prop.

Demo

Before

zIndex 0 never receives touch event.

After

zIndex 0 receives touch event as expected.

[goxr3plus]

@sdg9 @emilioicai We really need this too 😃 , because we are facing production problems due to pointerEvents not working with LottieView

[Miigaarino]

Need this ++

[devpgcs]

Hey guys I hope this work for you as it work for me:

const SomeComponent = () => {
    return (
        <>
            ... Some other components
            <View pointerEvents="none" style={{ width: "100%", height: "100%", position: "absolute" }}>
                <LottieView autoPlay source={require('../the-animations-folder/your-animation.json')} />
            </View>
        </>
    )
}

So, you just need to wrap it into a View which should cover the whole screen and which must have the pointerEvents="none"

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[goxr3plus]

.

[matinzd]

Would you please rebase your branch with the master?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

[matinzd]

Closed in favor of: https://github.com/lottie-react-native/lottie-react-native/pull/992

After merging #992 you can direcetly pass anything you want to the native lottie view itself.