Interpolate overlay opacity

[happymaskterriblefate]

This PR allows the content overlay to fade in and out by interpolating the left Animated.Value to the opacity style prop on the overlay. It adds two new props to the component:

• overlayOpacity: number with a default of 1
• animateOverlayOpacity: bool with a default of true

and finally, it changes the rendering to always render the overlay, and adds a toggle on pointerEvents to determine if the overlay is interactive or if touches should simply pass through the overlay to main content.

Here's what it looks like before the PR:
https://user-images.githubusercontent.com/80355384/125297478-e1991f80-e2ec-11eb-8962-46f4b7aa7971.mov
with the code:

<SideMenu
  menu={
    <View style={{ flex: 1, backgroundColor: "white", justifyContent: "center", alignItems: "center" }}>
      <Text>This is the side menu!</Text>
    </View>
  }
  overlayColor="rgba(0, 0, 0, 0.7)"
>
  <View style={{ flex: 1, backgroundColor: "yellow", justifyContent: "center", alignItems: "center" }}>
    <Text>This is the main content!</Text>
  </View>
</SideMenu>

and here's what it looks like after the PR:
https://user-images.githubusercontent.com/80355384/125297549-ef4ea500-e2ec-11eb-8bdd-5b7c1f76f759.mov
with the code:

<SideMenu
  menu={
    <View style={{ flex: 1, backgroundColor: "white", justifyContent: "center", alignItems: "center" }}>
      <Text>This is the side menu!</Text>
    </View>
  }
  overlayColor="rgb(0, 0, 0)"
  overlayOpacity={0.7}
>
  <View style={{ flex: 1, backgroundColor: "yellow", justifyContent: "center", alignItems: "center" }}>
    <Text>This is the main content!</Text>
  </View>
</SideMenu>

If this PR and approach is welcome, I'll update the docs in the Readme as well.

Thanks for your time and consideration!

[shobhitsinghal624]

This is a great addition. Very similar to how the DrawerLayout.overlayColor works.

@alessiocancian any chance this PR can be merged?

[shobhitsinghal624]

Seems like the repository isn't actively maintained. For the time being, I have created a fork, merged this PR on it, updated the docs, and published on npm at @chakrahq/react-native-side-menu. Might help someone else who comes here looking for this.

[alessiocancian]

Seems like the repository isn't actively maintained. For the time being, I have created a fork, merged this PR on it, updated the docs, and published on npm at @chakrahq/react-native-side-menu. Might help someone else who comes here looking for this.

You're right, sorry, I'm not using this library anymore and currently not even react-native, so it's hard for me to test PRs and fix issues, I can reference your fork in the readme if you'd like to keep on maintaining the library.

[shobhitsinghal624]

Sure, I can take it up. We have already added this in our production app, so maintaining it will be part of the process anyways. Also, thanks for maintaining it till now :) We really could not find any alternative that does not use reanimated internally.

[tunnaduong]

Sure, I can take it up. We have already added this in our production app, so maintaining it will be part of the process anyways. Also, thanks for maintaining it till now :) We really could not find any alternative that does not use reanimated internally.

Hi, can you show me how to make the new function you make (animateOverlayOpacity) to work? I tried installing your folk and it work like the original but the new function didn't even show up on VSCode Intellisense and not working too.

[tunnaduong]

@shobhitsinghal624

[shobhitsinghal624]

You're right. There seems to be issue when menuPosition is set to right. VSCode Intellisense isn't showing up because of missing prop in the typescript definition.
Can you open an issue on this repo chakrahq/react-native-side-menu and we'll get it picked up.
Until then, if its not a must, you can remove the menuPosition prop and it should work.
Alternatively, if you're not looking for a pure JS implementation, you can use DrawerLayout

[alessiocancian]

Hi @shobhitsinghal624 thank you for keeping up the maintenance of this library.
I added your fork to the readme (some month later), but I noticed that your repo hasn't the issues tab enabled, you need to add issues feature from settings.

[shobhitsinghal624]

Thank you for the heads up. The issues tab is enabled now.