├── .gitignore ├── README.md ├── gifs ├── 1.gif ├── 2.gif └── test1.mp4 ├── lib ├── components │ ├── bottom_sheet │ │ └── index.js │ └── navigation │ │ ├── index.js │ │ ├── pop_up.js │ │ └── pop_up.next.js └── index.js ├── package.json ├── src ├── commonjs │ ├── components │ │ ├── bottom_sheet │ │ │ ├── index.js │ │ │ ├── index.js.flow │ │ │ └── index.js.map │ │ └── navigation │ │ │ ├── index.js │ │ │ ├── index.js.flow │ │ │ ├── index.js.map │ │ │ ├── pop_up.js │ │ │ ├── pop_up.js.flow │ │ │ ├── pop_up.js.map │ │ │ ├── pop_up.next.js │ │ │ ├── pop_up.next.js.flow │ │ │ └── pop_up.next.js.map │ ├── index.js │ ├── index.js.flow │ └── index.js.map └── module │ ├── components │ ├── bottom_sheet │ │ ├── index.js │ │ └── index.js.map │ └── navigation │ │ ├── index.js │ │ ├── index.js.map │ │ ├── pop_up.js │ │ ├── pop_up.js.map │ │ ├── pop_up.next.js │ │ └── pop_up.next.js.map │ ├── index.js │ └── index.js.map └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | 3 | # OSX 4 | # 5 | .DS_Store 6 | 7 | # Xcode 8 | # 9 | build/ 10 | *.pbxuser 11 | !default.pbxuser 12 | *.mode1v3 13 | !default.mode1v3 14 | *.mode2v3 15 | !default.mode2v3 16 | *.perspectivev3 17 | !default.perspectivev3 18 | xcuserdata 19 | *.xccheckout 20 | *.moved-aside 21 | DerivedData 22 | *.hmap 23 | *.ipa 24 | *.xcuserstate 25 | project.xcworkspace 26 | 27 | # Android/IntelliJ 28 | # 29 | build/ 30 | .idea 31 | .gradle 32 | local.properties 33 | *.iml 34 | 35 | # node.js 36 | # 37 | node_modules/ 38 | npm-debug.log 39 | yarn-error.log 40 | 41 | # BUCK 42 | buck-out/ 43 | \.buckd/ 44 | *.keystore 45 | 46 | # fastlane 47 | # 48 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 49 | # screenshots whenever they are needed. 50 | # For more information about the recommended setup visit: 51 | # https://docs.fastlane.tools/best-practices/source-control/ 52 | 53 | */fastlane/report.xml 54 | */fastlane/Preview.html 55 | */fastlane/screenshots 56 | 57 | # Bundle artifact 58 | *.jsbundle 59 | 60 | # CocoaPods 61 | /ios/Pods/ 62 | 63 | /example 64 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![](gifs/2.gif) | ![](gifs/1.gif) | 2 | :---------------:|:----------------:| 3 | 4 | # Installation 5 | 6 | Open a Terminal in the project root and run: 7 | 8 | ``` 9 | yarn add react-native-popup-navigation 10 | ``` 11 | 12 | Install and link [react-native-gesture-handler](https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html) 13 | 14 | # Usage 15 | 16 | # Navigator 17 | 18 | ```js 19 | import React from 'react' 20 | import { Navigator } from 'react-native-popup-navigation' 21 | import { Dimensions } from 'react-native' 22 | 23 | import Home from './home' 24 | import Popup from './pop_up' 25 | 26 | const { height } = Dimensions.get('window') 27 | 28 | export default () => { 29 | return ( 30 | 34 | ) 35 | } 36 | ``` 37 | 38 | # Props 39 | 40 | | name | required | description | 41 | | ------------------------- | -------- | ----------- | 42 | | screen | yes | React.Component | 43 | | props | no | your props | 44 | | name | yes | name to navigate | 45 | | init | no | inital page | 46 | | snapPoints | no | | 47 | | popupStyle | no | form popup styles | 48 | 49 | # Moving between screens 50 | 51 | ```js 52 | import React from 'react'; 53 | import {View, Text, Dimensions, TouchableOpacity, StyleSheet} from 'react-native' 54 | 55 | const { width, height } = Dimensions.get('window') 56 | 57 | const Home = (props) => { 58 | return ( 59 | 60 | { props.present('popup') }} style={styles.btn}> 61 | Present 62 | 63 | 64 | ) 65 | } 66 | 67 | const PopUp = (props) => { 68 | return ( 69 | 70 | { props.dismiss() }} style={styles.btn}> 71 | Present 72 | 73 | 74 | ) 75 | } 76 | 77 | const styles = { 78 | container: { 79 | flex: 1, 80 | alignItems: 'center', 81 | justifyContent: 'center', 82 | backgroundColor: '#fff' 83 | }, 84 | btn: { 85 | padding: 20, 86 | backgroundColor: 'green' 87 | } 88 | } 89 | 90 | export default App 91 | ``` -------------------------------------------------------------------------------- /gifs/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mnshkv/react-native-popup-navigation/9e55e734757c4f87c7efd7f7bbe3b7357e128a53/gifs/1.gif -------------------------------------------------------------------------------- /gifs/2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mnshkv/react-native-popup-navigation/9e55e734757c4f87c7efd7f7bbe3b7357e128a53/gifs/2.gif -------------------------------------------------------------------------------- /gifs/test1.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mnshkv/react-native-popup-navigation/9e55e734757c4f87c7efd7f7bbe3b7357e128a53/gifs/test1.mp4 -------------------------------------------------------------------------------- /lib/components/bottom_sheet/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import { Animated, StyleSheet, View, Dimensions, Platform } from 'react-native' 3 | import { 4 | PanGestureHandler, 5 | NativeViewGestureHandler, 6 | State, 7 | TapGestureHandler, 8 | } from 'react-native-gesture-handler' 9 | 10 | const { width, height } = Dimensions.get('window') 11 | 12 | export class BottomSheet extends Component { 13 | masterdrawer = React.createRef() 14 | drawer = React.createRef() 15 | drawerheader = React.createRef() 16 | scroll = React.createRef() 17 | scrollView = React.createRef() 18 | START 19 | AFTER_START 20 | END 21 | 22 | constructor(props) { 23 | super(props) 24 | 25 | this.START = props.snapPoints[0] 26 | this.AFTER_START = props.snapPoints[1] 27 | this.END = props.snapPoints[props.snapPoints.length - 1] 28 | 29 | this.state = { 30 | lastSnap: this.END, 31 | bounces: props.bounces 32 | } 33 | 34 | this._lastScrollYValue = 0 35 | this._lastScrollY = new Animated.Value(0) 36 | this._onRegisterLastScroll = Animated.event( 37 | [{ nativeEvent: { contentOffset: { y: this._lastScrollY } } }], 38 | { useNativeDriver: props.nativeDriver } 39 | ) 40 | 41 | this._lastScrollY.addListener(({ value }) => { 42 | this._lastScrollYValue = value 43 | if (value <= 20 && props.bounces) { 44 | this.setState({ bounces: false }) 45 | } else { 46 | this.setState({ bounces: true }) 47 | } 48 | }) 49 | 50 | this._dragY = new Animated.Value(0) 51 | 52 | this._onGestureEvent = Animated.event( 53 | [{ nativeEvent: { translationY: this._dragY } }], 54 | { useNativeDriver: props.nativeDriver } 55 | ) 56 | 57 | this._reverseLastScrollY = Animated.multiply( 58 | new Animated.Value(-1), 59 | this._lastScrollY 60 | ) 61 | 62 | this._translateYOffset = new Animated.Value(this.END) 63 | 64 | this._translateY = Animated.add( 65 | this._translateYOffset, 66 | Animated.add(this._dragY, this._reverseLastScrollY) 67 | ).interpolate({ 68 | inputRange: [this.START, this.END], 69 | outputRange: [this.START, this.END], 70 | extrapolate: 'clamp' 71 | }) 72 | 73 | this._radius = Animated.add( 74 | this._translateYOffset, 75 | Animated.add(this._dragY, this._reverseLastScrollY) 76 | ).interpolate({ 77 | inputRange: [this.START, this.AFTER_START / 2], 78 | outputRange: [0, props.corderRadius], 79 | extrapolate: 'clamp', 80 | }) 81 | } 82 | 83 | _onHeaderHandlerStateChange = ({ nativeEvent }) => { 84 | if (nativeEvent.oldState === State.BEGAN) { 85 | this._lastScrollY.setValue(0) 86 | } 87 | 88 | this._onHandlerStateChange({ nativeEvent }) 89 | } 90 | 91 | shouldComponentUpdate(nextProps) { 92 | this.START = nextProps.snapPoints[0] 93 | this.AFTER_START = nextProps.snapPoints[1] 94 | this.END = nextProps.snapPoints[nextProps.snapPoints.length - 1] 95 | 96 | this._translateY = Animated.add( 97 | this._translateYOffset, 98 | Animated.add(this._dragY, this._reverseLastScrollY) 99 | ).interpolate({ 100 | inputRange: [this.START, this.END], 101 | outputRange: [this.START, this.END], 102 | extrapolate: 'clamp' 103 | }) 104 | 105 | return true 106 | } 107 | 108 | snapTo = (value) => { 109 | Animated.spring(this._translateYOffset, { 110 | tension: 68, 111 | friction: 12, 112 | toValue: value, 113 | useNativeDriver: this.props.nativeDriver, 114 | }).start(() => { 115 | this.setState({ lastSnap: value }) 116 | }) 117 | } 118 | 119 | _onHandlerStateChange = ({ nativeEvent }) => { 120 | if (nativeEvent.oldState === State.ACTIVE) { 121 | let { velocityY, translationY } = nativeEvent 122 | translationY -= this._lastScrollYValue 123 | const dragToss = 0.05 124 | const endOffsetY = this.state.lastSnap + translationY + dragToss * velocityY 125 | 126 | let destSnapPoint = this.props.snapPoints[0] 127 | 128 | for (let i = 0; i < this.props.snapPoints.length; i++) { 129 | const snapPoint = this.props.snapPoints[i] 130 | const distFromSnap = Math.abs(snapPoint - endOffsetY) 131 | if (distFromSnap < Math.abs(destSnapPoint - endOffsetY)) { 132 | destSnapPoint = snapPoint 133 | } 134 | } 135 | 136 | this.setState({ lastSnap: destSnapPoint }) 137 | this._translateYOffset.extractOffset() 138 | this._translateYOffset.setValue(translationY) 139 | this._translateYOffset.flattenOffset() 140 | this._dragY.setValue(0) 141 | 142 | Animated.spring(this._translateYOffset, { 143 | velocity: velocityY, 144 | tension: 68, 145 | friction: 12, 146 | toValue: destSnapPoint, 147 | useNativeDriver: this.props.nativeDriver, 148 | }).start() 149 | } 150 | } 151 | 152 | render() { 153 | return ( 154 | 158 | 159 | 169 | 175 | 185 | 189 | { 191 | this.scrollView = ref 192 | this.props.setScrollViewRef(ref) 193 | }} 194 | style={this.props.scrollStyle} 195 | bounces={this.state.bounces} 196 | onScrollBeginDrag={this._onRegisterLastScroll} 197 | scrollEventThrottle={16}> 198 | {this.props.renderContent()} 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | ) 207 | } 208 | } 209 | 210 | BottomSheet.defaultProps = { 211 | bounces: true, 212 | nativeDriver: true, 213 | animateBorder: false, 214 | corderRadius: 20 215 | } 216 | 217 | export default class BottomSheetContainer extends Component { 218 | bottomSheet = React.createRef() 219 | scrollView = React.createRef() 220 | 221 | snapTo = (value) => { 222 | this.bottomSheet.snapTo(value) 223 | } 224 | 225 | setScrollViewRef = (ref) => { 226 | this.scrollView = ref 227 | } 228 | 229 | render() { 230 | return ( 231 | 232 | { 234 | this.bottomSheet = ref 235 | }} 236 | setScrollViewRef={this.setScrollViewRef} 237 | {...this.props} 238 | /> 239 | 240 | ) 241 | } 242 | } 243 | 244 | 245 | 246 | const styles = StyleSheet.create({ 247 | container: { 248 | flex: 1, 249 | } 250 | }) -------------------------------------------------------------------------------- /lib/components/navigation/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect, useRef } from 'react' 2 | import { View, Dimensions, Animated, Alert, StatusBar } from 'react-native' 3 | import PopUp from './pop_up' 4 | 5 | const { width, height } = Dimensions.get('window') 6 | 7 | const Navigator = (props) => { 8 | const [popUpScreen, setPopUpScreen] = useState(null) 9 | const background = new Animated.Value(0) 10 | const backgroundRef = useRef(background) 11 | let popupRef = useRef(React.createRef()) 12 | 13 | const { pages } = props 14 | const initPage = pages.find(page => page.init) || pages[0] 15 | 16 | const scale = backgroundRef.current.interpolate({ 17 | inputRange: [0, 1], 18 | outputRange: [1, 0.9], 19 | extrapolate: 'clamp' 20 | }) 21 | 22 | const border = backgroundRef.current.interpolate({ 23 | inputRange: [0, 1], 24 | outputRange: [0, 12], 25 | extrapolate: 'clamp', 26 | }) 27 | 28 | const animateBackground = (value) => { 29 | Animated.spring(backgroundRef.current, { 30 | toValue: 1, 31 | tension: 68, 32 | friction: 12, 33 | toValue: value, 34 | useNativeDriver: true 35 | }).start() 36 | } 37 | 38 | useEffect(() => { 39 | if (popUpScreen != null) { 40 | animateBackground(1) 41 | } else { 42 | animateBackground(0) 43 | } 44 | }, [popUpScreen]) 45 | 46 | present = (name, params = {}) => { 47 | const presentPage = pages.find(page => page.name === name) 48 | setPopUpScreen({ name: presentPage.name, props: { ...presentPage.props, ...params } }) 49 | } 50 | 51 | dismiss = (animted = false) => { 52 | if (animted) { 53 | popupRef.current.snapTo(height) 54 | } 55 | 56 | setTimeout(() => { 57 | setPopUpScreen(null) 58 | }, animted ? 150 : 0) 59 | 60 | } 61 | 62 | renderInitPage = () => { 63 | return React.createElement(initPage.screen, { ...initPage.props, present, dismiss }) 64 | } 65 | 66 | renderPopUp = () => { 67 | if (!popUpScreen) { 68 | return null 69 | } 70 | 71 | const page = pages.find(p => p.name === popUpScreen.name) 72 | 73 | const renderContent = () => { 74 | return React.createElement(page.screen, { ...popUpScreen.props, dismiss }) 75 | } 76 | 77 | return ( 78 | 79 | 80 | 87 | 88 | ) 89 | } 90 | 91 | return ( 92 | 93 | 94 | 104 | {renderInitPage()} 105 | 106 | {renderPopUp()} 107 | 108 | ) 109 | } 110 | 111 | export default Navigator -------------------------------------------------------------------------------- /lib/components/navigation/pop_up.js: -------------------------------------------------------------------------------- 1 | import React, { Component, useRef } from 'react' 2 | import { Animated, StyleSheet, View, Dimensions } from 'react-native' 3 | import { 4 | PanGestureHandler, 5 | NativeViewGestureHandler, 6 | State, 7 | TapGestureHandler, 8 | } from 'react-native-gesture-handler' 9 | 10 | const { width, height } = Dimensions.get('window') 11 | 12 | export class BottomSheet extends Component { 13 | masterdrawer = React.createRef() 14 | drawer = React.createRef() 15 | drawerheader = React.createRef() 16 | scroll = React.createRef() 17 | scrollV = React.createRef() 18 | 19 | constructor(props) { 20 | super(props) 21 | const START = props.snapPoints[0] 22 | const AFTER_START = props.snapPoints[1] 23 | const END = props.snapPoints[props.snapPoints.length - 1] 24 | 25 | this.state = { 26 | lastSnap: START, 27 | bounces: props.bounces 28 | } 29 | 30 | this._lastScrollYValue = 0 31 | this._lastScrollY = new Animated.Value(0) 32 | this._onRegisterLastScroll = Animated.event( 33 | [{ nativeEvent: { contentOffset: { y: this._lastScrollY } } }], 34 | { useNativeDriver: props.nativeDriver } 35 | ) 36 | 37 | this._lastScrollY.addListener(({ value }) => { 38 | this._lastScrollYValue = value 39 | if (value <= 20) { 40 | this.setState({ bounces: false }) 41 | } else { 42 | this.setState({ bounces: true }) 43 | } 44 | }) 45 | 46 | this._dragY = new Animated.Value(0) 47 | 48 | this._onGestureEvent = Animated.event( 49 | [{ nativeEvent: { translationY: this._dragY } }], 50 | { useNativeDriver: props.nativeDriver } 51 | ) 52 | 53 | this._reverseLastScrollY = Animated.multiply( 54 | new Animated.Value(-1), 55 | this._lastScrollY 56 | ) 57 | 58 | this._translateYOffset = new Animated.Value(END) 59 | 60 | this._translateY = Animated.add( 61 | this._translateYOffset, 62 | Animated.add(this._dragY, this._reverseLastScrollY) 63 | ).interpolate({ 64 | inputRange: [START, END], 65 | outputRange: [START, END], 66 | extrapolate: 'clamp', 67 | }) 68 | 69 | this._radius = Animated.add( 70 | this._translateYOffset, 71 | Animated.add(this._dragY, this._reverseLastScrollY) 72 | ).interpolate({ 73 | inputRange: [START, AFTER_START / 2], 74 | outputRange: [0, props.corderRadius], 75 | extrapolate: 'clamp', 76 | }) 77 | } 78 | _onHeaderHandlerStateChange = ({ nativeEvent }) => { 79 | if (nativeEvent.oldState === State.BEGAN) { 80 | this._lastScrollY.setValue(0) 81 | } 82 | 83 | this._onHandlerStateChange({ nativeEvent }) 84 | } 85 | 86 | componentDidMount() { 87 | this.snapTo(this.props.snapPoints[0]) 88 | } 89 | 90 | snapTo = (value) => { 91 | Animated.spring(this._translateYOffset, { 92 | tension: 68, 93 | friction: 12, 94 | toValue: value, 95 | useNativeDriver: this.props.nativeDriver, 96 | }).start(() => { 97 | this.setState({ lastSnap: value }) 98 | }) 99 | } 100 | 101 | _onHandlerStateChange = ({ nativeEvent }) => { 102 | if (nativeEvent.oldState === State.ACTIVE) { 103 | let { velocityY, translationY } = nativeEvent 104 | translationY -= this._lastScrollYValue 105 | const dragToss = 0.05 106 | const endOffsetY = this.state.lastSnap + translationY + dragToss * velocityY 107 | 108 | let destSnapPoint = this.props.snapPoints[0] 109 | 110 | for (let i = 0; i < this.props.snapPoints.length; i++) { 111 | const snapPoint = this.props.snapPoints[i] 112 | const distFromSnap = Math.abs(snapPoint - endOffsetY) 113 | if (distFromSnap < Math.abs(destSnapPoint - endOffsetY)) { 114 | destSnapPoint = snapPoint 115 | } 116 | } 117 | 118 | this.setState({ lastSnap: destSnapPoint }) 119 | this._translateYOffset.extractOffset() 120 | this._translateYOffset.setValue(translationY) 121 | this._translateYOffset.flattenOffset() 122 | this._dragY.setValue(0) 123 | 124 | Animated.spring(this._translateYOffset, { 125 | velocity: velocityY, 126 | tension: 68, 127 | friction: 12, 128 | toValue: destSnapPoint, 129 | useNativeDriver: this.props.nativeDriver, 130 | }).start(() => { 131 | }) 132 | 133 | setTimeout(() => { 134 | if (destSnapPoint >= this.props.snapPoints[this.props.snapPoints.length - 1] - 50) { 135 | this.props.dismiss() 136 | } 137 | }, 150) 138 | } 139 | } 140 | 141 | render() { 142 | return ( 143 | 147 | 148 | 156 | 162 | 177 | 181 | { this.scrollV = ref}} 183 | style={this.props.scrollStyle} 184 | bounces={this.state.bounces} 185 | onScrollBeginDrag={this._onRegisterLastScroll} 186 | scrollEventThrottle={16}> 187 | {this.props.renderContent()} 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | ) 196 | } 197 | } 198 | 199 | BottomSheet.defaultProps = { 200 | bounces: true, 201 | nativeDriver: true, 202 | animateBorder: false, 203 | corderRadius: 20 204 | } 205 | 206 | export default class BottomSheetContainer extends Component { 207 | bottomSheet = React.createRef() 208 | 209 | snapTo = (value) => { 210 | this.bottomSheet.snapTo(value) 211 | } 212 | 213 | render() { 214 | return ( 215 | 216 | { this.bottomSheet = ref }} {...this.props} /> 217 | 218 | ) 219 | } 220 | } 221 | 222 | 223 | 224 | const styles = StyleSheet.create({ 225 | container: { 226 | flex: 1, 227 | } 228 | }) -------------------------------------------------------------------------------- /lib/components/navigation/pop_up.next.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import { Animated, StyleSheet, View, Dimensions, Easing } from 'react-native' 3 | import { 4 | PanGestureHandler, 5 | NativeViewGestureHandler, 6 | State, 7 | TapGestureHandler, 8 | } from 'react-native-gesture-handler' 9 | 10 | const { width, height } = Dimensions.get('window') 11 | 12 | const EPSILON = 1e-9 13 | 14 | const easeIn = Easing.bezier(0.42, 0, 1, 1, EPSILON) 15 | const easeOut = Easing.bezier(0, 0, 0.58, 1, EPSILON) 16 | const easeInOut = Easing.bezier(0.42, 0, 0.58, 1, EPSILON) 17 | const def = Easing.bezier(0.25, 0.1, 0.25, 1, EPSILON) 18 | 19 | export default class PopUp extends Component { 20 | masterdrawer = React.createRef() 21 | drawer = React.createRef() 22 | drawerheader = React.createRef() 23 | scroll = React.createRef() 24 | scrollV = React.createRef() 25 | 26 | constructor(props) { 27 | super(props) 28 | const START = props.snapPoints[0] 29 | const AFTER_START = props.snapPoints[1] 30 | const END = props.snapPoints[props.snapPoints.length - 1] 31 | 32 | this.state = { 33 | lastSnap: END, 34 | bounces: props.bounces 35 | } 36 | 37 | this._lastScrollYValue = props._lastScrollYValue 38 | this._lastScrollY = props._lastScrollY 39 | 40 | this._onRegisterLastScroll = Animated.event( 41 | [{ nativeEvent: { contentOffset: { y: this._lastScrollY } } }], 42 | { useNativeDriver: props.nativeDriver } 43 | ) 44 | 45 | this._lastScrollY.addListener(({ value }) => { 46 | this._lastScrollYValue = value 47 | if (value <= 20) { 48 | this.setState({ bounces: false }) 49 | } else { 50 | this.setState({ bounces: true }) 51 | } 52 | }) 53 | 54 | this._dragY = props._dragY 55 | 56 | this._onGestureEvent = Animated.event( 57 | [{ nativeEvent: { translationY: this._dragY } }], 58 | { useNativeDriver: props.nativeDriver } 59 | ) 60 | 61 | this._reverseLastScrollY = Animated.multiply( 62 | new Animated.Value(-1), 63 | this._lastScrollY 64 | ) 65 | 66 | this._translateYOffset = props._translateYOffset 67 | 68 | this._translateY = Animated.add( 69 | this._translateYOffset, 70 | Animated.add(this._dragY, this._reverseLastScrollY) 71 | ).interpolate({ 72 | inputRange: [START, END], 73 | outputRange: [START, END], 74 | extrapolate: 'clamp', 75 | }) 76 | 77 | this._radius = Animated.add( 78 | this._translateYOffset, 79 | Animated.add(this._dragY, this._reverseLastScrollY) 80 | ).interpolate({ 81 | inputRange: [START, AFTER_START / 12], 82 | outputRange: [0, props.cornerRadius], 83 | extrapolate: 'clamp', 84 | }) 85 | } 86 | 87 | componentDidMount() { 88 | // this.snapTo(this.props.snapPoints[0]) 89 | } 90 | 91 | _onHeaderHandlerStateChange = ({ nativeEvent }) => { 92 | if (nativeEvent.oldState === State.BEGAN) { 93 | this._lastScrollY.setValue(0) 94 | } 95 | 96 | this._onHandlerStateChange({ nativeEvent }) 97 | } 98 | 99 | snapTo = (value) => { 100 | Animated.timing(this._translateYOffset, { 101 | // velocity: 0, 102 | // overshootClamping: true, 103 | // tension: 68, 104 | // friction: 12, 105 | duration: 250, 106 | toValue: value, 107 | easing: def, 108 | useNativeDriver: this.props.nativeDriver, 109 | }).start(() => { 110 | this.setState({ lastSnap: value }) 111 | }) 112 | } 113 | 114 | _onHandlerStateChange = ({ nativeEvent }) => { 115 | if (nativeEvent.oldState === State.ACTIVE) { 116 | let { velocityY, translationY } = nativeEvent 117 | translationY -= this._lastScrollYValue 118 | const dragToss = 0.05 119 | const endOffsetY = this.state.lastSnap + translationY + dragToss * velocityY 120 | 121 | let destSnapPoint = this.props.snapPoints[0] 122 | 123 | for (let i = 0; i < this.props.snapPoints.length; i++) { 124 | const snapPoint = this.props.snapPoints[i] 125 | const distFromSnap = Math.abs(snapPoint - endOffsetY) 126 | if (distFromSnap < Math.abs(destSnapPoint - endOffsetY)) { 127 | destSnapPoint = snapPoint 128 | } 129 | } 130 | 131 | this.setState({ lastSnap: destSnapPoint }) 132 | this._translateYOffset.extractOffset() 133 | this._translateYOffset.setValue(translationY) 134 | this._translateYOffset.flattenOffset() 135 | this._dragY.setValue(0) 136 | 137 | Animated.spring(this._translateYOffset, { 138 | velocity: velocityY, 139 | tension: 68, 140 | friction: 12, 141 | toValue: destSnapPoint, 142 | useNativeDriver: this.props.nativeDriver, 143 | }).start(() => { 144 | if (this.state.lastSnap === this.props.snapPoints[this.props.snapPoints.length - 1]) { 145 | this.props.dismiss() 146 | } 147 | }) 148 | } 149 | } 150 | 151 | render() { 152 | return ( 153 | 157 | 158 | 166 | 172 | 187 | 191 | { this.scrollV = ref}} 193 | style={this.props.scrollStyle} 194 | bounces={this.state.bounces} 195 | contentContainerStyle={{ minWidth: width, minHeight: height }} 196 | onScrollBeginDrag={this._onRegisterLastScroll} 197 | scrollEventThrottle={16}> 198 | {this.props.renderContent()} 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | ) 207 | } 208 | } 209 | 210 | PopUp.defaultProps = { 211 | bounces: true, 212 | nativeDriver: true, 213 | animateBorder: false, 214 | cornerRadius: 20 215 | } 216 | 217 | 218 | const styles = StyleSheet.create({ 219 | container: { 220 | flex: 1, 221 | }, 222 | header: { 223 | backgroundColor: 'red', 224 | }, 225 | }) -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | import BottomSheet from './components/bottom_sheet' 2 | import Navigator from './components/navigation' 3 | 4 | export { 5 | BottomSheet, 6 | Navigator 7 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-popup-navigation", 3 | "version": "0.2.0", 4 | "description": "popup navigation", 5 | "main": "src/commonjs/index.js", 6 | "module": "src/module/index.js", 7 | "repository": { 8 | "type": "git", 9 | "url": "git+https://github.com/mnshkv/react-native-popup-navigation.git" 10 | }, 11 | "author": "mnshkv", 12 | "license": "MIT", 13 | "scripts": { 14 | "build": "bob build" 15 | }, 16 | "keywords": [ 17 | "react-native", 18 | "popup", 19 | "navigation", 20 | "nav", 21 | "pop-up", 22 | "slide-up", 23 | "rn" 24 | ], 25 | "files": [ 26 | "lib/", 27 | "src/", 28 | "README.md" 29 | ], 30 | "peerDependencies": { 31 | "react": "*", 32 | "react-native": "*", 33 | "react-native-gesture-handler": "*" 34 | }, 35 | "devDependencies": { 36 | "@react-native-community/bob": "^0.7.0" 37 | }, 38 | "@react-native-community/bob": { 39 | "source": "lib", 40 | "output": "src", 41 | "targets": [ 42 | ["commonjs", {"flow": true}], 43 | "module" 44 | ] 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/commonjs/components/bottom_sheet/index.js: -------------------------------------------------------------------------------- 1 | var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");Object.defineProperty(exports,"__esModule",{value:true});exports.default=exports.BottomSheet=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf3=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _reactNativeGestureHandler=require("react-native-gesture-handler");var _jsxFileName="/Users/mnshkv/develop/opensource/popupNavigation/lib/components/bottom_sheet/index.js";var _Dimensions$get=_reactNative.Dimensions.get('window'),width=_Dimensions$get.width,height=_Dimensions$get.height;var BottomSheet=function(_Component){(0,_inherits2.default)(BottomSheet,_Component);function BottomSheet(props){var _this;(0,_classCallCheck2.default)(this,BottomSheet);_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf3.default)(BottomSheet).call(this,props));_this.masterdrawer=_react.default.createRef();_this.drawer=_react.default.createRef();_this.drawerheader=_react.default.createRef();_this.scroll=_react.default.createRef();_this.scrollView=_react.default.createRef();_this._onHeaderHandlerStateChange=function(_ref){var nativeEvent=_ref.nativeEvent;if(nativeEvent.oldState===_reactNativeGestureHandler.State.BEGAN){_this._lastScrollY.setValue(0);}_this._onHandlerStateChange({nativeEvent:nativeEvent});};_this.snapTo=function(value){_reactNative.Animated.spring(_this._translateYOffset,{tension:68,friction:12,toValue:value,useNativeDriver:_this.props.nativeDriver}).start(function(){_this.setState({lastSnap:value});});};_this._onHandlerStateChange=function(_ref2){var nativeEvent=_ref2.nativeEvent;if(nativeEvent.oldState===_reactNativeGestureHandler.State.ACTIVE){var velocityY=nativeEvent.velocityY,translationY=nativeEvent.translationY;translationY-=_this._lastScrollYValue;var dragToss=0.05;var endOffsetY=_this.state.lastSnap+translationY+dragToss*velocityY;var destSnapPoint=_this.props.snapPoints[0];for(var i=0;i<_this.props.snapPoints.length;i++){var snapPoint=_this.props.snapPoints[i];var distFromSnap=Math.abs(snapPoint-endOffsetY);if(distFromSnap { 42 | this._lastScrollYValue = value 43 | if (value <= 20 && props.bounces) { 44 | this.setState({ bounces: false }) 45 | } else { 46 | this.setState({ bounces: true }) 47 | } 48 | }) 49 | 50 | this._dragY = new Animated.Value(0) 51 | 52 | this._onGestureEvent = Animated.event( 53 | [{ nativeEvent: { translationY: this._dragY } }], 54 | { useNativeDriver: props.nativeDriver } 55 | ) 56 | 57 | this._reverseLastScrollY = Animated.multiply( 58 | new Animated.Value(-1), 59 | this._lastScrollY 60 | ) 61 | 62 | this._translateYOffset = new Animated.Value(this.END) 63 | 64 | this._translateY = Animated.add( 65 | this._translateYOffset, 66 | Animated.add(this._dragY, this._reverseLastScrollY) 67 | ).interpolate({ 68 | inputRange: [this.START, this.END], 69 | outputRange: [this.START, this.END], 70 | extrapolate: 'clamp' 71 | }) 72 | 73 | this._radius = Animated.add( 74 | this._translateYOffset, 75 | Animated.add(this._dragY, this._reverseLastScrollY) 76 | ).interpolate({ 77 | inputRange: [this.START, this.AFTER_START / 2], 78 | outputRange: [0, props.corderRadius], 79 | extrapolate: 'clamp', 80 | }) 81 | } 82 | 83 | _onHeaderHandlerStateChange = ({ nativeEvent }) => { 84 | if (nativeEvent.oldState === State.BEGAN) { 85 | this._lastScrollY.setValue(0) 86 | } 87 | 88 | this._onHandlerStateChange({ nativeEvent }) 89 | } 90 | 91 | shouldComponentUpdate(nextProps) { 92 | this.START = nextProps.snapPoints[0] 93 | this.AFTER_START = nextProps.snapPoints[1] 94 | this.END = nextProps.snapPoints[nextProps.snapPoints.length - 1] 95 | 96 | this._translateY = Animated.add( 97 | this._translateYOffset, 98 | Animated.add(this._dragY, this._reverseLastScrollY) 99 | ).interpolate({ 100 | inputRange: [this.START, this.END], 101 | outputRange: [this.START, this.END], 102 | extrapolate: 'clamp' 103 | }) 104 | 105 | return true 106 | } 107 | 108 | snapTo = (value) => { 109 | Animated.spring(this._translateYOffset, { 110 | tension: 68, 111 | friction: 12, 112 | toValue: value, 113 | useNativeDriver: this.props.nativeDriver, 114 | }).start(() => { 115 | this.setState({ lastSnap: value }) 116 | }) 117 | } 118 | 119 | _onHandlerStateChange = ({ nativeEvent }) => { 120 | if (nativeEvent.oldState === State.ACTIVE) { 121 | let { velocityY, translationY } = nativeEvent 122 | translationY -= this._lastScrollYValue 123 | const dragToss = 0.05 124 | const endOffsetY = this.state.lastSnap + translationY + dragToss * velocityY 125 | 126 | let destSnapPoint = this.props.snapPoints[0] 127 | 128 | for (let i = 0; i < this.props.snapPoints.length; i++) { 129 | const snapPoint = this.props.snapPoints[i] 130 | const distFromSnap = Math.abs(snapPoint - endOffsetY) 131 | if (distFromSnap < Math.abs(destSnapPoint - endOffsetY)) { 132 | destSnapPoint = snapPoint 133 | } 134 | } 135 | 136 | this.setState({ lastSnap: destSnapPoint }) 137 | this._translateYOffset.extractOffset() 138 | this._translateYOffset.setValue(translationY) 139 | this._translateYOffset.flattenOffset() 140 | this._dragY.setValue(0) 141 | 142 | Animated.spring(this._translateYOffset, { 143 | velocity: velocityY, 144 | tension: 68, 145 | friction: 12, 146 | toValue: destSnapPoint, 147 | useNativeDriver: this.props.nativeDriver, 148 | }).start() 149 | } 150 | } 151 | 152 | render() { 153 | return ( 154 | 158 | 159 | 169 | 175 | 185 | 189 | { 191 | this.scrollView = ref 192 | this.props.setScrollViewRef(ref) 193 | }} 194 | style={this.props.scrollStyle} 195 | bounces={this.state.bounces} 196 | onScrollBeginDrag={this._onRegisterLastScroll} 197 | scrollEventThrottle={16}> 198 | {this.props.renderContent()} 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | ) 207 | } 208 | } 209 | 210 | BottomSheet.defaultProps = { 211 | bounces: true, 212 | nativeDriver: true, 213 | animateBorder: false, 214 | corderRadius: 20 215 | } 216 | 217 | export default class BottomSheetContainer extends Component { 218 | bottomSheet = React.createRef() 219 | scrollView = React.createRef() 220 | 221 | snapTo = (value) => { 222 | this.bottomSheet.snapTo(value) 223 | } 224 | 225 | setScrollViewRef = (ref) => { 226 | this.scrollView = ref 227 | } 228 | 229 | render() { 230 | return ( 231 | 232 | { 234 | this.bottomSheet = ref 235 | }} 236 | setScrollViewRef={this.setScrollViewRef} 237 | {...this.props} 238 | /> 239 | 240 | ) 241 | } 242 | } 243 | 244 | 245 | 246 | const styles = StyleSheet.create({ 247 | container: { 248 | flex: 1, 249 | } 250 | }) -------------------------------------------------------------------------------- /src/commonjs/components/bottom_sheet/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["index.js"],"names":["Dimensions","get","width","height","BottomSheet","props","masterdrawer","React","createRef","drawer","drawerheader","scroll","scrollView","_onHeaderHandlerStateChange","nativeEvent","oldState","State","BEGAN","_lastScrollY","setValue","_onHandlerStateChange","snapTo","value","Animated","spring","_translateYOffset","tension","friction","toValue","useNativeDriver","nativeDriver","start","setState","lastSnap","ACTIVE","velocityY","translationY","_lastScrollYValue","dragToss","endOffsetY","state","destSnapPoint","snapPoints","i","length","snapPoint","distFromSnap","Math","abs","extractOffset","flattenOffset","_dragY","velocity","START","AFTER_START","END","bounces","Value","_onRegisterLastScroll","event","contentOffset","y","addListener","_onGestureEvent","_reverseLastScrollY","multiply","_translateY","add","interpolate","inputRange","outputRange","extrapolate","_radius","corderRadius","nextProps","Platform","OS","StyleSheet","absoluteFillObject","transform","translateY","style","styles","container","animateBorder","overflow","borderTopLeftRadius","borderTopRightRadius","ref","setScrollViewRef","scrollStyle","renderContent","Component","defaultProps","BottomSheetContainer","bottomSheet","position","top","left","create","flex"],"mappings":"szBAAA,qDACA,yCACA,uE,6HAO0BA,wBAAWC,GAAX,CAAe,QAAf,C,CAAlBC,K,iBAAAA,K,CAAOC,M,iBAAAA,M,IAEFC,CAAAA,W,qEAUX,qBAAYC,KAAZ,CAAmB,0DACjB,uGAAMA,KAAN,GADiB,MATnBC,YASmB,CATJC,eAAMC,SAAN,EASI,OARnBC,MAQmB,CARVF,eAAMC,SAAN,EAQU,OAPnBE,YAOmB,CAPJH,eAAMC,SAAN,EAOI,OANnBG,MAMmB,CANVJ,eAAMC,SAAN,EAMU,OALnBI,UAKmB,CALNL,eAAMC,SAAN,EAKM,OA6DnBK,2BA7DmB,CA6DW,cAAqB,IAAlBC,CAAAA,WAAkB,MAAlBA,WAAkB,CACjD,GAAIA,WAAW,CAACC,QAAZ,GAAyBC,iCAAMC,KAAnC,CAA0C,CACxC,MAAKC,YAAL,CAAkBC,QAAlB,CAA2B,CAA3B,EACD,CAED,MAAKC,qBAAL,CAA2B,CAAEN,WAAW,CAAXA,WAAF,CAA3B,EACD,CAnEkB,OAsFnBO,MAtFmB,CAsFV,SAACC,KAAD,CAAW,CAClBC,sBAASC,MAAT,CAAgB,MAAKC,iBAArB,CAAwC,CACtCC,OAAO,CAAE,EAD6B,CAEtCC,QAAQ,CAAE,EAF4B,CAGtCC,OAAO,CAAEN,KAH6B,CAItCO,eAAe,CAAE,MAAKxB,KAAL,CAAWyB,YAJU,CAAxC,EAKGC,KALH,CAKS,UAAM,CACb,MAAKC,QAAL,CAAc,CAAEC,QAAQ,CAAEX,KAAZ,CAAd,EACD,CAPD,EAQD,CA/FkB,OAiGnBF,qBAjGmB,CAiGK,eAAqB,IAAlBN,CAAAA,WAAkB,OAAlBA,WAAkB,CAC3C,GAAIA,WAAW,CAACC,QAAZ,GAAyBC,iCAAMkB,MAAnC,CAA2C,IACnCC,CAAAA,SADmC,CACPrB,WADO,CACnCqB,SADmC,CACxBC,YADwB,CACPtB,WADO,CACxBsB,YADwB,CAEzCA,YAAY,EAAI,MAAKC,iBAArB,CACA,GAAMC,CAAAA,QAAQ,CAAG,IAAjB,CACA,GAAMC,CAAAA,UAAU,CAAG,MAAKC,KAAL,CAAWP,QAAX,CAAsBG,YAAtB,CAAqCE,QAAQ,CAAGH,SAAnE,CAEA,GAAIM,CAAAA,aAAa,CAAG,MAAKpC,KAAL,CAAWqC,UAAX,CAAsB,CAAtB,CAApB,CAEA,IAAK,GAAIC,CAAAA,CAAC,CAAG,CAAb,CAAgBA,CAAC,CAAG,MAAKtC,KAAL,CAAWqC,UAAX,CAAsBE,MAA1C,CAAkDD,CAAC,EAAnD,CAAuD,CACrD,GAAME,CAAAA,SAAS,CAAG,MAAKxC,KAAL,CAAWqC,UAAX,CAAsBC,CAAtB,CAAlB,CACA,GAAMG,CAAAA,YAAY,CAAGC,IAAI,CAACC,GAAL,CAASH,SAAS,CAAGN,UAArB,CAArB,CACA,GAAIO,YAAY,CAAGC,IAAI,CAACC,GAAL,CAASP,aAAa,CAAGF,UAAzB,CAAnB,CAAyD,CACvDE,aAAa,CAAGI,SAAhB,CACD,CACF,CAED,MAAKb,QAAL,CAAc,CAAEC,QAAQ,CAAEQ,aAAZ,CAAd,EACA,MAAKhB,iBAAL,CAAuBwB,aAAvB,GACA,MAAKxB,iBAAL,CAAuBN,QAAvB,CAAgCiB,YAAhC,EACA,MAAKX,iBAAL,CAAuByB,aAAvB,GACA,MAAKC,MAAL,CAAYhC,QAAZ,CAAqB,CAArB,EAEAI,sBAASC,MAAT,CAAgB,MAAKC,iBAArB,CAAwC,CACtC2B,QAAQ,CAAEjB,SAD4B,CAEtCT,OAAO,CAAE,EAF6B,CAGtCC,QAAQ,CAAE,EAH4B,CAItCC,OAAO,CAAEa,aAJ6B,CAKtCZ,eAAe,CAAE,MAAKxB,KAAL,CAAWyB,YALU,CAAxC,EAMGC,KANH,GAOD,CACF,CAhIkB,CAGjB,MAAKsB,KAAL,CAAahD,KAAK,CAACqC,UAAN,CAAiB,CAAjB,CAAb,CACA,MAAKY,WAAL,CAAmBjD,KAAK,CAACqC,UAAN,CAAiB,CAAjB,CAAnB,CACA,MAAKa,GAAL,CAAYlD,KAAK,CAACqC,UAAN,CAAiBrC,KAAK,CAACqC,UAAN,CAAiBE,MAAjB,CAA0B,CAA3C,CAAZ,CAEA,MAAKJ,KAAL,CAAa,CACXP,QAAQ,CAAE,MAAKsB,GADJ,CAEXC,OAAO,CAAEnD,KAAK,CAACmD,OAFJ,CAAb,CAKA,MAAKnB,iBAAL,CAAyB,CAAzB,CACA,MAAKnB,YAAL,CAAoB,GAAIK,uBAASkC,KAAb,CAAmB,CAAnB,CAApB,CACA,MAAKC,qBAAL,CAA6BnC,sBAASoC,KAAT,CAC3B,CAAC,CAAE7C,WAAW,CAAE,CAAE8C,aAAa,CAAE,CAAEC,CAAC,CAAE,MAAK3C,YAAV,CAAjB,CAAf,CAAD,CAD2B,CAE3B,CAAEW,eAAe,CAAExB,KAAK,CAACyB,YAAzB,CAF2B,CAA7B,CAKA,MAAKZ,YAAL,CAAkB4C,WAAlB,CAA8B,eAAe,IAAZxC,CAAAA,KAAY,OAAZA,KAAY,CAC3C,MAAKe,iBAAL,CAAyBf,KAAzB,CACA,GAAIA,KAAK,EAAI,EAAT,EAAejB,KAAK,CAACmD,OAAzB,CAAkC,CAChC,MAAKxB,QAAL,CAAc,CAAEwB,OAAO,CAAE,KAAX,CAAd,EACD,CAFD,IAEO,CACL,MAAKxB,QAAL,CAAc,CAAEwB,OAAO,CAAE,IAAX,CAAd,EACD,CACF,CAPD,EASA,MAAKL,MAAL,CAAc,GAAI5B,uBAASkC,KAAb,CAAmB,CAAnB,CAAd,CAEA,MAAKM,eAAL,CAAuBxC,sBAASoC,KAAT,CACrB,CAAC,CAAE7C,WAAW,CAAE,CAAEsB,YAAY,CAAE,MAAKe,MAArB,CAAf,CAAD,CADqB,CAErB,CAAEtB,eAAe,CAAExB,KAAK,CAACyB,YAAzB,CAFqB,CAAvB,CAKA,MAAKkC,mBAAL,CAA2BzC,sBAAS0C,QAAT,CACzB,GAAI1C,uBAASkC,KAAb,CAAmB,CAAC,CAApB,CADyB,CAEzB,MAAKvC,YAFoB,CAA3B,CAKA,MAAKO,iBAAL,CAAyB,GAAIF,uBAASkC,KAAb,CAAmB,MAAKF,GAAxB,CAAzB,CAEA,MAAKW,WAAL,CAAmB3C,sBAAS4C,GAAT,CACjB,MAAK1C,iBADY,CAEjBF,sBAAS4C,GAAT,CAAa,MAAKhB,MAAlB,CAA0B,MAAKa,mBAA/B,CAFiB,EAGjBI,WAHiB,CAGL,CACZC,UAAU,CAAE,CAAC,MAAKhB,KAAN,CAAa,MAAKE,GAAlB,CADA,CAEZe,WAAW,CAAE,CAAC,MAAKjB,KAAN,CAAa,MAAKE,GAAlB,CAFD,CAGZgB,WAAW,CAAE,OAHD,CAHK,CAAnB,CASA,MAAKC,OAAL,CAAejD,sBAAS4C,GAAT,CACb,MAAK1C,iBADQ,CAEbF,sBAAS4C,GAAT,CAAa,MAAKhB,MAAlB,CAA0B,MAAKa,mBAA/B,CAFa,EAGbI,WAHa,CAGD,CACZC,UAAU,CAAE,CAAC,MAAKhB,KAAN,CAAa,MAAKC,WAAL,CAAmB,CAAhC,CADA,CAEZgB,WAAW,CAAE,CAAC,CAAD,CAAIjE,KAAK,CAACoE,YAAV,CAFD,CAGZF,WAAW,CAAE,OAHD,CAHC,CAAf,CAnDiB,aA2DlB,C,yGAUqBG,S,CAAW,CAC/B,KAAKrB,KAAL,CAAaqB,SAAS,CAAChC,UAAV,CAAqB,CAArB,CAAb,CACA,KAAKY,WAAL,CAAmBoB,SAAS,CAAChC,UAAV,CAAqB,CAArB,CAAnB,CACA,KAAKa,GAAL,CAAYmB,SAAS,CAAChC,UAAV,CAAqBgC,SAAS,CAAChC,UAAV,CAAqBE,MAArB,CAA8B,CAAnD,CAAZ,CAEA,KAAKsB,WAAL,CAAmB3C,sBAAS4C,GAAT,CACjB,KAAK1C,iBADY,CAEjBF,sBAAS4C,GAAT,CAAa,KAAKhB,MAAlB,CAA0B,KAAKa,mBAA/B,CAFiB,EAGjBI,WAHiB,CAGL,CACZC,UAAU,CAAE,CAAC,KAAKhB,KAAN,CAAa,KAAKE,GAAlB,CADA,CAEZe,WAAW,CAAE,CAAC,KAAKjB,KAAN,CAAa,KAAKE,GAAlB,CAFD,CAGZgB,WAAW,CAAE,OAHD,CAHK,CAAnB,CASA,MAAO,KAAP,CACD,C,uCA8CQ,iBACP,MACE,8BAAC,4CAAD,EACE,aAAa,CAAE,MADjB,CAEE,GAAG,CAAE,KAAKjE,YAFZ,CAGE,SAAS,CAAE,KAAKkC,KAAL,CAAWP,QAAX,CAAsB,KAAK5B,KAAL,CAAWqC,UAAX,CAAsB,CAAtB,CAHnC,kDAIE,6BAAC,iBAAD,EAAM,KAAK,CAAGiC,sBAASC,EAAT,GAAgB,KAAhB,EAAyBC,wBAAWC,kBAAlD,CAAsE,aAAa,CAAE,UAArF,kDACE,6BAAC,qBAAD,CAAU,IAAV,EACE,KAAK,CACH,CAAC,CACC5E,KAAK,CAALA,KADD,CAECC,MAAM,CAANA,MAFD,CAGC4E,SAAS,CAAE,CAAC,CAAEC,UAAU,CAAE,KAAKd,WAAnB,CAAD,CAHZ,CAAD,CAKA,KAAK7D,KAAL,CAAW4E,KALX,CAFJ,kDAUE,6BAAC,4CAAD,EACE,GAAG,CAAE,KAAKxE,MADZ,CAEE,oBAAoB,CAAE,CAAC,KAAKE,MAAN,CAAc,KAAKL,YAAnB,CAFxB,CAGE,uBAAuB,CAAE,KAH3B,CAIE,cAAc,CAAE,KAAKyD,eAJvB,CAKE,oBAAoB,CAAE,KAAK3C,qBAL7B,kDAME,6BAAC,qBAAD,CAAU,IAAV,EACE,KAAK,CAAE,CACL8D,MAAM,CAACC,SADF,CAEL,KAAK9E,KAAL,CAAW+E,aAAX,EAA4B,CAC1BC,QAAQ,CAAE,QADgB,CAE1BC,mBAAmB,CAAE,KAAKd,OAFA,CAG1Be,oBAAoB,CAAE,KAAKf,OAHD,CAFvB,CADT,kDAUE,6BAAC,mDAAD,EACE,GAAG,CAAE,KAAK7D,MADZ,CAEE,OAAO,CAAE,KAAKL,YAFhB,CAGE,oBAAoB,CAAE,KAAKG,MAH7B,kDAIE,6BAAC,qBAAD,CAAU,UAAV,EACE,GAAG,CAAE,aAAA+E,KAAG,CAAI,CACV,MAAI,CAAC5E,UAAL,CAAkB4E,KAAlB,CACA,MAAI,CAACnF,KAAL,CAAWoF,gBAAX,CAA4BD,KAA5B,EACD,CAJH,CAKE,KAAK,CAAE,KAAKnF,KAAL,CAAWqF,WALpB,CAME,OAAO,CAAE,KAAKlD,KAAL,CAAWgB,OANtB,CAOE,iBAAiB,CAAE,KAAKE,qBAP1B,CAQE,mBAAmB,CAAE,EARvB,kDASK,KAAKrD,KAAL,CAAWsF,aAAX,EATL,CAJF,CAVF,CANF,CAVF,CADF,CAJF,CADF,CAsDD,C,yBAnM8BC,gB,kCAsMjCxF,WAAW,CAACyF,YAAZ,CAA2B,CACzBrC,OAAO,CAAE,IADgB,CAEzB1B,YAAY,CAAE,IAFW,CAGzBsD,aAAa,CAAE,KAHU,CAIzBX,YAAY,CAAE,EAJW,CAA3B,C,GAOqBqB,CAAAA,oB,meACnBC,W,CAAcxF,eAAMC,SAAN,E,QACdI,U,CAAaL,eAAMC,SAAN,E,QAEba,M,CAAS,SAACC,KAAD,CAAW,CAClB,OAAKyE,WAAL,CAAiB1E,MAAjB,CAAwBC,KAAxB,EACD,C,QAEDmE,gB,CAAmB,SAACD,GAAD,CAAS,CAC1B,OAAK5E,UAAL,CAAkB4E,GAAlB,CACD,C,qGAEQ,iBACP,MACE,8BAAC,iBAAD,EAAM,KAAK,CAAE,CAACN,MAAM,CAACC,SAAR,CAAmB,CAAEa,QAAQ,CAAE,UAAZ,CAAwBC,GAAG,CAAE,CAA7B,CAAgCC,IAAI,CAAE,CAAtC,CAAnB,CAAb,kDACE,6BAAC,WAAD,wBACE,GAAG,CAAE,aAAAV,KAAG,CAAI,CACV,MAAI,CAACO,WAAL,CAAmBP,KAAnB,CACD,CAHH,CAIE,gBAAgB,CAAE,KAAKC,gBAJzB,EAKM,KAAKpF,KALX,oDADF,CADF,CAWD,C,kCAxB+CuF,gB,uCA6BlD,GAAMV,CAAAA,MAAM,CAAGL,wBAAWsB,MAAX,CAAkB,CAC/BhB,SAAS,CAAE,CACTiB,IAAI,CAAE,CADG,CADoB,CAAlB,CAAf","sourcesContent":["import React, { Component } from 'react'\nimport { Animated, StyleSheet, View, Dimensions, Platform } from 'react-native'\nimport {\n PanGestureHandler,\n NativeViewGestureHandler,\n State,\n TapGestureHandler,\n} from 'react-native-gesture-handler'\n\nconst { width, height } = Dimensions.get('window')\n\nexport class BottomSheet extends Component {\n masterdrawer = React.createRef()\n drawer = React.createRef()\n drawerheader = React.createRef()\n scroll = React.createRef()\n scrollView = React.createRef()\n START\n AFTER_START\n END\n\n constructor(props) {\n super(props)\n\n this.START = props.snapPoints[0]\n this.AFTER_START = props.snapPoints[1]\n this.END = props.snapPoints[props.snapPoints.length - 1]\n\n this.state = {\n lastSnap: this.END,\n bounces: props.bounces\n }\n\n this._lastScrollYValue = 0\n this._lastScrollY = new Animated.Value(0)\n this._onRegisterLastScroll = Animated.event(\n [{ nativeEvent: { contentOffset: { y: this._lastScrollY } } }],\n { useNativeDriver: props.nativeDriver }\n )\n\n this._lastScrollY.addListener(({ value }) => {\n this._lastScrollYValue = value\n if (value <= 20 && props.bounces) {\n this.setState({ bounces: false })\n } else { \n this.setState({ bounces: true })\n }\n })\n\n this._dragY = new Animated.Value(0)\n\n this._onGestureEvent = Animated.event(\n [{ nativeEvent: { translationY: this._dragY } }],\n { useNativeDriver: props.nativeDriver }\n )\n\n this._reverseLastScrollY = Animated.multiply(\n new Animated.Value(-1),\n this._lastScrollY\n )\n\n this._translateYOffset = new Animated.Value(this.END)\n\n this._translateY = Animated.add(\n this._translateYOffset,\n Animated.add(this._dragY, this._reverseLastScrollY)\n ).interpolate({\n inputRange: [this.START, this.END],\n outputRange: [this.START, this.END],\n extrapolate: 'clamp'\n })\n\n this._radius = Animated.add(\n this._translateYOffset,\n Animated.add(this._dragY, this._reverseLastScrollY)\n ).interpolate({\n inputRange: [this.START, this.AFTER_START / 2],\n outputRange: [0, props.corderRadius],\n extrapolate: 'clamp',\n })\n }\n\n _onHeaderHandlerStateChange = ({ nativeEvent }) => {\n if (nativeEvent.oldState === State.BEGAN) {\n this._lastScrollY.setValue(0)\n }\n\n this._onHandlerStateChange({ nativeEvent })\n }\n\n shouldComponentUpdate(nextProps) {\n this.START = nextProps.snapPoints[0]\n this.AFTER_START = nextProps.snapPoints[1]\n this.END = nextProps.snapPoints[nextProps.snapPoints.length - 1]\n\n this._translateY = Animated.add(\n this._translateYOffset,\n Animated.add(this._dragY, this._reverseLastScrollY)\n ).interpolate({\n inputRange: [this.START, this.END],\n outputRange: [this.START, this.END],\n extrapolate: 'clamp'\n })\n\n return true\n }\n\n snapTo = (value) => {\n Animated.spring(this._translateYOffset, {\n tension: 68,\n friction: 12,\n toValue: value,\n useNativeDriver: this.props.nativeDriver,\n }).start(() => {\n this.setState({ lastSnap: value })\n })\n }\n\n _onHandlerStateChange = ({ nativeEvent }) => {\n if (nativeEvent.oldState === State.ACTIVE) {\n let { velocityY, translationY } = nativeEvent\n translationY -= this._lastScrollYValue\n const dragToss = 0.05\n const endOffsetY = this.state.lastSnap + translationY + dragToss * velocityY\n\n let destSnapPoint = this.props.snapPoints[0]\n\n for (let i = 0; i < this.props.snapPoints.length; i++) {\n const snapPoint = this.props.snapPoints[i]\n const distFromSnap = Math.abs(snapPoint - endOffsetY)\n if (distFromSnap < Math.abs(destSnapPoint - endOffsetY)) {\n destSnapPoint = snapPoint\n }\n }\n\n this.setState({ lastSnap: destSnapPoint })\n this._translateYOffset.extractOffset()\n this._translateYOffset.setValue(translationY)\n this._translateYOffset.flattenOffset()\n this._dragY.setValue(0)\n\n Animated.spring(this._translateYOffset, {\n velocity: velocityY,\n tension: 68,\n friction: 12,\n toValue: destSnapPoint,\n useNativeDriver: this.props.nativeDriver,\n }).start()\n }\n }\n\n render() {\n return (\n \n \n \n \n \n \n { \n this.scrollView = ref\n this.props.setScrollViewRef(ref)\n }}\n style={this.props.scrollStyle}\n bounces={this.state.bounces}\n onScrollBeginDrag={this._onRegisterLastScroll}\n scrollEventThrottle={16}>\n {this.props.renderContent()}\n \n \n \n \n \n \n \n )\n }\n}\n\nBottomSheet.defaultProps = {\n bounces: true,\n nativeDriver: true,\n animateBorder: false,\n corderRadius: 20\n}\n\nexport default class BottomSheetContainer extends Component {\n bottomSheet = React.createRef()\n scrollView = React.createRef()\n\n snapTo = (value) => {\n this.bottomSheet.snapTo(value)\n }\n\n setScrollViewRef = (ref) => {\n this.scrollView = ref\n }\n\n render() {\n return (\n \n { \n this.bottomSheet = ref\n }}\n setScrollViewRef={this.setScrollViewRef}\n {...this.props} \n />\n \n )\n }\n}\n\n\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n }\n})"]} -------------------------------------------------------------------------------- /src/commonjs/components/navigation/index.js: -------------------------------------------------------------------------------- 1 | var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _pop_up=_interopRequireDefault(require("./pop_up"));var _jsxFileName="/Users/mnshkv/develop/opensource/popupNavigation/lib/components/navigation/index.js";function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i1&&arguments[1]!==undefined?arguments[1]:{};var presentPage=pages.find(function(page){return page.name===name;});setPopUpScreen({name:presentPage.name,props:_objectSpread({},presentPage.props,{},params)});};dismiss=function dismiss(){var animted=arguments.length>0&&arguments[0]!==undefined?arguments[0]:false;if(animted){popupRef.current.snapTo(height);}setTimeout(function(){setPopUpScreen(null);},animted?150:0);};renderInitPage=function renderInitPage(){return _react.default.createElement(initPage.screen,_objectSpread({},initPage.props,{present:present,dismiss:dismiss}));};renderPopUp=function renderPopUp(){if(!popUpScreen){return null;}var page=pages.find(function(p){return p.name===popUpScreen.name;});var renderContent=function renderContent(){return _react.default.createElement(page.screen,_objectSpread({},popUpScreen.props,{dismiss:dismiss}));};return _react.default.createElement(_reactNative.View,{style:[{flex:1,position:'absolute',top:0,left:0}],__source:{fileName:_jsxFileName,lineNumber:78}},_react.default.createElement(_reactNative.StatusBar,{backgroundColor:'#000',animated:true,barStyle:"light-content",__source:{fileName:_jsxFileName,lineNumber:79}}),_react.default.createElement(_pop_up.default,{ref:popupRef,snapPoints:page.snapPoints||[50,height],renderContent:renderContent,dismiss:dismiss,scrollStyle:page.popupStyle,__source:{fileName:_jsxFileName,lineNumber:80}}));};return _react.default.createElement(_reactNative.View,{style:{width:width,height:height,backgroundColor:'#000'},__source:{fileName:_jsxFileName,lineNumber:92}},_react.default.createElement(_reactNative.StatusBar,{backgroundColor:'#fff',animated:true,barStyle:"dark-content",__source:{fileName:_jsxFileName,lineNumber:93}}),_react.default.createElement(_reactNative.Animated.View,{style:{width:width,height:height,overflow:'hidden',transform:[{scale:scale}],backgroundColor:'#fff',borderRadius:border},__source:{fileName:_jsxFileName,lineNumber:94}},renderInitPage()),renderPopUp());};var _default=Navigator;exports.default=_default; 2 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /src/commonjs/components/navigation/index.js.flow: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect, useRef } from 'react' 2 | import { View, Dimensions, Animated, Alert, StatusBar } from 'react-native' 3 | import PopUp from './pop_up' 4 | 5 | const { width, height } = Dimensions.get('window') 6 | 7 | const Navigator = (props) => { 8 | const [popUpScreen, setPopUpScreen] = useState(null) 9 | const background = new Animated.Value(0) 10 | const backgroundRef = useRef(background) 11 | let popupRef = useRef(React.createRef()) 12 | 13 | const { pages } = props 14 | const initPage = pages.find(page => page.init) || pages[0] 15 | 16 | const scale = backgroundRef.current.interpolate({ 17 | inputRange: [0, 1], 18 | outputRange: [1, 0.9], 19 | extrapolate: 'clamp' 20 | }) 21 | 22 | const border = backgroundRef.current.interpolate({ 23 | inputRange: [0, 1], 24 | outputRange: [0, 12], 25 | extrapolate: 'clamp', 26 | }) 27 | 28 | const animateBackground = (value) => { 29 | Animated.spring(backgroundRef.current, { 30 | toValue: 1, 31 | tension: 68, 32 | friction: 12, 33 | toValue: value, 34 | useNativeDriver: true 35 | }).start() 36 | } 37 | 38 | useEffect(() => { 39 | if (popUpScreen != null) { 40 | animateBackground(1) 41 | } else { 42 | animateBackground(0) 43 | } 44 | }, [popUpScreen]) 45 | 46 | present = (name, params = {}) => { 47 | const presentPage = pages.find(page => page.name === name) 48 | setPopUpScreen({ name: presentPage.name, props: { ...presentPage.props, ...params } }) 49 | } 50 | 51 | dismiss = (animted = false) => { 52 | if (animted) { 53 | popupRef.current.snapTo(height) 54 | } 55 | 56 | setTimeout(() => { 57 | setPopUpScreen(null) 58 | }, animted ? 150 : 0) 59 | 60 | } 61 | 62 | renderInitPage = () => { 63 | return React.createElement(initPage.screen, { ...initPage.props, present, dismiss }) 64 | } 65 | 66 | renderPopUp = () => { 67 | if (!popUpScreen) { 68 | return null 69 | } 70 | 71 | const page = pages.find(p => p.name === popUpScreen.name) 72 | 73 | const renderContent = () => { 74 | return React.createElement(page.screen, { ...popUpScreen.props, dismiss }) 75 | } 76 | 77 | return ( 78 | 79 | 80 | 87 | 88 | ) 89 | } 90 | 91 | return ( 92 | 93 | 94 | 104 | {renderInitPage()} 105 | 106 | {renderPopUp()} 107 | 108 | ) 109 | } 110 | 111 | export default Navigator -------------------------------------------------------------------------------- /src/commonjs/components/navigation/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["index.js"],"names":["Dimensions","get","width","height","Navigator","props","popUpScreen","setPopUpScreen","background","Animated","Value","backgroundRef","popupRef","React","createRef","pages","initPage","find","page","init","scale","current","interpolate","inputRange","outputRange","extrapolate","border","animateBackground","value","spring","toValue","tension","friction","useNativeDriver","start","present","name","params","presentPage","dismiss","animted","snapTo","setTimeout","renderInitPage","createElement","screen","renderPopUp","p","renderContent","flex","position","top","left","snapPoints","popupStyle","backgroundColor","overflow","transform","borderRadius"],"mappings":"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","sourcesContent":["import React, { useState, useEffect, useRef } from 'react'\nimport { View, Dimensions, Animated, Alert, StatusBar } from 'react-native'\nimport PopUp from './pop_up'\n\nconst { width, height } = Dimensions.get('window')\n\nconst Navigator = (props) => {\n const [popUpScreen, setPopUpScreen] = useState(null)\n const background = new Animated.Value(0)\n const backgroundRef = useRef(background)\n let popupRef = useRef(React.createRef())\n\n const { pages } = props\n const initPage = pages.find(page => page.init) || pages[0]\n\n const scale = backgroundRef.current.interpolate({\n inputRange: [0, 1],\n outputRange: [1, 0.9],\n extrapolate: 'clamp'\n })\n\n const border = backgroundRef.current.interpolate({\n inputRange: [0, 1],\n outputRange: [0, 12],\n extrapolate: 'clamp',\n })\n\n const animateBackground = (value) => {\n Animated.spring(backgroundRef.current, {\n toValue: 1,\n tension: 68,\n friction: 12,\n toValue: value,\n useNativeDriver: true\n }).start()\n }\n\n useEffect(() => {\n if (popUpScreen != null) {\n animateBackground(1)\n } else {\n animateBackground(0)\n }\n }, [popUpScreen])\n\n present = (name, params = {}) => {\n const presentPage = pages.find(page => page.name === name)\n setPopUpScreen({ name: presentPage.name, props: { ...presentPage.props, ...params } })\n }\n\n dismiss = (animted = false) => {\n if (animted) {\n popupRef.current.snapTo(height)\n }\n\n setTimeout(() => {\n setPopUpScreen(null)\n }, animted ? 150 : 0)\n \n }\n\n renderInitPage = () => {\n return React.createElement(initPage.screen, { ...initPage.props, present, dismiss })\n }\n\n renderPopUp = () => {\n if (!popUpScreen) {\n return null \n }\n\n const page = pages.find(p => p.name === popUpScreen.name)\n\n const renderContent = () => {\n return React.createElement(page.screen, { ...popUpScreen.props, dismiss })\n }\n\n return (\n \n \n \n \n )\n }\n\n return (\n \n \n \n {renderInitPage()}\n \n {renderPopUp()}\n \n )\n}\n\nexport default Navigator"]} -------------------------------------------------------------------------------- /src/commonjs/components/navigation/pop_up.js: -------------------------------------------------------------------------------- 1 | var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");Object.defineProperty(exports,"__esModule",{value:true});exports.default=exports.BottomSheet=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf3=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _reactNativeGestureHandler=require("react-native-gesture-handler");var _jsxFileName="/Users/mnshkv/develop/opensource/popupNavigation/lib/components/navigation/pop_up.js";var _Dimensions$get=_reactNative.Dimensions.get('window'),width=_Dimensions$get.width,height=_Dimensions$get.height;var BottomSheet=function(_Component){(0,_inherits2.default)(BottomSheet,_Component);function BottomSheet(props){var _this;(0,_classCallCheck2.default)(this,BottomSheet);_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf3.default)(BottomSheet).call(this,props));_this.masterdrawer=_react.default.createRef();_this.drawer=_react.default.createRef();_this.drawerheader=_react.default.createRef();_this.scroll=_react.default.createRef();_this.scrollV=_react.default.createRef();_this._onHeaderHandlerStateChange=function(_ref){var nativeEvent=_ref.nativeEvent;if(nativeEvent.oldState===_reactNativeGestureHandler.State.BEGAN){_this._lastScrollY.setValue(0);}_this._onHandlerStateChange({nativeEvent:nativeEvent});};_this.snapTo=function(value){_reactNative.Animated.spring(_this._translateYOffset,{tension:68,friction:12,toValue:value,useNativeDriver:_this.props.nativeDriver}).start(function(){_this.setState({lastSnap:value});});};_this._onHandlerStateChange=function(_ref2){var nativeEvent=_ref2.nativeEvent;if(nativeEvent.oldState===_reactNativeGestureHandler.State.ACTIVE){var velocityY=nativeEvent.velocityY,translationY=nativeEvent.translationY;translationY-=_this._lastScrollYValue;var dragToss=0.05;var endOffsetY=_this.state.lastSnap+translationY+dragToss*velocityY;var destSnapPoint=_this.props.snapPoints[0];for(var i=0;i<_this.props.snapPoints.length;i++){var snapPoint=_this.props.snapPoints[i];var distFromSnap=Math.abs(snapPoint-endOffsetY);if(distFromSnap=_this.props.snapPoints[_this.props.snapPoints.length-1]-50){_this.props.dismiss();}},150);}};var START=props.snapPoints[0];var AFTER_START=props.snapPoints[1];var END=props.snapPoints[props.snapPoints.length-1];_this.state={lastSnap:START,bounces:props.bounces};_this._lastScrollYValue=0;_this._lastScrollY=new _reactNative.Animated.Value(0);_this._onRegisterLastScroll=_reactNative.Animated.event([{nativeEvent:{contentOffset:{y:_this._lastScrollY}}}],{useNativeDriver:props.nativeDriver});_this._lastScrollY.addListener(function(_ref3){var value=_ref3.value;_this._lastScrollYValue=value;if(value<=20){_this.setState({bounces:false});}else{_this.setState({bounces:true});}});_this._dragY=new _reactNative.Animated.Value(0);_this._onGestureEvent=_reactNative.Animated.event([{nativeEvent:{translationY:_this._dragY}}],{useNativeDriver:props.nativeDriver});_this._reverseLastScrollY=_reactNative.Animated.multiply(new _reactNative.Animated.Value(-1),_this._lastScrollY);_this._translateYOffset=new _reactNative.Animated.Value(END);_this._translateY=_reactNative.Animated.add(_this._translateYOffset,_reactNative.Animated.add(_this._dragY,_this._reverseLastScrollY)).interpolate({inputRange:[START,END],outputRange:[START,END],extrapolate:'clamp'});_this._radius=_reactNative.Animated.add(_this._translateYOffset,_reactNative.Animated.add(_this._dragY,_this._reverseLastScrollY)).interpolate({inputRange:[START,AFTER_START/2],outputRange:[0,props.corderRadius],extrapolate:'clamp'});return _this;}(0,_createClass2.default)(BottomSheet,[{key:"componentDidMount",value:function componentDidMount(){this.snapTo(this.props.snapPoints[0]);}},{key:"render",value:function render(){var _this2=this;return _react.default.createElement(_reactNativeGestureHandler.TapGestureHandler,{maxDurationMs:100000,ref:this.masterdrawer,maxDeltaY:this.state.lastSnap-this.props.snapPoints[0],__source:{fileName:_jsxFileName,lineNumber:143}},_react.default.createElement(_reactNative.View,{style:_reactNative.StyleSheet.absoluteFillObject,pointerEvents:"box-none",__source:{fileName:_jsxFileName,lineNumber:147}},_react.default.createElement(_reactNative.Animated.View,{style:{width:width,height:height,transform:[{translateY:this._translateY}]},__source:{fileName:_jsxFileName,lineNumber:148}},_react.default.createElement(_reactNativeGestureHandler.PanGestureHandler,{ref:this.drawer,simultaneousHandlers:[this.scroll,this.masterdrawer],shouldCancelWhenOutside:false,onGestureEvent:this._onGestureEvent,onHandlerStateChange:this._onHandlerStateChange,__source:{fileName:_jsxFileName,lineNumber:156}},_react.default.createElement(_reactNative.Animated.View,{style:[styles.container,this.props.animateBorder&&{overflow:'hidden',borderTopLeftRadius:this._radius,borderTopRightRadius:this._radius},!this.props.animateBorder&&{overflow:'hidden',borderTopLeftRadius:this.props.corderRadius,borderTopRightRadius:this.props.corderRadius}],__source:{fileName:_jsxFileName,lineNumber:162}},_react.default.createElement(_reactNativeGestureHandler.NativeViewGestureHandler,{ref:this.scroll,waitFor:this.masterdrawer,simultaneousHandlers:this.drawer,__source:{fileName:_jsxFileName,lineNumber:177}},_react.default.createElement(_reactNative.Animated.ScrollView,{ref:function ref(_ref4){_this2.scrollV=_ref4;},style:this.props.scrollStyle,bounces:this.state.bounces,onScrollBeginDrag:this._onRegisterLastScroll,scrollEventThrottle:16,__source:{fileName:_jsxFileName,lineNumber:181}},this.props.renderContent())))))));}}]);return BottomSheet;}(_react.Component);exports.BottomSheet=BottomSheet;BottomSheet.defaultProps={bounces:true,nativeDriver:true,animateBorder:false,corderRadius:20};var BottomSheetContainer=function(_Component2){(0,_inherits2.default)(BottomSheetContainer,_Component2);function BottomSheetContainer(){var _getPrototypeOf2;var _this3;(0,_classCallCheck2.default)(this,BottomSheetContainer);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this3=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(BottomSheetContainer)).call.apply(_getPrototypeOf2,[this].concat(args)));_this3.bottomSheet=_react.default.createRef();_this3.snapTo=function(value){_this3.bottomSheet.snapTo(value);};return _this3;}(0,_createClass2.default)(BottomSheetContainer,[{key:"render",value:function render(){var _this4=this;return _react.default.createElement(_reactNative.View,{style:[styles.container,{position:'absolute',top:0,left:0}],__source:{fileName:_jsxFileName,lineNumber:215}},_react.default.createElement(BottomSheet,(0,_extends2.default)({ref:function ref(_ref5){_this4.bottomSheet=_ref5;}},this.props,{__source:{fileName:_jsxFileName,lineNumber:216}})));}}]);return BottomSheetContainer;}(_react.Component);exports.default=BottomSheetContainer;var styles=_reactNative.StyleSheet.create({container:{flex:1}}); 2 | //# sourceMappingURL=pop_up.js.map -------------------------------------------------------------------------------- /src/commonjs/components/navigation/pop_up.js.flow: -------------------------------------------------------------------------------- 1 | import React, { Component, useRef } from 'react' 2 | import { Animated, StyleSheet, View, Dimensions } from 'react-native' 3 | import { 4 | PanGestureHandler, 5 | NativeViewGestureHandler, 6 | State, 7 | TapGestureHandler, 8 | } from 'react-native-gesture-handler' 9 | 10 | const { width, height } = Dimensions.get('window') 11 | 12 | export class BottomSheet extends Component { 13 | masterdrawer = React.createRef() 14 | drawer = React.createRef() 15 | drawerheader = React.createRef() 16 | scroll = React.createRef() 17 | scrollV = React.createRef() 18 | 19 | constructor(props) { 20 | super(props) 21 | const START = props.snapPoints[0] 22 | const AFTER_START = props.snapPoints[1] 23 | const END = props.snapPoints[props.snapPoints.length - 1] 24 | 25 | this.state = { 26 | lastSnap: START, 27 | bounces: props.bounces 28 | } 29 | 30 | this._lastScrollYValue = 0 31 | this._lastScrollY = new Animated.Value(0) 32 | this._onRegisterLastScroll = Animated.event( 33 | [{ nativeEvent: { contentOffset: { y: this._lastScrollY } } }], 34 | { useNativeDriver: props.nativeDriver } 35 | ) 36 | 37 | this._lastScrollY.addListener(({ value }) => { 38 | this._lastScrollYValue = value 39 | if (value <= 20) { 40 | this.setState({ bounces: false }) 41 | } else { 42 | this.setState({ bounces: true }) 43 | } 44 | }) 45 | 46 | this._dragY = new Animated.Value(0) 47 | 48 | this._onGestureEvent = Animated.event( 49 | [{ nativeEvent: { translationY: this._dragY } }], 50 | { useNativeDriver: props.nativeDriver } 51 | ) 52 | 53 | this._reverseLastScrollY = Animated.multiply( 54 | new Animated.Value(-1), 55 | this._lastScrollY 56 | ) 57 | 58 | this._translateYOffset = new Animated.Value(END) 59 | 60 | this._translateY = Animated.add( 61 | this._translateYOffset, 62 | Animated.add(this._dragY, this._reverseLastScrollY) 63 | ).interpolate({ 64 | inputRange: [START, END], 65 | outputRange: [START, END], 66 | extrapolate: 'clamp', 67 | }) 68 | 69 | this._radius = Animated.add( 70 | this._translateYOffset, 71 | Animated.add(this._dragY, this._reverseLastScrollY) 72 | ).interpolate({ 73 | inputRange: [START, AFTER_START / 2], 74 | outputRange: [0, props.corderRadius], 75 | extrapolate: 'clamp', 76 | }) 77 | } 78 | _onHeaderHandlerStateChange = ({ nativeEvent }) => { 79 | if (nativeEvent.oldState === State.BEGAN) { 80 | this._lastScrollY.setValue(0) 81 | } 82 | 83 | this._onHandlerStateChange({ nativeEvent }) 84 | } 85 | 86 | componentDidMount() { 87 | this.snapTo(this.props.snapPoints[0]) 88 | } 89 | 90 | snapTo = (value) => { 91 | Animated.spring(this._translateYOffset, { 92 | tension: 68, 93 | friction: 12, 94 | toValue: value, 95 | useNativeDriver: this.props.nativeDriver, 96 | }).start(() => { 97 | this.setState({ lastSnap: value }) 98 | }) 99 | } 100 | 101 | _onHandlerStateChange = ({ nativeEvent }) => { 102 | if (nativeEvent.oldState === State.ACTIVE) { 103 | let { velocityY, translationY } = nativeEvent 104 | translationY -= this._lastScrollYValue 105 | const dragToss = 0.05 106 | const endOffsetY = this.state.lastSnap + translationY + dragToss * velocityY 107 | 108 | let destSnapPoint = this.props.snapPoints[0] 109 | 110 | for (let i = 0; i < this.props.snapPoints.length; i++) { 111 | const snapPoint = this.props.snapPoints[i] 112 | const distFromSnap = Math.abs(snapPoint - endOffsetY) 113 | if (distFromSnap < Math.abs(destSnapPoint - endOffsetY)) { 114 | destSnapPoint = snapPoint 115 | } 116 | } 117 | 118 | this.setState({ lastSnap: destSnapPoint }) 119 | this._translateYOffset.extractOffset() 120 | this._translateYOffset.setValue(translationY) 121 | this._translateYOffset.flattenOffset() 122 | this._dragY.setValue(0) 123 | 124 | Animated.spring(this._translateYOffset, { 125 | velocity: velocityY, 126 | tension: 68, 127 | friction: 12, 128 | toValue: destSnapPoint, 129 | useNativeDriver: this.props.nativeDriver, 130 | }).start(() => { 131 | }) 132 | 133 | setTimeout(() => { 134 | if (destSnapPoint >= this.props.snapPoints[this.props.snapPoints.length - 1] - 50) { 135 | this.props.dismiss() 136 | } 137 | }, 150) 138 | } 139 | } 140 | 141 | render() { 142 | return ( 143 | 147 | 148 | 156 | 162 | 177 | 181 | { this.scrollV = ref}} 183 | style={this.props.scrollStyle} 184 | bounces={this.state.bounces} 185 | onScrollBeginDrag={this._onRegisterLastScroll} 186 | scrollEventThrottle={16}> 187 | {this.props.renderContent()} 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | ) 196 | } 197 | } 198 | 199 | BottomSheet.defaultProps = { 200 | bounces: true, 201 | nativeDriver: true, 202 | animateBorder: false, 203 | corderRadius: 20 204 | } 205 | 206 | export default class BottomSheetContainer extends Component { 207 | bottomSheet = React.createRef() 208 | 209 | snapTo = (value) => { 210 | this.bottomSheet.snapTo(value) 211 | } 212 | 213 | render() { 214 | return ( 215 | 216 | { this.bottomSheet = ref }} {...this.props} /> 217 | 218 | ) 219 | } 220 | } 221 | 222 | 223 | 224 | const styles = StyleSheet.create({ 225 | container: { 226 | flex: 1, 227 | } 228 | }) -------------------------------------------------------------------------------- /src/commonjs/components/navigation/pop_up.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["pop_up.js"],"names":["Dimensions","get","width","height","BottomSheet","props","masterdrawer","React","createRef","drawer","drawerheader","scroll","scrollV","_onHeaderHandlerStateChange","nativeEvent","oldState","State","BEGAN","_lastScrollY","setValue","_onHandlerStateChange","snapTo","value","Animated","spring","_translateYOffset","tension","friction","toValue","useNativeDriver","nativeDriver","start","setState","lastSnap","ACTIVE","velocityY","translationY","_lastScrollYValue","dragToss","endOffsetY","state","destSnapPoint","snapPoints","i","length","snapPoint","distFromSnap","Math","abs","extractOffset","flattenOffset","_dragY","velocity","setTimeout","dismiss","START","AFTER_START","END","bounces","Value","_onRegisterLastScroll","event","contentOffset","y","addListener","_onGestureEvent","_reverseLastScrollY","multiply","_translateY","add","interpolate","inputRange","outputRange","extrapolate","_radius","corderRadius","StyleSheet","absoluteFillObject","transform","translateY","styles","container","animateBorder","overflow","borderTopLeftRadius","borderTopRightRadius","ref","scrollStyle","renderContent","Component","defaultProps","BottomSheetContainer","bottomSheet","position","top","left","create","flex"],"mappings":"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","sourcesContent":["import React, { Component, useRef } from 'react'\nimport { Animated, StyleSheet, View, Dimensions } from 'react-native'\nimport {\n PanGestureHandler,\n NativeViewGestureHandler,\n State,\n TapGestureHandler,\n} from 'react-native-gesture-handler'\n\nconst { width, height } = Dimensions.get('window')\n\nexport class BottomSheet extends Component {\n masterdrawer = React.createRef()\n drawer = React.createRef()\n drawerheader = React.createRef()\n scroll = React.createRef()\n scrollV = React.createRef()\n\n constructor(props) {\n super(props)\n const START = props.snapPoints[0]\n const AFTER_START = props.snapPoints[1]\n const END = props.snapPoints[props.snapPoints.length - 1]\n\n this.state = {\n lastSnap: START,\n bounces: props.bounces\n }\n\n this._lastScrollYValue = 0\n this._lastScrollY = new Animated.Value(0)\n this._onRegisterLastScroll = Animated.event(\n [{ nativeEvent: { contentOffset: { y: this._lastScrollY } } }],\n { useNativeDriver: props.nativeDriver }\n )\n\n this._lastScrollY.addListener(({ value }) => {\n this._lastScrollYValue = value\n if (value <= 20) {\n this.setState({ bounces: false })\n } else { \n this.setState({ bounces: true })\n }\n })\n\n this._dragY = new Animated.Value(0)\n\n this._onGestureEvent = Animated.event(\n [{ nativeEvent: { translationY: this._dragY } }],\n { useNativeDriver: props.nativeDriver }\n )\n\n this._reverseLastScrollY = Animated.multiply(\n new Animated.Value(-1),\n this._lastScrollY\n )\n\n this._translateYOffset = new Animated.Value(END)\n\n this._translateY = Animated.add(\n this._translateYOffset,\n Animated.add(this._dragY, this._reverseLastScrollY)\n ).interpolate({\n inputRange: [START, END],\n outputRange: [START, END],\n extrapolate: 'clamp',\n })\n\n this._radius = Animated.add(\n this._translateYOffset,\n Animated.add(this._dragY, this._reverseLastScrollY)\n ).interpolate({\n inputRange: [START, AFTER_START / 2],\n outputRange: [0, props.corderRadius],\n extrapolate: 'clamp',\n })\n }\n _onHeaderHandlerStateChange = ({ nativeEvent }) => {\n if (nativeEvent.oldState === State.BEGAN) {\n this._lastScrollY.setValue(0)\n }\n\n this._onHandlerStateChange({ nativeEvent })\n }\n\n componentDidMount() {\n this.snapTo(this.props.snapPoints[0])\n }\n\n snapTo = (value) => {\n Animated.spring(this._translateYOffset, {\n tension: 68,\n friction: 12,\n toValue: value,\n useNativeDriver: this.props.nativeDriver,\n }).start(() => {\n this.setState({ lastSnap: value })\n })\n }\n\n _onHandlerStateChange = ({ nativeEvent }) => {\n if (nativeEvent.oldState === State.ACTIVE) {\n let { velocityY, translationY } = nativeEvent\n translationY -= this._lastScrollYValue\n const dragToss = 0.05\n const endOffsetY = this.state.lastSnap + translationY + dragToss * velocityY\n\n let destSnapPoint = this.props.snapPoints[0]\n\n for (let i = 0; i < this.props.snapPoints.length; i++) {\n const snapPoint = this.props.snapPoints[i]\n const distFromSnap = Math.abs(snapPoint - endOffsetY)\n if (distFromSnap < Math.abs(destSnapPoint - endOffsetY)) {\n destSnapPoint = snapPoint\n }\n }\n\n this.setState({ lastSnap: destSnapPoint })\n this._translateYOffset.extractOffset()\n this._translateYOffset.setValue(translationY)\n this._translateYOffset.flattenOffset()\n this._dragY.setValue(0)\n\n Animated.spring(this._translateYOffset, {\n velocity: velocityY,\n tension: 68,\n friction: 12,\n toValue: destSnapPoint,\n useNativeDriver: this.props.nativeDriver,\n }).start(() => {\n })\n\n setTimeout(() => {\n if (destSnapPoint >= this.props.snapPoints[this.props.snapPoints.length - 1] - 50) {\n this.props.dismiss()\n }\n }, 150)\n }\n }\n\n render() {\n return (\n \n \n \n \n \n \n { this.scrollV = ref}}\n style={this.props.scrollStyle}\n bounces={this.state.bounces}\n onScrollBeginDrag={this._onRegisterLastScroll}\n scrollEventThrottle={16}>\n {this.props.renderContent()}\n \n \n \n \n \n \n \n )\n }\n}\n\nBottomSheet.defaultProps = {\n bounces: true,\n nativeDriver: true,\n animateBorder: false,\n corderRadius: 20\n}\n\nexport default class BottomSheetContainer extends Component {\n bottomSheet = React.createRef()\n\n snapTo = (value) => {\n this.bottomSheet.snapTo(value)\n }\n\n render() {\n return (\n \n { this.bottomSheet = ref }} {...this.props} />\n \n )\n }\n}\n\n\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n }\n})"]} -------------------------------------------------------------------------------- /src/commonjs/components/navigation/pop_up.next.js: -------------------------------------------------------------------------------- 1 | var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _reactNativeGestureHandler=require("react-native-gesture-handler");var _jsxFileName="/Users/mnshkv/develop/opensource/popupNavigation/lib/components/navigation/pop_up.next.js";var _Dimensions$get=_reactNative.Dimensions.get('window'),width=_Dimensions$get.width,height=_Dimensions$get.height;var EPSILON=1e-9;var easeIn=_reactNative.Easing.bezier(0.42,0,1,1,EPSILON);var easeOut=_reactNative.Easing.bezier(0,0,0.58,1,EPSILON);var easeInOut=_reactNative.Easing.bezier(0.42,0,0.58,1,EPSILON);var def=_reactNative.Easing.bezier(0.25,0.1,0.25,1,EPSILON);var PopUp=function(_Component){(0,_inherits2.default)(PopUp,_Component);function PopUp(props){var _this;(0,_classCallCheck2.default)(this,PopUp);_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(PopUp).call(this,props));_this.masterdrawer=_react.default.createRef();_this.drawer=_react.default.createRef();_this.drawerheader=_react.default.createRef();_this.scroll=_react.default.createRef();_this.scrollV=_react.default.createRef();_this._onHeaderHandlerStateChange=function(_ref){var nativeEvent=_ref.nativeEvent;if(nativeEvent.oldState===_reactNativeGestureHandler.State.BEGAN){_this._lastScrollY.setValue(0);}_this._onHandlerStateChange({nativeEvent:nativeEvent});};_this.snapTo=function(value){_reactNative.Animated.timing(_this._translateYOffset,{duration:250,toValue:value,easing:def,useNativeDriver:_this.props.nativeDriver}).start(function(){_this.setState({lastSnap:value});});};_this._onHandlerStateChange=function(_ref2){var nativeEvent=_ref2.nativeEvent;if(nativeEvent.oldState===_reactNativeGestureHandler.State.ACTIVE){var velocityY=nativeEvent.velocityY,translationY=nativeEvent.translationY;translationY-=_this._lastScrollYValue;var dragToss=0.05;var endOffsetY=_this.state.lastSnap+translationY+dragToss*velocityY;var destSnapPoint=_this.props.snapPoints[0];for(var i=0;i<_this.props.snapPoints.length;i++){var snapPoint=_this.props.snapPoints[i];var distFromSnap=Math.abs(snapPoint-endOffsetY);if(distFromSnap { 46 | this._lastScrollYValue = value 47 | if (value <= 20) { 48 | this.setState({ bounces: false }) 49 | } else { 50 | this.setState({ bounces: true }) 51 | } 52 | }) 53 | 54 | this._dragY = props._dragY 55 | 56 | this._onGestureEvent = Animated.event( 57 | [{ nativeEvent: { translationY: this._dragY } }], 58 | { useNativeDriver: props.nativeDriver } 59 | ) 60 | 61 | this._reverseLastScrollY = Animated.multiply( 62 | new Animated.Value(-1), 63 | this._lastScrollY 64 | ) 65 | 66 | this._translateYOffset = props._translateYOffset 67 | 68 | this._translateY = Animated.add( 69 | this._translateYOffset, 70 | Animated.add(this._dragY, this._reverseLastScrollY) 71 | ).interpolate({ 72 | inputRange: [START, END], 73 | outputRange: [START, END], 74 | extrapolate: 'clamp', 75 | }) 76 | 77 | this._radius = Animated.add( 78 | this._translateYOffset, 79 | Animated.add(this._dragY, this._reverseLastScrollY) 80 | ).interpolate({ 81 | inputRange: [START, AFTER_START / 12], 82 | outputRange: [0, props.cornerRadius], 83 | extrapolate: 'clamp', 84 | }) 85 | } 86 | 87 | componentDidMount() { 88 | // this.snapTo(this.props.snapPoints[0]) 89 | } 90 | 91 | _onHeaderHandlerStateChange = ({ nativeEvent }) => { 92 | if (nativeEvent.oldState === State.BEGAN) { 93 | this._lastScrollY.setValue(0) 94 | } 95 | 96 | this._onHandlerStateChange({ nativeEvent }) 97 | } 98 | 99 | snapTo = (value) => { 100 | Animated.timing(this._translateYOffset, { 101 | // velocity: 0, 102 | // overshootClamping: true, 103 | // tension: 68, 104 | // friction: 12, 105 | duration: 250, 106 | toValue: value, 107 | easing: def, 108 | useNativeDriver: this.props.nativeDriver, 109 | }).start(() => { 110 | this.setState({ lastSnap: value }) 111 | }) 112 | } 113 | 114 | _onHandlerStateChange = ({ nativeEvent }) => { 115 | if (nativeEvent.oldState === State.ACTIVE) { 116 | let { velocityY, translationY } = nativeEvent 117 | translationY -= this._lastScrollYValue 118 | const dragToss = 0.05 119 | const endOffsetY = this.state.lastSnap + translationY + dragToss * velocityY 120 | 121 | let destSnapPoint = this.props.snapPoints[0] 122 | 123 | for (let i = 0; i < this.props.snapPoints.length; i++) { 124 | const snapPoint = this.props.snapPoints[i] 125 | const distFromSnap = Math.abs(snapPoint - endOffsetY) 126 | if (distFromSnap < Math.abs(destSnapPoint - endOffsetY)) { 127 | destSnapPoint = snapPoint 128 | } 129 | } 130 | 131 | this.setState({ lastSnap: destSnapPoint }) 132 | this._translateYOffset.extractOffset() 133 | this._translateYOffset.setValue(translationY) 134 | this._translateYOffset.flattenOffset() 135 | this._dragY.setValue(0) 136 | 137 | Animated.spring(this._translateYOffset, { 138 | velocity: velocityY, 139 | tension: 68, 140 | friction: 12, 141 | toValue: destSnapPoint, 142 | useNativeDriver: this.props.nativeDriver, 143 | }).start(() => { 144 | if (this.state.lastSnap === this.props.snapPoints[this.props.snapPoints.length - 1]) { 145 | this.props.dismiss() 146 | } 147 | }) 148 | } 149 | } 150 | 151 | render() { 152 | return ( 153 | 157 | 158 | 166 | 172 | 187 | 191 | { this.scrollV = ref}} 193 | style={this.props.scrollStyle} 194 | bounces={this.state.bounces} 195 | contentContainerStyle={{ minWidth: width, minHeight: height }} 196 | onScrollBeginDrag={this._onRegisterLastScroll} 197 | scrollEventThrottle={16}> 198 | {this.props.renderContent()} 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | ) 207 | } 208 | } 209 | 210 | PopUp.defaultProps = { 211 | bounces: true, 212 | nativeDriver: true, 213 | animateBorder: false, 214 | cornerRadius: 20 215 | } 216 | 217 | 218 | const styles = StyleSheet.create({ 219 | container: { 220 | flex: 1, 221 | }, 222 | header: { 223 | backgroundColor: 'red', 224 | }, 225 | }) -------------------------------------------------------------------------------- /src/commonjs/components/navigation/pop_up.next.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["pop_up.next.js"],"names":["Dimensions","get","width","height","EPSILON","easeIn","Easing","bezier","easeOut","easeInOut","def","PopUp","props","masterdrawer","React","createRef","drawer","drawerheader","scroll","scrollV","_onHeaderHandlerStateChange","nativeEvent","oldState","State","BEGAN","_lastScrollY","setValue","_onHandlerStateChange","snapTo","value","Animated","timing","_translateYOffset","duration","toValue","easing","useNativeDriver","nativeDriver","start","setState","lastSnap","ACTIVE","velocityY","translationY","_lastScrollYValue","dragToss","endOffsetY","state","destSnapPoint","snapPoints","i","length","snapPoint","distFromSnap","Math","abs","extractOffset","flattenOffset","_dragY","spring","velocity","tension","friction","dismiss","START","AFTER_START","END","bounces","_onRegisterLastScroll","event","contentOffset","y","addListener","_onGestureEvent","_reverseLastScrollY","multiply","Value","_translateY","add","interpolate","inputRange","outputRange","extrapolate","_radius","cornerRadius","position","top","left","right","bottom","transform","translateY","styles","container","animateBorder","overflow","borderTopLeftRadius","borderTopRightRadius","ref","scrollStyle","minWidth","minHeight","renderContent","Component","defaultProps","StyleSheet","create","flex","header","backgroundColor"],"mappings":"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","sourcesContent":["import React, { Component } from 'react'\nimport { Animated, StyleSheet, View, Dimensions, Easing } from 'react-native'\nimport {\n PanGestureHandler,\n NativeViewGestureHandler,\n State,\n TapGestureHandler,\n} from 'react-native-gesture-handler'\n\nconst { width, height } = Dimensions.get('window')\n\nconst EPSILON = 1e-9\n\nconst easeIn = Easing.bezier(0.42, 0, 1, 1, EPSILON)\nconst easeOut = Easing.bezier(0, 0, 0.58, 1, EPSILON)\nconst easeInOut = Easing.bezier(0.42, 0, 0.58, 1, EPSILON)\nconst def = Easing.bezier(0.25, 0.1, 0.25, 1, EPSILON)\n\nexport default class PopUp extends Component {\n masterdrawer = React.createRef()\n drawer = React.createRef()\n drawerheader = React.createRef()\n scroll = React.createRef()\n scrollV = React.createRef()\n\n constructor(props) {\n super(props)\n const START = props.snapPoints[0]\n const AFTER_START = props.snapPoints[1]\n const END = props.snapPoints[props.snapPoints.length - 1]\n\n this.state = {\n lastSnap: END,\n bounces: props.bounces\n }\n\n this._lastScrollYValue = props._lastScrollYValue\n this._lastScrollY = props._lastScrollY\n\n this._onRegisterLastScroll = Animated.event(\n [{ nativeEvent: { contentOffset: { y: this._lastScrollY } } }],\n { useNativeDriver: props.nativeDriver }\n )\n\n this._lastScrollY.addListener(({ value }) => {\n this._lastScrollYValue = value\n if (value <= 20) {\n this.setState({ bounces: false })\n } else { \n this.setState({ bounces: true })\n }\n })\n\n this._dragY = props._dragY\n\n this._onGestureEvent = Animated.event(\n [{ nativeEvent: { translationY: this._dragY } }],\n { useNativeDriver: props.nativeDriver }\n )\n\n this._reverseLastScrollY = Animated.multiply(\n new Animated.Value(-1),\n this._lastScrollY\n )\n\n this._translateYOffset = props._translateYOffset\n\n this._translateY = Animated.add(\n this._translateYOffset,\n Animated.add(this._dragY, this._reverseLastScrollY)\n ).interpolate({\n inputRange: [START, END],\n outputRange: [START, END],\n extrapolate: 'clamp',\n })\n\n this._radius = Animated.add(\n this._translateYOffset,\n Animated.add(this._dragY, this._reverseLastScrollY)\n ).interpolate({\n inputRange: [START, AFTER_START / 12],\n outputRange: [0, props.cornerRadius],\n extrapolate: 'clamp',\n })\n }\n\n componentDidMount() {\n // this.snapTo(this.props.snapPoints[0])\n }\n\n _onHeaderHandlerStateChange = ({ nativeEvent }) => {\n if (nativeEvent.oldState === State.BEGAN) {\n this._lastScrollY.setValue(0)\n }\n\n this._onHandlerStateChange({ nativeEvent })\n }\n\n snapTo = (value) => {\n Animated.timing(this._translateYOffset, {\n // velocity: 0,\n // overshootClamping: true,\n // tension: 68,\n // friction: 12,\n duration: 250,\n toValue: value,\n easing: def,\n useNativeDriver: this.props.nativeDriver,\n }).start(() => {\n this.setState({ lastSnap: value })\n })\n }\n\n _onHandlerStateChange = ({ nativeEvent }) => {\n if (nativeEvent.oldState === State.ACTIVE) {\n let { velocityY, translationY } = nativeEvent\n translationY -= this._lastScrollYValue\n const dragToss = 0.05\n const endOffsetY = this.state.lastSnap + translationY + dragToss * velocityY\n\n let destSnapPoint = this.props.snapPoints[0]\n\n for (let i = 0; i < this.props.snapPoints.length; i++) {\n const snapPoint = this.props.snapPoints[i]\n const distFromSnap = Math.abs(snapPoint - endOffsetY)\n if (distFromSnap < Math.abs(destSnapPoint - endOffsetY)) {\n destSnapPoint = snapPoint\n }\n }\n\n this.setState({ lastSnap: destSnapPoint })\n this._translateYOffset.extractOffset()\n this._translateYOffset.setValue(translationY)\n this._translateYOffset.flattenOffset()\n this._dragY.setValue(0)\n\n Animated.spring(this._translateYOffset, {\n velocity: velocityY,\n tension: 68,\n friction: 12,\n toValue: destSnapPoint,\n useNativeDriver: this.props.nativeDriver,\n }).start(() => {\n if (this.state.lastSnap === this.props.snapPoints[this.props.snapPoints.length - 1]) {\n this.props.dismiss()\n }\n })\n }\n }\n\n render() {\n return (\n \n \n \n \n \n \n { this.scrollV = ref}}\n style={this.props.scrollStyle}\n bounces={this.state.bounces}\n contentContainerStyle={{ minWidth: width, minHeight: height }}\n onScrollBeginDrag={this._onRegisterLastScroll}\n scrollEventThrottle={16}>\n {this.props.renderContent()}\n \n \n \n \n \n \n \n )\n }\n}\n\nPopUp.defaultProps = {\n bounces: true,\n nativeDriver: true,\n animateBorder: false,\n cornerRadius: 20\n}\n\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n },\n header: {\n backgroundColor: 'red',\n },\n})"]} -------------------------------------------------------------------------------- /src/commonjs/index.js: -------------------------------------------------------------------------------- 1 | var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"BottomSheet",{enumerable:true,get:function get(){return _bottom_sheet.default;}});Object.defineProperty(exports,"Navigator",{enumerable:true,get:function get(){return _navigation.default;}});var _bottom_sheet=_interopRequireDefault(require("./components/bottom_sheet"));var _navigation=_interopRequireDefault(require("./components/navigation")); 2 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /src/commonjs/index.js.flow: -------------------------------------------------------------------------------- 1 | import BottomSheet from './components/bottom_sheet' 2 | import Navigator from './components/navigation' 3 | 4 | export { 5 | BottomSheet, 6 | Navigator 7 | } -------------------------------------------------------------------------------- /src/commonjs/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["index.js"],"names":[],"mappings":"0WAAA,+EACA","sourcesContent":["import BottomSheet from './components/bottom_sheet'\nimport Navigator from './components/navigation'\n\nexport {\n BottomSheet,\n Navigator\n}"]} -------------------------------------------------------------------------------- /src/module/components/bottom_sheet/index.js: -------------------------------------------------------------------------------- 1 | import _extends from"@babel/runtime/helpers/extends";import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _inherits from"@babel/runtime/helpers/inherits";var _jsxFileName="/Users/mnshkv/develop/opensource/popupNavigation/lib/components/bottom_sheet/index.js";import React,{Component}from'react';import{Animated,StyleSheet,View,Dimensions,Platform}from'react-native';import{PanGestureHandler,NativeViewGestureHandler,State,TapGestureHandler}from'react-native-gesture-handler';var _Dimensions$get=Dimensions.get('window'),width=_Dimensions$get.width,height=_Dimensions$get.height;export var BottomSheet=function(_Component){_inherits(BottomSheet,_Component);function BottomSheet(props){var _this;_classCallCheck(this,BottomSheet);_this=_possibleConstructorReturn(this,_getPrototypeOf(BottomSheet).call(this,props));_this.masterdrawer=React.createRef();_this.drawer=React.createRef();_this.drawerheader=React.createRef();_this.scroll=React.createRef();_this.scrollView=React.createRef();_this._onHeaderHandlerStateChange=function(_ref){var nativeEvent=_ref.nativeEvent;if(nativeEvent.oldState===State.BEGAN){_this._lastScrollY.setValue(0);}_this._onHandlerStateChange({nativeEvent:nativeEvent});};_this.snapTo=function(value){Animated.spring(_this._translateYOffset,{tension:68,friction:12,toValue:value,useNativeDriver:_this.props.nativeDriver}).start(function(){_this.setState({lastSnap:value});});};_this._onHandlerStateChange=function(_ref2){var nativeEvent=_ref2.nativeEvent;if(nativeEvent.oldState===State.ACTIVE){var velocityY=nativeEvent.velocityY,translationY=nativeEvent.translationY;translationY-=_this._lastScrollYValue;var dragToss=0.05;var endOffsetY=_this.state.lastSnap+translationY+dragToss*velocityY;var destSnapPoint=_this.props.snapPoints[0];for(var i=0;i<_this.props.snapPoints.length;i++){var snapPoint=_this.props.snapPoints[i];var distFromSnap=Math.abs(snapPoint-endOffsetY);if(distFromSnap {\n this._lastScrollYValue = value\n if (value <= 20 && props.bounces) {\n this.setState({ bounces: false })\n } else { \n this.setState({ bounces: true })\n }\n })\n\n this._dragY = new Animated.Value(0)\n\n this._onGestureEvent = Animated.event(\n [{ nativeEvent: { translationY: this._dragY } }],\n { useNativeDriver: props.nativeDriver }\n )\n\n this._reverseLastScrollY = Animated.multiply(\n new Animated.Value(-1),\n this._lastScrollY\n )\n\n this._translateYOffset = new Animated.Value(this.END)\n\n this._translateY = Animated.add(\n this._translateYOffset,\n Animated.add(this._dragY, this._reverseLastScrollY)\n ).interpolate({\n inputRange: [this.START, this.END],\n outputRange: [this.START, this.END],\n extrapolate: 'clamp'\n })\n\n this._radius = Animated.add(\n this._translateYOffset,\n Animated.add(this._dragY, this._reverseLastScrollY)\n ).interpolate({\n inputRange: [this.START, this.AFTER_START / 2],\n outputRange: [0, props.corderRadius],\n extrapolate: 'clamp',\n })\n }\n\n _onHeaderHandlerStateChange = ({ nativeEvent }) => {\n if (nativeEvent.oldState === State.BEGAN) {\n this._lastScrollY.setValue(0)\n }\n\n this._onHandlerStateChange({ nativeEvent })\n }\n\n shouldComponentUpdate(nextProps) {\n this.START = nextProps.snapPoints[0]\n this.AFTER_START = nextProps.snapPoints[1]\n this.END = nextProps.snapPoints[nextProps.snapPoints.length - 1]\n\n this._translateY = Animated.add(\n this._translateYOffset,\n Animated.add(this._dragY, this._reverseLastScrollY)\n ).interpolate({\n inputRange: [this.START, this.END],\n outputRange: [this.START, this.END],\n extrapolate: 'clamp'\n })\n\n return true\n }\n\n snapTo = (value) => {\n Animated.spring(this._translateYOffset, {\n tension: 68,\n friction: 12,\n toValue: value,\n useNativeDriver: this.props.nativeDriver,\n }).start(() => {\n this.setState({ lastSnap: value })\n })\n }\n\n _onHandlerStateChange = ({ nativeEvent }) => {\n if (nativeEvent.oldState === State.ACTIVE) {\n let { velocityY, translationY } = nativeEvent\n translationY -= this._lastScrollYValue\n const dragToss = 0.05\n const endOffsetY = this.state.lastSnap + translationY + dragToss * velocityY\n\n let destSnapPoint = this.props.snapPoints[0]\n\n for (let i = 0; i < this.props.snapPoints.length; i++) {\n const snapPoint = this.props.snapPoints[i]\n const distFromSnap = Math.abs(snapPoint - endOffsetY)\n if (distFromSnap < Math.abs(destSnapPoint - endOffsetY)) {\n destSnapPoint = snapPoint\n }\n }\n\n this.setState({ lastSnap: destSnapPoint })\n this._translateYOffset.extractOffset()\n this._translateYOffset.setValue(translationY)\n this._translateYOffset.flattenOffset()\n this._dragY.setValue(0)\n\n Animated.spring(this._translateYOffset, {\n velocity: velocityY,\n tension: 68,\n friction: 12,\n toValue: destSnapPoint,\n useNativeDriver: this.props.nativeDriver,\n }).start()\n }\n }\n\n render() {\n return (\n \n \n \n \n \n \n { \n this.scrollView = ref\n this.props.setScrollViewRef(ref)\n }}\n style={this.props.scrollStyle}\n bounces={this.state.bounces}\n onScrollBeginDrag={this._onRegisterLastScroll}\n scrollEventThrottle={16}>\n {this.props.renderContent()}\n \n \n \n \n \n \n \n )\n }\n}\n\nBottomSheet.defaultProps = {\n bounces: true,\n nativeDriver: true,\n animateBorder: false,\n corderRadius: 20\n}\n\nexport default class BottomSheetContainer extends Component {\n bottomSheet = React.createRef()\n scrollView = React.createRef()\n\n snapTo = (value) => {\n this.bottomSheet.snapTo(value)\n }\n\n setScrollViewRef = (ref) => {\n this.scrollView = ref\n }\n\n render() {\n return (\n \n { \n this.bottomSheet = ref\n }}\n setScrollViewRef={this.setScrollViewRef}\n {...this.props} \n />\n \n )\n }\n}\n\n\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n }\n})"]} -------------------------------------------------------------------------------- /src/module/components/navigation/index.js: -------------------------------------------------------------------------------- 1 | import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _jsxFileName="/Users/mnshkv/develop/opensource/popupNavigation/lib/components/navigation/index.js";function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i1&&arguments[1]!==undefined?arguments[1]:{};var presentPage=pages.find(function(page){return page.name===name;});setPopUpScreen({name:presentPage.name,props:_objectSpread({},presentPage.props,{},params)});};dismiss=function dismiss(){var animted=arguments.length>0&&arguments[0]!==undefined?arguments[0]:false;if(animted){popupRef.current.snapTo(height);}setTimeout(function(){setPopUpScreen(null);},animted?150:0);};renderInitPage=function renderInitPage(){return React.createElement(initPage.screen,_objectSpread({},initPage.props,{present:present,dismiss:dismiss}));};renderPopUp=function renderPopUp(){if(!popUpScreen){return null;}var page=pages.find(function(p){return p.name===popUpScreen.name;});var renderContent=function renderContent(){return React.createElement(page.screen,_objectSpread({},popUpScreen.props,{dismiss:dismiss}));};return React.createElement(View,{style:[{flex:1,position:'absolute',top:0,left:0}],__source:{fileName:_jsxFileName,lineNumber:78}},React.createElement(StatusBar,{backgroundColor:'#000',animated:true,barStyle:"light-content",__source:{fileName:_jsxFileName,lineNumber:79}}),React.createElement(PopUp,{ref:popupRef,snapPoints:page.snapPoints||[50,height],renderContent:renderContent,dismiss:dismiss,scrollStyle:page.popupStyle,__source:{fileName:_jsxFileName,lineNumber:80}}));};return React.createElement(View,{style:{width:width,height:height,backgroundColor:'#000'},__source:{fileName:_jsxFileName,lineNumber:92}},React.createElement(StatusBar,{backgroundColor:'#fff',animated:true,barStyle:"dark-content",__source:{fileName:_jsxFileName,lineNumber:93}}),React.createElement(Animated.View,{style:{width:width,height:height,overflow:'hidden',transform:[{scale:scale}],backgroundColor:'#fff',borderRadius:border},__source:{fileName:_jsxFileName,lineNumber:94}},renderInitPage()),renderPopUp());};export default Navigator; 2 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /src/module/components/navigation/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["index.js"],"names":["React","useState","useEffect","useRef","View","Dimensions","Animated","Alert","StatusBar","PopUp","get","width","height","Navigator","props","popUpScreen","setPopUpScreen","background","Value","backgroundRef","popupRef","createRef","pages","initPage","find","page","init","scale","current","interpolate","inputRange","outputRange","extrapolate","border","animateBackground","value","spring","toValue","tension","friction","useNativeDriver","start","present","name","params","presentPage","dismiss","animted","snapTo","setTimeout","renderInitPage","createElement","screen","renderPopUp","p","renderContent","flex","position","top","left","snapPoints","popupStyle","backgroundColor","overflow","transform","borderRadius"],"mappings":"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","sourcesContent":["import React, { useState, useEffect, useRef } from 'react'\nimport { View, Dimensions, Animated, Alert, StatusBar } from 'react-native'\nimport PopUp from './pop_up'\n\nconst { width, height } = Dimensions.get('window')\n\nconst Navigator = (props) => {\n const [popUpScreen, setPopUpScreen] = useState(null)\n const background = new Animated.Value(0)\n const backgroundRef = useRef(background)\n let popupRef = useRef(React.createRef())\n\n const { pages } = props\n const initPage = pages.find(page => page.init) || pages[0]\n\n const scale = backgroundRef.current.interpolate({\n inputRange: [0, 1],\n outputRange: [1, 0.9],\n extrapolate: 'clamp'\n })\n\n const border = backgroundRef.current.interpolate({\n inputRange: [0, 1],\n outputRange: [0, 12],\n extrapolate: 'clamp',\n })\n\n const animateBackground = (value) => {\n Animated.spring(backgroundRef.current, {\n toValue: 1,\n tension: 68,\n friction: 12,\n toValue: value,\n useNativeDriver: true\n }).start()\n }\n\n useEffect(() => {\n if (popUpScreen != null) {\n animateBackground(1)\n } else {\n animateBackground(0)\n }\n }, [popUpScreen])\n\n present = (name, params = {}) => {\n const presentPage = pages.find(page => page.name === name)\n setPopUpScreen({ name: presentPage.name, props: { ...presentPage.props, ...params } })\n }\n\n dismiss = (animted = false) => {\n if (animted) {\n popupRef.current.snapTo(height)\n }\n\n setTimeout(() => {\n setPopUpScreen(null)\n }, animted ? 150 : 0)\n \n }\n\n renderInitPage = () => {\n return React.createElement(initPage.screen, { ...initPage.props, present, dismiss })\n }\n\n renderPopUp = () => {\n if (!popUpScreen) {\n return null \n }\n\n const page = pages.find(p => p.name === popUpScreen.name)\n\n const renderContent = () => {\n return React.createElement(page.screen, { ...popUpScreen.props, dismiss })\n }\n\n return (\n \n \n \n \n )\n }\n\n return (\n \n \n \n {renderInitPage()}\n \n {renderPopUp()}\n \n )\n}\n\nexport default Navigator"]} -------------------------------------------------------------------------------- /src/module/components/navigation/pop_up.js: -------------------------------------------------------------------------------- 1 | import _extends from"@babel/runtime/helpers/extends";import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _inherits from"@babel/runtime/helpers/inherits";var _jsxFileName="/Users/mnshkv/develop/opensource/popupNavigation/lib/components/navigation/pop_up.js";import React,{Component,useRef}from'react';import{Animated,StyleSheet,View,Dimensions}from'react-native';import{PanGestureHandler,NativeViewGestureHandler,State,TapGestureHandler}from'react-native-gesture-handler';var _Dimensions$get=Dimensions.get('window'),width=_Dimensions$get.width,height=_Dimensions$get.height;export var BottomSheet=function(_Component){_inherits(BottomSheet,_Component);function BottomSheet(props){var _this;_classCallCheck(this,BottomSheet);_this=_possibleConstructorReturn(this,_getPrototypeOf(BottomSheet).call(this,props));_this.masterdrawer=React.createRef();_this.drawer=React.createRef();_this.drawerheader=React.createRef();_this.scroll=React.createRef();_this.scrollV=React.createRef();_this._onHeaderHandlerStateChange=function(_ref){var nativeEvent=_ref.nativeEvent;if(nativeEvent.oldState===State.BEGAN){_this._lastScrollY.setValue(0);}_this._onHandlerStateChange({nativeEvent:nativeEvent});};_this.snapTo=function(value){Animated.spring(_this._translateYOffset,{tension:68,friction:12,toValue:value,useNativeDriver:_this.props.nativeDriver}).start(function(){_this.setState({lastSnap:value});});};_this._onHandlerStateChange=function(_ref2){var nativeEvent=_ref2.nativeEvent;if(nativeEvent.oldState===State.ACTIVE){var velocityY=nativeEvent.velocityY,translationY=nativeEvent.translationY;translationY-=_this._lastScrollYValue;var dragToss=0.05;var endOffsetY=_this.state.lastSnap+translationY+dragToss*velocityY;var destSnapPoint=_this.props.snapPoints[0];for(var i=0;i<_this.props.snapPoints.length;i++){var snapPoint=_this.props.snapPoints[i];var distFromSnap=Math.abs(snapPoint-endOffsetY);if(distFromSnap=_this.props.snapPoints[_this.props.snapPoints.length-1]-50){_this.props.dismiss();}},150);}};var START=props.snapPoints[0];var AFTER_START=props.snapPoints[1];var END=props.snapPoints[props.snapPoints.length-1];_this.state={lastSnap:START,bounces:props.bounces};_this._lastScrollYValue=0;_this._lastScrollY=new Animated.Value(0);_this._onRegisterLastScroll=Animated.event([{nativeEvent:{contentOffset:{y:_this._lastScrollY}}}],{useNativeDriver:props.nativeDriver});_this._lastScrollY.addListener(function(_ref3){var value=_ref3.value;_this._lastScrollYValue=value;if(value<=20){_this.setState({bounces:false});}else{_this.setState({bounces:true});}});_this._dragY=new Animated.Value(0);_this._onGestureEvent=Animated.event([{nativeEvent:{translationY:_this._dragY}}],{useNativeDriver:props.nativeDriver});_this._reverseLastScrollY=Animated.multiply(new Animated.Value(-1),_this._lastScrollY);_this._translateYOffset=new Animated.Value(END);_this._translateY=Animated.add(_this._translateYOffset,Animated.add(_this._dragY,_this._reverseLastScrollY)).interpolate({inputRange:[START,END],outputRange:[START,END],extrapolate:'clamp'});_this._radius=Animated.add(_this._translateYOffset,Animated.add(_this._dragY,_this._reverseLastScrollY)).interpolate({inputRange:[START,AFTER_START/2],outputRange:[0,props.corderRadius],extrapolate:'clamp'});return _this;}_createClass(BottomSheet,[{key:"componentDidMount",value:function componentDidMount(){this.snapTo(this.props.snapPoints[0]);}},{key:"render",value:function render(){var _this2=this;return React.createElement(TapGestureHandler,{maxDurationMs:100000,ref:this.masterdrawer,maxDeltaY:this.state.lastSnap-this.props.snapPoints[0],__source:{fileName:_jsxFileName,lineNumber:143}},React.createElement(View,{style:StyleSheet.absoluteFillObject,pointerEvents:"box-none",__source:{fileName:_jsxFileName,lineNumber:147}},React.createElement(Animated.View,{style:{width:width,height:height,transform:[{translateY:this._translateY}]},__source:{fileName:_jsxFileName,lineNumber:148}},React.createElement(PanGestureHandler,{ref:this.drawer,simultaneousHandlers:[this.scroll,this.masterdrawer],shouldCancelWhenOutside:false,onGestureEvent:this._onGestureEvent,onHandlerStateChange:this._onHandlerStateChange,__source:{fileName:_jsxFileName,lineNumber:156}},React.createElement(Animated.View,{style:[styles.container,this.props.animateBorder&&{overflow:'hidden',borderTopLeftRadius:this._radius,borderTopRightRadius:this._radius},!this.props.animateBorder&&{overflow:'hidden',borderTopLeftRadius:this.props.corderRadius,borderTopRightRadius:this.props.corderRadius}],__source:{fileName:_jsxFileName,lineNumber:162}},React.createElement(NativeViewGestureHandler,{ref:this.scroll,waitFor:this.masterdrawer,simultaneousHandlers:this.drawer,__source:{fileName:_jsxFileName,lineNumber:177}},React.createElement(Animated.ScrollView,{ref:function ref(_ref4){_this2.scrollV=_ref4;},style:this.props.scrollStyle,bounces:this.state.bounces,onScrollBeginDrag:this._onRegisterLastScroll,scrollEventThrottle:16,__source:{fileName:_jsxFileName,lineNumber:181}},this.props.renderContent())))))));}}]);return BottomSheet;}(Component);BottomSheet.defaultProps={bounces:true,nativeDriver:true,animateBorder:false,corderRadius:20};var BottomSheetContainer=function(_Component2){_inherits(BottomSheetContainer,_Component2);function BottomSheetContainer(){var _getPrototypeOf2;var _this3;_classCallCheck(this,BottomSheetContainer);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this3=_possibleConstructorReturn(this,(_getPrototypeOf2=_getPrototypeOf(BottomSheetContainer)).call.apply(_getPrototypeOf2,[this].concat(args)));_this3.bottomSheet=React.createRef();_this3.snapTo=function(value){_this3.bottomSheet.snapTo(value);};return _this3;}_createClass(BottomSheetContainer,[{key:"render",value:function render(){var _this4=this;return React.createElement(View,{style:[styles.container,{position:'absolute',top:0,left:0}],__source:{fileName:_jsxFileName,lineNumber:215}},React.createElement(BottomSheet,_extends({ref:function ref(_ref5){_this4.bottomSheet=_ref5;}},this.props,{__source:{fileName:_jsxFileName,lineNumber:216}})));}}]);return BottomSheetContainer;}(Component);export{BottomSheetContainer as default};var styles=StyleSheet.create({container:{flex:1}}); 2 | //# sourceMappingURL=pop_up.js.map -------------------------------------------------------------------------------- /src/module/components/navigation/pop_up.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["pop_up.js"],"names":["React","Component","useRef","Animated","StyleSheet","View","Dimensions","PanGestureHandler","NativeViewGestureHandler","State","TapGestureHandler","get","width","height","BottomSheet","props","masterdrawer","createRef","drawer","drawerheader","scroll","scrollV","_onHeaderHandlerStateChange","nativeEvent","oldState","BEGAN","_lastScrollY","setValue","_onHandlerStateChange","snapTo","value","spring","_translateYOffset","tension","friction","toValue","useNativeDriver","nativeDriver","start","setState","lastSnap","ACTIVE","velocityY","translationY","_lastScrollYValue","dragToss","endOffsetY","state","destSnapPoint","snapPoints","i","length","snapPoint","distFromSnap","Math","abs","extractOffset","flattenOffset","_dragY","velocity","setTimeout","dismiss","START","AFTER_START","END","bounces","Value","_onRegisterLastScroll","event","contentOffset","y","addListener","_onGestureEvent","_reverseLastScrollY","multiply","_translateY","add","interpolate","inputRange","outputRange","extrapolate","_radius","corderRadius","absoluteFillObject","transform","translateY","styles","container","animateBorder","overflow","borderTopLeftRadius","borderTopRightRadius","ref","scrollStyle","renderContent","defaultProps","BottomSheetContainer","bottomSheet","position","top","left","create","flex"],"mappings":"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","sourcesContent":["import React, { Component, useRef } from 'react'\nimport { Animated, StyleSheet, View, Dimensions } from 'react-native'\nimport {\n PanGestureHandler,\n NativeViewGestureHandler,\n State,\n TapGestureHandler,\n} from 'react-native-gesture-handler'\n\nconst { width, height } = Dimensions.get('window')\n\nexport class BottomSheet extends Component {\n masterdrawer = React.createRef()\n drawer = React.createRef()\n drawerheader = React.createRef()\n scroll = React.createRef()\n scrollV = React.createRef()\n\n constructor(props) {\n super(props)\n const START = props.snapPoints[0]\n const AFTER_START = props.snapPoints[1]\n const END = props.snapPoints[props.snapPoints.length - 1]\n\n this.state = {\n lastSnap: START,\n bounces: props.bounces\n }\n\n this._lastScrollYValue = 0\n this._lastScrollY = new Animated.Value(0)\n this._onRegisterLastScroll = Animated.event(\n [{ nativeEvent: { contentOffset: { y: this._lastScrollY } } }],\n { useNativeDriver: props.nativeDriver }\n )\n\n this._lastScrollY.addListener(({ value }) => {\n this._lastScrollYValue = value\n if (value <= 20) {\n this.setState({ bounces: false })\n } else { \n this.setState({ bounces: true })\n }\n })\n\n this._dragY = new Animated.Value(0)\n\n this._onGestureEvent = Animated.event(\n [{ nativeEvent: { translationY: this._dragY } }],\n { useNativeDriver: props.nativeDriver }\n )\n\n this._reverseLastScrollY = Animated.multiply(\n new Animated.Value(-1),\n this._lastScrollY\n )\n\n this._translateYOffset = new Animated.Value(END)\n\n this._translateY = Animated.add(\n this._translateYOffset,\n Animated.add(this._dragY, this._reverseLastScrollY)\n ).interpolate({\n inputRange: [START, END],\n outputRange: [START, END],\n extrapolate: 'clamp',\n })\n\n this._radius = Animated.add(\n this._translateYOffset,\n Animated.add(this._dragY, this._reverseLastScrollY)\n ).interpolate({\n inputRange: [START, AFTER_START / 2],\n outputRange: [0, props.corderRadius],\n extrapolate: 'clamp',\n })\n }\n _onHeaderHandlerStateChange = ({ nativeEvent }) => {\n if (nativeEvent.oldState === State.BEGAN) {\n this._lastScrollY.setValue(0)\n }\n\n this._onHandlerStateChange({ nativeEvent })\n }\n\n componentDidMount() {\n this.snapTo(this.props.snapPoints[0])\n }\n\n snapTo = (value) => {\n Animated.spring(this._translateYOffset, {\n tension: 68,\n friction: 12,\n toValue: value,\n useNativeDriver: this.props.nativeDriver,\n }).start(() => {\n this.setState({ lastSnap: value })\n })\n }\n\n _onHandlerStateChange = ({ nativeEvent }) => {\n if (nativeEvent.oldState === State.ACTIVE) {\n let { velocityY, translationY } = nativeEvent\n translationY -= this._lastScrollYValue\n const dragToss = 0.05\n const endOffsetY = this.state.lastSnap + translationY + dragToss * velocityY\n\n let destSnapPoint = this.props.snapPoints[0]\n\n for (let i = 0; i < this.props.snapPoints.length; i++) {\n const snapPoint = this.props.snapPoints[i]\n const distFromSnap = Math.abs(snapPoint - endOffsetY)\n if (distFromSnap < Math.abs(destSnapPoint - endOffsetY)) {\n destSnapPoint = snapPoint\n }\n }\n\n this.setState({ lastSnap: destSnapPoint })\n this._translateYOffset.extractOffset()\n this._translateYOffset.setValue(translationY)\n this._translateYOffset.flattenOffset()\n this._dragY.setValue(0)\n\n Animated.spring(this._translateYOffset, {\n velocity: velocityY,\n tension: 68,\n friction: 12,\n toValue: destSnapPoint,\n useNativeDriver: this.props.nativeDriver,\n }).start(() => {\n })\n\n setTimeout(() => {\n if (destSnapPoint >= this.props.snapPoints[this.props.snapPoints.length - 1] - 50) {\n this.props.dismiss()\n }\n }, 150)\n }\n }\n\n render() {\n return (\n \n \n \n \n \n \n { this.scrollV = ref}}\n style={this.props.scrollStyle}\n bounces={this.state.bounces}\n onScrollBeginDrag={this._onRegisterLastScroll}\n scrollEventThrottle={16}>\n {this.props.renderContent()}\n \n \n \n \n \n \n \n )\n }\n}\n\nBottomSheet.defaultProps = {\n bounces: true,\n nativeDriver: true,\n animateBorder: false,\n corderRadius: 20\n}\n\nexport default class BottomSheetContainer extends Component {\n bottomSheet = React.createRef()\n\n snapTo = (value) => {\n this.bottomSheet.snapTo(value)\n }\n\n render() {\n return (\n \n { this.bottomSheet = ref }} {...this.props} />\n \n )\n }\n}\n\n\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n }\n})"]} -------------------------------------------------------------------------------- /src/module/components/navigation/pop_up.next.js: -------------------------------------------------------------------------------- 1 | import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _inherits from"@babel/runtime/helpers/inherits";var _jsxFileName="/Users/mnshkv/develop/opensource/popupNavigation/lib/components/navigation/pop_up.next.js";import React,{Component}from'react';import{Animated,StyleSheet,View,Dimensions,Easing}from'react-native';import{PanGestureHandler,NativeViewGestureHandler,State,TapGestureHandler}from'react-native-gesture-handler';var _Dimensions$get=Dimensions.get('window'),width=_Dimensions$get.width,height=_Dimensions$get.height;var EPSILON=1e-9;var easeIn=Easing.bezier(0.42,0,1,1,EPSILON);var easeOut=Easing.bezier(0,0,0.58,1,EPSILON);var easeInOut=Easing.bezier(0.42,0,0.58,1,EPSILON);var def=Easing.bezier(0.25,0.1,0.25,1,EPSILON);var PopUp=function(_Component){_inherits(PopUp,_Component);function PopUp(props){var _this;_classCallCheck(this,PopUp);_this=_possibleConstructorReturn(this,_getPrototypeOf(PopUp).call(this,props));_this.masterdrawer=React.createRef();_this.drawer=React.createRef();_this.drawerheader=React.createRef();_this.scroll=React.createRef();_this.scrollV=React.createRef();_this._onHeaderHandlerStateChange=function(_ref){var nativeEvent=_ref.nativeEvent;if(nativeEvent.oldState===State.BEGAN){_this._lastScrollY.setValue(0);}_this._onHandlerStateChange({nativeEvent:nativeEvent});};_this.snapTo=function(value){Animated.timing(_this._translateYOffset,{duration:250,toValue:value,easing:def,useNativeDriver:_this.props.nativeDriver}).start(function(){_this.setState({lastSnap:value});});};_this._onHandlerStateChange=function(_ref2){var nativeEvent=_ref2.nativeEvent;if(nativeEvent.oldState===State.ACTIVE){var velocityY=nativeEvent.velocityY,translationY=nativeEvent.translationY;translationY-=_this._lastScrollYValue;var dragToss=0.05;var endOffsetY=_this.state.lastSnap+translationY+dragToss*velocityY;var destSnapPoint=_this.props.snapPoints[0];for(var i=0;i<_this.props.snapPoints.length;i++){var snapPoint=_this.props.snapPoints[i];var distFromSnap=Math.abs(snapPoint-endOffsetY);if(distFromSnap {\n this._lastScrollYValue = value\n if (value <= 20) {\n this.setState({ bounces: false })\n } else { \n this.setState({ bounces: true })\n }\n })\n\n this._dragY = props._dragY\n\n this._onGestureEvent = Animated.event(\n [{ nativeEvent: { translationY: this._dragY } }],\n { useNativeDriver: props.nativeDriver }\n )\n\n this._reverseLastScrollY = Animated.multiply(\n new Animated.Value(-1),\n this._lastScrollY\n )\n\n this._translateYOffset = props._translateYOffset\n\n this._translateY = Animated.add(\n this._translateYOffset,\n Animated.add(this._dragY, this._reverseLastScrollY)\n ).interpolate({\n inputRange: [START, END],\n outputRange: [START, END],\n extrapolate: 'clamp',\n })\n\n this._radius = Animated.add(\n this._translateYOffset,\n Animated.add(this._dragY, this._reverseLastScrollY)\n ).interpolate({\n inputRange: [START, AFTER_START / 12],\n outputRange: [0, props.cornerRadius],\n extrapolate: 'clamp',\n })\n }\n\n componentDidMount() {\n // this.snapTo(this.props.snapPoints[0])\n }\n\n _onHeaderHandlerStateChange = ({ nativeEvent }) => {\n if (nativeEvent.oldState === State.BEGAN) {\n this._lastScrollY.setValue(0)\n }\n\n this._onHandlerStateChange({ nativeEvent })\n }\n\n snapTo = (value) => {\n Animated.timing(this._translateYOffset, {\n // velocity: 0,\n // overshootClamping: true,\n // tension: 68,\n // friction: 12,\n duration: 250,\n toValue: value,\n easing: def,\n useNativeDriver: this.props.nativeDriver,\n }).start(() => {\n this.setState({ lastSnap: value })\n })\n }\n\n _onHandlerStateChange = ({ nativeEvent }) => {\n if (nativeEvent.oldState === State.ACTIVE) {\n let { velocityY, translationY } = nativeEvent\n translationY -= this._lastScrollYValue\n const dragToss = 0.05\n const endOffsetY = this.state.lastSnap + translationY + dragToss * velocityY\n\n let destSnapPoint = this.props.snapPoints[0]\n\n for (let i = 0; i < this.props.snapPoints.length; i++) {\n const snapPoint = this.props.snapPoints[i]\n const distFromSnap = Math.abs(snapPoint - endOffsetY)\n if (distFromSnap < Math.abs(destSnapPoint - endOffsetY)) {\n destSnapPoint = snapPoint\n }\n }\n\n this.setState({ lastSnap: destSnapPoint })\n this._translateYOffset.extractOffset()\n this._translateYOffset.setValue(translationY)\n this._translateYOffset.flattenOffset()\n this._dragY.setValue(0)\n\n Animated.spring(this._translateYOffset, {\n velocity: velocityY,\n tension: 68,\n friction: 12,\n toValue: destSnapPoint,\n useNativeDriver: this.props.nativeDriver,\n }).start(() => {\n if (this.state.lastSnap === this.props.snapPoints[this.props.snapPoints.length - 1]) {\n this.props.dismiss()\n }\n })\n }\n }\n\n render() {\n return (\n \n \n \n \n \n \n { this.scrollV = ref}}\n style={this.props.scrollStyle}\n bounces={this.state.bounces}\n contentContainerStyle={{ minWidth: width, minHeight: height }}\n onScrollBeginDrag={this._onRegisterLastScroll}\n scrollEventThrottle={16}>\n {this.props.renderContent()}\n \n \n \n \n \n \n \n )\n }\n}\n\nPopUp.defaultProps = {\n bounces: true,\n nativeDriver: true,\n animateBorder: false,\n cornerRadius: 20\n}\n\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n },\n header: {\n backgroundColor: 'red',\n },\n})"]} -------------------------------------------------------------------------------- /src/module/index.js: -------------------------------------------------------------------------------- 1 | import BottomSheet from'./components/bottom_sheet';import Navigator from'./components/navigation';export{BottomSheet,Navigator}; 2 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /src/module/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["index.js"],"names":["BottomSheet","Navigator"],"mappings":"AAAA,MAAOA,CAAAA,WAAP,KAAwB,2BAAxB,CACA,MAAOC,CAAAA,SAAP,KAAsB,yBAAtB,CAEA,OACED,WADF,CAEEC,SAFF","sourcesContent":["import BottomSheet from './components/bottom_sheet'\nimport Navigator from './components/navigation'\n\nexport {\n BottomSheet,\n Navigator\n}"]} --------------------------------------------------------------------------------