Merge pull request #285 from cultuurnet/bugfix/UIT-213-onboarding-scroll

Onboarding screen styling on smaller devices
cultuurnet · Nov 14, 2023 · 2fe8b7c · 2fe8b7c
2 parents d07ca36 + 1667333
commit 2fe8b7c
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 47 deletions.
diff --git a/src/_components/safeAreaView/SafeAreaView.tsx b/src/_components/safeAreaView/SafeAreaView.tsx
@@ -1,5 +1,5 @@
 import { forwardRef } from 'react';
-import { ScrollView, ScrollViewProps, StatusBarStyle } from 'react-native';
+import { ScrollView, ScrollViewProps, StatusBarStyle, StyleProp, ViewStyle } from 'react-native';
 import { NativeSafeAreaViewProps as RNSafeAreaViewProps } from 'react-native-safe-area-context';
 
 import { ThemeColor } from '../../_styles/theme';
@@ -11,6 +11,7 @@ export type TSafeAreaViewProps = {
   barStyle?: StatusBarStyle;
   isScrollable?: boolean;
   stickyHeaderIndices?: number[];
+  style?: StyleProp<ViewStyle>;
 } & RNSafeAreaViewProps &
   Pick<ScrollViewProps, 'keyboardShouldPersistTaps'>;
 
