From 9d822b95a6df797e2e63e481573e64ea7d0f9386 Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Tue, 26 May 2020 17:33:50 +0200 Subject: [PATCH] fix: fix type of style for various options --- packages/bottom-tabs/src/types.tsx | 3 ++- packages/bottom-tabs/src/views/BottomTabItem.tsx | 6 +++--- packages/stack/src/types.tsx | 10 +++++----- packages/stack/src/views/Header/HeaderBackground.tsx | 10 +++++++++- packages/stack/src/views/Stack/Card.tsx | 10 ++++++++-- packages/stack/src/views/Stack/CardStack.tsx | 7 ++++--- 6 files changed, 31 insertions(+), 15 deletions(-) diff --git a/packages/bottom-tabs/src/types.tsx b/packages/bottom-tabs/src/types.tsx index 99553cbe..ae089bb7 100644 --- a/packages/bottom-tabs/src/types.tsx +++ b/packages/bottom-tabs/src/types.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { + Animated, TouchableWithoutFeedbackProps, StyleProp, TextStyle, @@ -197,7 +198,7 @@ export type BottomTabBarOptions = { /** * Style object for the tab bar container. */ - style?: StyleProp; + style?: Animated.WithAnimatedValue>; }; export type BottomTabBarProps = BottomTabBarOptions & { diff --git a/packages/bottom-tabs/src/views/BottomTabItem.tsx b/packages/bottom-tabs/src/views/BottomTabItem.tsx index 8d194ca8..b23b8d22 100644 --- a/packages/bottom-tabs/src/views/BottomTabItem.tsx +++ b/packages/bottom-tabs/src/views/BottomTabItem.tsx @@ -1,8 +1,8 @@ import React from 'react'; import { View, + Text, TouchableWithoutFeedback, - Animated, StyleSheet, Platform, StyleProp, @@ -191,7 +191,7 @@ export default function BottomTabBarItem({ if (typeof label === 'string') { return ( - {label} - + ); } diff --git a/packages/stack/src/types.tsx b/packages/stack/src/types.tsx index 32159ef3..f260c5a4 100644 --- a/packages/stack/src/types.tsx +++ b/packages/stack/src/types.tsx @@ -119,7 +119,7 @@ export type StackHeaderOptions = { * This may lead to white space or overlap between `headerLeft` and `headerTitle` if a customized `headerLeft` is used. * It can be solved by adjusting `left` and `right` style in `headerTitleContainerStyle` and `marginHorizontal` in `headerTitleStyle`. */ - headerTitleContainerStyle?: StyleProp; + headerTitleContainerStyle?: Animated.WithAnimatedValue>; /** * Tint color for the header. */ @@ -157,7 +157,7 @@ export type StackHeaderOptions = { /** * Style object for the container of the `headerLeft` component, for example to add padding. */ - headerLeftContainerStyle?: StyleProp; + headerLeftContainerStyle?: Animated.WithAnimatedValue>; /** * Function which returns a React Element to display on the right side of the header. */ @@ -165,7 +165,7 @@ export type StackHeaderOptions = { /** * Style object for the container of the `headerRight` component, for example to add padding. */ - headerRightContainerStyle?: StyleProp; + headerRightContainerStyle?: Animated.WithAnimatedValue>; /** * Function which returns a React Element to display custom image in header's back button. * It receives the `tintColor` in in the options object as an argument. object. @@ -187,7 +187,7 @@ export type StackHeaderOptions = { /** * Style object for the header. You can specify a custom background color here, for example. */ - headerStyle?: StyleProp; + headerStyle?: Animated.WithAnimatedValue>; /** * Defaults to `false`. If `true`, the header will not have a background unless you explicitly provide it with `headerBackground`. * The header will also float over the screen so that it overlaps the content underneath. @@ -380,7 +380,7 @@ export type StackHeaderLeftButtonProps = { /** * Style object for the label. */ - labelStyle?: React.ComponentProps['style']; + labelStyle?: Animated.WithAnimatedValue>; /** * Whether label font should scale to respect Text Size accessibility settings. */ diff --git a/packages/stack/src/views/Header/HeaderBackground.tsx b/packages/stack/src/views/Header/HeaderBackground.tsx index afdb1e3e..ffbbbaa0 100644 --- a/packages/stack/src/views/Header/HeaderBackground.tsx +++ b/packages/stack/src/views/Header/HeaderBackground.tsx @@ -1,8 +1,16 @@ import * as React from 'react'; -import { Animated, StyleSheet, Platform, ViewProps } from 'react-native'; +import { + Animated, + StyleSheet, + Platform, + ViewProps, + StyleProp, + ViewStyle, +} from 'react-native'; import { useTheme } from '@react-navigation/native'; type Props = ViewProps & { + style?: Animated.WithAnimatedValue>; children?: React.ReactNode; }; diff --git a/packages/stack/src/views/Stack/Card.tsx b/packages/stack/src/views/Stack/Card.tsx index ad467c0b..8bcd52b3 100755 --- a/packages/stack/src/views/Stack/Card.tsx +++ b/packages/stack/src/views/Stack/Card.tsx @@ -46,7 +46,9 @@ type Props = ViewProps & { onGestureCanceled?: () => void; onGestureEnd?: () => void; children: React.ReactNode; - overlay: (props: { style: StyleProp }) => React.ReactNode; + overlay: (props: { + style: Animated.WithAnimatedValue>; + }) => React.ReactNode; overlayEnabled: boolean; shadowEnabled: boolean; gestureEnabled: boolean; @@ -83,7 +85,11 @@ export default class Card extends React.Component { shadowEnabled: true, gestureEnabled: true, gestureVelocityImpact: GESTURE_VELOCITY_IMPACT, - overlay: ({ style }: { style: StyleProp }) => + overlay: ({ + style, + }: { + style: Animated.WithAnimatedValue>; + }) => style ? ( ) : null, diff --git a/packages/stack/src/views/Stack/CardStack.tsx b/packages/stack/src/views/Stack/CardStack.tsx index 86773aa7..6ad3b217 100755 --- a/packages/stack/src/views/Stack/CardStack.tsx +++ b/packages/stack/src/views/Stack/CardStack.tsx @@ -83,9 +83,10 @@ const getHeaderHeights = ( ) => { return routes.reduce>((acc, curr) => { const { options = {} } = descriptors[curr.key] || {}; - const { height = previous[curr.key] } = StyleSheet.flatten( - options.headerStyle || {} - ); + const style: any = StyleSheet.flatten(options.headerStyle || {}); + + const height = + typeof style.height === 'number' ? style.height : previous[curr.key]; const safeAreaInsets = { ...insets,