Merge branch 'nt/posts_experimental' of https://github.com/ecency/ecency-mobile into nt/posts_experimental

This commit is contained in:
feruz 2021-03-05 13:59:44 +02:00
commit 285c13ddaf
3 changed files with 51 additions and 14 deletions

View File

@ -1,19 +1,42 @@
import React from 'react'; import React from 'react';
import { View } from 'react-native'; import { View, Dimensions } from 'react-native';
import Placeholder from 'rn-placeholder'; import Placeholder from 'rn-placeholder';
import { ThemeContainer } from '../../../../containers'; import { ThemeContainer } from '../../../../containers';
import LottieView from 'lottie-react-native';
import styles from './postCardPlaceHolderStyles'; import styles from './postCardPlaceHolderStyles';
// TODO: make container for place holder wrapper after alpha // TODO: make container for place holder wrapper after alpha
const PostCardPlaceHolder = () => { const PostCardPlaceHolder = () => {
const animationStyle = {
width:Dimensions.get('screen').width - 32
}
return ( return (
<ThemeContainer> <ThemeContainer>
{({ isDarkTheme }) => { {({ isDarkTheme }) => {
const color = isDarkTheme ? '#2e3d51' : '#f5f5f5'; const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
return ( return (
<View style={styles.container}> <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.Media size={35} hasRadius animate="fade" color={color} />
<Placeholder.Line width="30%" lastLineWidth="30%" animate="fade" color={color} /> <Placeholder.Line width="30%" lastLineWidth="30%" animate="fade" color={color} />
</View> </View>
@ -29,11 +52,11 @@ const PostCardPlaceHolder = () => {
firstLineWidth="50%" firstLineWidth="50%"
animate="fade" animate="fade"
/> />
</View> </View> */}
</View> </View>
); );
}} }}
</ThemeContainer> </ThemeContainer>
); );
}; };
export default PostCardPlaceHolder; export default PostCardPlaceHolder;

View File

@ -1,8 +1,9 @@
import React from 'react'; import React from 'react';
import { View } from 'react-native'; import { View, Dimensions } from 'react-native';
import Placeholder from 'rn-placeholder'; import Placeholder from 'rn-placeholder';
import { ThemeContainer } from '../../../../containers'; import { ThemeContainer } from '../../../../containers';
import LottieView from 'lottie-react-native';
import styles from './postCardPlaceHolderStyles'; import styles from './postCardPlaceHolderStyles';
@ -14,7 +15,25 @@ const PostPlaceHolder = () => {
return ( return (
<View> <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 <Placeholder.Paragraph
color={color} color={color}
lineNumber={2} lineNumber={2}
@ -39,7 +58,7 @@ const PostPlaceHolder = () => {
firstLineWidth="50%" firstLineWidth="50%"
animate="fade" animate="fade"
/> />
</View> </View> */}
</View> </View>
); );
}} }}

View File

@ -15,7 +15,7 @@ import {
CommunityListItem, CommunityListItem,
} from '../../basicUIElements'; } from '../../basicUIElements';
import { ThemeContainer } from '../../../containers'; import { ThemeContainer } from '../../../containers';
// import LottieView from 'lottie-react-native';
// Styles // Styles
import styles from './postsStyles'; import styles from './postsStyles';
@ -235,12 +235,7 @@ const PostsView = ({
{/* <PostCardPlaceHolder /> */} {/* <PostCardPlaceHolder /> */}
{/* <PostCardPlaceHolder /> */} {/* <PostCardPlaceHolder /> */}
{/* <PostCardPlaceHolder /> */} {/* <PostCardPlaceHolder /> */}
{/* <LottieView
style={{ width: 150, height: 150 }}
source={require('./animation.json')}
autoPlay
loop={false}
/> */}
</View> </View>
); );
}; };