fix profile tabs switching on android

This commit is contained in:
Ansh Nanda
2023-04-09 13:17:33 -07:00
parent 7606768202
commit 7fc3004468
+11 -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,
@@ -24,6 +24,7 @@ export function Selector({
panX: Animated.Value panX: Animated.Value
onSelect?: (index: number) => void onSelect?: (index: number) => void
}) { }) {
const containerRef = useRef<View>(null)
const pal = usePalette('default') const pal = usePalette('default')
const [itemLayouts, setItemLayouts] = useState<undefined | Layout[]>( const [itemLayouts, setItemLayouts] = useState<undefined | Layout[]>(
undefined, undefined,
@@ -68,7 +69,11 @@ export function Selector({
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})
}, },
@@ -86,7 +91,10 @@ export function Selector({
} }
return ( return (
<View style={[pal.view, styles.outer]} onLayout={onLayout}> <View
style={[pal.view, styles.outer]}
onLayout={onLayout}
ref={containerRef}>
<Animated.View style={[styles.underline, underlineStyle]} /> <Animated.View style={[styles.underline, underlineStyle]} />
{items.map((item, i) => { {items.map((item, i) => {
const selected = i === selectedIndex const selected = i === selectedIndex