diff --git a/core/dimensions-model/src/types/ListDimensionsModel.types.ts b/core/dimensions-model/src/types/ListDimensionsModel.types.ts
index d561fa0f..ca59a1d2 100644
--- a/core/dimensions-model/src/types/ListDimensionsModel.types.ts
+++ b/core/dimensions-model/src/types/ListDimensionsModel.types.ts
@@ -12,6 +12,7 @@ import {
   IMasonryDimensions,
   IMasonryDimensionsModel,
 } from '@infinite-list/types';
+import { RecyclerProps } from '@infinite-list/strategies';
 import { IDefaultKeyExtra } from '@infinite-list/utils';
 
 export type GetItemSeparatorLength<ItemT> = (
@@ -42,6 +43,7 @@ export type OnListDimensionsModelDataChanged<
 export interface ListDimensionsModelProps<
   ItemT extends GenericItemT = GenericItemT
 > extends ListBaseDimensionsProps,
+    RecyclerProps,
     BaseDimensionsProps {
   /**
    * @template ItemT the generic data item type
@@ -84,8 +86,6 @@ export interface ListDimensionsModelProps<
    */
   manuallyApplyInitialData?: boolean;
 
-  recyclerTypes?: Array<string>;
-
   onListDimensionsModelDataChanged?: OnListDimensionsModelDataChanged<ItemT>;
 }
 
diff --git a/core/strategies/src/RecycleStateImpl.ts b/core/strategies/src/RecycleStateImpl.ts
index 1be4caed..5cdf8cd8 100644
--- a/core/strategies/src/RecycleStateImpl.ts
+++ b/core/strategies/src/RecycleStateImpl.ts
@@ -129,7 +129,8 @@ class RecycleStateImpl<
         .map((state) => {
           if (!state) return null;
           const copy = { ...state };
-          // @ts-expect-error
+
+          // @ts-expect-error [TODO]
           delete copy.viewable;
 
           return copy;
diff --git a/core/strategies/src/types/stateHub.types.ts b/core/strategies/src/types/stateHub.types.ts
index 5c423906..0efd6d84 100644
--- a/core/strategies/src/types/stateHub.types.ts
+++ b/core/strategies/src/types/stateHub.types.ts
@@ -9,6 +9,13 @@ export type BaseStateImplProps<ItemT extends GenericItemT = GenericItemT> = {
 export type SpaceStateImplProps<ItemT extends GenericItemT = GenericItemT> =
   {} & BaseStateImplProps<ItemT>;
 
+export type RecyclerProps = {
+  recyclerTypes?: string[];
+  recyclerBufferSize?: number;
+  recyclerReservedBufferPerBatch?: number;
+  onRecyclerProcess?: (type?: string, index?: number) => boolean;
+};
+
 export type RecycleStateImplProps<ItemT extends GenericItemT = GenericItemT> = {
   recyclerTypes?: string[];
   recyclerBufferSize?: number;
diff --git a/examples/ReactNativeListPlayground/app/(tabs)/Group.tsx b/examples/ReactNativeListPlayground/app/(tabs)/Group.tsx
index fc010808..f0acc669 100644
--- a/examples/ReactNativeListPlayground/app/(tabs)/Group.tsx
+++ b/examples/ReactNativeListPlayground/app/(tabs)/Group.tsx
@@ -1,4 +1,4 @@
-import { useRef, useCallback } from 'react';
+import { useRef, useCallback, useEffect } from 'react';
 import { View, Text, ScrollView as NativeScrollView } from 'react-native';
 
 import { ScrollView, ScrollViewContext } from '@infinite-list/scroller';
@@ -20,7 +20,40 @@ export default () => {
   const scrollViewRef = useRef<NativeScrollView>(null);
 
   const renderItem = useCallback((props: { item }) => {
-    const { item } = props;
+    const { item, itemMeta, ...rest } = props;
+
+    const initRef = useRef(true);
+    const itemMetaRef = useRef(itemMeta);
+
+    if (itemMetaRef.current !== itemMeta) {
+      itemMetaRef.current = itemMeta;
+    }
+
+    useEffect(() => {
+      return () => {
+        console.log('unmount ------------------');
+      };
+    }, []);
+
+    console.log('rest ---- ', rest);
+
+    useEffect(() => {
+      if (initRef.current) console.log('mount ', itemMeta.getKey());
+      else {
+        console.log('update to ', itemMeta.getKey());
+      }
+
+      initRef.current = false;
+
+      return () => {
+        console.log(
+          'unmount ',
+          itemMeta.getKey(),
+          itemMetaRef.current.getKey()
+        );
+      };
+    }, [itemMeta]);
+
     return (
       <View style={{ height: 80, width: '100%', backgroundColor: '#fff' }}>
         <Text>{item.value}</Text>
@@ -40,27 +73,30 @@ export default () => {
           backgroundColor: 'green',
         }}
       >
+        <View
+          style={{
+            height: 340,
+          }}
+        />
+
         <ListGroup
           id="basic"
           containerRef={scrollViewRef}
+          recyclerBufferSize={100}
+          recyclerReservedBufferPerBatch={50}
+          initialNumToRender={10}
           scrollComponentContext={ScrollViewContext}
         >
           <GroupList
             id="first"
             data={buildData(500)}
-            recyclerBufferSize={100}
-            recyclerReservedBufferPerBatch={50}
             renderItem={renderItem}
             keyExtractor={keyExtractor}
-            initialNumToRender={0}
           />
 
           <GroupList<Item>
             id="second"
-            initialNumToRender={0}
             data={buildData(500, 500)}
-            recyclerBufferSize={100}
-            recyclerReservedBufferPerBatch={50}
             renderItem={renderItem}
             keyExtractor={keyExtractor}
           />
diff --git a/examples/ReactNativeListPlayground/app/(tabs)/MasonryList.tsx b/examples/ReactNativeListPlayground/app/(tabs)/MasonryList.tsx
index 67ebf263..a94a2480 100644
--- a/examples/ReactNativeListPlayground/app/(tabs)/MasonryList.tsx
+++ b/examples/ReactNativeListPlayground/app/(tabs)/MasonryList.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useRef } from 'react';
+import { useCallback, useMemo, useRef, useEffect } from 'react';
 import { ScrollView as NativeScrollView } from 'react-native';
 import { MasonryList } from '@infinite-list/masonry';
 import { ScrollView } from '@infinite-list/scroller';
@@ -14,10 +14,24 @@ export default () => {
   const data = useMemo(() => buildData(10000), []);
   const scrollViewRef = useRef<NativeScrollView>(null);
 
-  const renderItem = useCallback((props: { item }) => {
+  const renderItem = useCallback((props) => {
     const { item, itemMeta } = props;
     const index = itemMeta.getIndexInfo().index;
     const totalIndex = itemMeta.getIndexInfo().indexInTotal;
+    const initRef = useRef(true);
+
+    useEffect(() => {
+      if (initRef.current) console.log('mount ', itemMeta.getKey());
+      else {
+        console.log('update to ', itemMeta.getKey());
+      }
+
+      initRef.current = false;
+
+      return () => {
+        console.log('unmount ', itemMeta.getKey());
+      };
+    }, [itemMeta]);
 
     return (
       <View
diff --git a/examples/ReactNativeListPlayground/app/(tabs)/index.tsx b/examples/ReactNativeListPlayground/app/(tabs)/index.tsx
index d5919c61..00fb7f3a 100644
--- a/examples/ReactNativeListPlayground/app/(tabs)/index.tsx
+++ b/examples/ReactNativeListPlayground/app/(tabs)/index.tsx
@@ -171,7 +171,7 @@ import Group from './Group';
 import HorizontalList from './HorizontalList';
 
 export default () => {
-  return <Group />;
+  // return <Group />;
   // return <MasonryList />;
   return <List />;
   return <HorizontalList />;
diff --git a/examples/react-playground/src/app/group.stories.tsx b/examples/react-playground/src/app/group.stories.tsx
index 05366d94..39a65173 100644
--- a/examples/react-playground/src/app/group.stories.tsx
+++ b/examples/react-playground/src/app/group.stories.tsx
@@ -27,13 +27,15 @@ const meta: Meta<typeof ListGroup> = {
           // overflowY: 'auto',
         }}
       >
-        <ListGroup id="basic">
+        <ListGroup
+          id="basic"
+          initialNumToRender={0}
+          recyclerBufferSize={100}
+          recyclerReservedBufferPerBatch={50}
+        >
           <GroupList
             id="first"
-            initialNumToRender={0}
             data={buildData(500)}
-            recyclerBufferSize={100}
-            recyclerReservedBufferPerBatch={50}
             renderItem={(props: RenderItemInfo<Item>) => {
               const { item } = props;
               return (
@@ -50,15 +52,12 @@ const meta: Meta<typeof ListGroup> = {
                 </div>
               );
             }}
-            keyExtractor={defaultKeyExtractor as KeyExtractor<Item>}
+            keyExtractor={defaultKeyExtractor}
           />
 
           <GroupList
             id="second"
-            initialNumToRender={0}
             data={buildData(500, 500)}
-            recyclerBufferSize={100}
-            recyclerReservedBufferPerBatch={50}
             renderItem={(props: RenderItemInfo<Item>) => {
               const { item } = props;
 
@@ -76,7 +75,7 @@ const meta: Meta<typeof ListGroup> = {
                 </div>
               );
             }}
-            keyExtractor={defaultKeyExtractor as KeyExtractor<Item>}
+            keyExtractor={defaultKeyExtractor}
           />
         </ListGroup>
       </div>
diff --git a/ui/group/src/common/PortalContent.tsx b/ui/group/src/common/PortalContent.tsx
index b346fc0f..8be42bc8 100644
--- a/ui/group/src/common/PortalContent.tsx
+++ b/ui/group/src/common/PortalContent.tsx
@@ -112,7 +112,7 @@ const SpaceContent = <ItemT extends GenericItemT = GenericItemT>(
   return (
     <>
       {state.map((stateResult) => {
-        const { isSpace, key, item, length, isSticky, itemMeta } = stateResult;
+        const { isSpace, key, item, length, itemMeta } = stateResult;
 
         const metaOwner = itemMeta?.getOwner();
         const info = metaOwner?.extraInfo as ExtraInfo<ItemT>;
diff --git a/ui/group/src/react-native/CompatListItem.tsx b/ui/group/src/react-native/CompatListItem.tsx
index 5354b9de..345a6727 100644
--- a/ui/group/src/react-native/CompatListItem.tsx
+++ b/ui/group/src/react-native/CompatListItem.tsx
@@ -17,8 +17,6 @@ const CompatListItem = <ItemT extends GenericItemT>(
     style: _style = {},
     children,
     forwardRef,
-
-    dimensions,
     recycleItemContainerKey,
     CellRendererComponent,
     onMeasureLayout: _onMeasureLayout,
@@ -26,7 +24,7 @@ const CompatListItem = <ItemT extends GenericItemT>(
     addItemChangedListener,
     containerRef,
     itemMeta,
-    ...rest
+    item,
   } = props;
   const containerStyle = useMemo(
     () => StyleSheet.flatten([_style, { elevation: 0 }]),
@@ -104,7 +102,6 @@ const CompatListItem = <ItemT extends GenericItemT>(
       onLayout={layoutHandler}
       key={recycleItemContainerKey}
       {...refProps}
-      {...rest}
       style={containerStyle}
     >
       {children}
diff --git a/ui/group/src/react-native/ListGroup.tsx b/ui/group/src/react-native/ListGroup.tsx
index 790cd408..ce53add0 100644
--- a/ui/group/src/react-native/ListGroup.tsx
+++ b/ui/group/src/react-native/ListGroup.tsx
@@ -160,7 +160,7 @@ const ListGroup = <ItemT extends GenericItemT>(
    * like IOC, the specific logic placed on the topmost.
    */
   const ListItemWrapper = useCallback<TListItemWrapper<ItemT>>((props) => {
-    return <CompatListItem {...props} containerRef={containerRef} />;
+    return <CompatListItem {...props} containerRef={viewRef} />;
   }, []);
 
   return (
diff --git a/ui/group/src/react-native/index.ts b/ui/group/src/react-native/index.ts
index bd80e7cd..c8389c32 100644
--- a/ui/group/src/react-native/index.ts
+++ b/ui/group/src/react-native/index.ts
@@ -2,4 +2,3 @@ export { default as ListGroup } from './ListGroup';
 export { default as GroupList } from '../common/GroupList';
 export { default as ListGroupContext } from '../common/context';
 export { default as GroupListItem } from '../common/GroupDimensionItem';
-export * from './types';
diff --git a/ui/group/src/react-native/types/ListGroup.types.ts b/ui/group/src/react-native/types/ListGroup.types.ts
index cd2c0596..cf2d2e47 100644
--- a/ui/group/src/react-native/types/ListGroup.types.ts
+++ b/ui/group/src/react-native/types/ListGroup.types.ts
@@ -1,13 +1,8 @@
-import {
-  OnEndReachedHelperProps,
-  ViewabilityConfig,
-  OnViewableItemsChanged,
-  ViewabilityConfigCallbackPairs,
-} from '@infinite-list/viewable';
-import { ComponentType, PropsWithChildren, MutableRefObject } from 'react';
+import { MutableRefObject } from 'react';
 import { View, ScrollView, LayoutChangeEvent } from 'react-native';
-import { GenericItemT } from '@infinite-list/item-meta';
+import { GenericItemT } from '@infinite-list/types';
 import { RefObject } from 'react';
+import { ListGroupProps as CommonListGroupProps } from '../../types';
 
 export type ScrollComponentUseMeasureLayout = (
   itemRef: MutableRefObject<View | null>,
@@ -24,19 +19,5 @@ export type ScrollComponentUseMeasureLayout = (
 
 export type ContainerRef = RefObject<ScrollView | View | any>;
 
-export type ListGroupProps<ItemT extends GenericItemT> = PropsWithChildren<{
-  id: string;
-  onViewableItemsChanged?: OnViewableItemsChanged;
-  viewabilityConfig?: ViewabilityConfig;
-  viewabilityConfigCallbackPairs?: ViewabilityConfigCallbackPairs;
-  initialNumToRender?: number;
-  windowSize?: number;
-  maxToRenderPerBatch?: number;
-  onRenderFinished?: () => void;
-  persistanceIndices?: number[];
-
-  scrollComponentContext: any;
-  containerRef: ContainerRef;
-  GroupListSeparatorComponent?: ComponentType<ItemT> | null | undefined;
-}> &
-  OnEndReachedHelperProps;
+export type ListGroupProps<ItemT extends GenericItemT> =
+  CommonListGroupProps<ItemT>;
diff --git a/ui/group/src/react/index.ts b/ui/group/src/react/index.ts
index bd80e7cd..c8389c32 100644
--- a/ui/group/src/react/index.ts
+++ b/ui/group/src/react/index.ts
@@ -2,4 +2,3 @@ export { default as ListGroup } from './ListGroup';
 export { default as GroupList } from '../common/GroupList';
 export { default as ListGroupContext } from '../common/context';
 export { default as GroupListItem } from '../common/GroupDimensionItem';
-export * from './types';
diff --git a/ui/group/src/react/types/ListGroup.types.ts b/ui/group/src/react/types/ListGroup.types.ts
index 2a5d8fcf..82d7ae75 100644
--- a/ui/group/src/react/types/ListGroup.types.ts
+++ b/ui/group/src/react/types/ListGroup.types.ts
@@ -1,11 +1,7 @@
-import {
-  OnEndReachedHelperProps,
-  ViewabilityConfig,
-  OnViewableItemsChanged,
-  ViewabilityConfigCallbackPairs,
-} from '@infinite-list/viewable';
-import { ComponentType, PropsWithChildren, MutableRefObject } from 'react';
+import { MutableRefObject } from 'react';
 import { View, LayoutChangeEvent } from 'react-native';
+import { GenericItemT } from '@infinite-list/types';
+import { ListGroupProps as CommonListGroupProps } from '../../types';
 
 export type ScrollComponentUseMeasureLayout = (
   itemRef: MutableRefObject<View | null>,
@@ -20,18 +16,5 @@ export type ScrollComponentUseMeasureLayout = (
   layoutHandler: (e: LayoutChangeEvent) => void;
 };
 
-export type ListGroupProps = PropsWithChildren<{
-  GroupListSeparatorComponent?: ComponentType<any> | null | undefined;
-  id: string;
-  onViewableItemsChanged?: OnViewableItemsChanged;
-  viewabilityConfig?: ViewabilityConfig;
-  viewabilityConfigCallbackPairs?: ViewabilityConfigCallbackPairs;
-  initialNumToRender?: number;
-  windowSize?: number;
-  maxToRenderPerBatch?: number;
-  onRenderFinished?: () => void;
-  persistanceIndices?: number[];
-
-  scrollComponentContext: any;
-}> &
-  OnEndReachedHelperProps;
+export type ListGroupProps<ItemT extends GenericItemT> =
+  CommonListGroupProps<ItemT>;
diff --git a/ui/group/src/types/ListGroup.types.ts b/ui/group/src/types/ListGroup.types.ts
index 43ee06e9..c035e46d 100644
--- a/ui/group/src/types/ListGroup.types.ts
+++ b/ui/group/src/types/ListGroup.types.ts
@@ -6,51 +6,23 @@ import {
   GenericItemT,
 } from '@infinite-list/viewable';
 import { ComponentType, PropsWithChildren } from 'react';
-// import { View, LayoutChangeEvent } from 'react-native';
+import { RecyclerProps } from '@infinite-list/strategies';
 
-// export type ScrollComponentUseMeasureLayout = (
-//   itemRef: MutableRefObject<View | null>,
-//   options: {
-//     onLayout?: Function;
-//     getCurrentKey?: () => string;
-//     isIntervalTreeItem?: boolean;
-//     onMeasureLayout?: Function;
-//   }
-// ) => {
-//   handler: Function;
-//   layoutHandler: (e: LayoutChangeEvent) => void;
-// };
+export type ListGroupProps<ItemT extends GenericItemT> = PropsWithChildren<
+  {
+    id: string;
+    horizontal?: boolean;
+    onViewableItemsChanged?: OnViewableItemsChanged;
+    viewabilityConfig?: ViewabilityConfig;
+    viewabilityConfigCallbackPairs?: ViewabilityConfigCallbackPairs;
+    initialNumToRender?: number;
+    windowSize?: number;
+    maxToRenderPerBatch?: number;
+    onRenderFinished?: () => void;
+    persistanceIndices?: number[];
 
-// export type ListGroupProps = PropsWithChildren<{
-//   GroupListSeparatorComponent?: ComponentType<any> | null | undefined;
-//   id: string;
-//   onViewableItemsChanged?: OnViewableItemsChanged;
-//   viewabilityConfig?: ViewabilityConfig;
-//   viewabilityConfigCallbackPairs?: ViewabilityConfigCallbackPairs;
-//   initialNumToRender?: number;
-//   windowSize?: number;
-//   maxToRenderPerBatch?: number;
-//   onRenderFinished?: () => void;
-//   persistanceIndices?: number[];
-
-//   scrollComponentContext: any;
-//   scrollComponentUseMeasureLayout: ScrollComponentUseMeasureLayout;
-// }> &
-//   OnEndReachedHelperProps;
-export type ListGroupProps<ItemT extends GenericItemT> = PropsWithChildren<{
-  GroupListSeparatorComponent?: ComponentType<ItemT> | null | undefined;
-  id: string;
-  horizontal?: boolean;
-  onViewableItemsChanged?: OnViewableItemsChanged;
-  viewabilityConfig?: ViewabilityConfig;
-  viewabilityConfigCallbackPairs?: ViewabilityConfigCallbackPairs;
-  initialNumToRender?: number;
-  windowSize?: number;
-  maxToRenderPerBatch?: number;
-  onRenderFinished?: () => void;
-  persistanceIndices?: number[];
-
-  scrollComponentContext?: any;
-  // scrollComponentUseMeasureLayout?: ScrollComponentUseMeasureLayout;
-}> &
-  OnEndReachedHelperProps;
+    scrollComponentContext?: any;
+    GroupListSeparatorComponent?: ComponentType<ItemT> | null | undefined;
+  } & OnEndReachedHelperProps &
+    RecyclerProps
+>;
diff --git a/ui/group/src/types/ListItem.types.ts b/ui/group/src/types/ListItem.types.ts
index 2b180c41..cf4fb89f 100644
--- a/ui/group/src/types/ListItem.types.ts
+++ b/ui/group/src/types/ListItem.types.ts
@@ -36,6 +36,7 @@ export interface ListItemProps<ItemT extends GenericItemT> {
 
   onMeasureLayout?: OnMeasureLayout;
   teleportItemProps?: TeleportItemProps<ItemT>;
+  // CellRendererComponent?: React.ComponentType<any> | undefined;
   CellRendererComponent?: React.ComponentType<any> | undefined;
   ListItemWrapper: ListItemWrapper<ItemT>;
   recycleItemContainerKey: string;
diff --git a/ui/list/src/react-native/List.tsx b/ui/list/src/react-native/List.tsx
index 061bb80b..83b9e0c6 100644
--- a/ui/list/src/react-native/List.tsx
+++ b/ui/list/src/react-native/List.tsx
@@ -156,10 +156,6 @@ const List = <ItemT extends GenericItemT>(props: ListProps<ItemT>) => {
     //   </>
     // );
 
-    // console.log('data ref ',dataRef.current)
-
-    // console.log('spaceState ', nextState)
-
     return (
       <View
         id={id}
@@ -167,9 +163,6 @@ const List = <ItemT extends GenericItemT>(props: ListProps<ItemT>) => {
         style={containerStyle}
         onLayout={onLayoutHandler}
       >
-        {/* <View style={{ width: 50, height: 30, backgroundColor: 'pink'}}>33</View>
-        <View style={{ width: 50, height: 30, backgroundColor: 'pink'}}>33</View>
-        <View style={{ width: 50, height: 30, backgroundColor: 'pink'}}>33</View> */}
         {nextState.recycleState.map((data) => (
           <RecycleItem
             key={data.key}