[JSS] [React Native] Update packages, fix issues

docs/data/routes/release-notes/en.md

@@ -5,6 +5,25 @@ title: Release Notes
 ---
 # Release Notes
 
+## Sitecore JSS 16.1 for Sitecore 10
+
+### Breaking changes
+* [PR #624](https://github.com/Sitecore/jss/pull/624) [sitecore-jss-react-native] Removed `dataConversation`, since `editable` property not used in `disconnected` mode.
+
+### New Features & Improvements
+* [PR #624](https://github.com/Sitecore/jss/pull/624):
+	* [React-Native sample] Added shared `<Layout/>` component in order to have shared navigation panel.
+	* [React-Native sample] Sitecore logo in header is touchable and will navigate to Home page when click on it.
+	* [React-Native sample] Removed usage of `dataConversation`.
+
+### Bug Fixes
+
+* [PR #624](https://github.com/Sitecore/jss/pull/624):
+	* [sitecore-jss-react-native] [Image] Pass Object `style` type for `SvgUrI` instead of Array. 
+	* [sitecore-jss-react-native] [Date] Always render `<HtmlView/>` if `editable` is provided.
+	* [React-Native sample] Styleguide-FieldUsage-Date is not working in connected mode.
+	* [React-Native sample] Styleguide-FieldUsage-Image fix incorrect `src` prop type.
+
 ## Sitecore JSS 16.0 for Sitecore 10
 
 ### Upgrading

packages/sitecore-jss-react-native/package.json

@@ -29,7 +29,7 @@
     "@sitecore-jss/sitecore-jss": "^16.1.0-canary.5",
     "prop-types": "^15.7.2",
     "react-native-htmlview": "^0.15.0",
-    "react-native-svg": "^9.13.2",
+    "react-native-svg": "^12.1.0",
     "react-native-svg-uri": "^1.2.3"
   },
   "peerDependencies": {

packages/sitecore-jss-react-native/src/components/Date.tsx

@@ -29,6 +29,10 @@ export const DateField: React.FunctionComponent<DateFieldProps> = ({
     return null;
   }
 
+  if (field.editable && editable) {
+    return <HtmlView value={field.editable} {...otherProps} />;
+  }
+
   let children;
 
   if (render) {
@@ -37,9 +41,6 @@ export const DateField: React.FunctionComponent<DateFieldProps> = ({
     children = field.value as string;
   }
 
-  if (field.editable && editable) {
-    return <HtmlView value={children as string} {...otherProps} />;
-  }
   return render ? <>{children}</> : <Text>{children}</Text>;
 };
 

packages/sitecore-jss-react-native/src/components/Image.tsx

@@ -10,7 +10,7 @@ export interface ImageFieldValue {
   src?: string | number;
   width?: number;
   height?: number;
-  style?: unknown;
+  style?: { [key: string]: unknown };
 }
 
 export interface ImageField {
@@ -46,7 +46,7 @@ const getImageAttrs = (
     src?: string | number;
     width?: number | undefined;
     height?: number | undefined;
-    style?: unknown;
+    style?: { [key: string]: unknown };
   },
   imageUrlParams?: { [paramName: string]: string } | null
 ) => {
@@ -67,9 +67,6 @@ const getImageAttrs = (
     imgStyles.height = typeof height !== 'number' ? Number(height) : height;
   }
 
-  // react native styles/StyleSheets can be merged by passing them as an array to the native Image component
-  newAttrs.style = style ? [imgStyles, style] : imgStyles;
-
   // in react-native, you need to "import" static assets via `require` statements
   // when the packager builds your app, it (presumably) statically analyzes your code, extracts
   // the assets that are `require`d into an array/map, then assigns them a numerical value.
@@ -83,6 +80,17 @@ const getImageAttrs = (
     newAttrs.source = { uri };
   }
 
+  if (isSvgImage(newAttrs.source as ImageSourcePropType)) {
+    // svg image accepts object
+    newAttrs.style = {
+      ...(style || {}),
+      ...imgStyles,
+    };
+  } else {
+    // react native styles/StyleSheets can be merged by passing them as an array to the native Image component
+    newAttrs.style = style ? [imgStyles, style] : imgStyles;
+  }
+
   return newAttrs;
 };