Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to slide <View/> in and out from the bottom in React Native?

Tags:

In React Native iOS, I would like to slide in and out of a like in the following picture.

In the following example, when a button is pressed, the Payment Information view pops up from the bottom, and when the collapse button is pressed, it goes back down and disappears.

What would be the correct and proper way to go about doing so?

enter image description here

Thank you in advance!

EDIT

enter image description here

like image 944
Jo Ko Avatar asked Aug 24 '16 08:08

Jo Ko


People also ask

How do I move a view to the bottom in React Native?

To move the button to the bottom, we use justifyContent to lay out items in the main axis, with flex-end , which aligns the flex items at the end of the container.

How do you position a view in React Native?

position ​ position in React Native is similar to regular CSS, but everything is set to relative by default, so absolute positioning is always relative to the parent. If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have absolute position.

How do you put one view on top of another React Native?

We use the style property position to align one view over another. The position of the view which is beneath the surface should be made relative whereas the position of views above it should be absolute. Make use of properties such as top, left, right and bottom to align the views.


2 Answers

Basically, you need to absolute-position your view to the bottom of the screen. Then you translate its y value to equal its height. (The sub view must have a specific height in order to know how much to move it)

Code:

'use strict';  import React, {Component} from 'react'; import ReactNative from 'react-native';  const {   AppRegistry,   StyleSheet,   Text,   View,   TouchableHighlight,   Animated } = ReactNative;   var isHidden = true;  class AppContainer extends Component {   constructor(props) {     super(props);     this.state = {       bounceValue: new Animated.Value(100),  //This is the initial position of the subview       buttonText: "Show Subview"     };   }         _toggleSubview() {         this.setState({       buttonText: !isHidden ? "Show Subview" : "Hide Subview"     });          var toValue = 100;          if(isHidden) {       toValue = 0;     }      //This will animate the transalteY of the subview between 0 & 100 depending on its current state     //100 comes from the style below, which is the height of the subview.     Animated.spring(       this.state.bounceValue,       {         toValue: toValue,         velocity: 3,         tension: 2,         friction: 8,       }     ).start();          isHidden = !isHidden;   }      render() {     return (       <View style={styles.container}>           <TouchableHighlight style={styles.button} onPress={()=> {this._toggleSubview()}}>             <Text style={styles.buttonText}>{this.state.buttonText}</Text>           </TouchableHighlight>           <Animated.View             style={[styles.subView,               {transform: [{translateY: this.state.bounceValue}]}]}           >             <Text>This is a sub view</Text>           </Animated.View>       </View>     );   } }  var styles = StyleSheet.create({   container: {     flex: 1,     justifyContent: 'center',     alignItems: 'center',     backgroundColor: '#F5FCFF',     marginTop: 66   },   button: {     padding: 8,   },   buttonText: {     fontSize: 17,     color: "#007AFF"   },   subView: {     position: "absolute",     bottom: 0,     left: 0,     right: 0,     backgroundColor: "#FFFFFF",     height: 100,   } });  AppRegistry.registerComponent('AppContainer', () => AppContainer); 
like image 67
Ahmad Al Haddad Avatar answered Sep 22 '22 17:09

Ahmad Al Haddad


I know it is a little bit late, but thought it might be useful for someone. You should try out a component called rn-sliding-out-panel. It works awesomely. https://github.com/octopitus/rn-sliding-up-panel

<SlidingUpPanel     draggableRange={top: 1000, bottom: 0}     showBackdrop={true|false /*For making it modal-like*/}     ref={c => this._panel = c}     visible={ture|false /*If you want it to be visible on load*/} ></SlidingUpPanel> 

And you can even open it from an external button:

<Button onPress={()=>{this._panel.transitionTo(1000)}} title='Expand'></Button> 

You can install it via npm: sudo npm install rn-sliding-out-panel --save on your react-native root directory.


I hope it helps someone :D

like image 21
edvilme Avatar answered Sep 19 '22 17:09

edvilme