@momo-kits/foundation 0.79.6-beta.14 → 0.79.6-beta.16

package/Application/Components.tsx

@@ -3,11 +3,13 @@ import {
   Alert,
   Animated,
   DeviceEventEmitter,
+  Platform,
   StatusBar,
   StyleSheet,
-  TouchableOpacity,
   View,
+  TouchableOpacity as TouchableRN,
 } from 'react-native';
+import {TouchableOpacity as TouchableGesture} from 'react-native-gesture-handler';
 import {ApplicationContext} from './index';
 import {Colors, Radius, Spacing, Styles} from '../Consts';
 import {Image} from '../Image';
@@ -22,6 +24,8 @@ import {scaleSize, Text} from '../Text';
 import {Icon} from '../Icon';
 import {PopupNotify} from '../Popup';
 
+const Touchable = Platform.OS === 'android' ? TouchableGesture : TouchableRN;
+
 const styles = StyleSheet.create({
   navigationButton: {
     height: 28,
@@ -101,7 +105,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   }
 
   return (
-    <TouchableOpacity
+    <Touchable
       accessibilityLabel={`NavigationButton/${accessibilityLabel}`}
       style={[
         styles.navigationButton,
@@ -116,7 +120,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
         color={tintColor ?? theme.colors.text.default}
         size={20}
       />
-    </TouchableOpacity>
+    </Touchable>
   );
 };
 
@@ -392,21 +396,17 @@ const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
               borderWidth: backgroundColor ? 0.5 : 0,
             },
           ]}>
-          <TouchableOpacity
-            accessibilityLabel={'Toolkit/More'}
-            onPress={onMore}>
+          <Touchable accessibilityLabel={'Toolkit/More'} onPress={onMore}>
             <Icon color={tintColor} source="navigation_more_horiz" size={20} />
-          </TouchableOpacity>
+          </Touchable>
           <View style={[styles.divider, {backgroundColor: tintColor}]} />
-          <TouchableOpacity
-            accessibilityLabel={`Toolkit/Close`}
-            onPress={onClose}>
+          <Touchable accessibilityLabel={`Toolkit/Close`} onPress={onClose}>
             <Icon
               color={tintColor}
               source="16_navigation_close_circle"
               size={20}
             />
-          </TouchableOpacity>
+          </Touchable>
         </View>
       </View>
     );

package/Application/NavigationContainer.tsx

