Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React from 'react'
- import { Dimensions, Animated, View, Easing, Platform } from 'react-native'
- import PropTypes from 'prop-types'
- /**
- * DismissableScrollview
- * Will dismiss element when the user scrolls from the top and there is no more vertical
- * scrolling available.
- */
- export default class DismissableScrollview extends React.Component {
- static propTypes = {
- onSwipeDownThreshold: PropTypes.number,
- onSwipeAway: PropTypes.func,
- children: PropTypes.node
- }
- static defaultProps = {
- onBeforeSwipeAway: () => { },
- onSwipeAway: () => { },
- // Account for lack of overscroll in Android
- onSwipeDownThreshold: Platform.OS === 'android' ? 0 : -10
- }
- constructor() {
- super()
- this.state = {
- cardLocation: new Animated.Value(Dimensions.get('screen').height),
- isTransparentBackground: true
- }
- Animated.timing(this.state.cardLocation, {
- duration: 250,
- easing: Easing.inOut(Easing.quad),
- toValue: 0,
- delay: 0,
- useNativeDriver: true
- }).start()
- this._startDragValue = 0
- }
- animateAway(onCompleteCb = () => { }) {
- this.props.onBeforeSwipeAway()
- Animated.timing(this.state.cardLocation, {
- toValue: Dimensions.get('screen').height,
- duration: 300,
- delay: 0,
- useNativeDriver: true
- }).start(onCompleteCb)
- }
- _onScroll(e) {
- if (e.nativeEvent.contentOffset.y > 5 && this.state.isTransparentBackground) {
- this.setState({
- isTransparentBackground: false
- })
- }
- if (e.nativeEvent.contentOffset.y < 5 && !this.state.isTransparentBackground) {
- this.setState({
- isTransparentBackground: true
- })
- }
- if (this.props.onScroll) {
- this.props.onScroll(e)
- }
- }
- _onScrollBeginDrag(e) {
- this._startDragValue = e.nativeEvent.contentOffset.y
- }
- _onScrollEndDrag(e) {
- if (Platform.OS === 'android' && this._startDragValue >= 5) return
- if (e.nativeEvent.contentOffset.y <= this.props.onSwipeDownThreshold) {
- this.animateAway(() => {
- this.props.onSwipeAway()
- })
- }
- }
- render() {
- return (
- <Animated.ScrollView
- scrollEventThrottle={16}
- onScroll={this._onScroll.bind(this)}
- onScrollBeginDrag={this._onScrollBeginDrag.bind(this)}
- onScrollEndDrag={this._onScrollEndDrag.bind(this)}
- contentContainerStyle={this.props.contentContainerStyle}
- alwaysBounceVertical={true}
- style={{
- top: 0,
- left: 0,
- right: 0,
- position: 'absolute',
- height: Dimensions.get('window').height,
- backgroundColor: this.state.isTransparentBackground ? 'transparent' : '#fff',
- transform: [
- {
- translateY: this.state.cardLocation
- }
- ]
- }}
- >
- <View
- style={{
- minHeight: Dimensions.get('window').height,
- shadowColor: this.state.isTransparentBackground ? '#333' : '#fff',
- shadowOffset: {
- height: 0
- },
- shadowOpacity: .3,
- shadowRadius: 10,
- backgroundColor: '#fff'
- }}
- >
- {this.props.children}
- </View>
- </Animated.ScrollView>
- )
- }
- }
Add Comment
Please, Sign In to add comment