side menu suggestion about react-native-elements HOT 4 CLOSED

@forumics Are those links correct? They are bringing me back to the github issues.

from react-native-elements.

apologies for the links, they are not supposed to be there
I've tried to make something like that myself, can refer to the following code.
Do note that it is to be used as the menu component with react native side drawer
https://github.com/root-two/react-native-drawer

from react-native-elements.

import React, { Component } from 'react';
import {
Dimensions,
StyleSheet,
ScrollView,
Image,
Navigator,
TouchableWithoutFeedback,
Animated,
Easing,
View,
Text
} from 'react-native';

const window = Dimensions.get('window');
export default class Menu extends Component {
constructor(props)
{
super(props);
this.animatedValue = new Animated.Value(0);
this.state = {
range1: 10,range2: -300,
range3: 300,range4: 10,
range5: 300,range6: 10,
display: 'main'
};
}

animate() {
this.animatedValue.setValue(0)
Animated.timing(
this.animatedValue,
{
toValue: 2,
duration: 500,
easing: Easing.in(Easing.ease),
}
).start()
}

startAnimation(item)
{
if (this.state.display=='main' && item==1)
{
this.setState({range1:10, range2:-300, range3: 300, range4: 10, range5: 300, range6: 300, display: 'secondary'});
this.animate();
}
if (this.state.display=='secondary' && item==1)
{
this.setState({range1:-300, range2:10, range3: 10, range4: 300, range5: 300, range6: 300, display:'main'});
this.animate();
}
if (this.state.display=='main' && item==2)
{
this.setState({range1:10, range2:-300,range3: 300,range4: 300, range5: 300, range6: 10, display: 'secondary'});
this.animate();
}
if (this.state.display=='secondary' && item==2)
{
this.setState({range1:-300, range2:10,range3: 300,range4: 300, range5: 10, range6: 300, display:'main'});
this.animate();
}

}

render() {
var mainMenu = this.animatedValue.interpolate({
inputRange: [0, 1,2],
outputRange: [this.state.range1, this.state.range2+5,this.state.range2]
})
var subMenu1 = this.animatedValue.interpolate({
inputRange: [0, 1,2],
outputRange: [this.state.range3, this.state.range4-5, this.state.range4]
})
var subMenu2 = this.animatedValue.interpolate({
inputRange: [0, 1, 2],
outputRange: [this.state.range5, this.state.range6-5, this.state.range6]
})
return (


<Animated.View style={{position: 'absolute', left: mainMenu}}>
<Text onPress={() => this.startAnimation(1)}>submenu item 1
<Text onPress={() => this.startAnimation(2)}>submenu item 2
item 3
item 4
</Animated.View>


<Animated.View style={{position: 'absolute', left: subMenu1}}>
<Text onPress={() => this.startAnimation(1)}>return to main menu
submenu 1 item 1
submenu 1 item 2
</Animated.View>


<Animated.View style={{position: 'absolute', left: subMenu2}}>
<Text onPress={() => this.startAnimation(2)}>return to main menu
submenu 2 item 1
submenu 2 item 2
</Animated.View>


);
}
};

const styles = StyleSheet.create({
menu: {
position: 'absolute',
left: 0,
top: 0,
bottom: 0,
flex: 1,
width: window.width+500,
height: window.height,
backgroundColor: 'gray',
padding: 20,
maxWidth: window.width+100
},
menu2: {
position: 'absolute',
left: 300,
top: 0,
bottom: 0,
flex: 1,
width: window.width+500,
height: window.height,
backgroundColor: 'gray',
padding: 20,
maxWidth: window.width+100
},
avatarContainer: {
marginBottom: 20,
marginTop: 20,
},
avatar: {
width: 48,
height: 48,
borderRadius: 24,
flex: 1,
},
item: {
fontSize: 14,
fontWeight: '300',
paddingTop: 5,
},
});

from react-native-elements.

@forumics check out issue #115 we're going to be replacing this component with react-native-side-menu

from react-native-elements.