Skip to content

Commit

Permalink
Fix merge conflicts
Browse files Browse the repository at this point in the history
  • Loading branch information
kandiecindy committed Sep 23, 2024
2 parents 184f6e7 + 063d8e7 commit b360f20
Show file tree
Hide file tree
Showing 6 changed files with 81 additions and 49 deletions.
77 changes: 42 additions & 35 deletions app/(tabs)/home/_layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,42 @@ import Colors from '@/constants/Colors';
import { useClientOnlyValue } from '@/components/useClientOnlyValue';
import StyledText from '@/components/common/StyledText';
import MainHeader from '@/components/headers/MainHeader';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { StyleSheet, View } from 'react-native';
import { spacing } from '@/constants/Styles';

// You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
function TabBarIcon(props: { name: React.ComponentProps<typeof MaterialCommunityIcons>['name']; color: string }) {
return <MaterialCommunityIcons size={28} style={{ marginBottom: -3 }} {...props} />;
}

function CustomHeader() {
const insets = useSafeAreaInsets();
return (
<View style={[styles.headerContainer, { paddingTop: insets.top + spacing.sm, paddingHorizontal: spacing.lg }]}>
<MainHeader />
</View>
);
}

export default function TabLayout() {
//TODO: show tab labels if tab is focussed
const insets = useSafeAreaInsets();

const headerHeight = 120;

return (
<Tabs
screenOptions={{
tabBarStyle: {
backgroundColor: Colors.palette.primary,
borderTopColor: Colors.palette.primary,
backgroundColor: Colors.palette.primary + '80',
borderTopColor: 'transparent',
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
elevation: 0,
height: 60 + insets.bottom,
paddingBottom: insets.bottom,
},
tabBarActiveTintColor: Colors.palette.secondary,
tabBarInactiveTintColor: Colors.palette.text,
Expand All @@ -30,6 +51,13 @@ export default function TabLayout() {
// Disable the static render of the header on web
// to prevent a hydration error in React Navigation v6.
headerShown: useClientOnlyValue(false, true),
headerTitleContainerStyle: {
width: '100%',
},
headerStyle: {
height: headerHeight,
},
header: () => <CustomHeader />,
}}
>
<Tabs.Screen
Expand All @@ -41,14 +69,6 @@ export default function TabLayout() {
Schedule
</StyledText>
),
headerStyle: {
backgroundColor: Colors.palette.primary,
height: 120,
elevation: 0,
shadowOpacity: 0,
borderBottomWidth: 0,
},
headerTitle: () => <MainHeader />,
}}
/>
<Tabs.Screen
Expand All @@ -60,14 +80,6 @@ export default function TabLayout() {
Bookmarked
</StyledText>
),
headerStyle: {
backgroundColor: Colors.palette.primary,
height: 120,
elevation: 0,
shadowOpacity: 0,
borderBottomWidth: 0,
},
headerTitle: () => <MainHeader />,
}}
/>
<Tabs.Screen
Expand All @@ -79,14 +91,6 @@ export default function TabLayout() {
Speakers
</StyledText>
),
headerStyle: {
backgroundColor: Colors.palette.primary,
height: 110,
elevation: 0,
shadowOpacity: 0,
borderBottomWidth: 0,
},
headerTitle: () => <MainHeader />,
}}
/>
<Tabs.Screen
Expand All @@ -98,16 +102,19 @@ export default function TabLayout() {
About
</StyledText>
),
headerStyle: {
backgroundColor: Colors.palette.primary,
height: 120,
elevation: 0,
shadowOpacity: 0,
borderBottomWidth: 0,
},
headerTitle: () => <MainHeader />,
}}
/>
</Tabs>
);
}

const styles = StyleSheet.create({
headerContainer: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
backgroundColor: Colors.palette.primary + 'CC', // Semi-transparent
height: 100,
},
});
2 changes: 1 addition & 1 deletion app/(tabs)/home/about.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { spacing } from '@/constants/Styles';

