feat: export some more type aliases

packages/bottom-tabs/src/index.tsx

@@ -8,12 +8,14 @@ export {
 /**
  * Views
  */
-export {
-  default as BottomTabBar,
-  Props as BottomTabBarProps,
-} from './views/BottomTabBar';
+export { default as BottomTabBar } from './views/BottomTabBar';
 
 /**
  * Types
  */
-export { BottomTabNavigationOptions, BottomTabNavigationProp } from './types';
+export {
+  BottomTabNavigationOptions,
+  BottomTabNavigationProp,
+  BottomTabBarProps,
+  BottomTabBarOptions,
+} from './types';

packages/bottom-tabs/src/types.tsx

@@ -232,5 +232,7 @@ export type BottomTabBarProps = BottomTabBarOptions & {
     tintColor: string;
     horizontal: boolean;
   }) => React.ReactNode;
+  activeTintColor: string;
+  inactiveTintColor: string;
   safeAreaInset?: React.ComponentProps<typeof SafeAreaView>['forceInset'];
 };

packages/bottom-tabs/src/views/BottomTabBar.tsx

@@ -22,9 +22,7 @@ type State = {
   visible: Animated.Value;
 };
 
-export type Props = BottomTabBarProps & {
-  activeTintColor: string;
-  inactiveTintColor: string;
+type Props = BottomTabBarProps & {
   safeAreaInset: React.ComponentProps<typeof SafeAreaView>['forceInset'];
 };
 

packages/drawer/src/index.tsx

@@ -20,4 +20,8 @@ export { default as DrawerGestureContext } from './utils/DrawerGestureContext';
 /**
  * Types
  */
-export { DrawerNavigationOptions, DrawerNavigationProp } from './types';
+export {
+  DrawerNavigationOptions,
+  DrawerNavigationProp,
+  DrawerNavigationItemsProps,
+} from './types';

packages/material-top-tabs/src/index.tsx

@@ -16,4 +16,6 @@ export { default as MaterialTopTabBar } from './views/MaterialTopTabBar';
 export {
   MaterialTopTabNavigationOptions,
   MaterialTopTabNavigationProp,
+  MaterialTopTabBarProps,
+  MaterialTopTabBarOptions,
 } from './types';

packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx

@@ -1,7 +1,10 @@
 import { I18nManager } from 'react-native';
 import Animated from 'react-native-reanimated';
 import getStatusBarHeight from '../utils/getStatusBarHeight';
-import { CardInterpolationProps, CardInterpolatedStyle } from '../types';
+import {
+  StackCardInterpolationProps,
+  StackCardInterpolatedStyle,
+} from '../types';
 
 const { cond, add, multiply, interpolate } = Animated;
 
@@ -12,7 +15,7 @@ export function forHorizontalIOS({
   current,
   next,
   layouts: { screen },
-}: CardInterpolationProps): CardInterpolatedStyle {
+}: StackCardInterpolationProps): StackCardInterpolatedStyle {
   const translateFocused = interpolate(current.progress, {
     inputRange: [0, 1],
     outputRange: [I18nManager.isRTL ? -screen.width : screen.width, 0],
@@ -57,7 +60,7 @@ export function forHorizontalIOS({
 export function forVerticalIOS({
   current,
   layouts: { screen },
-}: CardInterpolationProps): CardInterpolatedStyle {
+}: StackCardInterpolationProps): StackCardInterpolatedStyle {
   const translateY = interpolate(current.progress, {
     inputRange: [0, 1],
     outputRange: [screen.height, 0],
@@ -81,7 +84,7 @@ export function forModalPresentationIOS({
   current,
   next,
   layouts: { screen },
-}: CardInterpolationProps): CardInterpolatedStyle {
+}: StackCardInterpolationProps): StackCardInterpolatedStyle {
   const topOffset = 10;
   const statusBarHeight = getStatusBarHeight(screen.width > screen.height);
   const aspectRatio = screen.height / screen.width;
@@ -134,7 +137,7 @@ export function forFadeFromBottomAndroid({
   current,
   layouts: { screen },
   closing,
-}: CardInterpolationProps): CardInterpolatedStyle {
+}: StackCardInterpolationProps): StackCardInterpolatedStyle {
   const translateY = interpolate(current.progress, {
     inputRange: [0, 1],
     outputRange: [multiply(screen.height, 0.08), 0],
@@ -164,7 +167,7 @@ export function forRevealFromBottomAndroid({
   current,
   next,
   layouts: { screen },
-}: CardInterpolationProps): CardInterpolatedStyle {
+}: StackCardInterpolationProps): StackCardInterpolatedStyle {
   const containerTranslateY = interpolate(current.progress, {
     inputRange: [0, 1],
     outputRange: [screen.height, 0],
@@ -206,7 +209,7 @@ export function forScaleFromCenterAndroid({
   current,
   next,
   closing,
-}: CardInterpolationProps): CardInterpolatedStyle {
+}: StackCardInterpolationProps): StackCardInterpolatedStyle {
   const progress = add(current.progress, next ? next.progress : 0);
 
   const opacity = interpolate(progress, {

packages/stack/src/TransitionConfigs/HeaderStyleInterpolators.tsx

@@ -1,6 +1,9 @@
 import { I18nManager } from 'react-native';
 import Animated from 'react-native-reanimated';
-import { HeaderInterpolationProps, HeaderInterpolatedStyle } from '../types';
+import {
+  StackHeaderInterpolationProps,
+  StackHeaderInterpolatedStyle,
+} from '../types';
 
 const { interpolate, add } = Animated;
 
@@ -11,7 +14,7 @@ export function forUIKit({
   current,
   next,
   layouts,
-}: HeaderInterpolationProps): HeaderInterpolatedStyle {
+}: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle {
   const defaultOffset = 100;
   const leftSpacing = 27;
 
@@ -95,7 +98,7 @@ export function forUIKit({
 export function forFade({
   current,
   next,
-}: HeaderInterpolationProps): HeaderInterpolatedStyle {
+}: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle {
   const progress = add(current.progress, next ? next.progress : 0);
   const opacity = interpolate(progress, {
     inputRange: [0, 1, 2],
@@ -117,7 +120,7 @@ export function forStatic({
   current,
   next,
   layouts: { screen },
-}: HeaderInterpolationProps): HeaderInterpolatedStyle {
+}: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle {
   const progress = add(current.progress, next ? next.progress : 0);
   const translateX = interpolate(progress, {
     inputRange: [0, 1, 2],
@@ -136,6 +139,6 @@ export function forStatic({
   };
 }
 
-export function forNoAnimation(): HeaderInterpolatedStyle {
+export function forNoAnimation(): StackHeaderInterpolatedStyle {
   return {};
 }

packages/stack/src/index.tsx

@@ -34,4 +34,16 @@ export { default as StackGestureContext } from './utils/StackGestureContext';
 /**
  * Types
  */
-export { StackNavigationOptions, StackNavigationProp } from './types';
+export {
+  StackNavigationOptions,
+  StackNavigationProp,
+  StackHeaderProps,
+  StackHeaderLeftButtonProps,
+  StackHeaderTitleProps,
+  StackCardInterpolatedStyle,
+  StackCardInterpolationProps,
+  StackCardStyleInterpolator,
+  StackHeaderInterpolatedStyle,
+  StackHeaderInterpolationProps,
+  StackHeaderStyleInterpolator,
+} from './types';

packages/stack/src/types.tsx

@@ -67,9 +67,7 @@ export type Layout = { width: number; height: number };
 
 export type GestureDirection = 'horizontal' | 'vertical';
 
-export type HeaderMode = 'float' | 'screen' | 'none';
-
-export type HeaderScene<T> = {
+export type Scene<T> = {
   /**
    * Current route object,
    */
@@ -99,14 +97,16 @@ export type HeaderScene<T> = {
   };
 };
 
-export type HeaderOptions = {
+export type StackHeaderMode = 'float' | 'screen' | 'none';
+
+export type StackHeaderOptions = {
   /**
    * String or a function that returns a React Element to be used by the header.
    * Defaults to scene `title`.
    * It receives `allowFontScaling`, `onLayout`, `style` and `children` in the options object as an argument.
    * The title string is passed in `children`.
    */
-  headerTitle?: string | ((props: HeaderTitleProps) => React.ReactNode);
+  headerTitle?: string | ((props: StackHeaderTitleProps) => React.ReactNode);
   /**
    * Style object for the title component.
    */
@@ -151,7 +151,7 @@ export type HeaderOptions = {
    * Function which returns a React Element to display on the left side of the header.
    * It receives a number of arguments when rendered (`onPress`, `label`, `labelStyle` and more.
    */
-  headerLeft?: (props: HeaderLeftButtonProps) => React.ReactNode;
+  headerLeft?: (props: StackHeaderLeftButtonProps) => React.ReactNode;
   /**
    * Style object for the container of the `headerLeft` component, for example to add padding.
    */
@@ -169,7 +169,7 @@ export type HeaderOptions = {
    * It receives the `tintColor` in in the options object as an argument. object.
    * Defaults to Image component with a the default back icon image for the platform (a chevron on iOS and an arrow on Android).
    */
-  headerBackImage?: HeaderLeftButtonProps['backImage'];
+  headerBackImage?: StackHeaderLeftButtonProps['backImage'];
   /**
    * Color for material ripple (Android >= 5.0 only).
    */
@@ -196,7 +196,7 @@ export type HeaderOptions = {
   headerTransparent?: boolean;
 };
 
-export type HeaderProps = {
+export type StackHeaderProps = {
   /**
    * Mode of the header: `float` renders a single floating header across all screens,
    * `screen` renders separate headers for each screen.
@@ -209,11 +209,11 @@ export type HeaderProps = {
   /**
    * Object representing the current scene, such as the route object and animation progress.
    */
-  scene: HeaderScene<Route<string>>;
+  scene: Scene<Route<string>>;
   /**
    * Object representing the previous scene.
    */
-  previous?: HeaderScene<Route<string>>;
+  previous?: Scene<Route<string>>;
   /**
    * Navigation prop for the header.
    */
@@ -221,7 +221,7 @@ export type HeaderProps = {
   /**
    * Interpolated styles for various elements in the header.
    */
-  styleInterpolator: HeaderStyleInterpolator;
+  styleInterpolator: StackHeaderStyleInterpolator;
 };
 
 export type StackDescriptor = Descriptor<
@@ -235,7 +235,7 @@ export type StackDescriptorMap = {
   [key: string]: StackDescriptor;
 };
 
-export type StackNavigationOptions = HeaderOptions &
+export type StackNavigationOptions = StackHeaderOptions &
   Partial<TransitionPreset> & {
     /**
      * String that can be displayed in the header as a fallback for `headerTitle`.
@@ -245,7 +245,7 @@ export type StackNavigationOptions = HeaderOptions &
      * Function that given `HeaderProps` returns a React Element to display as a header.
      * Setting to `null` hides header.
      */
-    header?: null | ((props: HeaderProps) => React.ReactNode);
+    header?: null | ((props: StackHeaderProps) => React.ReactNode);
     /**
      * Whether a shadow is visible for the card during transitions. Defaults to `true`.
      */
@@ -295,7 +295,7 @@ export type StackNavigationOptions = HeaderOptions &
 
 export type StackNavigationConfig = {
   mode?: 'card' | 'modal';
-  headerMode?: HeaderMode;
+  headerMode?: StackHeaderMode;
   /**
    * If `false`, the keyboard will NOT automatically dismiss when navigating to a new screen.
    * Defaults to `true`.
@@ -303,7 +303,7 @@ export type StackNavigationConfig = {
   keyboardHandlingEnabled?: boolean;
 };
 
-export type HeaderLeftButtonProps = {
+export type StackHeaderLeftButtonProps = {
   /**
    * Whether the button is disabled.
    */
@@ -365,7 +365,7 @@ export type HeaderLeftButtonProps = {
   canGoBack?: boolean;
 };
 
-export type HeaderTitleProps = {
+export type StackHeaderTitleProps = {
   /**
    * Callback to trigger when the size of the title element changes.
    */
@@ -408,7 +408,7 @@ export type TransitionSpec =
   | { animation: 'spring'; config: SpringConfig }
   | { animation: 'timing'; config: TimingConfig };
 
-export type CardInterpolationProps = {
+export type StackCardInterpolationProps = {
   /**
    * Values for the current screen.
    */
@@ -447,7 +447,7 @@ export type CardInterpolationProps = {
   };
 };
 
-export type CardInterpolatedStyle = {
+export type StackCardInterpolatedStyle = {
   /**
    * Interpolated style for the container view wrapping the card.
    */
@@ -466,11 +466,11 @@ export type CardInterpolatedStyle = {
   shadowStyle?: any;
 };
 
-export type CardStyleInterpolator = (
-  props: CardInterpolationProps
-) => CardInterpolatedStyle;
+export type StackCardStyleInterpolator = (
+  props: StackCardInterpolationProps
+) => StackCardInterpolatedStyle;
 
-export type HeaderInterpolationProps = {
+export type StackHeaderInterpolationProps = {
   /**
    * Values for the current screen (the screen which owns this header).
    */
@@ -509,7 +509,7 @@ export type HeaderInterpolationProps = {
   };
 };
 
-export type HeaderInterpolatedStyle = {
+export type StackHeaderInterpolatedStyle = {
   /**
    * Interpolated style for the label of the left button (back button label).
    */
@@ -532,9 +532,9 @@ export type HeaderInterpolatedStyle = {
   backgroundStyle?: any;
 };
 
-export type HeaderStyleInterpolator = (
-  props: HeaderInterpolationProps
-) => HeaderInterpolatedStyle;
+export type StackHeaderStyleInterpolator = (
+  props: StackHeaderInterpolationProps
+) => StackHeaderInterpolatedStyle;
 
 export type TransitionPreset = {
   /**
@@ -557,9 +557,9 @@ export type TransitionPreset = {
   /**
    * Function which specifies interpolated styles for various parts of the card, e.g. the overlay, shadow etc.
    */
-  cardStyleInterpolator: CardStyleInterpolator;
+  cardStyleInterpolator: StackCardStyleInterpolator;
   /**
    * Function which specifies interpolated styles for various parts of the header, e.g. the title, left button etc.
    */
-  headerStyleInterpolator: HeaderStyleInterpolator;
+  headerStyleInterpolator: StackHeaderStyleInterpolator;
 };

packages/stack/src/views/Header/Header.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { StackActions } from '@react-navigation/routers';
 import HeaderSegment from './HeaderSegment';
-import { HeaderProps, HeaderTitleProps } from '../../types';
+import { StackHeaderProps, StackHeaderTitleProps } from '../../types';
 import HeaderTitle from './HeaderTitle';
 
-export default React.memo(function Header(props: HeaderProps) {
+export default React.memo(function Header(props: StackHeaderProps) {
   const { scene, previous, layout, navigation, styleInterpolator } = props;
   const { options } = scene.descriptor;
   const title =
@@ -41,7 +41,7 @@ export default React.memo(function Header(props: HeaderProps) {
       leftLabel={leftLabel}
       headerTitle={
         typeof options.headerTitle !== 'function'
-          ? (props: HeaderTitleProps) => <HeaderTitle {...props} />
+          ? (props: StackHeaderTitleProps) => <HeaderTitle {...props} />
           : options.headerTitle
       }
       onGoBack={

packages/stack/src/views/Header/HeaderBackButton.tsx

@@ -10,9 +10,9 @@ import {
 import Animated from 'react-native-reanimated';
 import MaskedView from '../MaskedView';
 import TouchableItem from '../TouchableItem';
-import { HeaderLeftButtonProps } from '../../types';
+import { StackHeaderLeftButtonProps } from '../../types';
 
-type Props = HeaderLeftButtonProps & {
+type Props = StackHeaderLeftButtonProps & {
   tintColor: string;
 };
 

packages/stack/src/views/Header/HeaderContainer.tsx

@@ -11,15 +11,15 @@ import Header from './Header';
 import { forStatic } from '../../TransitionConfigs/HeaderStyleInterpolators';
 import {
   Layout,
-  HeaderScene,
-  HeaderStyleInterpolator,
+  Scene,
+  StackHeaderStyleInterpolator,
   StackNavigationProp,
 } from '../../types';
 
 export type Props = {
   mode: 'float' | 'screen';
   layout: Layout;
-  scenes: Array<HeaderScene<Route<string>> | undefined>;
+  scenes: Array<Scene<Route<string>> | undefined>;
   state: StackNavigationState;
   getPreviousRoute: (props: {
     route: Route<string>;
@@ -28,7 +28,7 @@ export type Props = {
     route: Route<string>;
     height: number;
   }) => void;
-  styleInterpolator: HeaderStyleInterpolator;
+  styleInterpolator: StackHeaderStyleInterpolator;
   style?: StyleProp<ViewStyle>;
 };
 

packages/stack/src/views/Header/HeaderSegment.tsx

@@ -14,11 +14,11 @@ import getStatusBarHeight from '../../utils/getStatusBarHeight';
 import memoize from '../../utils/memoize';
 import {
   Layout,
-  HeaderStyleInterpolator,
-  HeaderLeftButtonProps,
-  HeaderTitleProps,
-  HeaderOptions,
-  HeaderScene,
+  StackHeaderStyleInterpolator,
+  StackHeaderLeftButtonProps,
+  StackHeaderTitleProps,
+  StackHeaderOptions,
+  Scene,
 } from '../../types';
 
 export type Scene<T> = {
@@ -26,14 +26,14 @@ export type Scene<T> = {
   progress: Animated.Node<number>;
 };
 
-type Props = HeaderOptions & {
-  headerTitle: (props: HeaderTitleProps) => React.ReactNode;
+type Props = StackHeaderOptions & {
+  headerTitle: (props: StackHeaderTitleProps) => React.ReactNode;
   layout: Layout;
   onGoBack?: () => void;
   title?: string;
   leftLabel?: string;
-  scene: HeaderScene<Route<string>>;
-  styleInterpolator: HeaderStyleInterpolator;
+  scene: Scene<Route<string>>;
+  styleInterpolator: StackHeaderStyleInterpolator;
 };
 
 type State = {
@@ -113,7 +113,7 @@ export default class HeaderSegment extends React.Component<Props, State> {
 
   private getInterpolatedStyle = memoize(
     (
-      styleInterpolator: HeaderStyleInterpolator,
+      styleInterpolator: StackHeaderStyleInterpolator,
       layout: Layout,
       current: Animated.Node<number>,
       next: Animated.Node<number> | undefined,
@@ -140,7 +140,7 @@ export default class HeaderSegment extends React.Component<Props, State> {
       onGoBack,
       headerTitle,
       headerLeft: left = onGoBack
-        ? (props: HeaderLeftButtonProps) => <HeaderBackButton {...props} />
+        ? (props: StackHeaderLeftButtonProps) => <HeaderBackButton {...props} />
         : undefined,
       // @ts-ignore
       headerStatusBarHeight = getStatusBarHeight(layout.width > layout.height),

packages/stack/src/views/Stack/Card.tsx

@@ -16,7 +16,7 @@ import {
 } from 'react-native-gesture-handler';
 import {
   TransitionSpec,
-  CardStyleInterpolator,
+  StackCardStyleInterpolator,
   Layout,
   SpringConfig,
   TimingConfig,
@@ -52,7 +52,7 @@ type Props = ViewProps & {
     open: TransitionSpec;
     close: TransitionSpec;
   };
-  styleInterpolator: CardStyleInterpolator;
+  styleInterpolator: StackCardStyleInterpolator;
   containerStyle?: StyleProp<ViewStyle>;
   contentStyle?: StyleProp<ViewStyle>;
 };
@@ -658,7 +658,7 @@ export default class Card extends React.Component<Props> {
   // Changing it during an animations can result in unexpected results
   private getInterpolatedStyle = memoize(
     (
-      styleInterpolator: CardStyleInterpolator,
+      styleInterpolator: StackCardStyleInterpolator,
       index: number,
       current: Animated.Node<number>,
       next: Animated.Node<number> | undefined,

packages/stack/src/views/Stack/Stack.tsx

@@ -23,8 +23,8 @@ import {
 import { forNoAnimation } from '../../TransitionConfigs/HeaderStyleInterpolators';
 import {
   Layout,
-  HeaderMode,
-  HeaderScene,
+  StackHeaderMode,
+  Scene,
   StackDescriptorMap,
   StackNavigationOptions,
   StackNavigationHelpers,
@@ -51,7 +51,7 @@ type Props = {
   getGesturesEnabled: (props: { route: Route<string> }) => boolean;
   renderHeader: (props: HeaderContainerProps) => React.ReactNode;
   renderScene: (props: { route: Route<string> }) => React.ReactNode;
-  headerMode: HeaderMode;
+  headerMode: StackHeaderMode;
   onPageChangeStart?: () => void;
   onPageChangeConfirm?: () => void;
   onPageChangeCancel?: () => void;
@@ -60,7 +60,7 @@ type Props = {
 type State = {
   routes: Route<string>[];
   descriptors: StackDescriptorMap;
-  scenes: HeaderScene<Route<string>>[];
+  scenes: Scene<Route<string>>[];
   progress: ProgressValues;
   layout: Layout;
   floatingHeaderHeights: { [key: string]: number };

packages/stack/src/views/Stack/StackItem.tsx

@@ -7,9 +7,9 @@ import { Props as HeaderContainerProps } from '../Header/HeaderContainer';
 import Card from './Card';
 import {
   StackNavigationHelpers,
-  HeaderScene,
+  Scene,
   Layout,
-  HeaderMode,
+  StackHeaderMode,
   TransitionPreset,
 } from '../../types';
 
@@ -20,8 +20,8 @@ type Props = TransitionPreset & {
   closing: boolean;
   layout: Layout;
   current: Animated.Value<number>;
-  previousScene?: HeaderScene<Route<string>>;
-  scene: HeaderScene<Route<string>>;
+  previousScene?: Scene<Route<string>>;
+  scene: Scene<Route<string>>;
   state: StackNavigationState;
   navigation: StackNavigationHelpers;
   cardTransparent?: boolean;
@@ -49,7 +49,7 @@ type Props = TransitionPreset & {
     vertical?: number;
     horizontal?: number;
   };
-  headerMode: HeaderMode;
+  headerMode: StackHeaderMode;
   headerTransparent?: boolean;
   floatingHeaderHeight: number;
   hasCustomHeader: boolean;