fix: adjust content feed padding to account for header height on Andr…

…oid (#2510) * fix: styles a background view to add padding equal to header height on Android * fix: styles a background view to add padding * chore: update snaps * fix: linter * fix: more linter * fix: more linter issues * chore: update contentSingle snapshot * chore: updated nested screens in User Settings * chore: linter
ApollosProject · May 25, 2022 · 718b7fe · 718b7fe
1 parent 9ef7158
commit 718b7fe
Show file tree

Hide file tree

Showing 12 changed files with 885 additions and 819 deletions.
diff --git a/packages/apollos-ui-connected/src/FeaturesFeedConnected/FeaturesFeedConnected.js b/packages/apollos-ui-connected/src/FeaturesFeedConnected/FeaturesFeedConnected.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { Query } from '@apollo/client/react/components';
 import { get } from 'lodash';
 
-import { FeedView, named } from '@apollosproject/ui-kit';
+import { BackgroundView, FeedView, named } from '@apollosproject/ui-kit';
 
 import featuresFeedComponentMapper from './featuresFeedComponentMapper';
 import GET_FEATURE_FEED from './getFeatureFeed';
@@ -117,27 +117,29 @@ class FeaturesFeedConnected extends PureComponent {
     const featureFeedId =
       this.props.route?.params.id || this.props.featureFeedId;
     return (
-      <Query
-        query={GET_FEATURE_FEED}
-        variables={{ featureFeedId }}
-        fetchPolicy="cache-and-network"
-      >
-        {({ error, data, loading, refetch }) => {
-          const features = get(data, 'node.features', []);
-          this.refetchRef({ refetch, id: 'feed' });
-          return (
-            <FeedView
-              error={error}
-              content={features}
-              loadingStateData={this.loadingStateData}
-              renderItem={this.renderFeatures}
-              loading={loading}
-              refetch={this.refetch}
-              {...this.props.feedViewProps}
-            />
-          );
-        }}
-      </Query>
+      <BackgroundView avoidHeader>
+        <Query
+          query={GET_FEATURE_FEED}
+          variables={{ featureFeedId }}
+          fetchPolicy="cache-and-network"
+        >
+          {({ error, data, loading, refetch }) => {
+            const features = get(data, 'node.features', []);
+            this.refetchRef({ refetch, id: 'feed' });
+            return (
+              <FeedView
+                error={error}
+                content={features}
+                loadingStateData={this.loadingStateData}
+                renderItem={this.renderFeatures}
+                loading={loading}
+                refetch={this.refetch}
+                {...this.props.feedViewProps}
+              />
+            );
+          }}
+        </Query>
+      </BackgroundView>
     );
   }
 }

diff --git a/...-ui-connected/src/FeaturesFeedConnected/__snapshots__/FeaturesFeedConnected.tests.js.snap b/...-ui-connected/src/FeaturesFeedConnected/__snapshots__/FeaturesFeedConnected.tests.js.snap
@@ -8,41 +8,52 @@ exports[`FeaturesFeedConnected should render 1`] = `
     }
   }
 >
-  <RCTScrollView
-    data={Array []}
-    disableVirtualization={false}
-    getItem={[Function]}
-    getItemCount={[Function]}
-    horizontal={false}
-    initialNumToRender={10}
-    keyExtractor={[Function]}
-    loading={false}
-    maxToRenderPerBatch={10}
-    onContentSizeChange={[Function]}
-    onEndReachedThreshold={0.7}
-    onLayout={[Function]}
-    onMomentumScrollEnd={[Function]}
-    onRefresh={[Function]}
-    onScroll={[Function]}
-    onScrollBeginDrag={[Function]}
-    onScrollEndDrag={[Function]}
-    refreshControl={
-      <RefreshControlMock
-        onRefresh={[Function]}
-        refreshing={false}
-      />
+  <View
+    avoidHeader={true}
+    style={
+      Object {
+        "backgroundColor": "rgb(249, 249, 251)",
+        "flex": 1,
+        "height": "100%",
+      }
     }
-    refreshing={false}
-    removeClippedSubviews={false}
-    renderItem={[Function]}
-    scrollEventThrottle={50}
-    stickyHeaderIndices={Array []}
-    updateCellsBatchingPeriod={50}
-    viewabilityConfigCallbackPairs={Array []}
-    windowSize={21}
   >
-    <RCTRefreshControl />
-    <View />
-  </RCTScrollView>
+    <RCTScrollView
+      data={Array []}
+      disableVirtualization={false}
+      getItem={[Function]}
+      getItemCount={[Function]}
+      horizontal={false}
+      initialNumToRender={10}
+      keyExtractor={[Function]}
+      loading={false}
+      maxToRenderPerBatch={10}
+      onContentSizeChange={[Function]}
+      onEndReachedThreshold={0.7}
+      onLayout={[Function]}
+      onMomentumScrollEnd={[Function]}
+      onRefresh={[Function]}
+      onScroll={[Function]}
+      onScrollBeginDrag={[Function]}
+      onScrollEndDrag={[Function]}
+      refreshControl={
+        <RefreshControlMock
+          onRefresh={[Function]}
+          refreshing={false}
+        />
+      }
+      refreshing={false}
+      removeClippedSubviews={false}
+      renderItem={[Function]}
+      scrollEventThrottle={50}
+      stickyHeaderIndices={Array []}
+      updateCellsBatchingPeriod={50}
+      viewabilityConfigCallbackPairs={Array []}
+      windowSize={21}
+    >
+      <RCTRefreshControl />
+      <View />
+    </RCTScrollView>
+  </View>
 </View>
 `;
