Implement fancy animation! about react-native-side-menu HOT 16 CLOSED

Like ths:

<SideMenu
   animationFunction={animationFunction}
   animationStyle={animationStyle}>
    ...
</SideMenu>

with animationStyle to have scaled down & moved to the right menu:

const animationStyle = value => {
   return {
     transform: [{
        scale: value.interpolate({
          inputRange: [0, 100],
          outputRange: [1, 0.95]
        })
     }],
     left: value
  };
};

Optionally, you can provide custom animationFunction to change the speed, just like I did:

const animationFunction = (prop, value) => {
   return Animated.spring(prop, {
      toValue: value,
      friction: 8,
      tension: 50
   });
};

I think that could go into FAQ section or to examples/customAnimation.js since it's pretty cool one and one of the most popular side menu animations in native iOS apps AFAIK.

from react-native-side-menu.

I like the idea. I'd like to see if we can provide some fancy animations and expose a method which let's others override and implement a new animations.

from react-native-side-menu.

Yeah, just a method to get native props before updating. The other part is the animations (hard to tweak, but I am super excited to see new Animations API being implemented). Anyway, the approach with subclassing and exporting might be a good choice and I am not sure if we need any methods/callbacks as with ES6, it's super easy to do it.

from react-native-side-menu.

I gonna implement this in master right after 0.8.0 will become stable

from react-native-side-menu.

Agreed, 0.8 still very buggy at the moment. I stopped using it for production. Can't wait for stable release.

from react-native-side-menu.

It won't change, maybe 0.9 will be better, can you elaborate on that a bit? About to update to 0.8

from react-native-side-menu.

My app is relying on WebViewBridge and there is an open issue with react-native 0.7 and above facebook/react-native#2010 which prevents me to upgrade.

If your app is not using Higher Order Component or WebView, then you should be fine.

from react-native-side-menu.

In principle, we can try to implement it now with react-motion and freeze this version for react-native < 0.8. And in 0.8+ we can use Animated.

from react-native-side-menu.

@Kureev agreed, I really want to get my hands on both libraries. I will try to squeeze my time to implement the simple solution for this and let you know.

from react-native-side-menu.

Solved in 0.12.1

from react-native-side-menu.

Hey, how would something like @grabbou s work look like with the latest version?

from react-native-side-menu.

I absolutely agree that this component could greatly benefit from such examples, especially this one! Thanks for the explanation.

from react-native-side-menu.

@grabbou can you compose it an example or at least add a block into readme?

from react-native-side-menu.

Yeah, will add in a new example later today or at leat add a block (have to figure it out)

from react-native-side-menu.

any update about this theme? 👍

from react-native-side-menu.

Is there any update about this theme?

from react-native-side-menu.