fix: extract image styles for preview

brandingbrand · Jun 4, 2021 · a9d3fe4 · a9d3fe4
1 parent 579e672
commit a9d3fe4
Showing 1 changed file with 4 additions and 7 deletions.
diff --git a/packages/fscomponents/src/components/serializable/vNext/SerializableImage.tsx b/packages/fscomponents/src/components/serializable/vNext/SerializableImage.tsx
@@ -1,5 +1,6 @@
 import React, { FC, useMemo } from 'react';
 import { FlexStyle, ImageBackground, ImageProps, ImageStyle, View, ViewStyle } from 'react-native';
+import { extractContainerStyles } from '../../../lib/style';
 import { StandardContainerProps } from '../../../models';
 
 export interface PreStandardizedSerializableImageProps
@@ -37,18 +38,14 @@ export type SerializableImageProps = StandardContainerProps<PreStandardizedSeria
 export const SerializableImage: FC<SerializableImageProps> =
   ({ children, containerStyle, style = {}, uri, ...props }) => {
     const source = useMemo(() => ({ uri }), [uri]);
-    const { alignItems, justifyContent, ...restStyles } = style;
+    const [innerImageStyles, outerImageStyles] = extractContainerStyles(style);
 
     return (
-      <View style={[restStyles, containerStyle]}>
+      <View style={[outerImageStyles, containerStyle]}>
         <ImageBackground
           {...props}
           source={source}
-          style={{
-            flex: 1,
-            alignItems,
-            justifyContent
-          }}
+          style={[{ flex: 1 }, innerImageStyles]}
         >
           {children}
         </ImageBackground>