[test] Refactor TouchableScale component in example app

Author: IjzerenHein

example/src/components/Test.tsx

@@ -6,7 +6,7 @@ import { Icon } from "./Icon";
 
 type Props = {
   title: string;
-  ComponentV4: React.ComponentType<any> | null;
+  ComponentV4?: React.ComponentType<any> | null;
   Component?: React.ComponentType<any> | null;
   onPress?: () => any;
   v4?: boolean;

example/src/components/TouchableScale.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { TouchableOpacity } from "react-native-gesture-handler";
+// @ts-ignore
+import RawTouchableScale from "react-native-touchable-scale";
+
+type Props = React.ComponentProps<typeof TouchableOpacity> & {
+  children: any;
+};
+
+export function TouchableScale(props: Props) {
+  return (
+    <RawTouchableScale
+      activeScale={0.9}
+      tension={50}
+      friction={7}
+      useNativeDriver
+      {...props}
+    />
+  );
+}

example/src/components/index.ts

@@ -3,3 +3,4 @@ export * from "./Test";
 export * from "./Tests";
 export * from "./Colors";
 export * from "./TabBarIcon";
+export * from "./TouchableScale";

example/src/screens/CardItem.tsx

@@ -1,10 +1,9 @@
 import * as React from "react";
 import { View, StyleSheet, Text, Image, Platform } from "react-native";
-// @ts-ignore
-import TouchableScale from "react-native-touchable-scale";
 import { SharedElement } from "react-navigation-shared-element";
 import { NavigationStackProp } from "react-navigation-stack";
 
+import { TouchableScale } from "../components";
 import { Item } from "../data";
 
 type Props = {
@@ -17,10 +16,6 @@ export function CardItem(props: Props) {
   const { item, navigation, routeName = "Detail" } = props;
   return (
     <TouchableScale
-      activeScale={0.9}
-      tension={50}
-      friction={7}
-      useNativeDriver
       onPress={() =>
         navigation.navigate(routeName, {
           item,
@@ -31,7 +26,6 @@ export function CardItem(props: Props) {
         <SharedElement id={`${item.id}.card`} style={StyleSheet.absoluteFill}>
           <View style={styles.card} />
         </SharedElement>
-
         <SharedElement id={`${item.id}.image`} style={styles.imageContainer}>
           <Image style={styles.image} source={item.image} />
         </SharedElement>

example/src/screens/ListScreen.tsx

@@ -1,10 +1,9 @@
 import * as React from "react";
 import { StyleSheet, Image, FlatList, Text } from "react-native";
-// @ts-ignore
-import TouchableScale from "react-native-touchable-scale";
 import { SharedElement } from "react-navigation-shared-element";
 import { NavigationStackProp } from "react-navigation-stack";
 
+import { TouchableScale } from "../components";
 import { items, Item } from "../data";
 
 type Props = {
@@ -35,10 +34,6 @@ export class ListScreen extends React.Component<Props> {
     return (
       <TouchableScale
         style={styles.item}
-        activeScale={0.9}
-        tension={50}
-        friction={7}
-        useNativeDriver
         onPress={() => {
           navigation.navigate(routeName, {
             item,

example/src/screens/MainScreen.tsx

@@ -1,10 +1,9 @@
 import * as React from "react";
 import { View, StyleSheet, Text, Image } from "react-native";
-// @ts-ignore
-import TouchableScale from "react-native-touchable-scale";
 import { SharedElement } from "react-navigation-shared-element";
 import { NavigationStackProp } from "react-navigation-stack";
 
+import { TouchableScale } from "../components";
 import { defaultItem, Item } from "../data";
 
 type Props = {
@@ -24,14 +23,7 @@ export class MainScreen extends React.Component<Props> {
     const item: Item = params?.item || defaultItem;
     return (
       <>
-        <TouchableScale
-          style={styles.flex}
-          activeScale={0.9}
-          tension={50}
-          friction={7}
-          useNativeDriver
-          onPress={this.onPress}
-        >
+        <TouchableScale style={styles.flex} onPress={this.onPress}>
           <View style={styles.container}>
             <SharedElement id={`${item.id}.image`}>
               <Image style={styles.image} source={item.image} />