ecency/ecency-mobile
1
1
Fork 0
mirror of https://github.com/ecency/ecency-mobile.git synced 2024-12-19 11:21:41 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

applied post detail animation and using color filters

Browse Source
This commit is contained in:
Nouman Tahir 2021-03-05 16:55:40 +05:00
parent ed056b0afc
commit 6b259da067
3 changed files with 58 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/basicUIElements/view/placeHolder/postCardPlaceHolderView.js
View File

@ -1,19 +1,42 @@
import React from 'react';
import { View } from 'react-native';
import { View, Dimensions } from 'react-native';
import Placeholder from 'rn-placeholder';
import { ThemeContainer } from '../../../../containers';
import LottieView from 'lottie-react-native';
import styles from './postCardPlaceHolderStyles';
// TODO: make container for place holder wrapper after alpha
const PostCardPlaceHolder = () => {
const animationStyle = {
width:Dimensions.get('screen').width - 32
}
return (
<ThemeContainer>
{({ isDarkTheme }) => {
const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
return (
<View style={styles.container}>
<View style={styles.textWrapper}>
<LottieView
style={animationStyle}
source={require('../../../../assets/animations/postList.json')}
autoPlay
loop={true}
autoSize={true}
resizeMode='cover'
colorFilters={[
{
keypath:'postList',
color:color
}
]
}
/>
{/* <View style={styles.textWrapper}>
<Placeholder.Media size={35} hasRadius animate="fade" color={color} />
<Placeholder.Line width="30%" lastLineWidth="30%" animate="fade" color={color} />
</View>
@ -29,11 +52,11 @@ const PostCardPlaceHolder = () => {
firstLineWidth="50%"
animate="fade"
/>
</View>
</View> */}
</View>
);
}}
</ThemeContainer>
);
};
export default PostCardPlaceHolder;
export default PostCardPlaceHolder;

25
src/components/basicUIElements/view/placeHolder/postPlaceHolderView.js
View File

@ -1,8 +1,9 @@
import React from 'react';
import { View } from 'react-native';
import { View, Dimensions } from 'react-native';
import Placeholder from 'rn-placeholder';
import { ThemeContainer } from '../../../../containers';
import LottieView from 'lottie-react-native';
import styles from './postCardPlaceHolderStyles';
@ -14,7 +15,25 @@ const PostPlaceHolder = () => {
return (
<View>
<View style={styles.paragraphWrapper}>
<LottieView
style={{width:Dimensions.get('screen').width - 24}}
source={require('../../../../assets/animations/postBody.json')}
autoPlay
loop={true}
autoSize={true}
resizeMode='cover'
colorFilters={[
{
keypath:'layer1',
color:color
}
]
}
/>
{/* <View style={styles.paragraphWrapper}>
<Placeholder.Paragraph
color={color}
lineNumber={2}
@ -39,7 +58,7 @@ const PostPlaceHolder = () => {
firstLineWidth="50%"
animate="fade"
/>
</View>
</View> */}
</View>
);
}}

19
src/components/posts/view/postsView.js
View File

@ -15,7 +15,7 @@ import {
CommunityListItem,
} from '../../basicUIElements';
import { ThemeContainer } from '../../../containers';
import LottieView from 'lottie-react-native';
// Styles
import styles from './postsStyles';
@ -23,7 +23,6 @@ import { default as ROUTES } from '../../../constants/routeNames';
import globalStyles from '../../../globalStyles';
import PostsList from '../../postsList';
import { isDarkTheme } from '../../../redux/actions/applicationActions';
import { Dimensions } from 'react-native';
let _onEndReachedCalledDuringMomentum = true;
@ -229,14 +228,14 @@ const PostsView = ({
return (
<View style={styles.placeholderWrapper}>
<LottieView
style={{width:Dimensions.get('screen').width}}
source={require('../../../assets/animations/postList.json')}
autoPlay
loop={true}
autoSize={true}
resizeMode='cover'
/>
{/* TOOD: improve empty list holder*/}
<PostCardPlaceHolder />
{/* <PostCardPlaceHolder /> */}
{/* <PostCardPlaceHolder /> */}
{/* <PostCardPlaceHolder /> */}
{/* <PostCardPlaceHolder /> */}
</View>
);
};