fix swiping on main feed

This commit is contained in:
Ansh Nanda
2023-04-09 13:08:58 -07:00
parent 7a84f14768
commit 7606768202
+13 -3
View File
@@ -1,4 +1,4 @@
import React, {createRef, useState, useMemo} from 'react' import React, {createRef, useState, useMemo, useRef} from 'react'
import { import {
Animated, Animated,
StyleSheet, StyleSheet,
@@ -46,6 +46,7 @@ export function TabBar({
[items.length], [items.length],
) )
const panX = Animated.add(position, offset) const panX = Animated.add(position, offset)
const containerRef = useRef<View>(null)
const indicatorStyle = { const indicatorStyle = {
backgroundColor: indicatorColor || pal.colors.link, backgroundColor: indicatorColor || pal.colors.link,
@@ -73,7 +74,12 @@ export function TabBar({
for (let i = 0; i < items.length; i++) { for (let i = 0; i < items.length; i++) {
promises.push( promises.push(
new Promise<Layout>(resolve => { new Promise<Layout>(resolve => {
itemRefs[i].current?.measure( if (!containerRef.current || !itemRefs[i].current) {
return resolve({x: 0, width: 0})
}
itemRefs[i].current?.measureLayout(
containerRef.current,
(x: number, _y: number, width: number) => { (x: number, _y: number, width: number) => {
resolve({x, width}) resolve({x, width})
}, },
@@ -94,7 +100,11 @@ export function TabBar({
} }
return ( return (
<View testID={testID} style={[pal.view, styles.outer]} onLayout={onLayout}> <View
testID={testID}
style={[pal.view, styles.outer]}
onLayout={onLayout}
ref={containerRef}>
<Animated.View style={[styles.indicator, indicatorStyle]} /> <Animated.View style={[styles.indicator, indicatorStyle]} />
{items.map((item, i) => { {items.map((item, i) => {
const selected = i === selectedPage const selected = i === selectedPage