Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | 1x 8x 8x 8x 8x 8x 8x 8x 8x | import { ScrollView, View } from 'react-native';
import { FC, ReactElement, ReactNode, useState } from 'react';
interface TransactionScrollViewProps {
children: ReactNode;
}
export const TransactionScrollView: FC<TransactionScrollViewProps> = ({
children,
}): ReactElement => {
const [scrollY, setScrollY] = useState(0);
const [contentHeight, setContentHeight] = useState(1);
const [containerHeight, setContainerHeight] = useState(1);
const indicatorSize = Math.max((containerHeight * containerHeight) / contentHeight, 20);
const rawIndicatorPos =
(scrollY * (containerHeight - indicatorSize)) / (contentHeight - containerHeight);
const maxPos = containerHeight - indicatorSize;
const safeIndicatorPos = Number.isFinite(rawIndicatorPos)
? Math.min(Math.max(rawIndicatorPos, 0), maxPos > 0 ? maxPos : 0)
: 0;
return (
<View className="mb-4 max-h-[250px] w-full">
<ScrollView
scrollEventThrottle={16}
showsVerticalScrollIndicator={false}
onContentSizeChange={(_, h) => setContentHeight(h)}
onLayout={(e) => setContainerHeight(e.nativeEvent.layout.height)}
onScroll={(e) => setScrollY(e.nativeEvent.contentOffset.y)}
>
{children}
</ScrollView>
<View className="absolute bottom-2 right-1 top-1 w-1 rounded-full">
<View
className="bg-tertiary absolute bottom-0 left-0 w-1.5 rounded-full"
style={{ top: safeIndicatorPos, height: indicatorSize }}
/>
</View>
</View>
);
};
|