hipmi-mobile/docs/architecture/OS-Wrapper-Quick-Reference.md

OS_Wrapper Quick Reference

📦 Import

import { OS_Wrapper, IOSWrapper, AndroidWrapper } from "@/components";

🎯 Usage Examples

1. OS_Wrapper - List Mode (Most Common)

<OS_Wrapper
  listData={data}
  renderItem={({ item }) => <Card item={item} />}
  ListEmptyComponent={<EmptyState />}
  ListFooterComponent={<LoadingFooter />}
  onEndReached={loadMore}
  refreshControl={
    <RefreshControl
      refreshing={refreshing}
      onRefresh={onRefresh}
    />
  }
/>

2. OS_Wrapper - Static Mode

<OS_Wrapper
  headerComponent={<HeaderSection />}
  footerComponent={<FooterSection />}
  withBackground={true}
>
  <YourContent />
</OS_Wrapper>

3. OS_Wrapper - Form dengan Keyboard Handling

<OS_Wrapper
  enableKeyboardHandling
  keyboardScrollOffset={150}
  contentPaddingBottom={100}
  footerComponent={
    <BoxButtonOnFooter>
      <ButtonCustom isLoading={loading} onPress={handleSubmit}>
        Submit
      </ButtonCustom>
    </BoxButtonOnFooter>
  }
>
  <ScrollView>
    <TextInputCustom />
    <TextInputCustom />
  </ScrollView>
</OS_Wrapper>

4. Platform-Specific (Rare Cases)

// iOS only
<IOSWrapper>
  <Content />
</IOSWrapper>

// Android only
<AndroidWrapper enableKeyboardHandling>
  <Content />
</AndroidWrapper>

📋 Props Reference

Common Props (iOS + Android)

Prop	Type	Default	Description
withBackground	boolean	false	Show background image
headerComponent	ReactNode	-	Sticky header component
footerComponent	ReactNode	-	Fixed footer component
floatingButton	ReactNode	-	Floating button
hideFooter	boolean	false	Hide footer section
edgesFooter	Edge[]	[]	Safe area edges
style	ViewStyle	-	Custom container style
refreshControl	RefreshControl	-	Pull to refresh control

Android-Only Props (Ignored on iOS)

Prop	Type	Default	Description
enableKeyboardHandling	boolean	false	Auto-scroll on input focus
keyboardScrollOffset	number	100	Scroll offset when keyboard appears
contentPaddingBottom	number	80	Extra bottom padding
contentPadding	number	16	Content padding (all sides)

🔄 Migration Pattern

- import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+ import { OS_Wrapper } from "@/components";

- <NewWrapper
+ <OS_Wrapper
    listData={data}
    renderItem={renderItem}
    {...otherProps}
  />

- import { NewWrapper_V2 } from "@/components/_ShareComponent/NewWrapper_V2";
+ import { OS_Wrapper } from "@/components";

- <NewWrapper_V2 enableKeyboardHandling>
+ <OS_Wrapper enableKeyboardHandling>
    <FormContent />
  </NewWrapper_V2>

💡 Tips

1. Pakai OS_Wrapper untuk semua screen (list, detail, form)
2. Tambahkan enableKeyboardHandling untuk form dengan input fields
3. Jangan mix wrapper lama dan baru di screen yang sama
4. Test di kedua platform sebelum commit
5. Keyboard handling hanya bekerja di Android (iOS mengabaikan props ini)

⚠️ Common Mistakes

❌ Wrong

// Jangan import langsung dari file
import OS_Wrapper from "@/components/_ShareComponent/OS_Wrapper";

// Jangan mix wrapper
<OS_Wrapper>
  <NewWrapper>{content}</NewWrapper>
</OS_Wrapper>

// Jangan pakai PageWrapper (sudah tidak ada)
import { PageWrapper } from "@/components";

✅ Correct

// Import dari @/components
import { OS_Wrapper } from "@/components";

// Simple content
<OS_Wrapper>{content}</OS_Wrapper>

// Form with keyboard handling
<OS_Wrapper enableKeyboardHandling keyboardScrollOffset={150}>
  <FormContent />
</OS_Wrapper>

---

Last updated: 2026-04-06