Medium Blog Post - React Native Animation Cheat Sheet: Using the “LayoutAnimation” and “Animated” Components

bargraph.md

Bar Graph

import React, { Component } from 'react';
import {
  View,
  Text,
  Dimensions,
  FlatList,
  Animated,
  LayoutAnimation,
  StyleSheet,PanResponder,
  Easing,TouchableOpacity,
} from 'react-native';
const {width, height} = Dimensions.get('window');
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
import randomcolor from 'randomcolor';
const DELAY = 100;

class AnimatedBar extends Component {
  // ...
  constructor(props) {
    super(props);

    this._width = new Animated.Value(0); // Added
    this.state = {
      // color: "blue",
      color: randomcolor()
    };
  }
  componentDidMount() {
    this.animateTo(this.props.delay, this.props.value);
  }

  componentWillReceiveProps(nextProps) {
    this.animateTo(nextProps.delay, nextProps.value);
  }

  animateTo = (delay, value) => {
    Animated.sequence([
      Animated.delay(delay),
      Animated.timing(this._width, {
        toValue: value,
      }),
    ]).start();
  }


    render() {
      const barStyles = {
        backgroundColor: this.state.color,
        height: 40,
        width: this._width, // Changed
        borderTopRightRadius: 4,
        borderBottomRightRadius: 4,
      };

      return (
        <Animated.View style={barStyles} />
      );
    }
}


export default class App extends Component {
  constructor(props){
  	super(props);


      this.state = {
       data: [],
      };
      this.startAnimation=this.startAnimation.bind(this)
      this.endAnimation=this.endAnimation.bind(this)
      this.generateData=this.generateData.bind(this)
  }


startAnimation(){
  this.interval = setInterval(() => {
      this.generateData();
    }, 1000);
}
endAnimation(){

  clearInterval(this.interval);
}
componentDidMount() {
  this.interval = setInterval(() => {
      this.generateData();
    }, 1000);
}
// generateData = () => {
generateData(){
  const data = [];
  for (let i = 0; i < 10; i++) {
    data.push(Math.floor(Math.random() * window.width));
  }

  this.setState({
    data,
  });
}
  render() {
    // const slideStyle = this.state.example.getTranslateTransform();

    return (
      <View style={[s.container]}>
        <TouchableOpacity onPress={this.startAnimation}
                style={{position:"absolute",top:25,right:10,flex:1,zIndex:3,width:35,height:35,alignItems:"center",justifyContent:"center",backgroundColor:"transparent"}}>
                <Icon name={"circle-outline"} size={25} color="rgba(0,0,0,0.5)"/>
        </TouchableOpacity>
        <TouchableOpacity onPress={this.endAnimation}
                style={{position:"absolute",top:25,left:10,flex:1,zIndex:3,width:35,height:35,alignItems:"center",justifyContent:"center",backgroundColor:"transparent"}}>
                <Icon name={"circle-outline"} size={25} color="red"/>
        </TouchableOpacity>

  {this.state.data.map((value, index) => <AnimatedBar value={value} delay={DELAY * index} key={index} />)}

      </View>
    );
  }
}

const s = StyleSheet.create({
  animatedViewConatiner:{
    // flex:1,
    // position: 'absolute',
    width:100,
    height:100,
    justifyContent:"center",
    alignItems:"center",
    backgroundColor:"rgba(240,0,0,.5)",
  },
  container: {

    flex: 1,
    height,
    width,
    // justifyContent: "center",
    // alignItems: "center",
    backgroundColor: "#F5FCFF",
  },
  text:{
fontWeight:"600",
// fontSize:100,
textAlignVertical: "center", textAlign: "center",},






// container: {
//   flex: 10,
//   flexDirection: 'column'
// },
body: {
  flex: 10,
  backgroundColor: '#ccc'
},
footer_menu: {
  position: 'absolute',
  left:0,right:0,
  width: 600,
  height: 350,
  bottom: -300,
  backgroundColor: '#1fa67a',
  alignItems: 'center',
  // justifyContent:"center",
},
tip_menu: {
  flexDirection: 'row'
},
button: {
  backgroundColor: '#fff'
},
button_label: {
  fontSize: 20,
  fontWeight: 'bold'
}

});

popup-menu.md

Popup

import React, { Component } from 'react';
import {
  View,
  Text,
  Dimensions,
  FlatList,
  Animated,
  LayoutAnimation,
  StyleSheet,PanResponder,
  Easing,TouchableOpacity,
} from 'react-native';
const {width, height} = Dimensions.get('window');
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'

