Interpolate overlay opacity

[shobhitsinghal624]

Copied from alessiocancian/react-native-side-menu/pull/7
Full credits of this PR to: @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!

[kirannk-1306]

Hi @shobhitsinghal624 , Is there a way to open the drawer on top of the content rather than pushing the content?

[shobhitsinghal624]

@kirannk-1306 - No, that is not supported by the original library.

As an alternative, if you're not looking for a pure JS implementation, you can use DrawerLayout

If you really need a pure JS implementation and are open to work on a PR, I can guide you on how to approach it.