Skip to content

Comments

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

Closed
sdg9 wants to merge 1 commit intolottie-react-native:masterfrom
sdg9:sdg9/touch-through-animation
Closed

Allow user press through lottie animation when pointerEvents='none'#844
sdg9 wants to merge 1 commit intolottie-react-native:masterfrom
sdg9:sdg9/touch-through-animation

Conversation

@sdg9
Copy link

@sdg9 sdg9 commented Feb 15, 2022 •
edited
Loading

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

NoTyping
zIndex 0 never receives touch event.

After

Typing
zIndex 0 receives touch event as expected.

@goxr3plus
Copy link

goxr3plus commented Jul 16, 2022 •
edited
Loading

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

@Miigaarino
Copy link

Miigaarino commented Aug 25, 2022

Need this ++

@devpgcs
Copy link

devpgcs commented Sep 29, 2022

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
Copy link

stale bot commented Nov 28, 2022

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 stale bot added the stale There has been a lack of activity on this issue and it may be closed soon. label Nov 28, 2022
@goxr3plus
Copy link

goxr3plus commented Nov 28, 2022

.

@matinzd
Copy link
Member

matinzd commented Dec 1, 2022

Would you please rebase your branch with the master?

@matinzd matinzd removed the stale There has been a lack of activity on this issue and it may be closed soon. label Dec 1, 2022
@stale
Copy link

stale bot commented Jan 31, 2023

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 stale bot added the stale There has been a lack of activity on this issue and it may be closed soon. label Jan 31, 2023
@matinzd matinzd removed the stale There has been a lack of activity on this issue and it may be closed soon. label Jan 31, 2023
@stale
Copy link

stale bot commented Apr 1, 2023

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 stale bot added the stale There has been a lack of activity on this issue and it may be closed soon. label Apr 1, 2023
@stale
Copy link

stale bot commented Apr 8, 2023

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.

@stale stale bot closed this Apr 8, 2023
@matinzd matinzd removed the stale There has been a lack of activity on this issue and it may be closed soon. label Apr 9, 2023
@matinzd matinzd reopened this Apr 9, 2023
@matinzd
Copy link
Member

matinzd commented Apr 11, 2023 •
edited
Loading

Closed in favor of: #992

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

@matinzd matinzd closed this Apr 11, 2023
@matinzd matinzd mentioned this pull request Apr 11, 2023
Merged
matinzd added a commit that referenced this pull request Apr 15, 2023
@matinzd
BREAKING CHANGE: cleanup lottie component and remove default styles (#…
4bf5398 
…992)

## Rationale

There are a lot of styles being applied behind the scenes resulting in unexpected behaviors.

## Solution 

Remove the outer layer and pass everything directly to native lottie view

## What is changed?

- Removed using Animated API by default in the source code, fixes (#1003)
- Fix resize mode in Android
- Removed absolute style being applied to the `LottieVIew`
- Removed default aspect ratio styling
- Removed default width being applied

## What should be done from now?

You need to handle everything related to aspect ratio and sizing yourself. The reason for removing all these default values is to avoid confusion when using the library as well as to prevent unexpected behaviors.

## Fixes
- #989
- #1003
- #844
alyssaharvey3 added a commit to alyssaharvey3/react-native-lottie that referenced this pull request Aug 2, 2023
@alyssaharvey3
BREAKING CHANGE: cleanup lottie component and remove default styles (…
5982bad 
…#992)

## Rationale

There are a lot of styles being applied behind the scenes resulting in unexpected behaviors.

## Solution 

Remove the outer layer and pass everything directly to native lottie view

## What is changed?

- Removed using Animated API by default in the source code, fixes (#1003)
- Fix resize mode in Android
- Removed absolute style being applied to the `LottieVIew`
- Removed default aspect ratio styling
- Removed default width being applied

## What should be done from now?

You need to handle everything related to aspect ratio and sizing yourself. The reason for removing all these default values is to avoid confusion when using the library as well as to prevent unexpected behaviors.

## Fixes
- lottie-react-native/lottie-react-native#989
- lottie-react-native/lottie-react-native#1003
- lottie-react-native/lottie-react-native#844
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@sdg9 @goxr3plus @Miigaarino @devpgcs @matinzd