Skip to content

Commit

Permalink
fix: remove ios scroll reset workaround (#127)
Browse files Browse the repository at this point in the history
Pulling down to refresh does not seem to work on the Example app using Expo, when the tab pane is scrolled to the top.

This only seems to happen in that case though, in a bare RN iOS app everything seems fine.

This workaround creates other issue though, and isn't correct. We'll need to find a better solution.
  • Loading branch information
andreialecu authored Feb 14, 2021
1 parent c328919 commit 9e9d130
Show file tree
Hide file tree
Showing 3 changed files with 5 additions and 21 deletions.
1 change: 0 additions & 1 deletion src/Container.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -319,7 +319,6 @@ const Container = React.forwardRef<CollapsibleRef, CollapsibleProps>(
setHeaderHeight(height)
}
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[headerHeight]
)

Expand Down
9 changes: 1 addition & 8 deletions src/helpers.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,6 @@ export const ONE_FRAME_MS = 16

export const IS_IOS = Platform.OS === 'ios'

/**
* It seems that if the vertical scroll views are at position 0 on ios
* the horizontal pane switcher will catch the scroll event and not forward
* this breaks pull to refresh, so we ensure we're 1 pixel scrolled at all times
*/
export const PADDING_WORKAROUND_IOS = IS_IOS ? 1 : 0

export const AnimatedFlatList = Animated.createAnimatedComponent(FlatList)

export function scrollToImpl<T extends RefComponent>(
Expand All @@ -29,5 +22,5 @@ export function scrollToImpl<T extends RefComponent>(
if (!Number.isFinite(x) || !Number.isFinite(y)) return

//@ts-expect-error: reanimated typescript types do not accept FlatList for `scrollTo`, but it does work
scrollTo(ref, x, y + PADDING_WORKAROUND_IOS, animated)
scrollTo(ref, x, y, animated)
}
16 changes: 4 additions & 12 deletions src/hooks.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,7 @@ import {
import { useDeepCompareMemo } from 'use-deep-compare'

import { Context, TabNameContext } from './Context'
import {
IS_IOS,
ONE_FRAME_MS,
PADDING_WORKAROUND_IOS,
scrollToImpl,
} from './helpers'
import { IS_IOS, ONE_FRAME_MS, scrollToImpl } from './helpers'
import {
CollapsibleStyle,
ContextType,
Expand Down Expand Up @@ -136,7 +131,7 @@ export function useCollapsibleStyle(): CollapsibleStyle {
minHeight: IS_IOS
? (containerHeight || 0) - tabBarHeight
: (containerHeight || 0) + headerHeight,
paddingTop: IS_IOS ? PADDING_WORKAROUND_IOS : headerHeight + tabBarHeight,
paddingTop: IS_IOS ? 0 : headerHeight + tabBarHeight,
},
progressViewOffset: headerHeight + tabBarHeight,
}
Expand Down Expand Up @@ -335,11 +330,8 @@ export const useScrollHandlerY = (
let { y } = event.contentOffset
// normalize the value so it starts at 0
y = y + contentInset
// ios workaround, make sure we don't rest on 0 otherwise we can't pull to refresh
if (y === 0) {
scrollTo(refMap[name], 0, 0, true, `[${name}]: ios reset`)
}
// handle iOS bouncing

// make sure the y value is clamped to the scrollable size (clamps overscrolling)
scrollYCurrent.value = interpolate(
y,
[0, clampMax],
Expand Down

0 comments on commit 9e9d130

Please sign in to comment.