mirror of
https://github.com/ecency/ecency-mobile.git
synced 2024-12-20 11:51:52 +03:00
improved empty list view
1. added nothing here animation 2. removed extra spinner appearing on refresh
This commit is contained in:
parent
149c4252a9
commit
828bd98f67
@ -1,18 +1,24 @@
|
|||||||
import React from 'react';
|
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 LottieView from 'lottie-react-native';
|
||||||
import { useIntl } from 'react-intl';
|
import { useIntl } from 'react-intl';
|
||||||
|
|
||||||
import styles from './emptyScreenStyles';
|
import styles from './emptyScreenStyles';
|
||||||
import globalStyles from '../../../../globalStyles';
|
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();
|
const intl = useIntl();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
|
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', ...style }}>
|
||||||
<LottieView
|
<LottieView
|
||||||
style={[{ width: 150, height: 150, marginBottom: 12 }, style]}
|
style={{ width: 150, height: 150, marginBottom: 12}}
|
||||||
source={require('../../../../assets/animations/empty_screen.json')}
|
source={require('../../../../assets/animations/empty_screen.json')}
|
||||||
autoPlay
|
autoPlay
|
||||||
loop={true}
|
loop={true}
|
@ -82,7 +82,7 @@ const postsListContainer = ({
|
|||||||
|
|
||||||
|
|
||||||
const _renderFooter = () => {
|
const _renderFooter = () => {
|
||||||
if (isLoading) {
|
if (isLoading && !isRefreshing) {
|
||||||
return (
|
return (
|
||||||
<View style={styles.flatlistFooter}>
|
<View style={styles.flatlistFooter}>
|
||||||
<ActivityIndicator animating size="large" color={'#2e3d51'} />
|
<ActivityIndicator animating size="large" color={'#2e3d51'} />
|
||||||
|
@ -4,7 +4,7 @@ import { get } from 'lodash';
|
|||||||
import { Text, View, FlatList } from 'react-native';
|
import { Text, View, FlatList } from 'react-native';
|
||||||
import { NoPost, PostCardPlaceHolder, UserListItem } from '../..';
|
import { NoPost, PostCardPlaceHolder, UserListItem } from '../..';
|
||||||
import globalStyles from '../../../globalStyles';
|
import globalStyles from '../../../globalStyles';
|
||||||
import { CommunityListItem } from '../../basicUIElements';
|
import { CommunityListItem, EmptyScreen } from '../../basicUIElements';
|
||||||
import styles from './tabbedPostsStyles';
|
import styles from './tabbedPostsStyles';
|
||||||
import { default as ROUTES } from '../../../constants/routeNames';
|
import { default as ROUTES } from '../../../constants/routeNames';
|
||||||
import { withNavigation } from 'react-navigation';
|
import { withNavigation } from 'react-navigation';
|
||||||
@ -22,7 +22,7 @@ interface TabEmptyViewProps {
|
|||||||
const TabEmptyView = ({
|
const TabEmptyView = ({
|
||||||
filterKey,
|
filterKey,
|
||||||
isNoPost,
|
isNoPost,
|
||||||
navigation
|
navigation,
|
||||||
}: TabEmptyViewProps) => {
|
}: TabEmptyViewProps) => {
|
||||||
|
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
@ -326,7 +326,9 @@ const TabEmptyView = ({
|
|||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
return <Text style={[globalStyles.subTitle, styles.noPostTitle]}>{intl.formatMessage({ id: 'profile.havent_posted' })}</Text>;
|
return (
|
||||||
|
<EmptyScreen style={styles.emptyAnimationContainer} />
|
||||||
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -78,4 +78,7 @@ export default EStyleSheet.create({
|
|||||||
marginLeft: -8,
|
marginLeft: -8,
|
||||||
borderColor: '$primaryBlue',
|
borderColor: '$primaryBlue',
|
||||||
},
|
},
|
||||||
|
emptyAnimationContainer:{
|
||||||
|
marginTop:56
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user