Use the native driver on the tabbar indicator to improve perf

zio/stable
Paul Frazee 2023-03-17 15:02:43 -05:00
parent 4a16b179e2
commit 93b334cce4
3 changed files with 17 additions and 10 deletions

View File

@ -68,7 +68,7 @@ export const Pager = ({
},
},
],
{useNativeDriver: false},
{useNativeDriver: true},
)}>
{children}
</AnimatedPagerView>

View File

@ -44,14 +44,20 @@ export function TabBar({
backgroundColor: indicatorColor || pal.colors.link,
bottom: indicatorPosition === 'bottom' ? -1 : undefined,
top: indicatorPosition === 'top' ? -1 : undefined,
left: panX.interpolate({
inputRange: items.map((_item, i) => i),
outputRange: itemLayouts.map(l => l.x),
}),
width: panX.interpolate({
inputRange: items.map((_item, i) => i),
outputRange: itemLayouts.map(l => l.width),
}),
transform: [
{
translateX: panX.interpolate({
inputRange: items.map((_item, i) => i),
outputRange: itemLayouts.map(l => l.x + l.width / 2),
}),
},
{
scaleX: panX.interpolate({
inputRange: items.map((_item, i) => i),
outputRange: itemLayouts.map(l => l.width),
}),
},
],
}
const onLayout = () => {
@ -116,6 +122,8 @@ const styles = StyleSheet.create({
},
indicator: {
position: 'absolute',
left: 0,
width: 1,
height: 3,
borderRadius: 4,
},

View File

@ -311,7 +311,6 @@ const styles = StyleSheet.create({
borderTopWidth: 1,
paddingTop: 0,
paddingBottom: 30,
// height: 100,
},
tabBarAvi: {
marginRight: 4,