This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const clampHeroSection = Animated.add( | |
// we want to make the hero section maintain its position on scroll | |
// we can do this by setting its translateY value to whatever the scroll value is | |
scrollY.current, | |
// shift it up by subtracting points until we've scrolled beyond the search section, and clamp it after that | |
scrollY.current.interpolate({ | |
inputRange: [0, SEARCH_PLAYLISTS_HEIGHT], | |
outputRange: [0, -SEARCH_PLAYLISTS_HEIGHT], | |
// we also want it to shift down when the user pulls down, so we clamp the above range with 'extrapolateRight' | |
// using just 'extrapolate' would clamp the scroll value in both directions |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function PlaylistProfile() { | |
//... | |
const clampHeroSection = scrollY.current; | |
return ( | |
<SafeAreaView style={{flex: 1}}> | |
<Header /> | |
<Animated.ScrollView onScroll={handleScroll} style={{flex: 1}}> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function PlaylistProfile() { | |
// this will track the scroll value of the Animated.ScrollView | |
// use a ref so it doesn't get reset on rerenders | |
const scrollY = React.useRef(new Animated.Value(0)); | |
// standard boilerplate for listening to scroll events | |
// useNativeDriver means the scroll value will be updated on the native thread (more efficient) | |
// this limits what you can do with the Animated.Value - style properties are restricted to transform and opacity | |
const handleScroll = Animated.event( | |
[{nativeEvent: {contentOffset: {y: scrollY.current}}}], |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import {View, Animated, SafeAreaView, TouchableOpacity} from 'react-native'; | |
function PlaylistProfile() { | |
return ( | |
<SafeAreaView style={{flex: 1}}> | |
<Header /> | |
<Animated.ScrollView style={{flex: 1}}> | |
<SearchPlaylists /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useState, useEffect } from 'react'; | |
import { useSpring, animated, interpolate } from 'react-spring'; | |
import { useDrag } from 'react-use-gesture'; | |
interface PagerProps { | |
type: "horizontal" | "vertical"; | |
children: any; | |
activeIndex?: number; | |
onChange?: (nextIndex: number) => void; | |
initialIndex?: number; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useState, useEffect } from 'react'; | |
import { useSpring, animated, interpolate } from 'react-spring'; | |
import { useDrag } from 'react-use-gesture'; | |
function Pager({ | |
children, | |
activeIndex: parentIndex, // rename to parentIndex for simple refactor | |
onChange: parentOnChange, // rename to parentOnChange for simple refactor | |
initialIndex = 0, // default to index 0 | |
adjacentChildOffset, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useState, useEffect } from 'react'; | |
import { useSpring, animated, interpolate } from 'react-spring'; | |
import { useDrag } from 'react-use-gesture'; | |
function Pager({ | |
children, | |
activeIndex: parentIndex, // rename to parentIndex for simple refactor | |
onChange: parentOnChange, // rename to parentOnChange for simple refactor | |
initialIndex = 0, // default to index 0 | |
adjacentChildOffset, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useState, useEffect } from 'react' | |
import { useSpring, animated, interpolate } from 'react-spring' | |
import { useDrag } from 'react-use-gesture' | |
const PAGE_SIZE = 200 | |
// arbitrary value that will determine if we should transition after dragging | |
const DRAG_THRESHOLD = Math.floor(PAGE_SIZE * 0.3) | |
function Pager({ | |
children, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useState, useEffect } from 'react' | |
import { useSpring, animated, interpolate } from 'react-spring' | |
import { useDrag } from 'react-use-gesture' | |
// let's handle gestures within our pager component | |
const PAGE_SIZE = 375 | |
// arbitrary value that will determine if we should transition after dragging | |
const DRAG_THRESHOLD = Math.floor(PAGE_SIZE * 0.3) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useState, useEffect } from 'react' | |
import { useSpring, animated, interpolate } from 'react-spring' | |
// let's add some transitions to the pager component when the activeIndex changes | |
function Pager({ children, activeIndex }) { | |
const offset = activeIndex * 100 * -1 | |
// translateX will now represent a spring value that we will animate | |
// we'll set the initial value to our first offset here: | |
const [{ translateX }, set] = useSpring(() => ({ |