about summary refs log tree commit diff
path: root/src/view/com/util/Selector.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/view/com/util/Selector.tsx')
-rw-r--r--src/view/com/util/Selector.tsx14
1 files changed, 11 insertions, 3 deletions
diff --git a/src/view/com/util/Selector.tsx b/src/view/com/util/Selector.tsx
index 5b331dc8d..03db13bd1 100644
--- a/src/view/com/util/Selector.tsx
+++ b/src/view/com/util/Selector.tsx
@@ -1,4 +1,4 @@
-import React, {createRef, useState, useMemo} from 'react'
+import React, {createRef, useState, useMemo, useRef} from 'react'
 import {
   Animated,
   StyleSheet,
@@ -24,6 +24,7 @@ export function Selector({
   panX: Animated.Value
   onSelect?: (index: number) => void
 }) {
+  const containerRef = useRef<View>(null)
   const pal = usePalette('default')
   const [itemLayouts, setItemLayouts] = useState<undefined | Layout[]>(
     undefined,
@@ -68,7 +69,11 @@ export function Selector({
     for (let i = 0; i < items.length; i++) {
       promises.push(
         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) => {
               resolve({x, width})
             },
@@ -86,7 +91,10 @@ export function Selector({
   }
 
   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]} />
       {items.map((item, i) => {
         const selected = i === selectedIndex