Display recommendations if only available

src/screens/News/NewsDetailPage.js

@@ -174,7 +174,7 @@ const NewsDetailPage = props => {
     commentInput: {
       marginVertical: verticalScale(16),
       alignItems: 'flex-start',
-      justifyContent:'space-between',
+      justifyContent: 'space-between',
       flexDirection: 'row',
       maxWidth: '100%',
     },
@@ -217,7 +217,7 @@ const NewsDetailPage = props => {
   return (
     <BottomSheetModalProvider>
       <ScrollView ref={mainPageRef} contentContainerStyle={styles.container}>
-        <NewscoutTitleHeader headerStyle={{elevation: 0}}
+        <NewscoutTitleHeader headerStyle={{ elevation: 0 }}
           backButtonShown
           onBackClick={() => navigation.goBack()}>
           <TouchableWithoutFeedback onPress={() => navigation.toggleDrawer()}>
@@ -324,22 +324,22 @@ const NewsDetailPage = props => {
                           }}>
                           {comments.results.length}
                         </Text>
-                        </BottomSheetView>
-                        <ButtonWrapper onPress={handleCloseModalPress}>
-                          <IonIcon
-                            name="close-sharp"
-                            size={moderateScale(20)}
-                            color={colors().recessive}
-                          />
-                        </ButtonWrapper>
-                      
+                      </BottomSheetView>
+                      <ButtonWrapper onPress={handleCloseModalPress}>
+                        <IonIcon
+                          name="close-sharp"
+                          size={moderateScale(20)}
+                          color={colors().recessive}
+                        />
+                      </ButtonWrapper>
+
                     </BottomSheetView>
                     <View style={styles.commentInput}>
                       <Image
                         source={images.imageCard}
                         style={[styles.profileImage]}
                       />
-                      
+
                       <TextInput
                         multiline
                         mode="outlined"
@@ -389,21 +389,21 @@ const NewsDetailPage = props => {
             </>
           </View>
         )}
-        <SectionHeader label={'Recommendations'} isButtonShown={false}/>
-        <ScrollView
-          horizontal
-          contentContainerStyle={styles.recommendationContainer}
-          style={{ flexDirection: 'row' }}
-          showsHorizontalScrollIndicator={false}>
-          { recommendations.length > 0 ? recommendations.map(item => (
-            <VerticalNewsCard
-              image={{ uri: item.cover_image }}
-              headline={item.title}
-              timestamp={item.published_on}
-              onPress={() => navigateToArticle(navigation, item.id, item.slug)}
-            />
-          )) : <LoadingScreen containerHeight={verticalScale(240)} containerWidth={screenWidth}/>}
-        </ScrollView>
+        {recommendations.length > 0 ? <><SectionHeader label={'Recommendations'} isButtonShown={false} />
+          <ScrollView
+            horizontal
+            contentContainerStyle={styles.recommendationContainer}
+            style={{ flexDirection: 'row' }}
+            showsHorizontalScrollIndicator={false}>
+            {recommendations.map(item => (
+              <VerticalNewsCard
+                image={{ uri: item.cover_image }}
+                headline={item.title}
+                timestamp={item.published_on}
+                onPress={() => navigateToArticle(navigation, item.id, item.slug)}
+              />
+            ))}
+          </ScrollView></> : <></>}
       </ScrollView>
     </BottomSheetModalProvider>
   );