Enable useNative when passing activeScale and add its type (#1997)

* Enable useNative when passing activeScale and add its type

* Fix check on activeScale

Author: ethanshar

demo/src/screens/componentScreens/CardsScreen.tsx

@@ -97,7 +97,6 @@ export default class CardsScreen extends Component<CardsScreenProps, CardsScreen
         style={{marginBottom: 15}}
         onPress={() => {}}
         borderRadius={borderRadius}
-        useNative
         bg-$backgroundElevated
         activeOpacity={1}
         activeScale={isImageOnLeft ? 0.96 : 1.04}
@@ -136,7 +135,7 @@ export default class CardsScreen extends Component<CardsScreenProps, CardsScreen
 
   renderCoupon = (cardProps: CardProps) => {
     return (
-      <Card {...cardProps} flex height={160} onPress={() => {}} useNative activeOpacity={1} activeScale={0.96}>
+      <Card {...cardProps} flex height={160} onPress={() => {}} activeOpacity={1} activeScale={0.96}>
         <Card.Section
           bg-$backgroundDangerHeavy
           padding-20
@@ -169,7 +168,7 @@ export default class CardsScreen extends Component<CardsScreenProps, CardsScreen
 
   renderComplexImage = (cardProps: CardProps, image: React.ReactNode) => {
     return (
-      <Card {...cardProps} flex marginV-10 onPress={() => {}} useNative activeOpacity={1} activeScale={0.96}>
+      <Card {...cardProps} flex marginV-10 onPress={() => {}} activeOpacity={1} activeScale={0.96}>
         {image}
         <Card.Section
           bg-$backgroundElevated

src/components/touchableOpacity/index.tsx

@@ -30,6 +30,10 @@ export interface TouchableOpacityProps extends Omit<RNTouchableOpacityProps, 'st
      * Apply background color on TouchableOpacity when active (press is on)
      */
     activeBackgroundColor?: string;
+    /**
+     * Will apply scale press feedback. This will enforce the useNative prop
+     */
+    activeScale?: number;
     /**
      * Should use a more native touchable opacity component
      */
@@ -112,10 +116,10 @@ class TouchableOpacity extends PureComponent<Props, {active: boolean}> {
   }
 
   render() {
-    const {useNative, style, modifiers, forwardedRef, ...others} = this.props;
+    const {useNative, activeScale, style, modifiers, forwardedRef, ...others} = this.props;
     const {borderRadius, paddings, margins, alignments, flexStyle} = modifiers;
 
-    if (useNative) {
+    if (useNative || !_.isUndefined(activeScale)) {
       // @ts-ignore
       return <IncubatorTouchableOpacity {...this.props}/>;
     }