Skip to content

Commit

Permalink
fix: export Touchable* component props (#2556)
Browse files Browse the repository at this point in the history
## 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 <[email protected]>
  • Loading branch information
G07cha and j-piasecki authored Aug 9, 2023
1 parent 8bbef20 commit 08b5853
Show file tree
Hide file tree
Showing 6 changed files with 28 additions and 15 deletions.
9 changes: 6 additions & 3 deletions src/components/touchables/TouchableHighlight.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import GenericTouchable, {
import {
StyleSheet,
View,
TouchableHighlightProps,
TouchableHighlightProps as RNTouchableHighlightProps,
ColorValue,
ViewProps,
} from 'react-native';
Expand All @@ -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 = {
Expand All @@ -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,
Expand Down
9 changes: 5 additions & 4 deletions src/components/touchables/TouchableNativeFeedback.android.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {
Platform,
TouchableNativeFeedbackProps,
TouchableNativeFeedbackProps as RNTouchableNativeFeedbackProps,
ColorValue,
} from 'react-native';
import * as React from 'react';
Expand All @@ -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,
Expand Down
13 changes: 6 additions & 7 deletions src/components/touchables/TouchableOpacity.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {
Easing,
StyleSheet,
View,
TouchableOpacityProps,
TouchableOpacityProps as RNTouchableOpacityProps,
} from 'react-native';
import GenericTouchable, {
TOUCHABLE_STATE,
Expand All @@ -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,
Expand Down
4 changes: 3 additions & 1 deletion src/components/touchables/TouchableWithoutFeedback.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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} />);

Expand Down
3 changes: 3 additions & 0 deletions src/components/touchables/index.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
5 changes: 5 additions & 0 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,11 @@ export {
BorderlessButton,
PureNativeButton,
} from './components/GestureButtons';
export type {
TouchableHighlightProps,
TouchableOpacityProps,
TouchableWithoutFeedbackProps,
} from './components/touchables';
export {
TouchableHighlight,
TouchableNativeFeedback,
Expand Down

0 comments on commit 08b5853

Please sign in to comment.