@@ -29,10 +30,10 @@ const SafeAreaView = forwardRef<ScrollView, TSafeAreaViewProps>(
   ) => {
     if (isScrollable) {
       return (
-        <Styled.SafeAreaViewContainer backgroundColor={backgroundColor} isScrollable={isScrollable} {...props}>
+        <Styled.SafeAreaViewContainer backgroundColor={backgroundColor} {...props}>
           <FocusAwareStatusBar barStyle={barStyle} />
           <ScrollView
-            contentContainerStyle={{ paddingBottom: 95 }}
+            contentContainerStyle={[{ flexGrow: 1 }, props.style]}
             keyboardShouldPersistTaps={keyboardShouldPersistTaps}
             ref={ref}
             stickyHeaderIndices={stickyHeaderIndices}
@@ -43,7 +44,7 @@ const SafeAreaView = forwardRef<ScrollView, TSafeAreaViewProps>(
       );
     } else {
       return (
-        <Styled.SafeAreaViewContainer backgroundColor={backgroundColor} isScrollable={isScrollable} {...props}>
+        <Styled.SafeAreaViewContainer backgroundColor={backgroundColor} {...props}>
           <FocusAwareStatusBar barStyle={barStyle} />
           {children}
         </Styled.SafeAreaViewContainer>

diff --git a/src/_components/safeAreaView/style.ts b/src/_components/safeAreaView/style.ts
@@ -4,7 +4,7 @@ import styled from 'styled-components/native';
 import { ThemeColor } from '../../_styles/theme';
 import { getColor } from '../../_utils';
 
-export const SafeAreaViewContainer = styled(SafeAreaView)<{ backgroundColor: ThemeColor; isScrollable?: boolean }>`
+export const SafeAreaViewContainer = styled(SafeAreaView)<{ backgroundColor: ThemeColor }>`
   background-color: ${({ backgroundColor }) => getColor(backgroundColor)};
   flex: 1;
 `;
diff --git a/src/_routing/_components/RootStackNavigator.tsx b/src/_routing/_components/RootStackNavigator.tsx
@@ -72,7 +72,6 @@ export const RootStackNavigator = () => {
             <RootStack.Screen component={Error} name="Error" options={{ gestureEnabled: false }} />
             <RootStack.Screen component={Search} name="Search" />
           </RootStack.Group>
-
           <RootStack.Screen
             component={About}
             name="About"

diff --git a/src/onboarding/Onboarding.tsx b/src/onboarding/Onboarding.tsx
@@ -1,8 +1,7 @@
-import { useWindowDimensions } from 'react-native';
 import { t } from 'i18next';
 
 import { Counter } from '../_assets/images';
-import { Analytics, SafeAreaView, Typography } from '../_components';
+import { Analytics, Button, SafeAreaView, Typography } from '../_components';
 import { ConfigUrl } from '../_config';
 import { useStackNavigation, useToggle } from '../_hooks';
 import { StorageKey } from '../_models';
@@ -12,7 +11,6 @@ import * as Styled from './style';
 const Onboarding = () => {
   const [isChecked, toggleChecked] = useToggle(false);
   const navigation = useStackNavigation();
-  const { height } = useWindowDimensions();
 
   const onPress = () => {
     storage.set(StorageKey.IsPolicyApproved, true);
@@ -22,12 +20,12 @@ const Onboarding = () => {
   return (
     <>
       <Analytics screenName="Onboarding" />
-      <SafeAreaView backgroundColor="neutral.0" barStyle="dark-content" isScrollable={false}>
+      <SafeAreaView backgroundColor="neutral.0" barStyle="dark-content">
         <Styled.TopContainer>
           <Styled.TitleText color="secondary.700" fontStyle="bold" size="large">
             {t('ONBOARDING.TITLE')}
           </Styled.TitleText>
-          {height > 600 && <Styled.Image source={Counter} />}
+          <Styled.Image source={Counter} />
           <Styled.IntroText align="center" color="neutral.900">
             {t('ONBOARDING.INTRO')}
           </Styled.IntroText>
@@ -46,7 +44,7 @@ const Onboarding = () => {
           />
         </Styled.TopContainer>
         <Styled.BottomContainer>
-          <Styled.ConfirmButton disabled={!isChecked} label={t('ONBOARDING.CONFIRM')} onPress={onPress} />
+          <Button disabled={!isChecked} label={t('ONBOARDING.CONFIRM')} onPress={onPress} />
         </Styled.BottomContainer>
       </SafeAreaView>
     </>

diff --git a/src/onboarding/style.ts b/src/onboarding/style.ts
@@ -3,6 +3,7 @@ import styled from 'styled-components/native';
 import { Button, Checkbox, Typography } from '../_components';
 
 export const TopContainer = styled.View`
+  flex: 1;
   padding: 0px 16px;
   align-items: center;
 `;
@@ -35,16 +36,9 @@ export const ConfirmViewContainer = styled.View`
 `;
 
 export const BottomContainer = styled.View`
-  position: absolute;
-  bottom: 35px;
-  width: 100%;
+  padding: 16px;
 `;
 
 export const LinkButton = styled(Button)`
   margin: 0 5px;
 `;
-
-export const ConfirmButton = styled(Button)`
-  margin: 0 auto;
-  width: 90%;
-`;
diff --git a/src/profile/UitpasCard/style.ts b/src/profile/UitpasCard/style.ts
@@ -1,7 +1,5 @@
 import styled from 'styled-components/native';
 
-import { SafeAreaView } from '../../_components';
-
 const CARD_MARGIN = 20;
 
 export const ContentContainer = styled.View<{ screenWidth: number }>`
@@ -29,10 +27,6 @@ export const CardContainer = styled.View`
   margin: 25px 0px;
 `;
 
-export const SafeAreaViewContainer = styled(SafeAreaView)`
-  background-color: ${({ theme }) => theme.palette.neutral['100']};
-`;
-
 export const LogoContainer = styled.View`
   margin-left: -40px;
   margin-top: 15px;

diff --git a/src/profile/style.ts b/src/profile/style.ts
@@ -20,7 +20,7 @@ export const ActionButton = styled(Button)`
 
 export const SafeAreaViewContainer = styled(SafeAreaView)`
   background-color: ${({ theme }) => theme.palette.neutral['100']};
-  padding-bottom: 40px;
+  padding-bottom: 95px;
 `;
 
 export const TopContent = styled.View`
@@ -31,8 +31,6 @@ export const Divider = styled.View`
   height: 4px;
 `;
 
-
-
 export const TopContainer = styled.View`
   position: relative;
   /* background-color: ${({ theme }) => theme.palette.secondary['500']}; */

diff --git a/src/shop/Shop.tsx b/src/shop/Shop.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Analytics, EnlargedHeader, SafeAreaView } from '../_components';
+import { Analytics, EnlargedHeader } from '../_components';
 import { TMainNavigationProp } from '../_routing';
 import { useGetMe } from '../profile/_queries/useGetMe';
 import { CategoryFilters } from './_components/categoryFilters/CategoryFilters';
@@ -41,29 +41,27 @@ const Shop = ({ navigation }: TProps) => {
   return (
     <>
       <Analytics screenName="rewardshop" />
-      <SafeAreaView edges={['left', 'right']} isScrollable>
+      <Styled.SafeAreaViewContainer edges={['left', 'right']} isScrollable>
         <EnlargedHeader height={30} />
         <Styled.SearchContainer>
           <Styled.SearchButton onPress={() => navigation.push('Search')}>
             <Styled.SearchInput editable={false} placeholder={t('SHOP.SEARCH.PLACEHOLDER')} pointerEvents="none" />
           </Styled.SearchButton>
           <Styled.SearchIcon color="primary.700" name="Search" size={18} />
         </Styled.SearchContainer>
-        <>
-          <WelcomeGiftsBanner />
-          <CategoryFilters />
-          {sections.map(({ section, category, title, horizontal }) => (
-            <RewardsSection
-              category={category}
-              horizontal={horizontal}
-              key={title}
-              onLoaded={onSectionLoaded}
-              section={section}
-              title={t(title, { city: user?.address?.city || t('SHOP.SECTIONS.CITY_FALLBACK') })}
-            />
-          ))}
-        </>
-      </SafeAreaView>
+        <WelcomeGiftsBanner />
+        <CategoryFilters />
+        {sections.map(({ section, category, title, horizontal }) => (
+          <RewardsSection
+            category={category}
+            horizontal={horizontal}
+            key={title}
+            onLoaded={onSectionLoaded}
+            section={section}
+            title={t(title, { city: user?.address?.city || t('SHOP.SECTIONS.CITY_FALLBACK') })}
+          />
+        ))}
+      </Styled.SafeAreaViewContainer>
     </>
   );
 };

diff --git a/src/shop/style.ts b/src/shop/style.ts
@@ -1,8 +1,12 @@
 import styled from 'styled-components/native';
 
-import { Icon, TouchableRipple } from '../_components';
+import { Icon, SafeAreaView, TouchableRipple } from '../_components';
 import { theme } from '../_styles/theme';
 
+export const SafeAreaViewContainer = styled(SafeAreaView)`
+  padding-bottom: 95px;
+`;
+
 export const SearchContainer = styled.View<{ paddingTop?: number }>`
   background-color: ${theme.palette.secondary[500]};
   padding: ${({ paddingTop = 0 }) =>