refactor: move Image tintColor and resizeMode from style to props

React Native deprecates the style-form of these properties on Image:
"Image: style.resizeMode is deprecated. Please use props.resizeMode."
"Image: style.tintColor is deprecated. Please use props.tintColor."

- Icon (image source variant): tintColor / resizeMode lifted out of the
  style array onto the <Image> props.
- AppbarBackIcon (iOS back chevron): same migration; drop the now-empty
  styles.icon entry.

Snapshot in Appbar.test.tsx updated to reflect the new prop placement.

Author: azizbecha

src/components/Appbar/AppbarBackIcon.tsx

@@ -19,10 +19,9 @@ const AppbarBackIcon = ({ size, color }: { size: number; color: string }) => {
     >
       <Image
         source={require('../../assets/back-chevron.png')}
-        style={[
-          styles.icon,
-          { tintColor: color, width: iosIconSize, height: iosIconSize },
-        ]}
+        tintColor={color}
+        resizeMode="contain"
+        style={{ width: iosIconSize, height: iosIconSize }}
         accessibilityIgnoresInvertColors
       />
     </View>
@@ -41,9 +40,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  icon: {
-    resizeMode: 'contain',
-  },
 });
 
 export default AppbarBackIcon;

src/components/Icon.tsx

@@ -130,15 +130,15 @@ const Icon = ({
         {...rest}
         testID={testID}
         source={s}
+        tintColor={color}
+        resizeMode="contain"
         style={[
           {
             transform: [{ scaleX: direction === 'rtl' ? -1 : 1 }],
           },
           {
             width: size,
             height: size,
-            tintColor: color,
-            resizeMode: `contain`,
           },
         ]}
         {...accessibilityProps}

src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap

@@ -625,23 +625,19 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
                 >
                   <Image
                     accessibilityIgnoresInvertColors={true}
+                    resizeMode="contain"
                     source={
                       {
                         "testUri": "../../../src/assets/back-chevron.png",
                       }
                     }
                     style={
-                      [
-                        {
-                          "resizeMode": "contain",
-                        },
-                        {
-                          "height": 21,
-                          "tintColor": "rgba(29, 27, 32, 1)",
-                          "width": 21,
-                        },
-                      ]
+                      {
+                        "height": 21,
+                        "width": 21,
+                      }
                     }
+                    tintColor="rgba(29, 27, 32, 1)"
                   />
                 </View>
               </View>