wibu/hipmi-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source 
deskripsi:
- fix ViewWrapper : flexibel terhadap keypad
- saat keypad keluar tidak ada lagi space di atas navighation bar

No Issue
This commit is contained in:
Bagasbanuna02
2025-07-08 10:46:45 +08:00
parent 1a16b16f47
commit 8abf23fd13
9 changed files with 231 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
components/_ShareComponent/ViewWrapper.tsx
View File

@@ -1,56 +1,111 @@
import { MainColor } from "@/constants/color-palet";
import { GStyles } from "@/styles/global-styles";
import { ImageBackground, ScrollView, View } from "react-native";
import {
ImageBackground,
Keyboard,
KeyboardAvoidingView,
Platform,
ScrollView,
TouchableWithoutFeedback,
View,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
interface ViewWrapperProps {
children: React.ReactNode;
withBackground?: boolean;
tabBarComponent?: React.ReactNode;
bottomBarComponent?: React.ReactNode;
footerComponent?: React.ReactNode;
}
const ViewWrapper = ({
children,
withBackground = false,
tabBarComponent,
bottomBarComponent,
footerComponent,
}: ViewWrapperProps) => {
const assetBackground = require("../../assets/images/main-background.png");
return (
<>
<SafeAreaView
edges={[
"bottom",
// "top",
]}
style={{
flex: 1,
// paddingTop: StatusBar.currentHeight,
backgroundColor: MainColor.darkblue,
}}
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : "height"}
style={{ flex: 1 }}
>
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
{withBackground ? (
<ImageBackground
source={assetBackground}
resizeMode="cover"
style={GStyles.imageBackground}
>
<View style={GStyles.containerWithBackground}>{children}</View>
</ImageBackground>
) : (
<View style={GStyles.container}>{children}</View>
)}
<ScrollView
contentContainerStyle={{ flexGrow: 1 }}
keyboardShouldPersistTaps="handled"
>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={{ flex: 1 }}>
{withBackground ? (
<ImageBackground
source={assetBackground}
resizeMode="cover"
style={GStyles.imageBackground}
>
<View style={GStyles.containerWithBackground}>
{children}
</View>
</ImageBackground>
) : (
<View style={GStyles.container}>{children}</View>
)}
</View>
</TouchableWithoutFeedback>
</ScrollView>
{tabBarComponent ? tabBarComponent : null}
{bottomBarComponent ? (
<View style={GStyles.bottomBar}>
<View style={GStyles.bottomBarContainer}>{bottomBarComponent}</View>
</View>
) : null}
</SafeAreaView>
{footerComponent ? (
<SafeAreaView
edges={["bottom"]}
style={{
flex: 1,
backgroundColor: MainColor.darkblue,
}}
>
{footerComponent}
</SafeAreaView>
) : (
<SafeAreaView
edges={["bottom"]}
style={{ backgroundColor: MainColor.darkblue }}
/>
)}
</KeyboardAvoidingView>
{/* <SafeAreaView
edges={["bottom"]}
style={{ flex: 1, backgroundColor: MainColor.soft_darkblue }}
>
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : "height"}
style={{ flex: 1 }}
>
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
{withBackground ? (
<ImageBackground
source={assetBackground}
resizeMode="cover"
style={GStyles.imageBackground}
>
<View style={GStyles.containerWithBackground}>{children}</View>
</ImageBackground>
) : (
<View style={GStyles.container}>{children}</View>
)}
</ScrollView>
{footerComponent ? (
<SafeAreaView
edges={["bottom"]}
style={{
// flex: 1,
backgroundColor: MainColor.darkblue,
}}
>
{footerComponent}
</SafeAreaView>
) : null}
</KeyboardAvoidingView>
</SafeAreaView> */}
</>
);
};