Card - fix missing types when sending useNative (send nativeProps instead)

demo/src/screens/componentScreens/CardsScreen.tsx

@@ -97,10 +97,8 @@ export default class CardsScreen extends Component<CardsScreenProps, CardsScreen
         style={{marginBottom: 15}}
         onPress={() => {}}
         borderRadius={borderRadius}
-        useNative
         backgroundColor={Colors.white}
-        activeOpacity={1}
-        activeScale={isImageOnLeft ? 0.96 : 1.04}
+        nativeProps={{activeOpacity: 1, activeScale: isImageOnLeft ? 0.96 : 1.04}}
       >
         {isImageOnLeft && (
           <Card.Section
@@ -137,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={() => {}} nativeProps={{activeOpacity: 1, activeScale: 0.96}}>
         <Card.Section
           bg-red30
           padding-20
@@ -170,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={() => {}} nativeProps={{activeOpacity: 1, activeScale: 0.96}}>
         {image}
         <Card.Section
           bg-white

generatedTypes/src/components/card/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ViewStyle } from 'react-native';
 import { ViewProps } from '../view';
+import { TouchableOpacityProps as NativeTouchableOpacityProps } from '../../incubator/TouchableOpacity';
 import { TouchableOpacityProps } from '../touchableOpacity';
 import CardImage from './CardImage';
 import CardSection, { CardSectionProps } from './CardSection';
@@ -13,7 +14,7 @@ export interface CardSelectionOptions {
     hideIndicator?: boolean;
 }
 export { CardSectionProps };
-export declare type CardProps = ViewProps & TouchableOpacityProps & {
+export declare type CardProps = ViewProps & Omit<TouchableOpacityProps, 'useNative'> & {
     /**
      * card custom width
      */
@@ -62,8 +63,18 @@ export declare type CardProps = ViewProps & TouchableOpacityProps & {
      * Custom options for styling the selection indication
      */
     selectionOptions?: CardSelectionOptions;
+    /**
+     * '@deprecated
+     * - Please start using nativeProps instead
+     * - Should use a more native touchable opacity component
+     */
+    useNative?: boolean;
+    /**
+     * Should use a more native touchable opacity component.
+     */
+    nativeProps?: Omit<Exclude<NativeTouchableOpacityProps, TouchableOpacityProps>, 'style'>;
 };
-declare const _default: React.ComponentClass<ViewProps & TouchableOpacityProps & {
+declare const _default: React.ComponentClass<ViewProps & Omit<TouchableOpacityProps, "useNative"> & {
     /**
      * card custom width
      */
@@ -112,6 +123,16 @@ declare const _default: React.ComponentClass<ViewProps & TouchableOpacityProps &
      * Custom options for styling the selection indication
      */
     selectionOptions?: CardSelectionOptions | undefined;
+    /**
+     * '@deprecated
+     * - Please start using nativeProps instead
+     * - Should use a more native touchable opacity component
+     */
+    useNative?: boolean | undefined;
+    /**
+     * Should use a more native touchable opacity component.
+     */
+    nativeProps?: Omit<NativeTouchableOpacityProps, "style"> | undefined;
 } & {
     useCustomTheme?: boolean | undefined;
 }, any> & {

src/components/card/index.tsx

@@ -6,6 +6,7 @@ import {Colors, BorderRadiuses} from '../../style';
 // import {PureBaseComponent} from '../../commons';
 import {asBaseComponent, forwardRef, BaseComponentInjectedProps, ForwardRefInjectedProps} from '../../commons/new';
 import View, {ViewProps} from '../view';
+import {TouchableOpacityProps as NativeTouchableOpacityProps} from '../../incubator/TouchableOpacity';
 import TouchableOpacity, {TouchableOpacityProps} from '../touchableOpacity';
 import Image from '../image';
 import CardImage from './CardImage';
@@ -39,7 +40,7 @@ export interface CardSelectionOptions {
 
 export {CardSectionProps};
 export type CardProps = ViewProps &
-  TouchableOpacityProps & {
+  Omit<TouchableOpacityProps, 'useNative'> & {
     /**
      * card custom width
      */
@@ -88,6 +89,16 @@ export type CardProps = ViewProps &
      * Custom options for styling the selection indication
      */
     selectionOptions?: CardSelectionOptions;
+    /**
+     * '@deprecated
+     * - Please start using nativeProps instead
+     * - Should use a more native touchable opacity component
+     */
+    useNative?: boolean;
+    /**
+     * Should use a more native touchable opacity component.
+     */
+    nativeProps?: Omit<Exclude<NativeTouchableOpacityProps, TouchableOpacityProps>, 'style'>;
   };
 
 type PropTypes = BaseComponentInjectedProps & ForwardRefInjectedProps & CardProps;
@@ -257,7 +268,8 @@ class Card extends PureComponent<PropTypes, State> {
   };
 
   render() {
-    const {onPress, onLongPress, style, selected, containerStyle, enableBlur, forwardedRef, ...others} = this.props;
+    const {onPress, onLongPress, style, selected, containerStyle, enableBlur, forwardedRef, nativeProps, ...others} =
+      this.props;
     const blurOptions = this.getBlurOptions();
     const Container = onPress || onLongPress ? TouchableOpacity : View;
     const brRadius = this.borderRadius;
@@ -279,6 +291,8 @@ class Card extends PureComponent<PropTypes, State> {
         activeOpacity={0.6}
         accessibilityState={{selected}}
         {...others}
+        {...nativeProps}
+        useNative={!_.isEmpty(nativeProps)}
         ref={forwardedRef}
       >
         {Constants.isIOS && enableBlur && BlurView && (