const Button = (props) => {

    function getContent() {
        if(props.children){
            return props.children;
        }
        return <Text style={props.s.label}>{props.label}</Text>
    }

    return (
        <TouchableOpacity
            underlayColor="#ccc"
            onPress={props.onPress}
            style={[
                props.noDefaultStyles ? '' : s.button,
                props.s ? props.s.button : '']}
        >
            { getContent() }
        </TouchableOpacity>
    );
}

const NewsItem = ({ news, index }) => {

    function onPress(news) {
        //do anything you want
    }

    return (
        <Button
            key={index}
            noDefaultStyles={true}
            onPress={onPress.bind(this, news)}
        >
            <View style={s.news_item}>
                <Text style={s.title}>{news.title}</Text>
                <Text>{news.website}</Text>
            </View>
        </Button>
    );
}


export default class Example extends Component {
  constructor(props){
  	super(props);

    this.y_translate = new Animated.Value(0);
      this.state = {
        menu_expanded: false
      };
      this.openMenu=this.openMenu.bind(this)
      this.hideMenu=this.hideMenu.bind(this)
  }
  componentDidMount() {




  }
triggerAnimation(){
    this.slideIn.start()
}
openMenu() {
  this.setState({
    menu_expanded: true
  }, () => {
    this.y_translate.setValue(0);
    Animated.spring(
      this.y_translate,
      {
        toValue: 1,
        friction: 3
      }
    ).start();
  });
  
}
hideMenu() {
  this.setState({
    menu_expanded: false
  }, () => {
    this.y_translate.setValue(1);
    Animated.spring(
      this.y_translate,
      {
        toValue: 0,
        friction: 4
      }
    ).start();
  });
}
  render() {
    // const slideStyle = this.state.example.getTranslateTransform();
    const menu_moveY = this.y_translate.interpolate({
           inputRange: [0, 1],
           outputRange: [0, -300]
       });
    return (
      <View style={[s.container]}>
        <TouchableOpacity onPress={this.hideMenu}
                style={{position:"absolute",top:25,right:10,flex:1,zIndex:3,width:35,height:35,alignItems:"center",justifyContent:"center",backgroundColor:"transparent"}}>
                <Icon name={"circle-outline"} size={25} color="rgba(0,0,0,0.5)"/>
        </TouchableOpacity>


<Animated.View
     style={[
       s.footer_menu,
       {
         transform: [
           {translateY: menu_moveY}
         ]
       }
     ]}
   >

     <TouchableOpacity
style={{justifyContent:"center",alignItems:"center",}}
       onPress={this.openMenu} noDefaultStyles={true}>
       <Icon name="circle-outline" size={50} color="red" />
     </TouchableOpacity>

     {/* <Text style={s.text}>
               Hello
             </Text> */}

   </Animated.View>

{
  !this.state.menu_expanded &&
  <View style={s.tip_menu}>
    <TouchableOpacity onPress={this.openMenu} noDefaultStyles={true}>
      <Icon name="circle-outline" size={50} color="red" />
    </TouchableOpacity>
  </View>
}
      </View>
    );
  }
}

const s = StyleSheet.create({
  animatedViewConatiner:{
    // flex:1,
    // position: 'absolute',
    width:100,
    height:100,
    justifyContent:"center",
    alignItems:"center",
    backgroundColor:"rgba(240,0,0,.5)",
  },
  container: {

    flex: 1,
    height,
    width,
    // justifyContent: "center",
    // alignItems: "center",
    backgroundColor: "#F5FCFF",
  },
  text:{
fontWeight:"600",
// fontSize:100,
textAlignVertical: "center", textAlign: "center",},






// container: {
//   flex: 10,
//   flexDirection: 'column'
// },
body: {
  flex: 10,
  backgroundColor: '#ccc'
},
footer_menu: {
  position: 'absolute',
  left:0,right:0,
  width: 600,
  height: 350,
  bottom: -300,
  backgroundColor: '#1fa67a',
  alignItems: 'center',
  // justifyContent:"center",
},
tip_menu: {
  flexDirection: 'row'
},
button: {
  backgroundColor: '#fff'
},
button_label: {
  fontSize: 20,
  fontWeight: 'bold'
}

});

React Native Animation Cheat Sheet.md

React Native Animation Cheat Sheet: Using the “LayoutAnimation” and “Animated” Components

