@momo-kits/foundation 0.77.5 → 0.77.7

package/Application/Components.tsx

@@ -225,23 +225,22 @@ const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
       );
       return <View />;
     }
+    return item;
   };
   const renderAction = () => {
     if (Array.isArray(children)) {
       return children.map((child, index) => {
-        validType(child);
         return (
           <View key={index} style={styles.headerButton}>
-            {React.cloneElement(child, {...restProps})}
+            {React.cloneElement(validType(child), {...restProps})}
           </View>
         );
       });
     }
 
-    validType(children);
     return (
       <View style={styles.headerButton}>
-        {React.cloneElement(children, {...restProps})}
+        {React.cloneElement(validType(children), {...restProps})}
       </View>
     );
   };
@@ -328,6 +327,7 @@ const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
         />
       );
     }
+    return null;
   };
 
   if (toolConfig) {

package/Application/StackScreen.tsx

@@ -6,7 +6,7 @@ import {GridSystem} from '../Layout';
 
 const StackScreen: React.FC<ScreenParams> = props => {
   const {screen: Component, options}: ScreenParams = props.route.params;
-  const {theme, showGrid, navigator} = useContext(ApplicationContext);
+  const {theme, showGrid} = useContext(ApplicationContext);
   const navigation = new Navigation(props.navigation, theme);
 
   const params = {

package/Application/types.ts

@@ -90,6 +90,7 @@ export interface ScreenProps extends ViewProps {
   scrollViewProps?: ScrollViewProps;
   footerComponent?: ReactNode;
   marginHeader?: number;
+  backgroundColor?: string;
 }
 
 export type ScreenParams = {
@@ -122,6 +123,7 @@ export type NavigationOptions = {
   preventBack?: PopupNotifyProps;
   surface?: boolean;
   headerTransparent?: boolean;
+  hiddenBack?: boolean;
   title?: string;
   headerTitle?: (props?: any) => React.ReactElement;
   headerTitleAlign?: 'left' | 'center';

package/Application/utils.tsx

@@ -133,6 +133,13 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
     };
   }
 
+  if (params.hiddenBack) {
+    options = {
+      ...options,
+      headerLeft: null,
+    };
+  }
+
   return {
     ...params,
     ...options,

package/Layout/Card.tsx

@@ -132,7 +132,7 @@ const Card: React.FC<CardProps> = ({children, style, backgroundImage}) => {
         {!!backgroundImage && (
           <Image
             source={{uri: backgroundImage}}
-            style={[style, styles.cardImage]}
+            style={[style, styles.imageBackground]}
           />
         )}
         {renderView(validateChildren(children, [Item]))}

package/Layout/Screen.tsx

@@ -15,11 +15,12 @@ const Screen: React.FC<ScreenProps> = ({
   scrollable = false,
   navigation,
   marginHeader,
-  useAnimatedHeader = false,
-  useExtendedHeader = false,
+  useAnimatedHeader,
+  useExtendedHeader,
   headerBackground,
   scrollViewProps,
   footerComponent: Footer,
+  backgroundColor,
 }) => {
   const animatedValue = useRef<Animated.Value | undefined>(undefined);
   const {theme} = useContext(ApplicationContext);
@@ -44,15 +45,19 @@ const Screen: React.FC<ScreenProps> = ({
   }
 
   useEffect(() => {
-    let title = {};
-    if (useExtendedHeader) {
-      title = {headerTitle: HeaderTitle};
+    if (useAnimatedHeader != undefined || useExtendedHeader != undefined) {
+      let title = {};
+      if (useExtendedHeader) {
+        title = {headerTitle: HeaderTitle};
+      }
+      setImmediate(() => {
+        navigation?.setOptions({
+          animatedValue: animatedValue.current,
+          headerTransparent: headerTransparent,
+          ...title,
+        });
+      });
     }
-    navigation?.setOptions({
-      animatedValue: animatedValue.current,
-      headerTransparent,
-      ...title,
-    });
   }, [useExtendedHeader, useAnimatedHeader]);
 
   /**
@@ -130,7 +135,9 @@ const Screen: React.FC<ScreenProps> = ({
   };
 
   return (
-    <View style={Styles.flex} accessibilityLabel={`ScreenContainer`}>
+    <View
+      style={[Styles.flex, {backgroundColor}]}
+      accessibilityLabel={`ScreenContainer`}>
       <View
         style={{
           position: 'absolute',

package/Layout/Section.tsx

@@ -6,11 +6,13 @@ import {GridContext} from './index';
 import Item from './Item';
 import {ApplicationContext} from '../Application';
 import styles from './styles';
+import {Image} from '../Image';
 
 const Section: React.FC<SectionProps> = ({
   children,
   useMargin = true,
   backgroundColor,
+  backgroundImage,
 }) => {
   const {showGrid} = useContext(ApplicationContext);
   const {numberOfColumns} = useGridSystem();
@@ -124,6 +126,12 @@ const Section: React.FC<SectionProps> = ({
           flexWrap: 'wrap',
           backgroundColor: backgroundColor,
         }}>
+        {!!backgroundImage && (
+          <Image
+            source={{uri: backgroundImage}}
+            style={styles.imageBackground}
+          />
+        )}
         {renderView(validateChildren(children, [Item]))}
         {showGrid && renderOverlay()}
       </View>

package/Layout/styles.ts

@@ -58,7 +58,7 @@ export default StyleSheet.create({
     marginVertical: undefined,
     marginHorizontal: undefined,
   },
-  cardImage: {
+  imageBackground: {
     position: 'absolute',
     top: 0,
     bottom: 0,

package/Layout/types.ts

@@ -42,6 +42,8 @@ export interface SectionProps extends ViewProps {
   useMargin?: boolean;
 
   backgroundColor?: string;
+
+  backgroundImage?: string;
 }
 
 export interface ItemProps extends ViewProps {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.77.5",
+    "version": "0.77.7",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {