CODEWITHSUNDEEP
react-native
Lan Tran
Lan Tran

Reputation: 11

react native curved-in curved-out right side of view

image description of idea

i wanna make open/ close animation for menu in my mobile using react native. BUT i don't know how to make a side of view to be curved like in the idea. i tried using SVG but cannot archived it.
I tried using border radius but seems not work and cannot make curve-in ( when close the menu ) animation. 

<View style={styles.container}>
      <View style={{
        width:200,
        flex:1,
        backgroundColor:"red",
        borderTopRightRadius:400,
        borderBottomRightRadius: 400,
      }}>
      </View>

    </View>

i wanna make it work like this animation : https://github.com/lkzhao/ElasticTransition thanks

Upvotes: 1

Views: 1884

Answers (1)

Joshua Obritsch
Joshua Obritsch

Reputation: 1293

I've done a fair amount with animations in React Native, but that one looks pretty tricky. Nevertheless, I think I have a solution. (After thinking about it for like 20 minutes)

I'll give one example scenario: the menu is on top of the home screen and you swipe left to dismiss the menu with a curved-in animation.

1) Create an Animated.View with the following styles:

const { width, height } = Dimensions.get('window');

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: -height,
    left: width,
    width: height * 3,
    height: height * 3,
    borderRadius: height * 1.5
  }
});

2) Change the background color of the Animated.View to the background color of the home screen.

3) Create an Animated.Value and adjust the transform: [{ scale }] attribute to about 1.1.

That would make the Animated.View scale up, rounding its borders from the right so that it looks like the menu is curved in.

You might want to play around with the borderRadius and height. But in theory, it should work.

4) Animate the menu to the left and scale the Animated.View back to 1.0.

Here's an example image that kind of explains what I mean:

example

Upvotes: 2

Related Questions