This is really a way for me to reference this in the future, as I always find my self forgetting parts of this, so hi future self.

sliding box.md

Slidebox

import React, { Component } from 'react';
import {
  View,
  Text,
  Dimensions,
  FlatList,
  Animated,
  LayoutAnimation,
  StyleSheet,PanResponder,
  Easing,TouchableOpacity,
} from 'react-native';
const {width, height} = Dimensions.get('window');
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'

export default class Example extends Component {
  constructor(props){
  	super(props);

    this.state={
      example:new Animated.ValueXY({x:100,y:0}),
      boo:false,
    }

    //create animation
    this.slideIn = Animated.timing(
      this.state.example,
      {
        toValue:{x:200,y:0},
        duration:2000,
        delay:1000,
        easing:Easing.in(Easing.ease)
      }
    )
  this.triggerAnimation=this.triggerAnimation.bind(this)
  }
  componentDidMount() {




  }
triggerAnimation(){
    this.slideIn.start()
}
  render() {
    const slideStyle = this.state.example.getTranslateTransform();

    return (
      <View style={[s.container]}>
        <TouchableOpacity onPress={this.triggerAnimation}
                style={{position:"absolute",top:25,right:10,flex:1,zIndex:3,width:35,height:35,alignItems:"center",justifyContent:"center",backgroundColor:"transparent"}}>
                <Icon name={"circle-outline"} size={25} color="rgba(0,0,0,0.5)"/>
        </TouchableOpacity>

      <Animated.View style={[s.animatedViewConatiner,{transform:slideStyle}]}>


        <Text style={s.text}>
          Hello
        </Text>

</Animated.View>
      </View>
    );
  }
}

const s = StyleSheet.create({
  animatedViewConatiner:{
    // flex:1,
    // position: 'absolute',
    width:100,
    height:100,
    justifyContent:"center",
    alignItems:"center",
    backgroundColor:"rgba(240,0,0,.5)",
  },
  container: {

    flex: 1,
    height,
    width,
    // justifyContent: "center",
    // alignItems: "center",
    backgroundColor: "#F5FCFF",
  },
  text:{
fontWeight:"600",
// fontSize:100,
textAlignVertical: "center", textAlign: "center",}
});

and this

import React, { Component } from 'react';
import {
  View,
  Text,
  Dimensions,
  FlatList,
  Animated,
  LayoutAnimation,
  StyleSheet,PanResponder,
  Easing,TouchableOpacity,
} from 'react-native';
const {width, height} = Dimensions.get('window');
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
import randomcolor from 'randomcolor';
const DELAY = 100;

class AnimatedBar extends Component {
  // ...
  constructor(props) {
    super(props);

    this._width = new Animated.Value(0); // Added
    this.state = {
      // color: "blue",
      color: randomcolor()
    };
  }
  componentDidMount() {
    this.animateTo(this.props.delay, this.props.value);
  }

  componentWillReceiveProps(nextProps) {
    this.animateTo(nextProps.delay, nextProps.value);
  }

  animateTo = (delay, value) => {
    Animated.sequence([
      Animated.delay(delay),
      Animated.timing(this._width, {
        toValue: value,
      }),
    ]).start();
  }


    render() {
      const barStyles = {
        backgroundColor: this.state.color,
        height: 40,
        width: this._width, // Changed
        borderTopRightRadius: 4,
        borderBottomRightRadius: 4,
      };
console.log(" this._width: ",this._width);
      return (
        <Animated.View style={barStyles} />
      );
    }
}


export default class App extends Component {
  constructor(props){
  	super(props);


      this.state = {
       ViewScale:new Animated.Value(0)
      };

      this.startAnimation=this.startAnimation.bind(this)
      // this.endAnimation=this.endAnimation.bind(this)
      // this.generateData=this.generateData.bind(this)
  }


startAnimation(){
  Animated.timing(                    // Animate over time
     this.state.ViewScale,             // The animated value to drive, this would be a new Animated.Value(0) object.
     {
       toValue: 200,                   // Animate the value
       duration: 2000,                 // Make it take a while
     }
   ).start();
}

