ajsmth

import React, { useState } from 'react'

// this component will be the focus of this series
// we will extend its functionality considerably throughout

// for now let's just setup the translations...

function Pager({ children, activeIndex }) {
  // this will update when the activeIndex changes
  // try updating activeIndex in devtools and see how the blue container changes position

ajsmth

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(() => ({

ajsmth

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)

ajsmth

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,

ajsmth

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,

ajsmth

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,

ajsmth

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;

ajsmth

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 />

ajsmth

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}}}],

ajsmth

function PlaylistProfile() {
  //...
  
  const clampHeroSection = scrollY.current;
  
  return (
    <SafeAreaView style={{flex: 1}}>
      <Header />

      <Animated.ScrollView onScroll={handleScroll} style={{flex: 1}}>