esoftplay 0.0.141 → 0.0.142-b

package/bin/build.js

@@ -234,7 +234,7 @@ if (fs.existsSync(packjson)) {
 		"lib": [\n\
 			"es2017"\n\
 		],\n\
-		"module": "es2015",\n\
+		"module": "ES2020",\n\
 		"moduleResolution": "node",    \n\
 		"noEmitHelpers": true,\n\
 		"noImplicitReturns": true,\n\
@@ -278,9 +278,9 @@ yarn-error.log\n\
 		const AppJS = `import { LibNotification } from 'esoftplay/cache/lib/notification/import';
 import { UserIndex } from 'esoftplay/cache/user/index/import';
 import * as Notifications from 'expo-notifications';
-import { /* enableFreeze, */ enableScreens } from 'react-native-screens';
+import { enableFreeze, enableScreens } from 'react-native-screens';
 
-/* enableFreeze() */
+enableFreeze()
 enableScreens()
 
 Notifications.addNotificationResponseReceivedListener(x => LibNotification.onAction(x));
@@ -305,6 +305,7 @@ export default UserIndex`;
 			'expo-dev-client',
 			'expo-file-system',
 			'expo-font',
+			'expo-image',
 			'expo-image-manipulator',
 			'expo-image-picker',
 			'expo-linear-gradient',
@@ -313,13 +314,14 @@ export default UserIndex`;
 			'expo-status-bar',
 			'expo-splash-screen',
 			'expo-secure-store',
+			// 'expo-sqlite',
 			'expo-updates',
 			'immhelper',
 			'dayjs',
 			'react-fast-compare',
 			'react-native-gesture-handler',
 			'react-native-awesome-gallery',
-			'react-native-fast-image',
+			// 'react-native-fast-image',
 			'react-native-keyboard-controller',
 			'react-native-mmkv',
 			'react-native-pan-pinch-view',

package/error.ts

@@ -14,14 +14,15 @@ function getTime() {
   const isoStringWithGMTPlus7 = new Date(adjustedDate).toISOString();
   return isoStringWithGMTPlus7.replace('T', ' ').replace(/\.[0-9]+Z/g, "")
 }
-// const defaultErrorHandler = ErrorUtils?.getGlobalHandler?.()
+const defaultErrorHandler = ErrorUtils?.getGlobalHandler?.()
 
 const myErrorHandler = (e: any, isFatal: any) => {
-  if (!expoConfig?.packagerOpts)
+  if (!__DEV__)
     setError(e)
-  // defaultErrorHandler?.(e, isFatal)
+  defaultErrorHandler?.(e, isFatal)
 }
 
+/** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/error.md#setError) untuk melihat dokumentasi*/
 export function setError(error?: any) {
   const config = esp?.config?.();
   const routes = UserRoutes?.state()?.get?.();
@@ -42,6 +43,7 @@ export function setError(error?: any) {
 }
 
 
+/** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/error.md#reportApiError) untuk melihat dokumentasi*/
 export function reportApiError(fetch: any, error: any) {
   let routes = UserRoutes?.state?.()?.get?.()
   let lastIndex = routes?.routes?.length - 1 ?? 0
@@ -59,7 +61,7 @@ export function reportApiError(fetch: any, error: any) {
     'fetch: ' + String(JSON.stringify(fetch || {}, undefined, 2)).replace(/[\[\]\{\}\"]+/g, ''),
   ].join('\n')
 
-  if (expoConfig?.packagerOpts) {
+  if (__DEV__) {
     let post = {
       text: msg,
       chat_id: '-1001737180019',
@@ -79,6 +81,7 @@ export function reportApiError(fetch: any, error: any) {
   }
 }
 
+/** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/error.md#sendTm) untuk melihat dokumentasi*/
 export function sendTm(message: string, chat_id?: string, bot?: string, res?: (result: any) => void): void {
   let _chatids: string[] = []
   if (chat_id) {
@@ -123,9 +126,15 @@ export function getError() {
         // remove error that unsolved
       } else if (msg.includes(`SyntaxError: JSON Parse error: Unexpected token:`)) {
         // remove error that unsolved
+      } else if (msg.includes(`FirebaseError: [code=invalid-argument]`)) {
+        let post = {
+          text: msg,
+          chat_id: '-1001737180019',
+          disable_web_page_preview: true
+        }
+        new LibCurl()?.custom?.('https://api.telegram.org/bot923808407:AAEFBlllQNKCEn8E66fwEzCj5vs9qGwVGT4/sendMessage', post)
       } else {
         const telegramIds = config?.errorReport?.telegramIds || {}
-
         Object.values(telegramIds).forEach?.(id => {
           let post = {
             text: msg,
@@ -140,4 +149,4 @@ export function getError() {
     }
   })
 }
-//ErrorUtils[REMOVED by esoftplay web].setGlobalHandler(myErrorHandler)
+ErrorUtils.setGlobalHandler(myErrorHandler)

package/modules/lib/autoreload.ts

@@ -3,7 +3,9 @@
 import { InteractionManager } from 'react-native'
 
 let updater: any
+/** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/modules/lib/autoreload.md) untuk melihat dokumentasi*/
 export default {
+  /** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/modules/lib/autoreload.md#set) untuk melihat dokumentasi*/
   set(callback: () => void, duration?: number): void {
     if (updater != undefined) {
       clearInterval(updater)
@@ -15,6 +17,7 @@ export default {
       });
     }, duration || 6000)
   },
+  /** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/modules/lib/autoreload.md#clear) untuk melihat dokumentasi*/
   clear(): void {
     if (updater != undefined) {
       clearInterval(updater)

package/modules/lib/carrousel.tsx

@@ -39,6 +39,7 @@ export interface LibCarrouselState {
   childrenLength: number,
 }
 
+/** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/modules/lib/carrousel.md) untuk melihat dokumentasi*/
 export default class m extends LibComponent<LibCarrouselProps, LibCarrouselState> {
 
   static defaultProps = {

package/modules/lib/carrousel_snap.tsx

@@ -18,6 +18,7 @@ export interface LibCarrousel_snapProps {
   initialPage?: number,
   renderItem: (item: any, key: number | string, itemWidth: number) => any
 }
+/** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/modules/lib/carrousel_snap.md) untuk melihat dokumentasi*/
 export default function m(props: LibCarrousel_snapProps): any {
   const LibFocus = useRef(esp.mod("lib/focus")).current
   const autoCycle = props.autoCycle || false

package/modules/lib/collaps.tsx

@@ -3,7 +3,7 @@
 import useSafeState from 'esoftplay/state';
 import React, { useEffect } from 'react';
 import { Pressable, ViewStyle } from 'react-native';
-import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import Animated, { ReduceMotion, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 
 
 export interface LibCollapsArgs {
@@ -15,6 +15,7 @@ export interface LibCollapsProps {
   onToggle?: (expanded: boolean) => void,
   style?: ViewStyle
 }
+/** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/modules/lib/collaps.md) untuk melihat dokumentasi*/
 export default function m(props: LibCollapsProps): any {
   const [expand, setExpand] = useSafeState(props.show)
   const opacity = useSharedValue(0);
@@ -34,7 +35,7 @@ export default function m(props: LibCollapsProps): any {
   }, [expand])
 
   const toggleAnimation = () => {
-    opacity.value = withTiming(opacity.value === 0 ? 1 : 0, { duration: 300 }, (status) => {
+    opacity.value = withTiming(opacity.value === 0 ? 1 : 0, { duration: 300, reduceMotion: ReduceMotion.Never }, (status) => {
       if (opacity.value == 0 && status) {
         runOnJS(setExpand)(false)
       }

package/modules/lib/component.tsx

@@ -2,6 +2,7 @@
 import { Component } from "react";
 import isEqual from "react-fast-compare";
 
+/** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/modules/lib/component.md) untuk melihat dokumentasi*/
 export default class m<K, S> extends Component<K, S> {
   private _isMounted: boolean = false;
 

package/modules/lib/compose.tsx

@@ -0,0 +1,178 @@
+// withHooks
+import { LibNavigationRoutes } from 'esoftplay';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibObject } from 'esoftplay/cache/lib/object/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import { EspRouterInterface } from 'esoftplay/cache/routers';
+import esp from 'esoftplay/esp';
+import useGlobalState from 'esoftplay/global';
+import React, { createElement, ReactElement } from 'react';
+import { ScrollView, Text, View } from "react-native";
+
+export interface RNTypes extends EspRouterInterface {
+  "View": typeof View,
+  "Text": typeof Text,
+  "ScrollView": typeof ScrollView,
+  // "TouchableOpacity": typeof TouchableOpacity,
+  // "TextInput": typeof TextInput,
+}
+
+const formState = useGlobalState({})
+
+function buildUIFromJSON(json: any): ReactElement {
+  const { component, props } = json;
+
+  let children = null;
+  if (props?.children) {
+    if (Array.isArray(props?.children)) {
+      children = props?.children?.map?.((child: any) => buildUIFromJSON(child));
+    } else if (typeof props.children != 'string') {
+      children = buildUIFromJSON(props?.children);
+    } else {
+      children = props.children;
+    }
+  }
+  let _props = props
+
+  if (props) {
+    Object.keys(props).map((key) => {
+      if (typeof props[key] == 'string' && String(props[key]).includes("#esp|")) {
+        const cleanFunction = (props[key]).replace("#esp|", "")
+        const [modules, func, args] = cleanFunction.split("|")
+        _props[key] = () => {
+          esp.mod(modules)[func](...eval(args))
+        }
+      } else if (typeof props[key] == 'string' && String(props[key]).includes("#espProp|")) {
+        const cleanFunction = (props[key]).replace("#espProp|", "")
+        const [modules, func, args] = cleanFunction.split("|")
+        _props[key] = () => {
+          esp.modProp(modules)[func](...eval(args))
+        }
+      } else if (typeof props[key] == 'string' && String(props[key]).includes("#action.")) {
+        const cleanFunction = (props[key]).replace("#action.", "")
+        const [func, argument] = cleanFunction.split('.')
+        _props[key] = () => {
+          action[func](eval(argument))
+        }
+      } else if (typeof props[key] == 'string' && String(props[key]).includes("#form.")) {
+        const cleanForm = (props[key]).replace("#form.", "")
+        const [type, postkey] = cleanForm.split('.')
+        if (type == 'input') {
+          _props[key] = (input: string) => {
+            formState.set(LibObject.set(formState.get(), input)(postkey))
+          }
+        }
+        if (type == 'select') {
+          console.log(type, postkey, key)
+          const [_key, _value] = postkey.split(":")
+          _props[key] = () => {
+            formState.set(LibObject.set(formState.get(), _value)(_key))
+          }
+        }
+      } else {
+        _props[key] = props[key]
+      }
+    })
+  }
+
+  // Create the element based on the component type
+  if (component?.includes?.('/')) {
+    return esp.mod(component)(_props);
+  } else {
+    return createElement("RCT" + component, { ..._props, children });
+  }
+}
+
+
+/** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/modules/lib/compose.md) untuk melihat dokumentasi*/
+export default function m({ schema }: { schema: any }): ReactElement {
+  return buildUIFromJSON(schema)
+}
+
+const action: any = {
+  "navigate": (args: any[]) => esp.mod("lib/navigation").navigate(args[0], args[1]),
+  "replace": (args: any[]) => esp.mod("lib/navigation").replace(args[0], args[1]),
+  "back": (args: any[]) => esp.mod("lib/navigation").back(),
+  "copy": (args: any[]) => {
+    esp.mod("lib/utils").copyToClipboard(JSON.stringify(args))
+    esp.modProp("lib/toast").show(args + " copied!")
+  },
+  "curl": (args: any[]) => {
+    esp.mod("lib/progress").show("Please Wait..")
+    let post = args?.[1]
+    try {
+      post = JSON.parse(args?.[1])
+    } catch (error) {
+      post = args?.[1]
+    }
+    post = Object.assign({}, post, formState.get())
+    new (esp.mod('lib/curl'))(args[0], post, (res, msg) => {
+      esp.modProp("lib/toast").show(msg)
+      esp.mod("lib/progress").hide()
+    }, (err) => {
+      esp.modProp("lib/toast").show(err.message)
+      esp.mod("lib/progress").hide()
+    })
+  }
+}
+
+/** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/modules/lib/compose.md#forms) untuk melihat dokumentasi*/
+export const forms = {
+  select: (postKey: string, value: string) => `#form.select.${postKey}:${value}`,
+  input: (postKey: string) => `#form.input.${postKey}`,
+}
+/** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/modules/lib/compose.md#actions) untuk melihat dokumentasi*/
+export const actions = {
+  navigate: (module: LibNavigationRoutes, params: any) => {
+    LibNavigation.navigate(module, params)
+  },
+  replace: (module: LibNavigationRoutes, params: any) => {
+    LibNavigation.replace(module, params)
+  },
+  back: () => {
+    LibNavigation.back()
+  },
+  copy: (args: string) => {
+    LibUtils.copyToClipboard(args)
+    esp.modProp("lib/toast").show(args + " copied!")
+  },
+  curl: (uri: string, post?: any) => {
+    new (esp.mod('lib/curl'))(uri, post, (res, msg) => {
+      esp.modProp("lib/toast").show(msg)
+    }, (err) => {
+      esp.modProp("lib/toast").show(err.message)
+    }, 1)
+  }
+}
+
+/** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/modules/lib/compose.md#build) untuk melihat dokumentasi*/
+export function build<T extends keyof RNTypes>(cmpn: T, props: React.ComponentProps<RNTypes[T]>): any {
+  let obj: any = {};
+  obj.component = cmpn;
+  let _props = props
+  if (props) {
+    Object.keys(props).map((key) => {
+      if (typeof props[key] == 'function') {
+        _props[key] = `@clientFn` + String(props[key])
+      } else {
+        _props[key] = props[key]
+      }
+    })
+  }
+  obj.props = { ..._props }; // Shallow copy the props
+
+  // If there are children, process them
+  if (props?.children) {
+    if (Array.isArray(props.children)) {
+      // If children is an array, recursively build each child
+      obj.props.children = props.children.map((child: any) =>
+        typeof child === 'string' ? child : build(child.component, child.props)
+      );
+    } else if (typeof props.children !== 'string') {
+      // If there's only one child and it's not a string, build it
+      obj.props.children = build(props.children.component, props.children.props);
+    }
+  }
+
+  return obj;
+}