  render() {
    // const slideStyle = this.state.example.getTranslateTransform();
    const ViewScaleValue = this.state.ViewScale.interpolate({
inputRange: [0, 25, 50, 75, 100],
outputRange: [0, .5, 0.75, 0.5, 0.75]
});
    return (
      <View style={[s.container]}>
        <TouchableOpacity onPress={this.startAnimation}
                style={{position:"absolute",top:25,right:10,flex:1,zIndex:3,width:35,height:35,alignItems:"center",justifyContent:"center",backgroundColor:"transparent"}}>
                <Icon name={"circle-outline"} size={25} color="rgba(0,0,0,0.5)"/>
        </TouchableOpacity>



        <Animated.View style={[ s.animatedViewConatiner,
       {
         transform: [
           // scaleX, scaleY, scale, theres plenty more options you can find online for this.
           {  scaleY: ViewScaleValue } // this would be the result of the animation code below and is just a number.
         ]
       }
     ]}
   />
      </View>
    );
  }
}

const s = StyleSheet.create({
  animatedViewConatiner:{
    flex:1,
    // position: 'absolute',
    width,
    height:100,

// top:0,
// bottom:0,
justifyContent:"flex-end",
alignItems:"flex-end",
// left:0,right:0,
    backgroundColor:"rgba(240,0,0,.5)",
  },
  container: {

    flex: 1,
    // height,
    // width,
    // justifyContent: "center",
    // alignItems: "center",
    backgroundColor: "#F5FCFF",
  },
  text:{
fontWeight:"600",
// fontSize:100,
textAlignVertical: "center", textAlign: "center",},






// container: {
//   flex: 10,
//   flexDirection: 'column'
// },
body: {
  flex: 10,
  backgroundColor: '#ccc'
},
footer_menu: {
  position: 'absolute',
  left:0,right:0,
  width: 600,
  height: 350,
  bottom: -300,
  backgroundColor: '#1fa67a',
  alignItems: 'center',
  // justifyContent:"center",
},
tip_menu: {
  flexDirection: 'row'
},
button: {
  backgroundColor: '#fff'
},
button_label: {
  fontSize: 20,
  fontWeight: 'bold'
}

});

import React, { Component } from 'react';
import {
  View,
  Text,
  Dimensions,
  FlatList,
  Animated,ImageBackground,
  LayoutAnimation,
  StyleSheet,PanResponder,
  Easing,TouchableOpacity,
} from 'react-native';
const {width, height} = Dimensions.get('window');
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
import randomcolor from 'randomcolor';



let IMAGE_HEIGHT_SMALL =200
let IMAGE_HEIGHT =500

export default class App extends Component {
  constructor(props){
  	super(props);
    this.topSectionHeight = new Animated.Value(IMAGE_HEIGHT);
    // this.topSectionHeight = new Animated.Value(IMAGE_HEIGHT);
  }

  componentWillMount () {

  }

  componentWillUnmount() {
    this.keyboardWillShowSub.remove();
    this.keyboardWillHideSub.remove();
  }

  keyboardWillShow = (event) => {
    Animated.timing(this.topSectionHeight, {
      duration: event.duration,
      toValue: IMAGE_HEIGHT_SMALL,
    }).start();
  };

  keyboardWillHide = (event) => {
    Animated.timing(this.topSectionHeight, {
      duration: event.duration,
      toValue: IMAGE_HEIGHT,
    }).start();
  };


  render() {
    // const slideStyle = this.state.example.getTranslateTransform();

    return (
      <View style={[s.container]}>
        <TouchableOpacity onPress={this.keyboardWillShow}
                style={{position:"absolute",top:25,right:10,flex:1,zIndex:3,width:35,height:35,alignItems:"center",justifyContent:"center",backgroundColor:"transparent"}}>
                <Icon name={"circle-outline"} size={25} color="rgba(0,0,0,0.5)"/>
        </TouchableOpacity>
        <TouchableOpacity onPress={this.keyboardWillHide}
                style={{position:"absolute",top:25,left:10,flex:1,zIndex:3,width:35,height:35,alignItems:"center",justifyContent:"center",backgroundColor:"transparent"}}>
                <Icon name={"circle-outline"} size={25} color="rgba(0,0,0,0.5)"/>
        </TouchableOpacity>



        <Animated.View style={[{height:null}, {backgroundColor:"red"},
       {height: this.topSectionHeight}
     ]}
   >

<ImageBackground
  source={{uri:"http://source.unsplash.com/category/nature?ocean"}} style={{width}}>
       <Text style={{textAlignVertical: "center", textAlign: "center",fontSize: 20,}}>top text</Text>
     </ImageBackground>


        </Animated.View>
 <Animated.View style={[ {height:null},{backgroundColor:"blue"},
      //  {height: -this.topSectionHeight}
     ]}
   >
     <Text style={{textAlignVertical: "center", textAlign: "center",fontSize: 20,}}>bottom text</Text>

     </Animated.View>
      </View>
    );
  }
}

