@momo-kits/foundation 0.81.35 → 0.81.36-beta.2

package/Application/Components.tsx

@@ -242,9 +242,8 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   animatedValue,
   useBorder = false,
 }) => {
-  const {theme, config} = useContext(ApplicationContext);
-  let headerImage =
-    config?.navigationBar?.headerBar ?? theme.assets?.headerBackground;
+  const {theme} = useContext(ApplicationContext);
+  let headerImage = theme.assets?.headerBackground;
   if (image === null) {
     headerImage = undefined;
   }

package/Application/NavigationContainer.tsx

@@ -29,7 +29,11 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   const navigator = useRef(new Navigator(navigationRef));
   const [showGrid, setShowGrid] = useState(false);
   const [language, setLanguage] = useState<'vi' | 'en'>('vi');
-  const [config, setConfig] = useState(undefined);
+  const [config, setConfig] = useState<any>(undefined);
+  let assets = theme.assets;
+  if (config) {
+    assets = {...assets, headerBackground: config.navigationBar?.headerBar};
+  }
 
   /**
    * handle mini language & listen change
@@ -83,7 +87,10 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
       <BottomSheetModalProvider>
         <ApplicationContext.Provider
           value={{
-            theme,
+            theme: {
+              ...theme,
+              assets: assets,
+            },
             navigator: navigator.current,
             showGrid,
             language,

package/Layout/Card.tsx

@@ -27,6 +27,7 @@ const Card: React.FC<CardProps> = ({
   style,
   backgroundImage,
   useShadow = false,
+  ...props
 }) => {
   const {showGrid} = useContext(ApplicationContext);
   const {numberOfColumns} = useGridSystem();
@@ -141,6 +142,7 @@ const Card: React.FC<CardProps> = ({
   return (
     <GridContext.Provider value={gridContext}>
       <View
+        {...props}
         accessibilityLabel={`Card`}
         style={[
           style,

package/Layout/Screen.tsx

@@ -101,7 +101,7 @@ const Screen = forwardRef(
     ref,
   ) => {
     const animatedValue = useRef<Animated.Value | undefined>(undefined);
-    const {theme, config} = useContext(ApplicationContext);
+    const {theme} = useContext(ApplicationContext);
     const insets = useSafeAreaInsets();
     const heightHeader = useHeaderHeight();
     const currentTint = useRef(Colors.black_01);
@@ -117,8 +117,7 @@ const Screen = forwardRef(
     }
 
     if (headerType == 'extended') {
-      headerBackground =
-        config?.navigationBar?.headerBar ?? theme.assets?.headerBackground;
+      headerBackground = theme.assets?.headerBackground;
     }
 
     useEffect(() => {
@@ -261,20 +260,22 @@ const Screen = forwardRef(
      * build content for screen
      */
     const renderContent = () => {
-      const results = validateChildren(children, [Section, Card]);
+      const results = validateChildren(children, [Section, Card, undefined]);
       if (Array.isArray(results)) {
         return results.map((item, index) => {
-          const space = item.props?.useMargin === false ? 0 : Spacing.M;
-          return (
-            <View
-              key={`ScreenItem${index}`}
-              style={{
-                marginTop: space,
-                flex: item.props?.expanded ? 1 : undefined,
-              }}>
-              {item}
-            </View>
-          );
+          const space = item?.props?.useMargin === false ? 0 : Spacing.M;
+          if (item) {
+            return (
+              <View
+                key={`ScreenItem${index}`}
+                style={{
+                  marginTop: space,
+                  flex: item.props?.expanded ? 1 : undefined,
+                }}>
+                {item}
+              </View>
+            );
+          }
         });
       } else {
         const item: any = children;

package/Layout/Section.tsx

@@ -33,6 +33,7 @@ const Section: React.FC<SectionProps> = ({
   useMargin = true,
   backgroundImage,
   style,
+  ...props
 }) => {
   const {showGrid} = useContext(ApplicationContext);
   const {numberOfColumns} = useGridSystem();
@@ -148,6 +149,7 @@ const Section: React.FC<SectionProps> = ({
         },
       }}>
       <View
+        {...props}
         accessibilityLabel={`Section`}
         style={[
           style,

package/package.json

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

package/verify.js

@@ -27,6 +27,7 @@ try {
   }
 
   if (
+    miniInfo?.name !== '@momo-platform/momo-core' &&
     miniInfo?.resolutions?.['@momo-platform/momo-core'] !== packageInfo?.version
   ) {
     console.error(