speaker page and speakers

rendercon · Sep 23, 2024 · 5572b88 · 5572b88
1 parent 62a0ed3
commit 5572b88
Show file tree

Hide file tree

Showing 10 changed files with 24 additions and 81 deletions.
diff --git a/app/(tabs)/home/_layout.tsx b/app/(tabs)/home/_layout.tsx
@@ -33,7 +33,7 @@ export default function TabLayout() {
     <Tabs
       screenOptions={{
         tabBarStyle: {
-          backgroundColor: Colors.palette.primary + '80',
+          backgroundColor: Colors.palette.primary + 'cc',
           borderTopColor: 'transparent',
           position: 'absolute',
           bottom: 0,

diff --git a/app/(tabs)/home/speakers.tsx b/app/(tabs)/home/speakers.tsx
@@ -12,7 +12,12 @@ const Speakers = () => {
   const { speakerList, loading, error } = useFetchSpeakers();
 
   return (
-    <MainContainer backgroundImage={require('@/assets/images/bg.png')} ImageBackgroundProps={{ resizeMode: 'cover' }}>
+    <MainContainer
+      backgroundImage={require('@/assets/images/bg.png')}
+      ImageBackgroundProps={{ resizeMode: 'cover' }}
+      preset="fixed"
+      safeAreaEdges={['top']}
+    >
       <View style={styles.container}>
         <StyledText size="xl" font="semiBold" style={styles.header}>
           Speakers
@@ -30,6 +35,11 @@ const Speakers = () => {
               <SpeakerCard speaker={item} onPress={() => router.push(`/speakers/${item.id}`)} />
             )}
             keyExtractor={(item) => item.id}
+            getItemLayout={(_, index) => ({
+              length: 100,
+              offset: 100 * index,
+              index,
+            })}
           />
         )}
       </View>
@@ -40,7 +50,9 @@ const Speakers = () => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    padding: 16,
+    paddingTop: sizes.header,
+    paddingHorizontal: sizes.md,
+    paddingBottom: sizes.md,
   },
   header: {
     color: Colors.palette.secondary,

diff --git a/app/(tabs)/speakers/[id].tsx b/app/(tabs)/speakers/[id].tsx
@@ -52,7 +52,12 @@ const SpeakerPage = () => {
   };
 
   return (
-    <MainContainer backgroundImage={require('@/assets/images/bg.png')} ImageBackgroundProps={{ resizeMode: 'cover' }}>
+    <MainContainer
+      backgroundImage={require('@/assets/images/bg.png')}
+      ImageBackgroundProps={{ resizeMode: 'cover' }}
+      preset="scroll"
+      safeAreaEdges={['top']}
+    >
       <View style={styles.container}>
         <View style={styles.header}>
           <Pressable
@@ -115,7 +120,6 @@ const styles = StyleSheet.create({
   error: {
     color: Colors.palette.error,
     textAlign: 'center',
-    marginTop: 20,
   },
   header: {
     width: '100%',

diff --git a/app/(tabs)/speakers/_layout.tsx b/app/(tabs)/speakers/_layout.tsx
@@ -3,7 +3,7 @@ import { Stack } from 'expo-router';
 
 export default function TabLayout() {
   return (
-    <Stack screenOptions={{ headerShown: false }}>
+    <Stack>
       <Stack.Screen
         name="[id]"
         options={{

diff --git a/assets/images/linkedin.png b/assets/images/linkedin.png
diff --git a/assets/images/x.png b/assets/images/x.png
diff --git a/components/containers/BackgroundWrapper.tsx b/components/containers/BackgroundWrapper.tsx
diff --git a/components/containers/MainContainer.tsx b/components/containers/MainContainer.tsx
@@ -118,7 +118,7 @@ const MainContainer = (props: ScreenProps) => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    paddingTop: Platform.OS === 'android' ? 60 : 40,
+    // paddingTop: Platform.OS === 'android' ? 60 : 40,
   },
   containerStyle: {
     width: '100%',

diff --git a/components/headers/SpeakerHeader.tsx b/components/headers/SpeakerHeader.tsx
diff --git a/constants/Styles.ts b/constants/Styles.ts
@@ -5,6 +5,7 @@ export const sizes = {
   xl: 26,
   xxl: 32,
   xxxl: 40,
+  header: 60,
   card: 220,
   cardImage: 150,
 } as const;