const s = StyleSheet.create({
  animatedViewConatiner:{
    flex:1,
    // position: 'absolute',
    // width,
    // height:100,

// top:0,
// bottom:0,
// justifyContent:"flex-end",
// alignItems:"flex-end",
// left:0,right:0,
    backgroundColor:"rgba(240,0,0,.5)",
  },
  container: {

    flex: 1,
    // height,
    // width,
    // justifyContent: "center",
    // alignItems: "center",
    backgroundColor: "#F5FCFF",
  },
  text:{
fontWeight:"600",
// fontSize:100,
textAlignVertical: "center", textAlign: "center",},






// container: {
//   flex: 10,
//   flexDirection: 'column'
// },
body: {
  flex: 10,
  backgroundColor: '#ccc'
},
footer_menu: {
  position: 'absolute',
  left:0,right:0,
  width: 600,
  height: 350,
  bottom: -300,
  backgroundColor: '#1fa67a',
  alignItems: 'center',
  // justifyContent:"center",
},
tip_menu: {
  flexDirection: 'row'
},
button: {
  backgroundColor: '#fff'
},
button_label: {
  fontSize: 20,
  fontWeight: 'bold'
}

});

SPIT SCREEN

import React, { Component } from 'react';
import {
  View,
  Text,
  Dimensions,
  FlatList,
  Animated,ImageBackground,
  LayoutAnimation,
  StyleSheet,PanResponder,
  Easing,TouchableOpacity,
} from 'react-native';
const {width, height} = Dimensions.get('window');
import {BlurView} from 'react-native-blur'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
import randomcolor from 'randomcolor';



let T0P_OPEN_HEIGHT_SMALL =200
let T0P_OPEN_HEIGHT =height*.94
let TOUCHABLE_HEADING =height-T0P_OPEN_HEIGHT

export default class App extends Component {
  constructor(props){
  	super(props);
    this.topSectionHeight = new Animated.Value(T0P_OPEN_HEIGHT);
    // this.topSectionHeight = new Animated.Value(T0P_OPEN_HEIGHT);
    this.state={
      isMenuOpen:false
    }
  }

  componentWillMount () {

  }

  componentWillUnmount() {
    this.keyboardWillShowSub.remove();
    this.keyboardWillHideSub.remove();
  }

  showBottomMenu = (event) => {
    Animated.spring(this.topSectionHeight, {
      duration: event.duration,
      toValue: T0P_OPEN_HEIGHT_SMALL,
    }).start();
  };

  hideBottomMenu = (event) => {
    Animated.spring(this.topSectionHeight, {
      duration: event.duration,
      toValue: T0P_OPEN_HEIGHT,
    }).start();
  };
  toggleMenu=()=>{
    this.setState({isMenuOpen:!this.state.isMenuOpen})
    Animated.spring(this.topSectionHeight, {
      duration: 500,
      toValue: (this.topSectionHeight._value===T0P_OPEN_HEIGHT_SMALL)?T0P_OPEN_HEIGHT:T0P_OPEN_HEIGHT_SMALL,
    }).start();
  }