const home = () => {
return (
<MainContainer>
<MainContainer backgroundImage={require('@/assets/images/bg.png')} ImageBackgroundProps={{ resizeMode: 'cover' }}>
<View style={styles.container}>
<StyledText size="lg" font="semiBold">
About
Expand Down
2 changes: 1 addition & 1 deletion app/(tabs)/home/bookmarks.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { spacing } from '@/constants/Styles';

const home = () => {
return (
<MainContainer>
<MainContainer backgroundImage={require('@/assets/images/bg.png')} ImageBackgroundProps={{ resizeMode: 'cover' }}>
<View style={styles.container}>
<StyledText size="lg" font="semiBold">
Bookmarks
Expand Down
2 changes: 1 addition & 1 deletion app/(tabs)/home/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { spacing } from '@/constants/Styles';

const home = () => {
return (
<MainContainer>
<MainContainer backgroundImage={require('@/assets/images/bg.png')} ImageBackgroundProps={{ resizeMode: 'cover' }}>
<View style={styles.container}>
<StyledText size="lg" font="semiBold">
Schedule page
Expand Down
Binary file added assets/images/bg.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
47 changes: 36 additions & 11 deletions components/containers/MainContainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,14 @@ import Colors from '@/constants/Colors';
import type { StatusBarProps } from 'expo-status-bar';
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import type { KeyboardAvoidingViewProps, ScrollViewProps, StyleProp, ViewStyle } from 'react-native';
import { KeyboardAvoidingView, Platform, ScrollView, StyleSheet, View } from 'react-native';
import type {
ImageBackgroundProps,
KeyboardAvoidingViewProps,
ScrollViewProps,
StyleProp,
ViewStyle,
} from 'react-native';
import { ImageBackground, KeyboardAvoidingView, Platform, ScrollView, StyleSheet, View } from 'react-native';
import type { Edge, SafeAreaViewProps } from 'react-native-safe-area-context';
import { SafeAreaProvider, SafeAreaView, initialWindowMetrics } from 'react-native-safe-area-context';

Expand All @@ -15,6 +21,8 @@ interface BaseScreenProps {
KeyboardAvoidingViewProps?: KeyboardAvoidingViewProps;
safeAreaEdges?: Edge[];
style?: StyleProp<ViewStyle>;
backgroundImage?: ImageBackgroundProps['source'];
ImageBackgroundProps?: Omit<ImageBackgroundProps, 'source'>;
}

interface FixedScreenProps extends BaseScreenProps {
Expand Down Expand Up @@ -68,6 +76,8 @@ const MainContainer = (props: ScreenProps) => {
keyboardOffset = 0,
KeyboardAvoidingViewProps,
style,
backgroundImage,
ImageBackgroundProps,
} = props;

const backgroundColor = Colors.palette.primary;
Expand All @@ -78,19 +88,28 @@ const MainContainer = (props: ScreenProps) => {

const wrapperStyles = StyleSheet.compose(styles.container, style);

const Content = (
<KeyboardAvoidingView
behavior={isIos ? 'padding' : undefined}
keyboardVerticalOffset={keyboardOffset}
{...KeyboardAvoidingViewProps}
style={[styles.keyboard, KeyboardAvoidingViewProps?.style]}
>
{isNonScrolling(props.preset) ? <ScreenWithoutScrolling {...props} /> : <ScreenWithScrolling {...props} />}
</KeyboardAvoidingView>
);

return (
<SafeAreaProvider testID="main-container" initialMetrics={initialWindowMetrics}>
<Wrapper edges={safeAreaEdges} {...SafeAreaViewProps} style={[{ backgroundColor }, wrapperStyles]}>
<StatusBar style={statusBarStyle} {...StatusBarProps} />

<KeyboardAvoidingView
behavior={isIos ? 'padding' : undefined}
keyboardVerticalOffset={keyboardOffset}
{...KeyboardAvoidingViewProps}
style={[styles.keyboard, KeyboardAvoidingViewProps?.style]}
>
{isNonScrolling(props.preset) ? <ScreenWithoutScrolling {...props} /> : <ScreenWithScrolling {...props} />}
</KeyboardAvoidingView>
{backgroundImage ? (
<ImageBackground source={backgroundImage} style={styles.backgroundImage} {...ImageBackgroundProps}>
{Content}
</ImageBackground>
) : (
Content
)}
</Wrapper>
</SafeAreaProvider>
);
Expand All @@ -99,6 +118,7 @@ const MainContainer = (props: ScreenProps) => {
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Platform.OS === 'android' ? 60 : 40,
},
containerStyle: {
width: '100%',
Expand All @@ -107,6 +127,11 @@ const styles = StyleSheet.create({
keyboard: {
flex: 1,
},
backgroundImage: {
flex: 1,
width: '100%',
height: '100%',
},
});

export default MainContainer;

0 comments on commit b360f20

Please sign in to comment.