@@ -42,6 +42,9 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   }, []);
 
   useEffect(() => {
+    maxApi?.getLanguage?.((lang: 'vi' | 'en') => {
+      setLanguage(lang);
+    });
     const listener = maxApi?.observer?.('language', (lang: 'vi' | 'en') => {
       setLanguage(lang);
     });

package/Application/StackScreen.tsx

@@ -1,4 +1,4 @@
-import React, {useContext, useEffect} from 'react';
+import React, {useContext, useLayoutEffect} from 'react';
 import {ScreenParams} from './types';
 import Navigation from './Navigation';
 import {ApplicationContext} from './index';
@@ -16,7 +16,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
 
   delete params.screen;
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (options) {
       navigation.setOptions(options);
     }

package/Layout/Screen.tsx

@@ -107,12 +107,10 @@ const Screen: React.FC<ScreenProps> = ({
       if (useExtendedHeader) {
         title = {headerTitle: HeaderTitle};
       }
-      setImmediate(() => {
-        navigation?.setOptions({
-          animatedValue: animatedValue.current,
-          headerTransparent: headerTransparent,
-          ...title,
-        });
+      navigation?.setOptions({
+        animatedValue: animatedValue.current,
+        headerTransparent: headerTransparent,
+        ...title,
       });
     }
   }, [useExtendedHeader, useAnimatedHeader]);

package/Layout/Section.tsx

@@ -1,4 +1,4 @@
-import React, {useContext} from 'react';
+import React, {Fragment, useContext} from 'react';
 import {Dimensions, View, ViewProps} from 'react-native';
 import {useGridSystem, validateChildren} from './utils';
 import {GridContextProps} from './types';
@@ -135,6 +135,9 @@ const Section: React.FC<SectionProps> = ({
       }
     } else {
       element.push(children);
+      if (children?.type == Fragment) {
+        return renderView(children?.props.children);
+      }
     }
     return element;
   };

package/Layout/utils.ts

@@ -1,5 +1,5 @@
 import {Alert, Dimensions} from 'react-native';
-import React, {useEffect, useState} from 'react';
+import React, {Fragment, ReactElement, useEffect, useState} from 'react';
 
 /**
  * validate children type
@@ -7,53 +7,36 @@ import React, {useEffect, useState} from 'react';
  * @param childrenTypes
  */
 const validateChildren = (
-  children:
-    | React.ReactElement<any, string | React.JSXElementConstructor<any>>
-    | string
-    | number
-    | {}
-    | Iterable<React.ReactNode>
-    | React.ReactPortal
-    | null
-    | undefined
-    | boolean,
-  childrenTypes: Array<React.FC<any>>,
+  children: React.ReactNode | React.ReactNode[],
+  childrenTypes: Array<React.FC>,
 ) => {
   if (!__DEV__) return children;
 
-  let results: React.ReactElement[] = [];
   const validateType = (child: React.ReactElement) => {
-    return childrenTypes.some(childrenType => child?.type === childrenType);
-  };
-
-  const alertWrongType = () => {
-    Alert.alert(
-      'Component Kits',
-      `Wrong children type for this component, expected are ${childrenTypes
-        .map(type => type.displayName)
-        .join(', ')}.`,
+    const valid = childrenTypes.some(
+      childrenType => child?.type === childrenType || child?.type == Fragment,
     );
+    if (!valid) {
+      Alert.alert(
+        'Component Kits',
+        `Wrong children type for this component, expected are ${childrenTypes
+          .map(type => type.displayName)
+          .join(', ')}.`,
+      );
+    }
+    return valid;
   };
 
   if (Array.isArray(children)) {
     const flattenChildren: React.ReactElement[] = children.flat();
-    results = flattenChildren.filter((child: React.ReactElement) => {
-      if (validateType(child)) {
-        return child;
-      } else {
-        alertWrongType();
-      }
-    });
-  } else {
-    const singleChild: any = children;
-    if (validateType(singleChild)) {
-      results = [singleChild];
-    } else {
-      alertWrongType();
+    for (const child of flattenChildren) {
+      validateType(child);
     }
+    return flattenChildren;
+  } else {
+    validateType(children as ReactElement);
+    return children;
   }
-
-  return results;
 };
 
 const useGridSystem = () => {

package/Switch/index.tsx

@@ -1,10 +1,9 @@
 import React, {FC} from 'react';
-import {NativeModules, TouchableOpacity, View} from 'react-native';
+import {TouchableOpacity, View} from 'react-native';
 import {SwitchProps} from './types';
 import styles from './styles';
 import {Colors} from '../Consts';
 
-const {HapticModule} = NativeModules;
 const Switch: FC<SwitchProps> = props => {
   const {value, onChange, disabled, style} = props;
   const circleBackgroundColor = value ? Colors.black_01 : Colors.black_03;
@@ -15,16 +14,11 @@ const Switch: FC<SwitchProps> = props => {
     backgroundColor = value ? Colors.green_09 : Colors.black_05;
   }
 
-  const onChangeValue = () => {
-    HapticModule?.triggerHaptic?.('medium');
-    onChange?.(!value);
-  };
-
   return (
     <TouchableOpacity
       accessibilityLabel={'Switch'}
       disabled={disabled}
-      onPress={onChangeValue}
+      onPress={() => onChange?.(!value)}
       style={[
         style,
         styles.container,

package/package.json

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