5: Animated styles

Sheet.tsx

const sheetHeightAnimatedStyle = useAnimatedStyle(() => ({
    // The 'worklet' directive is included with useAnimatedStyle hook by default
    height: -sheetHeight.value,
  }));

const sheetContentAnimatedStyle = useAnimatedStyle(() => ({
  paddingBottom: position.value === 'maximised' ? 180 : 0,
  paddingTop: position.value === 'maximised' ? 40 : 20,
  paddingHorizontal: 20,
}));

const sheetNavigationAnimatedStyle = useAnimatedStyle(() => ({
  height: navHeight.value,
  overflow: 'hidden',
}));