  render() {
    // const slideStyle = this.state.example.getTranslateTransform();

    return (
      <View style={[s.container]}>
        <TouchableOpacity onPress={this.showBottomMenu}
                style={{position:"absolute",top:25,right:10,flex:1,zIndex:3,width:35,height:35,alignItems:"center",justifyContent:"center",backgroundColor:"transparent"}}>
                <Icon name={"circle-outline"} size={25} color="rgba(0,0,0,0.5)"/>
        </TouchableOpacity>
        <TouchableOpacity onPress={this.hideBottomMenu}
                style={{position:"absolute",top:25,left:10,flex:1,zIndex:3,width:35,height:35,alignItems:"center",justifyContent:"center",backgroundColor:"transparent"}}>
                <Icon name={"circle-outline"} size={25} color="rgba(0,0,0,0.5)"/>
        </TouchableOpacity>



        <Animated.View style={[
      {justifyContent:"center",alignItems:"center",},
       {height: this.topSectionHeight}
     ]}
   >

     <ImageBackground source={{
               uri: "https://res.cloudinary.com/politicc/image/upload/articles/2017/08/14/donald-trumps-father-was-arrested-at-ku-klux-klan-riot-in-new-york-in-1927-records-reveal.jpg",
               // uri: _.get(this.state, "data[0].image",overlayImage),
           }} style={{ flex: 1,
           width,




         }}>
         <BlurView blurType="light" blurAmount={3} style={{  width,
flex:1,
alignItems:"center",
// borderWidth: 2,borderColor: 'red',
alignItems: "center",
justifyContent: "center",
height,}}>
<Animated.View style={{
    flex: 1,height,width,
    //  flex:1,
      position:"absolute",
    //  textAlignVertical: "center",
    //  textAlign: "center",
     top:this.topSectionHeight.interpolate({
       inputRange: [200, T0P_OPEN_HEIGHT],
       outputRange: [ -200,0]
     }),
     bottom:0,left:0,right:0,
justifyContent: 'center', alignItems: 'center',
    }}>
    <Animated.View style={{
        flex: 1,height,width,
        //  flex:1,
          position:"absolute",
        //  textAlignVertical: "center",
        //  textAlign: "center",
         top:this.topSectionHeight.interpolate({
           inputRange: [200, T0P_OPEN_HEIGHT],
           outputRange: [ 0,-120]
         }),
         bottom:0,left:0,right:0,
    justifyContent: 'center', alignItems: 'center',
        }}>

       <Text style={{
          //  flex:1,

           textAlignVertical: "center",
           textAlign: "center",
           fontSize: 20,
         }}>
         top text
       </Text>
          </Animated.View>
          <TouchableOpacity
style={{flex:1,height,width,justifyContent:"center",alignItems:"center"}}
            onPress={this.showBottomMenu}>


     <Animated.Text style={{

        //  textAlignVertical: "center", textAlign: "center",
        //  fontSize: 10,
        margin:20,
        position:"absolute",
         opacity:this.topSectionHeight.interpolate({
           inputRange: [200, T0P_OPEN_HEIGHT],
           outputRange: [0, 1]
         })
       }}>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

       </Animated.Text>
         </TouchableOpacity>
     </Animated.View>
     </BlurView>
     </ImageBackground>


        </Animated.View>
 <Animated.View style={[ {flex:1,backgroundColor:"blue"},
      //  {height: -this.topSectionHeight}
     ]}
   >
     <Animated.View style={[ {
justifyContent:"center",
height:TOUCHABLE_HEADING,
alignItems:"center",
           backgroundColor:"teal"},
          //  {height: -this.topSectionHeight}
         ]}
       >
         <TouchableOpacity onPress={this.toggleMenu}
                //  style={{position:"absolute",top:25,left:10,flex:1,zIndex:3,width:35,height:35,alignItems:"center",justifyContent:"center",backgroundColor:"transparent"}}
                 >
                 <Icon name={
                     (this.state.isMenuOpen)?"circle":"circle-outline"
                     } size={25} color="rgba(0,0,0,0.5)"/>
         </TouchableOpacity>
          </Animated.View>
     <Animated.View
       style={{height,width,backgroundColor:"rgba(0,0,0,.5)", justifyContent:"center",alignItems:"center"}}>
<Text style={{textAlignVertical: "center", textAlign: "center",fontSize: 20,}}>body</Text>



     </Animated.View>

     </Animated.View>
      </View>
    );
  }
}

const s = StyleSheet.create({
  animatedViewConatiner:{
    flex:1,
    // position: 'absolute',
    // width,
    // height:100,

// top:0,
// bottom:0,
// justifyContent:"flex-end",
// alignItems:"flex-end",
// left:0,right:0,
    backgroundColor:"rgba(240,0,0,.5)",
  },
  container: {

    flex: 1,
    // height,
    // width,
    // justifyContent: "center",
    // alignItems: "center",
    backgroundColor: "#F5FCFF",
  },
  text:{
fontWeight:"600",
// fontSize:100,
textAlignVertical: "center", textAlign: "center",},






// container: {
//   flex: 10,
//   flexDirection: 'column'
// },
body: {
  flex: 10,
  backgroundColor: '#ccc'
},
footer_menu: {
  position: 'absolute',
  left:0,right:0,
  width: 600,
  height: 350,
  bottom: -300,
  backgroundColor: '#1fa67a',
  alignItems: 'center',
  // justifyContent:"center",
},
tip_menu: {
  flexDirection: 'row'
},
button: {
  backgroundColor: '#fff'
},
button_label: {
  fontSize: 20,
  fontWeight: 'bold'
}

});