fix: export Touchable* component props (#2556)

## Description

Touchable* components contain types that aren't compatible with React
Native's it might be necessary for consumer to import and use them
instead.

## Test plan

Compiled my branch and tested imports with `lib` output.

---------

Co-authored-by: Jakub Piasecki <jakubpiasecki67@gmail.com>

src/components/touchables/TouchableHighlight.tsx

@@ -7,7 +7,7 @@ import GenericTouchable, {
 import {
   StyleSheet,
   View,
-  TouchableHighlightProps,
+  TouchableHighlightProps as RNTouchableHighlightProps,
   ColorValue,
   ViewProps,
 } from 'react-native';
@@ -21,11 +21,14 @@ interface State {
   };
 }
 
+export type TouchableHighlightProps = RNTouchableHighlightProps &
+  GenericTouchableProps;
+
 /**
  * TouchableHighlight follows RN's implementation
  */
 export default class TouchableHighlight extends Component<
-  TouchableHighlightProps & GenericTouchableProps,
+  TouchableHighlightProps,
   State
 > {
   static defaultProps = {
@@ -35,7 +38,7 @@ export default class TouchableHighlight extends Component<
     underlayColor: 'black',
   };
 
-  constructor(props: TouchableHighlightProps & GenericTouchableProps) {
+  constructor(props: TouchableHighlightProps) {
     super(props);
     this.state = {
       extraChildStyle: null,

src/components/touchables/TouchableNativeFeedback.android.tsx

@@ -1,6 +1,6 @@
 import {
   Platform,
-  TouchableNativeFeedbackProps,
+  TouchableNativeFeedbackProps as RNTouchableNativeFeedbackProps,
   ColorValue,
 } from 'react-native';
 import * as React from 'react';
@@ -14,15 +14,16 @@ export type TouchableNativeFeedbackExtraProps = {
   foreground?: boolean;
 };
 
+export type TouchableNativeFeedbackProps = RNTouchableNativeFeedbackProps &
+  GenericTouchableProps;
+
 /**
  * TouchableNativeFeedback behaves slightly different than RN's TouchableNativeFeedback.
  * There's small difference with handling long press ripple since RN's implementation calls
  * ripple animation via bridge. This solution leaves all animations' handling for native components so
  * it follows native behaviours.
  */
-export default class TouchableNativeFeedback extends Component<
-  TouchableNativeFeedbackProps & GenericTouchableProps
-> {
+export default class TouchableNativeFeedback extends Component<TouchableNativeFeedbackProps> {
   static defaultProps = {
     ...GenericTouchable.defaultProps,
     useForeground: true,

src/components/touchables/TouchableOpacity.tsx

@@ -3,7 +3,7 @@ import {
   Easing,
   StyleSheet,
   View,
-  TouchableOpacityProps,
+  TouchableOpacityProps as RNTouchableOpacityProps,
 } from 'react-native';
 import GenericTouchable, {
   TOUCHABLE_STATE,
@@ -12,16 +12,15 @@ import GenericTouchable, {
 import * as React from 'react';
 import { Component } from 'react';
 
-interface GHTouchableOpacityProps {
-  useNativeAnimations?: boolean;
-}
+export type TouchableOpacityProps = RNTouchableOpacityProps &
+  GenericTouchableProps & {
+    useNativeAnimations?: boolean;
+  };
 
 /**
  * TouchableOpacity bases on timing animation which has been used in RN's core
  */
-export default class TouchableOpacity extends Component<
-  TouchableOpacityProps & GenericTouchableProps & GHTouchableOpacityProps
-> {
+export default class TouchableOpacity extends Component<TouchableOpacityProps> {
   static defaultProps = {
     ...GenericTouchable.defaultProps,
     activeOpacity: 0.2,

src/components/touchables/TouchableWithoutFeedback.tsx

@@ -2,8 +2,10 @@ import * as React from 'react';
 import { PropsWithChildren } from 'react';
 import GenericTouchable, { GenericTouchableProps } from './GenericTouchable';
 
+export type TouchableWithoutFeedbackProps = GenericTouchable;
+
 const TouchableWithoutFeedback = React.forwardRef<
-  GenericTouchable,
+  TouchableWithoutFeedbackProps,
   PropsWithChildren<GenericTouchableProps>
 >((props, ref) => <GenericTouchable ref={ref} {...props} />);
 

src/components/touchables/index.ts

@@ -1,3 +1,6 @@
+export type { TouchableHighlightProps } from './TouchableHighlight';
+export type { TouchableOpacityProps } from './TouchableOpacity';
+export type { TouchableWithoutFeedbackProps } from './TouchableWithoutFeedback';
 export { default as TouchableNativeFeedback } from './TouchableNativeFeedback';
 export { default as TouchableWithoutFeedback } from './TouchableWithoutFeedback';
 export { default as TouchableOpacity } from './TouchableOpacity';

src/index.ts

@@ -94,6 +94,11 @@ export {
   BorderlessButton,
   PureNativeButton,
 } from './components/GestureButtons';
+export type {
+  TouchableHighlightProps,
+  TouchableOpacityProps,
+  TouchableWithoutFeedbackProps,
+} from './components/touchables';
 export {
   TouchableHighlight,
   TouchableNativeFeedback,