package/modules/lib/curl.ts

@@ -307,7 +307,7 @@ export default class m {
       if (upload) {
         let fd = new FormData();
         Object.keys(post).map(function (key) {
-          if (key !== undefined) {
+          if (key !== undefined && post[key] !== undefined) {
             fd.append(key, post[key])
           }
         });

package/modules/lib/custom.tsx

@@ -1,9 +1,9 @@
 // withHooks
 
 import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
 import React, { useEffect, useRef } from 'react';
-import { Linking, Pressable, Text, View } from 'react-native';
-import WebView from 'react-native-webview';
+import { Linking } from 'react-native';
 
 
 export interface LibCustomArgs {
@@ -12,34 +12,41 @@ export interface LibCustomArgs {
 export interface LibCustomProps {
 
 }
+
+
+/**  
+ * 
+  json_to_view
+  https://api.test.bbo.co.id/main?module=lib.custom&link=https%3A%2F%2Ftest.bbo.co.id%2Fsaya-tidak-bisa-login-akun-bbo_432.htm
+  
+  deeplink
+  https://api.test.bbo.co.id/main?module=lib.custom&link=bbt%3A%2F%2Ftest.bbo.co.id%2Fjual%2Farcanealley2024
+*/
 export default function m(props: LibCustomProps): any {
-	const LibIcon = useRef(esp.mod("lib/icon")).current
+	const LibCompose = useRef(esp.mod("lib/compose")).current
 
   const { url, title } = esp.mod("lib/navigation").getArgsAll(props)
-
+  const [schema, setSchema] = useSafeState<any>(null)
+  
   useEffect(() => {
     if (!String(url).startsWith("http")) {
       Linking.openURL(url)
       esp.mod("lib/navigation").back()
+    } else {
+      new (esp.mod("lib/curl"))(url, null,
+        (res, msg) => {
+          setSchema(res)
+        },
+        (err) => {
+          esp.modProp("lib/toast").show(err?.message)
+          esp.mod("lib/navigation").back()
+        }
+      )
     }
   }, [])
 
-  if (String(url).startsWith("http"))
-    return (
-      <View style={{ flex: 1 }} >
-        <View style={[{ height: 60 + esp.mod("lib/style").STATUSBAR_HEIGHT, paddingTop: esp.mod("lib/style").STATUSBAR_HEIGHT, backgroundColor: "#fff", flexDirection: 'row', alignItems: 'center', marginBottom: 3 }, esp.mod("lib/style").elevation(3)]} >
-          <Pressable onPress={() => esp.mod("lib/navigation").back()} style={{ height: 60, width: 60, alignItems: 'center', justifyContent: 'center' }} >
-            <LibIcon name='arrow-left' />
-          </Pressable>
-          <Text style={{ fontWeight: "bold", marginLeft: 0 }}>{title ? title : ""}</Text>
-        </View>
-        <WebView
-          style={{ flex: 1 }}
-          source={{ uri: url }}
-          startInLoadingState={true}
-        />
-      </View>
-    )
+  if (String(url).startsWith("http") && schema)
+    return <LibCompose schema={schema} />
   else
     return null
 }

package/modules/lib/fadescroll.tsx

@@ -0,0 +1,50 @@
+// withHooks
+
+import useSafeState from 'esoftplay/state';
+import React, { ReactElement } from 'react';
+import { ViewStyle } from 'react-native';
+import Animated, { Extrapolation, interpolate, runOnJS, SharedValue, useAnimatedReaction, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+
+
+export interface LibFadescrollArgs {
+
+}
+
+export interface LibFadescrollProps {
+  scrollController: SharedValue<number>,
+  style?: ViewStyle,
+  children?: ReactElement,
+  interpolateOpacity: number[],
+  interpolateScroll: number[],
+}
+export default function m(props: LibFadescrollProps): any {
+  let opacity = useSharedValue(0)
+  const [pointerEvents, setPointerEvents] = useSafeState<any>('none')
+  const { scrollController, interpolateScroll, interpolateOpacity } = props
+
+  // Animated style for opacity based on external scrollController value
+  const animatedStyle = useAnimatedStyle(() => {
+    opacity.value = interpolate(
+      scrollController.value,
+      interpolateScroll,
+      interpolateOpacity,
+      Extrapolation.CLAMP
+    );
+
+    return { opacity: opacity.value };
+  });
+
+  useAnimatedReaction(
+    () => opacity.value,
+    (currentValue) => {
+      runOnJS(setPointerEvents)(currentValue == 1 ? 'auto' : 'none');
+    },
+    []
+  );
+
+  return (
+    <Animated.View style={[props.style, animatedStyle]} pointerEvents={pointerEvents}>
+      {props.children}
+    </Animated.View>
+  );
+}

package/modules/lib/image.tsx

@@ -7,7 +7,7 @@ import { LibProgress } from 'esoftplay/cache/lib/progress/import';
 import { LibStyle } from 'esoftplay/cache/lib/style/import';
 import esp from 'esoftplay/esp';
 import useGlobalState from 'esoftplay/global';
-import { Camera } from 'expo-camera';
+import { CameraView } from 'expo-camera';
 import * as ImageManipulator from 'expo-image-manipulator';
 import { SaveFormat } from 'expo-image-manipulator';
 import * as ImagePicker from 'expo-image-picker';
@@ -80,7 +80,7 @@ class m extends LibComponent<LibImageProps, LibImageState> {
   constructor(props: LibImageProps) {
     super(props);
     this.state = {
-      type: Camera.Constants.Type.back,
+      type: 'back',
       loading: false,
       image: null,
       flashLight: 'off'
@@ -302,17 +302,17 @@ class m extends LibComponent<LibImageProps, LibImageState> {
           return (
             <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }} >
               <View style={{ flex: 1 }} >
-                <Camera
+                <CameraView
                   ref={(camera: any) => this.camera = camera}
-                  type={type}
+                  facing={type}
                   ratio={'4:3'}
-                  flashMode={flashLight}
+                  flash={flashLight}
                   zoom={0.1}
                   style={{ height: LibStyle.width * 4 / 3, width: LibStyle.width }}>
                   <View style={{ height: height, width: width, backgroundColor: 'transparent' }} >
-                    {image ? <Image source={image} style={{ height: LibStyle.width * 4 / 3, width: width, resizeMode: 'cover', transform: [{ scaleX: this.state.type == Camera.Constants.Type.back ? 1 : -1 }] }} /> : null}
+                    {image ? <Image source={image} style={{ height: LibStyle.width * 4 / 3, width: width, resizeMode: 'cover', transform: [{ scaleX: this.state.type == 'back' ? 'front' : 'back' }] }} /> : null}
                   </View>
-                </Camera>
+                </CameraView>
                 <View style={{ position: 'absolute', top: 10 + LibStyle.STATUSBAR_HEIGHT, left: 10 }} >
                   <TouchableOpacity onPress={() => this.setState({ flashLight: flashLight == 'on' ? 'off' : 'on' })} >
                     <LibIcon color={'white'} size={24} name={flashLight == 'on' ? 'flash' : "flash-off"} />
@@ -324,11 +324,11 @@ class m extends LibComponent<LibImageProps, LibImageState> {
                       {
                         image ?
                           <TouchableOpacity onPress={() => this.setState({ image: false })} >
-                            <LibIcon.Ionicons name='ios-close-circle' style={{ fontSize: 40, color: 'white' }} />
+                            <LibIcon.Ionicons name='close-circle' style={{ fontSize: 40, color: 'white' }} />
                           </TouchableOpacity>
                           :
-                          <TouchableOpacity onPress={() => this.setState({ type: this.state.type === Camera.Constants.Type.back ? Camera.Constants.Type.front : Camera.Constants.Type.back })} >
-                            <LibIcon.Ionicons name='ios-refresh-circle' style={{ fontSize: 40, color: 'white' }} />
+                          <TouchableOpacity onPress={() => this.setState({ type: this.state.type === 'back' ? 'front' : 'back' })} >
+                            <LibIcon.Ionicons name='refresh-circle' style={{ fontSize: 40, color: 'white' }} />
                           </TouchableOpacity>
                       }
                     </View>
@@ -358,7 +358,7 @@ class m extends LibComponent<LibImageProps, LibImageState> {
                                 clearTimeout(timer)
                               });
                           }} >
-                            <LibIcon.Ionicons name='ios-checkmark-circle' style={{ fontSize: 40, color: 'white' }} />
+                            <LibIcon.Ionicons name='checkmark-circle' style={{ fontSize: 40, color: 'white' }} />
                           </TouchableOpacity>
                           :
                           <TouchableOpacity onPress={() => {
@@ -369,7 +369,7 @@ class m extends LibComponent<LibImageProps, LibImageState> {
                               });
                             clearTimeout(timer)
                           }} >
-                            <LibIcon.Ionicons name='ios-close-circle' style={{ fontSize: 40, color: 'white' }} />
+                            <LibIcon.Ionicons name='close-circle' style={{ fontSize: 40, color: 'white' }} />
                           </TouchableOpacity>
                       }
                     </View>

package/modules/lib/image_crop.tsx

@@ -12,13 +12,13 @@ export interface LibImage_cropProps {
 
 }
 export default function m(props: LibImage_cropProps): any {
-	const LibIcon = useRef(esp.mod("lib/icon")).current
-	const LibNavigation = useRef(esp.mod("lib/navigation")).current
-	const LibProgress = useRef(esp.mod("lib/progress")).current
-	const LibStatusbar = useRef(esp.mod("lib/statusbar")).current
-	const LibStyle = useRef(esp.mod("lib/style")).current
-	const LibTextstyle = useRef(esp.mod("lib/textstyle")).current
-	const LibToastProperty = useRef(esp.modProp("lib/toast")).current
+  const LibIcon = useRef(esp.mod("lib/icon")).current
+  const LibNavigation = useRef(esp.mod("lib/navigation")).current
+  const LibProgress = useRef(esp.mod("lib/progress")).current
+  const LibStatusbar = useRef(esp.mod("lib/statusbar")).current
+  const LibStyle = useRef(esp.mod("lib/style")).current
+  const LibTextstyle = useRef(esp.mod("lib/textstyle")).current
+  const LibToastProperty = useRef(esp.modProp("lib/toast")).current
 
   const { image, ratio, forceCrop, message } = LibNavigation.getArgsAll(props)
   const [_image, setImage] = useSafeState(image)
@@ -43,6 +43,8 @@ export default function m(props: LibImage_cropProps): any {
     ratioSize[1] = _ratio[1] / _ratio[0] * minimalRatioSize
   }
 
+
+
   function resize(image: string) {
     LibProgress.show(esp.lang("lib/image_crop", "waiting"))
     Image.getSize(image, async (actualWidth, actualHeight) => {
@@ -179,37 +181,7 @@ export default function m(props: LibImage_cropProps): any {
   return (
     <View style={{ flex: 1, backgroundColor: "#000" }} key={counter}  >
       <LibStatusbar style="light" />
-      <Image
-        ref={imageRef}
-        style={{ resizeMode: "contain", marginTop: marginTop, height: size, width: LibStyle.width }} source={{ uri: _image }} />
-      <View style={{ flex: 1, marginTop: -(LibStyle.height - marginTop - (LibStyle.isIphoneX ? 35 : 0)) + LibStyle.STATUSBAR_HEIGHT, alignItems: 'center', justifyContent: 'center' }} >
-        <PanPinchView
-          key={_image}
-          minScale={0.5}
-          containerDimensions={{
-            width: LibStyle.width,
-            height: size,
-          }}
-          contentDimensions={{
-            width: ratioSize[0],
-            height: ratioSize[1]
-          }}
-          // style={{ backgroundColor: "transparent", flex: undefined, width: LibStyle.height * 100, height: LibStyle.height * 100, alignSelf: 'center', justifyContent: 'center' }}
-          maxScale={2}>
-          {/* <> */}
-          {/* <View style={{ backgroundColor: "rgba(0,0,0,0.5 )", flex: 1 }} />
-            <View style={{ flexDirection: "row" }} >
-              <View style={{ backgroundColor: "rgba(0,0,0,0.5 )", flex: 1 }} /> */}
-          <View ref={viewRef} style={{ height: ratioSize[1], width: ratioSize[0], backgroundColor: 'transparent', borderWidth: 1.5, borderColor: "white", borderStyle: 'dashed' }} >
-            <View style={{ flex: 1, backgroundColor: 'transparent', borderWidth: 1.5, borderColor: "black", borderStyle: 'dashed' }} />
-          </View>
-          {/* <View style={{ backgroundColor: "rgba(0,0,0,0.5 )", flex: 1 }} />
-            </View>
-            <View style={{ backgroundColor: "rgba(0,0,0,0.5 )", flex: 1 }} /> */}
-          {/* </> */}
-        </PanPinchView>
-      </View>
-      <View style={{ position: "absolute", top: LibStyle.STATUSBAR_HEIGHT, left: 0, right: 0, height: 50, flexDirection: "row", justifyContent: 'space-between' }} >
+      <View style={{ marginTop: LibStyle.STATUSBAR_HEIGHT, height: 50, flexDirection: "row", justifyContent: 'space-between' }} >
         <TouchableOpacity
           onPress={() => LibNavigation.back()}
           style={{ height: 50, width: 50, alignItems: 'center', justifyContent: 'center' }} >
@@ -228,28 +200,62 @@ export default function m(props: LibImage_cropProps): any {
           </TouchableOpacity>
         </View>
       </View>
-      {
-        // hint &
-        <Pressable
-          onPress={() => setHint(!hint)}
-          style={{ opacity: hint ? 1 : 0, position: 'absolute', left: 0, right: 0, bottom: 50, backgroundColor: 'rgba(0,0,0,0.5)', alignItems: 'center', justifyContent: 'center', padding: 30 }} >
-          <Text style={{ color: "white", textAlign: 'center' }} >{message || esp.lang("lib/image_crop", "text_msg")}</Text>
-        </Pressable>
-      }
-      {
-        (!forceCrop || cropCount > 0) &&
-        <View style={{ position: "absolute", bottom: 10, left: 0, right: 0 }} >
-          <TouchableOpacity
-            onPress={() => {
-              Image.getSize(_image, (width, height) => {
-                LibNavigation.sendBackResult({ uri: _image, width, height }, LibNavigation.getResultKey(props))
-              }, () => { })
+      <View style={{ flex: 1 }} >
+
+        <Image
+          ref={imageRef}
+          style={{ resizeMode: "contain", height: size, width: LibStyle.width }} source={{ uri: _image }} />
+        <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }} >
+          <PanPinchView
+            key={_image}
+            minScale={0.5}
+            containerDimensions={{
+              width: LibStyle.width,
+              height: size,
             }}
-            style={{ height: 50, alignItems: 'center', justifyContent: 'center', backgroundColor: 'rgba(255,255,255,0.3)' }} >
-            <LibTextstyle textStyle="body" text={esp.lang("lib/image_crop", "btn_save")} style={{ color: "white" }} />
-          </TouchableOpacity>
+            contentDimensions={{
+              width: ratioSize[0],
+              height: ratioSize[1]
+            }}
+            // style={{ backgroundColor: "transparent", flex: undefined, width: LibStyle.height * 100, height: LibStyle.height * 100, alignSelf: 'center', justifyContent: 'center' }}
+            maxScale={2}>
+            {/* <> */}
+            {/* <View style={{ backgroundColor: "rgba(0,0,0,0.5 )", flex: 1 }} />
+            <View style={{ flexDirection: "row" }} >
+              <View style={{ backgroundColor: "rgba(0,0,0,0.5 )", flex: 1 }} /> */}
+            <View ref={viewRef} style={{ height: ratioSize[1], width: ratioSize[0], backgroundColor: 'transparent', borderWidth: 1, borderColor: "white", borderStyle: 'dashed', zIndex: 100 }} >
+              <View style={{ flex: 1, backgroundColor: 'transparent', borderWidth: 1, borderColor: "black", borderStyle: 'dashed' }} />
+            </View>
+            {/* <View style={{ backgroundColor: "rgba(0,0,0,0.5 )", flex: 1 }} />
+            </View>
+            <View style={{ backgroundColor: "rgba(0,0,0,0.5 )", flex: 1 }} /> */}
+            {/* </> */}
+          </PanPinchView>
         </View>
-      }
+
+        {
+          // hint &
+          <Pressable
+            onPress={() => setHint(!hint)}
+            style={{ opacity: hint ? 1 : 0, position: 'absolute', left: 0, right: 0, bottom: 50, backgroundColor: 'rgba(0,0,0,0.5)', alignItems: 'center', justifyContent: 'center', padding: 30 }} >
+            <Text style={{ color: "white", textAlign: 'center' }} >{message || esp.lang("lib/image_crop", "text_msg")}</Text>
+          </Pressable>
+        }
+        {
+          (!forceCrop || cropCount > 0) &&
+          <View style={{ position: "absolute", bottom: 10, left: 0, right: 0 }} >
+            <TouchableOpacity
+              onPress={() => {
+                Image.getSize(_image, (width, height) => {
+                  LibNavigation.sendBackResult({ uri: _image, width, height }, LibNavigation.getResultKey(props))
+                }, () => { })
+              }}
+              style={{ height: 50, alignItems: 'center', justifyContent: 'center', backgroundColor: 'rgba(255,255,255,0.3)' }} >
+              <LibTextstyle textStyle="body" text={esp.lang("lib/image_crop", "btn_save")} style={{ color: "white" }} />
+            </TouchableOpacity>
+          </View>
+        }
+      </View>
     </View>
   )
 }

package/modules/lib/infinite.tsx

@@ -130,6 +130,7 @@ export default class m extends LibComponent<LibInfiniteProps, LibInfiniteState>
             this.isStop = true
             this.setState((state: LibInfiniteState, props: LibInfiniteProps) => {
               return {
+                isStop: this.isStop,
                 error: this.props.error || esp.lang("lib/infinite", "empty_data"),
                 data: page == 0
                   ? []
@@ -142,6 +143,7 @@ export default class m extends LibComponent<LibInfiniteProps, LibInfiniteState>
             this.setState((state: LibInfiniteState, props: LibInfiniteProps) => {
               const latestData = [...state.data, ...mainIndex.list]
               return {
+                isStop: this.isStop,
                 error: '',
                 data: page == 0
                   ? (typeof this.props?.filterData == 'function' ? mainIndex.list.filter(this.props.filterData) : mainIndex.list)

package/modules/lib/keyboard_avoid.tsx

@@ -1,23 +1,17 @@
 // withHooks
 // noPage
 
-import NavigationContainerRefContext from '@react-navigation/core/src/NavigationContainerRefContext';
-import NavigationContext from '@react-navigation/core/src/NavigationContext';
-import type { NavigationProp } from '@react-navigation/core/src/types';
-import React, { useRef, useState } from 'react';
-import { KeyboardAvoidingView, Platform, ViewStyle } from 'react-native';
-
+import React from 'react';
+import { Platform, ViewStyle } from 'react-native';
+import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
 
 export interface LibKeyboard_avoidProps {
   children?: any,
   style?: ViewStyle
 }
-export default function m(props: LibKeyboard_avoidProps): any {
-
-  // const isFocussed = useIsFocused();
 
-  // const Custom = isFocussed ? KeyboardAvoidingView : View
 
+export default function m(props: LibKeyboard_avoidProps): any {
   return (
     <KeyboardAvoidingView behavior={Platform.OS == 'android' ? 'height' : 'padding'} style={[{ flex: 1 }, props.style]} >
       {props.children}
@@ -25,55 +19,3 @@ export default function m(props: LibKeyboard_avoidProps): any {
   )
 }
 
-
-/**
- * Hook to access the navigation prop of the parent screen anywhere.
- *
- * @returns Navigation prop of the parent screen.
- */
-function useNavigation<T = NavigationProp<ReactNavigation.RootParamList>>(): T {
-  const root = React.useContext(NavigationContainerRefContext);
-  const navigation = React.useContext(NavigationContext);
-
-  if (navigation === undefined && root === undefined) {
-
-  }
-  return (navigation ?? root) as unknown as T;
-}
-
-function useIsFocused(): boolean {
-  const navigation = useNavigation();
-
-  const forceTrue = useRef(false)
-
-  if (navigation == undefined) {
-    forceTrue.current = true
-  }
-
-  const [isFocused, setIsFocused] = useState(navigation?.isFocused);
-
-  const valueToReturn = !!navigation?.isFocused?.();
-
-  if (isFocused !== valueToReturn) {
-    setIsFocused(valueToReturn);
-  }
-
-  React.useEffect(() => {
-    const unsubscribeFocus = navigation?.addListener?.('focus', () =>
-      setIsFocused(true)
-    );
-
-    const unsubscribeBlur = navigation?.addListener?.('blur', () =>
-      setIsFocused(false)
-    );
-
-    return () => {
-      unsubscribeFocus?.();
-      unsubscribeBlur?.();
-    };
-  }, [navigation]);
-
-  React.useDebugValue(valueToReturn);
-
-  return (forceTrue.current || valueToReturn);
-}

package/modules/lib/picture.tsx

@@ -1,8 +1,8 @@
 // withHooks
 // noPage
+import { Image } from 'expo-image';
 import React from 'react';
 import { ImageStyle } from 'react-native';
-import FastImage from 'react-native-fast-image';
 
 export interface LibPictureSource {
   uri: string
@@ -11,7 +11,6 @@ export interface LibPictureProps {
   source: LibPictureSource | any,
   style: ImageStyle,
   resizeMode?: "contain" | "cover",
-  noCache?: boolean,
   onError?: () => void,
 }
 
@@ -19,15 +18,17 @@ export default function m(props: LibPictureProps): any {
 
   let resizeMode
   if (props?.style?.resizeMode == 'cover')
-    resizeMode = FastImage.resizeMode.cover
+    resizeMode = "cover"
   else if (props?.style?.resizeMode == 'contain')
-    resizeMode = FastImage.resizeMode.contain
+    resizeMode = "contain"
   else if (props?.resizeMode == 'cover')
-    resizeMode = FastImage.resizeMode.cover
+    resizeMode = "cover"
   else if (props?.resizeMode == 'contain')
-    resizeMode = FastImage.resizeMode.contain
+    resizeMode = "contain"
   else
-    resizeMode = FastImage.resizeMode.cover
+    resizeMode = "cover"
 
-  return <FastImage  {...props} resizeMode={resizeMode} />
+  return (
+    <Image {...props} contentFit={resizeMode} allowDownscaling cachePolicy={"memory-disk"} />
+  )
 }

package/modules/lib/toast.tsx

@@ -3,9 +3,9 @@
 
 import { LibStyle } from 'esoftplay/cache/lib/style/import';
 import useGlobalState from 'esoftplay/global';
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Text, View } from 'react-native';
-import Animated, { interpolate, useAnimatedProps, useSharedValue, withTiming } from 'react-native-reanimated';
+import Animated, { interpolate, ReduceMotion, useAnimatedProps, useSharedValue, withTiming } from 'react-native-reanimated';
 
 export interface LibToastProps {
 
@@ -16,7 +16,7 @@ const initState = {
   timeout: 3000
 }
 
-const state = useGlobalState<any>(initState)
+const state = useGlobalState(initState)
 
 let _timeout: any = undefined
 
@@ -34,12 +34,13 @@ export function show(message: string, timeout?: number): void {
     _timeout = undefined
   }
   _timeout = setTimeout(() => {
-    hide()
     clearTimeout(_timeout)
+    hide()
   }, timeout || initState.timeout);
 }
 
 export default function m(props: LibToastProps): any {
+  const isFirstInit = useRef(true)
   const [data] = state.useState()
   const anim = useSharedValue(0)
 
@@ -51,11 +52,17 @@ export default function m(props: LibToastProps): any {
   }))
 
   useEffect(() => {
-    anim.value = withTiming(data?.message ? 1 : 0, { duration: 500 })
+    if (!isFirstInit.current && data.message == undefined) {
+      anim.value = 1
+    }
+    if (isFirstInit.current) {
+      isFirstInit.current = false
+    }
+    anim.value = withTiming(data.message != undefined ? 1 : 0, { duration: 500, reduceMotion: ReduceMotion.Never })
   }, [data])
 
   return (
-    <Animated.View pointerEvents={'none'} style={[{ flex: 1, position: 'absolute', justifyContent: 'center', alignContent: 'center', alignItems: 'center', top: LibStyle.STATUSBAR_HEIGHT + 20, left: 0, right: 0, }, style, LibStyle.elevation(2)]} >
+    <Animated.View pointerEvents={'none'} style={[{ flex: 1, position: 'absolute', justifyContent: 'center', alignContent: 'center', alignItems: 'center', top: LibStyle.STATUSBAR_HEIGHT + 20, opacity: 0, left: 0, right: 0, }, style, LibStyle.elevation(2)]} >
       <View style={{ maxWidth: Math.min(500, LibStyle.width - 30), minWidth: Math.min(500, LibStyle.width - 30), marginHorizontal: 15, marginVertical: 4, borderRadius: 4, borderWidth: 1, borderColor: '#505050', backgroundColor: '#323232', paddingVertical: 13, paddingHorizontal: 16, }} >
         <Text style={{ fontSize: 14, textAlign: "center", color: 'white' }} >{String(data?.message || '')}</Text>
       </View>

package/modules/lib/version.tsx

@@ -22,7 +22,7 @@ export interface LibVersionState {
 export default class m extends LibComponent<LibVersionProps, LibVersionState> {
 
   static appVersion(): string {
-    let version: any = (Platform.OS == 'android' ? Constants?.expoConfig?.android?.versionCode : Constants?.expoConfig?.ios?.buildNumber)
+    let version: any = (Platform.OS == 'android' ? Constants?.manifest?.android?.versionCode : Constants?.manifest?.ios?.buildNumber)
     return version
   }
 
@@ -43,7 +43,7 @@ export default class m extends LibComponent<LibVersionProps, LibVersionState> {
   }
 
   static onDone(res: any, msg: string): void {
-    const { title, version, android, ios, isForceUpdate } = res
+    const { title, version, android, ios, version_publish } = res
 
     function isAvailableNewVersion(newVersion: string): boolean {
       let oldVersion = m.appVersion()
@@ -51,10 +51,13 @@ export default class m extends LibComponent<LibVersionProps, LibVersionState> {
     }
     if (isAvailableNewVersion(version)) {
       LibNavigation.backToRoot()
-      LibNavigation.replace("lib/version", { res, msg: msg == 'success' ? esp.lang("lib/version", "update_now") : msg })
-    }
-    if (isForceUpdate == 1) {
-      LibUpdaterProperty.check((isNew) => { if (isNew) LibUpdaterProperty.install() })
+      LibNavigation.replace("lib/version", { res, msg: msg == 'success' ? 'Update to a new version now' : msg })
+    } else {
+      const currentVersion = esp.config('publish_id')
+      if (currentVersion < version_publish && !__DEV__) {
+        LibNavigation.reset("lib/version_view")
+        LibUpdaterProperty.check((isNew) => { if (isNew) LibUpdaterProperty.install() })
+      }
     }
   }
   static check(): void {
@@ -67,7 +70,7 @@ export default class m extends LibComponent<LibVersionProps, LibVersionState> {
     return (
       <ImageBackground source={esp.assets("splash.png")} blurRadius={100} style={{ flex: 1, justifyContent: 'center', alignItems: 'center', borderStartColor: 'white', paddingHorizontal: 17 }} >
         <LibIcon.SimpleLineIcons name="info" size={60} />
-        <LibTextstyle textStyle="headline" text={title || esp.lang("lib/version", "version_available")} style={{ textAlign: 'center', marginTop: 10 }} />
+        <LibTextstyle textStyle="headline" text={title || 'A new version is available'} style={{ textAlign: 'center', marginTop: 10 }} />
         <LibTextstyle textStyle="callout" text={msg} style={{ textAlign: 'center', marginTop: 10, color: '#333' }} />
         <TouchableOpacity
           onPress={() => { Linking.openURL(link) }}

package/modules/lib/version_view.tsx

@@ -0,0 +1,34 @@
+// withHooks
+
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import esp from 'esoftplay/esp';
+import { useTimeout } from 'esoftplay/timeout';
+import * as Updates from 'expo-updates';
+import React, { useEffect } from 'react';
+import { ActivityIndicator, ImageBackground, View } from 'react-native';
+
+export interface LibVersion_viewArgs {
+
+}
+export interface LibVersion_viewProps {
+
+}
+export default function m(props: LibVersion_viewProps): any {
+  const timeout = useTimeout()
+  useEffect(() => {
+    timeout(() => {
+      Updates.reloadAsync()
+    }, 15000);
+  }, [])
+
+  return (
+    <ImageBackground source={esp.assets('splash.png')} style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }} >
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }} >
+        <LibTextstyle style={{ textAlign: 'center' }} textStyle='headline' text={esp.lang("lib/version_view", "msg")} />
+      </View>
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }} >
+        <ActivityIndicator size={'large'} />
+      </View>
+    </ImageBackground>
+  )
+}

package/modules/main/index.tsx

@@ -12,7 +12,7 @@ export default function m(props: MainIndexProps): any {
 
   return (
     <View style={{ flex: 1, backgroundColor: "white", justifyContent: 'center', alignItems: 'center' }} >
-      <Text>{`Hellow Esoftplay Developer, jangan lupa bismillah dulu ଘ(੭ˊᵕˋ)੭*`}</Text>
+      <Text style={{ textAlign: 'center' }} >{`Hellow Esoftplay Developer, jangan lupa bismillah dulu ଘ(੭ˊᵕˋ)੭*`}</Text>
     </View>
   )
 }

package/modules/use/deeplink.ts

@@ -47,10 +47,12 @@ export default function m(defaultUrl?: string): void {
   useEffect(() => {
     (async () => {
       const url = await Linking.getInitialURL();
-      doLink({ url: url })
+      if (url) {
+        doLink({ url: url })
+      }
     })()
 
     Linking.addEventListener('url', doLink);
-    return () => Linking.removeEventListener('url', doLink)
+    return () => Linking.removeAllListeners('url')
   }, [])
 }

package/modules/user/data.ts

@@ -5,7 +5,9 @@ import { userDataReset } from 'esoftplay/global';
 import FastStorage from 'esoftplay/mmkv';
 import Storage from 'esoftplay/storage';
 
+/** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/modules/user/data.md) untuk melihat dokumentasi*/
 export default {
+/** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/modules/user/data.md#register) untuk melihat dokumentasi*/
   register(name: string): void {
     AsyncStorage.getItem("user_data_dependent").then((x) => {
       let all: string[] = []

package/modules/user/hook.tsx

@@ -7,6 +7,7 @@ export interface UserHookArgs {
 export interface UserHookProps {
   
 }
+/** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/modules/user/hook.md) untuk melihat dokumentasi*/
 export default function m(props: UserHookProps): any {
   return null
 }

package/modules/user/index.tsx

@@ -24,6 +24,8 @@ import { useFonts } from 'expo-font';
 import React, { useLayoutEffect } from 'react';
 import { View } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { KeyboardProvider } from "react-native-keyboard-controller";
+
 
 export interface UserIndexProps {
 
@@ -44,6 +46,8 @@ function getFontConfig() {
 }
 
 
+
+/** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/modules/user/index.md) untuk melihat dokumentasi*/
 export default function m(props: UserIndexProps): any {
   moment().locale(LibLocale.state().get())
   const [loading, setLoading] = useSafeState(true)
@@ -69,26 +73,28 @@ export default function m(props: UserIndexProps): any {
   //esoftplay-chatting
 
   return (
-    <GestureHandlerRootView style={{ flex: 1 }}>
-      <View style={{ flex: 1 }}>
-        <LibWorker />
-        {
-          loading ?
-            <UserLoading />
-            :
-            <>
-              <LibWorkloop />
-              <Navs />
-              <LibNet_status />
-              <LibDialog style={'default'} />
-              <LibImage />
-              <LibProgress />
-              <LibToast />
-              <UserHook />
-            </>
-        }
-      </View>
-      <View style={{ backgroundColor: LibStyle?.colorNavigationBar || 'white', height: LibStyle.isIphoneX ? 35 : 0 }} />
-    </GestureHandlerRootView>
+    <KeyboardProvider>
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <View style={{ flex: 1 }}>
+          <LibWorker />
+          {
+            loading ?
+              <UserLoading />
+              :
+              <>
+                <LibWorkloop />
+                <Navs />
+                <LibNet_status />
+                <LibDialog style={'default'} />
+                <LibImage />
+                <LibProgress />
+                <LibToast />
+                <UserHook />
+              </>
+          }
+        </View>
+        <View style={{ backgroundColor: LibStyle?.colorNavigationBar || 'white', height: LibStyle.isIphoneX ? 35 : 0 }} />
+      </GestureHandlerRootView>
+    </KeyboardProvider>
   )
 }

package/modules/user/loading.tsx

@@ -11,6 +11,7 @@ export interface UserLoadingArgs {
 export interface UserLoadingProps {
 
 }
+/** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/modules/user/loading.md) untuk melihat dokumentasi*/
 export default function m(props: UserLoadingProps): any {
   return <ImageBackground source={esp.assets('splash.gif') || esp.assets('splash.png')} style={{ flex: 1 }} />
 }

package/modules/user/notification.tsx

@@ -28,6 +28,7 @@ const initState = {
 };
 
 const state = useGlobalState<any>(initState, { persistKey: "user_notification_data", isUserData: true, loadOnInit: true })
+/** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/modules/user/notification.md) untuk melihat dokumentasi*/
 export default class m extends LibComponent<UserNotificationProps, UserNotificationState> {
 
   static state(): useGlobalReturn<any> {

package/modules/user/notification_item.tsx

@@ -18,6 +18,7 @@ export interface UserNotification_itemProps {
   updated: string,
   user_id: number,
 }
+/** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/modules/user/notification_item.md) untuk melihat dokumentasi*/
 export default function m(props: UserNotification_itemProps): any {
 	const LibStyle = useRef(esp.mod("lib/style")).current
 	const LibUtils = useRef(esp.mod("lib/utils")).current

package/modules/user/routes.ts

@@ -4,13 +4,17 @@ import useGlobalState, { useGlobalReturn } from 'esoftplay/global';
 
 const state = useGlobalState(undefined)
 
+/** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/modules/user/routes.md) untuk melihat dokumentasi*/
 export default {
+  /** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/modules/user/routes.md#state) untuk melihat dokumentasi*/
   state(): useGlobalReturn<any> {
     return state
   },
+  /** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/modules/user/routes.md#set) untuk melihat dokumentasi*/
   set(routes: any): void {
     state.set(routes)
   },
+  /** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/modules/user/routes.md#getCurrentRouteName) untuk melihat dokumentasi*/
   getCurrentRouteName(): string {
     let lastIdx = state.get()?.routes?.length - 1
     let currentName = state.get()?.routes?.[lastIdx]?.name

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "esoftplay",
-  "version": "0.0.141",
+  "version": "0.0.142-b",
   "description": "embedding data from esoftplay framework (web based) into mobile app",
   "main": "cache/index.js",
   "types": "../../index.d.ts",

package/render.tsx

@@ -3,15 +3,25 @@
 
 import { useEffect, useRef } from 'react';
 import { Text } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';
 
+
+const AnimatedText = Animated.createAnimatedComponent(Text)
 export default function useRenderCounter(module: string): any {
   const counter = useRef(1)
+  const value = useSharedValue(0)
 
   useEffect(() => {
     counter.current += 1
+    value.value = 1
+    value.value = withDelay(1000, withTiming(0, { duration: 500 }))
   })
 
+  const style = useAnimatedStyle(() => ({
+    opacity: value.value
+  }))
+
   return () => (
-    <Text style={{ position: 'absolute', fontSize: 7, zIndex: 999, color: 'white', backgroundColor: 'black', bottom: 0, left: 0 }} >{module}: {counter.current}</Text>
+    <AnimatedText pointerEvent={'none'} style={[{ position: 'absolute', fontSize: 10, zIndex: 999, color: 'white', backgroundColor: 'black', bottom: 0, left: 0 }, style]} >{module}: {counter.current}</AnimatedText>
   )
 }

package/timeout.ts

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from "react";
 
+/** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/timeout.md#createTimeout) untuk melihat dokumentasi*/
 export function createTimeout() {
   let timeoutId: any = undefined;
   function set(callback: Function, delay: number) {
@@ -20,6 +21,7 @@ export function createTimeout() {
   return { set, clear };
 }
 
+/** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/timeout.md#useTimeout) untuk melihat dokumentasi*/
 export function useTimeout() {
   const smartTimeout = useRef(createTimeout());
 
@@ -31,6 +33,7 @@ export function useTimeout() {
 }
 
 
+/** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/timeout.md#createInterval) untuk melihat dokumentasi*/
 export function createInterval() {
   let timeoutId: any = undefined;
   function set(callback: Function, delay: number) {
@@ -50,6 +53,7 @@ export function createInterval() {
   return { set, clear };
 }
 
+/** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/timeout.md#useInterval) untuk melihat dokumentasi*/
 export function useInterval() {
   const smartInterval = useRef(createInterval());
 
@@ -60,6 +64,7 @@ export function useInterval() {
   return smartInterval.current?.set;
 }
 
+/** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/timeout.md#createDebounce) untuk melihat dokumentasi*/
 export function createDebounce() {
   let timeoutId: any = undefined;
   function set(callback: Function, delay: number) {
@@ -80,6 +85,7 @@ export function createDebounce() {
   return { set, clear };
 }
 
+/** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/timeout.md#useDebounce) untuk melihat dokumentasi*/
 export function useDebounce() {
   const smartDebounce = useRef(createDebounce());