Merge pull request #1954 from ecency/nt/tabbed-posts-improvments

improved empty list view

src/components/basicUIElements/view/emptyScreen/emptyScreenView.tsx

@@ -1,18 +1,24 @@
 import React from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, TextStyle, ViewStyle } from 'react-native';
 import LottieView from 'lottie-react-native';
 import { useIntl } from 'react-intl';
 
 import styles from './emptyScreenStyles';
 import globalStyles from '../../../../globalStyles';
 
-const EmptyScreenView = ({ style, textStyle, text }) => {
+interface Props {
+  style?:ViewStyle; 
+  textStyle?:TextStyle;
+  text?:string;
+}
+
+const EmptyScreenView = ({ style, textStyle, text } : Props) => {
   const intl = useIntl();
 
   return (
-    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', ...style }}>
       <LottieView
-        style={[{ width: 150, height: 150, marginBottom: 12 }, style]}
+        style={{ width: 150, height: 150, marginBottom: 12}}
         source={require('../../../../assets/animations/empty_screen.json')}
         autoPlay
         loop={true}

src/components/postsList/container/postsListContainer.tsx

@@ -82,7 +82,7 @@ const postsListContainer = ({
 
 
   const _renderFooter = () => {
-    if (isLoading) {
+    if (isLoading && !isRefreshing) {
       return (
         <View style={styles.flatlistFooter}>
           <ActivityIndicator animating size="large" color={'#2e3d51'} />

src/components/tabbedPosts/view/listEmptyView.tsx

@@ -4,7 +4,7 @@ import { get } from 'lodash';
 import { Text, View, FlatList } from 'react-native';
 import { NoPost, PostCardPlaceHolder, UserListItem } from '../..';
 import globalStyles from '../../../globalStyles';
-import { CommunityListItem } from '../../basicUIElements';
+import { CommunityListItem, EmptyScreen } from '../../basicUIElements';
 import styles from './tabbedPostsStyles';
 import { default as ROUTES } from '../../../constants/routeNames';
 import { withNavigation } from 'react-navigation';
@@ -22,7 +22,7 @@ interface TabEmptyViewProps {
 const TabEmptyView = ({
   filterKey,
   isNoPost,
-  navigation
+  navigation,
 }: TabEmptyViewProps) => {
 
   const intl = useIntl();
@@ -326,7 +326,9 @@ const TabEmptyView = ({
           </>
         );
     } else {
-      return <Text style={[globalStyles.subTitle, styles.noPostTitle]}>{intl.formatMessage({ id: 'profile.havent_posted' })}</Text>;
+      return (
+        <EmptyScreen style={styles.emptyAnimationContainer} />
+      )
     }
   }
 

src/components/tabbedPosts/view/tabbedPostsStyles.tsx

@@ -78,4 +78,7 @@ export default EStyleSheet.create({
     marginLeft: -8,
     borderColor: '$primaryBlue',
   },
+  emptyAnimationContainer:{
+    marginTop:56
+  }
 });