diff --git a/packages/apollos-ui-connected/src/LikedContentFeedConnected/LikedContentFeedConnected.js b/packages/apollos-ui-connected/src/LikedContentFeedConnected/LikedContentFeedConnected.js
@@ -60,7 +60,7 @@ class LikedContentFeedConnected extends PureComponent {
     const { Component, ContentCardComponent } = this.props;
 
     return (
-      <BackgroundView>
+      <BackgroundView avoidHeader>
         <Query
           query={GET_LIKED_CONTENT}
           fetchPolicy="cache-and-network"

diff --git a/...s-ui-connected/src/LikedContentFeedConnected/__snapshots__/LikedContentList.tests.js.snap b/...s-ui-connected/src/LikedContentFeedConnected/__snapshots__/LikedContentList.tests.js.snap
@@ -9,6 +9,7 @@ exports[`LikedContentFeedConnected component renders LikedContentFeedConnected 1
   }
 >
   <View
+    avoidHeader={true}
     style={
       Object {
         "backgroundColor": "rgb(249, 249, 251)",

diff --git a/packages/apollos-ui-connected/src/UserSettingsConnected/ChangePassword.js b/packages/apollos-ui-connected/src/UserSettingsConnected/ChangePassword.js
@@ -6,7 +6,13 @@ import { gql } from '@apollo/client';
 import { Formik } from 'formik';
 import * as Yup from 'yup';
 
-import { Button, TextInput, PaddedView, styled } from '@apollosproject/ui-kit';
+import {
+  BackgroundView,
+  Button,
+  TextInput,
+  PaddedView,
+  styled,
+} from '@apollosproject/ui-kit';
 
 import { SafeAreaView } from 'react-native-safe-area-context';
 import CHANGE_PASSWORD from './passwordChange';
@@ -30,34 +36,40 @@ class ChangePassword extends PureComponent {
   };
 
   renderForm = (props) => (
-    <FlexedKeyboardAvoidingView behavior="padding">
-      <PaddedView>
-        <TextInput
-          label="New Password"
-          type="password"
-          value={props.values?.password}
-          error={props.touched.password && props.errors.password}
-          onChangeText={(text) => props.setFieldValue('password', text)}
-        />
-        <TextInput
-          label="Confirm Password"
-          type="password"
-          value={props.values?.confirmPassword}
-          error={props.touched.confirmPassword && props.errors.confirmPassword}
-          onChangeText={(text) => props.setFieldValue('confirmPassword', text)}
-        />
-      </PaddedView>
-      <Footer>
+    <BackgroundView avoidHeader>
+      <FlexedKeyboardAvoidingView behavior="padding">
         <PaddedView>
-          <Button
-            disabled={props.isSubmitting}
-            onPress={props.handleSubmit}
-            title="Save"
-            loading={props.isSubmitting}
+          <TextInput
+            label="New Password"
+            type="password"
+            value={props.values?.password}
+            error={props.touched.password && props.errors.password}
+            onChangeText={(text) => props.setFieldValue('password', text)}
+          />
+          <TextInput
+            label="Confirm Password"
+            type="password"
+            value={props.values?.confirmPassword}
+            error={
+              props.touched.confirmPassword && props.errors.confirmPassword
+            }
+            onChangeText={(text) =>
+              props.setFieldValue('confirmPassword', text)
+            }
           />
         </PaddedView>
-      </Footer>
-    </FlexedKeyboardAvoidingView>
+        <Footer>
+          <PaddedView>
+            <Button
+              disabled={props.isSubmitting}
+              onPress={props.handleSubmit}
+              title="Save"
+              loading={props.isSubmitting}
+            />
+          </PaddedView>
+        </Footer>
+      </FlexedKeyboardAvoidingView>
+    </BackgroundView>
   );
 
   render() {

diff --git a/packages/apollos-ui-connected/src/UserSettingsConnected/PersonalDetails.js b/packages/apollos-ui-connected/src/UserSettingsConnected/PersonalDetails.js
@@ -6,7 +6,13 @@ import { Query, Mutation } from '@apollo/client/react/components';
 import { Formik } from 'formik';
 import * as Yup from 'yup';
 
-import { TextInput, PaddedView, Button, styled } from '@apollosproject/ui-kit';
+import {
+  BackgroundView,
+  TextInput,
+  PaddedView,
+  Button,
+  styled,
+} from '@apollosproject/ui-kit';
 
 import { GET_USER_PROFILE } from '../UserAvatarHeaderConnected';
 import UPDATE_CURRENT_USER from './updateCurrentUser';
@@ -31,41 +37,43 @@ class PersonalDetails extends PureComponent {
 
   renderForm = (props) => (
     // have to add the offset to account for @react-navigation/native header
-    <FlexedKeyboardAvoidingView behavior="padding">
-      <PaddedView>
-        <TextInput
-          label="First Name"
-          type="text"
-          value={props.values.firstName}
-          error={props.touched.firstName && props.errors.firstName}
-          onChangeText={(text) => props.setFieldValue('firstName', text)}
-        />
-        <TextInput
-          label="Last Name"
-          type="text"
-          value={props.values.lastName}
-          error={props.touched.lastName && props.errors.lastName}
-          onChangeText={(text) => props.setFieldValue('lastName', text)}
-        />
-        <TextInput
-          label="Email"
-          type="email"
-          value={props.values.email}
-          error={props.touched.email && props.errors.email}
-          onChangeText={(text) => props.setFieldValue('email', text)}
-        />
-      </PaddedView>
-      <Footer>
+    <BackgroundView avoidHeader>
+      <FlexedKeyboardAvoidingView behavior="padding">
         <PaddedView>
-          <Button
-            disabled={props.isSubmitting}
-            onPress={props.handleSubmit}
-            title="Save"
-            loading={props.isSubmitting}
+          <TextInput
+            label="First Name"
+            type="text"
+            value={props.values.firstName}
+            error={props.touched.firstName && props.errors.firstName}
+            onChangeText={(text) => props.setFieldValue('firstName', text)}
+          />
+          <TextInput
+            label="Last Name"
+            type="text"
+            value={props.values.lastName}
+            error={props.touched.lastName && props.errors.lastName}
+            onChangeText={(text) => props.setFieldValue('lastName', text)}
+          />
+          <TextInput
+            label="Email"
+            type="email"
+            value={props.values.email}
+            error={props.touched.email && props.errors.email}
+            onChangeText={(text) => props.setFieldValue('email', text)}
           />
         </PaddedView>
-      </Footer>
-    </FlexedKeyboardAvoidingView>
+        <Footer>
+          <PaddedView>
+            <Button
+              disabled={props.isSubmitting}
+              onPress={props.handleSubmit}
+              title="Save"
+              loading={props.isSubmitting}
+            />
+          </PaddedView>
+        </Footer>
+      </FlexedKeyboardAvoidingView>
+    </BackgroundView>
   );
 
   render() {

diff --git a/packages/apollos-ui-connected/src/UserSettingsConnected/UserSettings.js b/packages/apollos-ui-connected/src/UserSettingsConnected/UserSettings.js
@@ -71,7 +71,7 @@ const UserSettings = () => {
     return null;
   }
   return (
-    <BackgroundView>
+    <BackgroundView avoidHeader>
       <ScrollView>
         <Container>
           <UserAvatarUpdate />