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';

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, { 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 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() {
  // ...

  const PLAYLIST_ITEMS_OFFSET = PLAYLIST_HERO_HEIGHT + SEARCH_PLAYLISTS_HEIGHT;

  const clampShuffleButton = Animated.add(
    // make the button maintain its position during scroll - i.e the center of the window
    scrollY.current,
    // if we havent scrolled past the hero section, have the shuffle button move up with the scrollview
    scrollY.current.interpolate({

ajsmth

<Animated.ScrollView
  contentOffset={{y: SEARCH_PLAYLISTS_HEIGHT}}
  onScroll={handleScroll}
  style={{flex: 1}}>
    {...}
</Animated.ScrollView>