mirror of
https://github.com/streetwriters/notesnook.git
synced 2025-12-23 23:19:40 +01:00
unify all placeholders in one component
This commit is contained in:
ammarahm-ed
@@ -1,961 +1,39 @@
|
||||
import React from 'react';
|
||||
import {Platform, Text, View} from 'react-native';
|
||||
import * as Animatable from 'react-native-animatable';
|
||||
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
|
||||
import {normalize, SIZE, WEIGHT} from '../../common/common';
|
||||
import {deleteItems, opacity, rotate} from '../../utils/animations';
|
||||
import {getElevation, hexToRGBA, w} from '../../utils/utils';
|
||||
|
||||
export const NotebookPlaceHolder = ({colors, animation}) => {
|
||||
const slideRight = {
|
||||
0: {
|
||||
transform: [
|
||||
{translateX: -2},
|
||||
{
|
||||
translateY: -2,
|
||||
},
|
||||
],
|
||||
},
|
||||
0.5: {
|
||||
transform: [
|
||||
{translateX: 0},
|
||||
{
|
||||
translateY: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
1: {
|
||||
transform: [
|
||||
{translateX: 2},
|
||||
{
|
||||
translateY: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
const slideLeft = {
|
||||
0: {
|
||||
transform: [
|
||||
{translateX: 2},
|
||||
{
|
||||
translateY: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
0.5: {
|
||||
transform: [
|
||||
{translateX: 0},
|
||||
{
|
||||
translateY: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
1: {
|
||||
transform: [
|
||||
{translateX: -2},
|
||||
{
|
||||
translateY: -2,
|
||||
},
|
||||
],
|
||||
},
|
||||
import {View} from 'react-native';
|
||||
import {SvgXml} from 'react-native-svg';
|
||||
import {
|
||||
NOTE_SVG,
|
||||
NOTEBOOK_SVG,
|
||||
TAG_SVG,
|
||||
FAV_SVG,
|
||||
TRASH_SVG,
|
||||
} from '../../assets/images/assets';
|
||||
import { useTracked } from '../../provider';
|
||||
export const Placeholder = ({type}) => {
|
||||
const [state, dispatch] = useTracked();
|
||||
const {colors} = state;
|
||||
const getSVG = () => {
|
||||
switch (type) {
|
||||
case 'notes':
|
||||
return NOTE_SVG(colors.accent);
|
||||
case 'notebooks':
|
||||
return NOTEBOOK_SVG(colors.accent);
|
||||
case 'tags':
|
||||
return TAG_SVG(colors.accent);
|
||||
case 'favorites':
|
||||
return FAV_SVG(colors.accent);
|
||||
case 'trash':
|
||||
return TRASH_SVG(colors.accent);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
height: 200,
|
||||
height: 250,
|
||||
width: 250,
|
||||
}}>
|
||||
<Animatable.View
|
||||
animation={slideLeft}
|
||||
iterationCount="infinite"
|
||||
duration={3000}
|
||||
iterationDelay={0}
|
||||
direction="alternate"
|
||||
easing="ease-in"
|
||||
useNativeDriver={true}
|
||||
style={{
|
||||
...getElevation(5),
|
||||
backgroundColor: '#a9a9a9',
|
||||
width: 130,
|
||||
borderRadius: 5,
|
||||
height: 150,
|
||||
zIndex: 10,
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
...getElevation(3),
|
||||
backgroundColor: colors.accent,
|
||||
width: 120,
|
||||
borderRadius: 5,
|
||||
height: 150,
|
||||
alignSelf: 'flex-start',
|
||||
justifyContent: 'center',
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
width: '100%',
|
||||
height: 8,
|
||||
backgroundColor: 'white',
|
||||
marginBottom: 15,
|
||||
}}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: WEIGHT.bold,
|
||||
fontSize: SIZE.xs,
|
||||
color: 'white',
|
||||
textAlign: 'center',
|
||||
}}>
|
||||
My Notebook
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: WEIGHT.regular,
|
||||
fontSize: SIZE.xxs,
|
||||
color: 'white',
|
||||
textAlign: 'center',
|
||||
}}>
|
||||
Keep it orgainzed
|
||||
</Text>
|
||||
</View>
|
||||
</Animatable.View>
|
||||
<Animatable.View
|
||||
animation={slideRight}
|
||||
iterationCount="infinite"
|
||||
duration={3000}
|
||||
iterationDelay={0}
|
||||
direction="alternate"
|
||||
easing="ease-in"
|
||||
useNativeDriver={true}
|
||||
style={{
|
||||
...getElevation(5),
|
||||
backgroundColor: '#a9a9a9',
|
||||
width: 130,
|
||||
borderRadius: 5,
|
||||
height: 150,
|
||||
position: 'absolute',
|
||||
left: 35,
|
||||
top: 60,
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
...getElevation(3),
|
||||
backgroundColor: colors.accent,
|
||||
width: 120,
|
||||
borderRadius: 5,
|
||||
height: 150,
|
||||
alignSelf: 'flex-start',
|
||||
justifyContent: 'center',
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
width: '100%',
|
||||
height: 8,
|
||||
backgroundColor: 'white',
|
||||
marginBottom: 15,
|
||||
}}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: WEIGHT.bold,
|
||||
fontSize: SIZE.xs,
|
||||
color: 'white',
|
||||
textAlign: 'center',
|
||||
}}>
|
||||
My Notebook
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: WEIGHT.regular,
|
||||
fontSize: SIZE.xxs,
|
||||
color: 'white',
|
||||
textAlign: 'center',
|
||||
}}>
|
||||
Keep it orgainzed
|
||||
</Text>
|
||||
</View>
|
||||
</Animatable.View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export const NotesPlaceHolder = ({colors, animation, right, top}) => {
|
||||
const slideRight = {
|
||||
0: {
|
||||
transform: [
|
||||
{translateX: -2},
|
||||
{
|
||||
translateY: -2,
|
||||
},
|
||||
],
|
||||
},
|
||||
0.5: {
|
||||
transform: [
|
||||
{translateX: 0},
|
||||
{
|
||||
translateY: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
1: {
|
||||
transform: [
|
||||
{translateX: 2},
|
||||
{
|
||||
translateY: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
const slideLeft = {
|
||||
0: {
|
||||
transform: [
|
||||
{translateX: 2},
|
||||
{
|
||||
translateY: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
0.5: {
|
||||
transform: [
|
||||
{translateX: 0},
|
||||
{
|
||||
translateY: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
1: {
|
||||
transform: [
|
||||
{translateX: -2},
|
||||
{
|
||||
translateY: -2,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
width: '50%',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}>
|
||||
<Animatable.View
|
||||
animation={slideLeft}
|
||||
iterationCount="infinite"
|
||||
duration={3000}
|
||||
iterationDelay={0}
|
||||
direction="alternate"
|
||||
easing="ease-in"
|
||||
useNativeDriver={true}
|
||||
style={{
|
||||
backgroundColor: colors.bg,
|
||||
width: '100%',
|
||||
borderRadius: 5,
|
||||
opacity: 0.5,
|
||||
elevation: 5,
|
||||
position: 'absolute',
|
||||
left: -normalize(50),
|
||||
top: -normalize(50),
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
width: normalize(10),
|
||||
height: '100%',
|
||||
opacity: 1,
|
||||
elevation: 1,
|
||||
borderRadius: 5,
|
||||
backgroundColor: colors.accent,
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
}}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: colors.nav,
|
||||
borderRadius: 5,
|
||||
padding: normalize(5),
|
||||
paddingBottom: normalize(10),
|
||||
paddingLeft: normalize(15),
|
||||
}}>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.accent,
|
||||
fontFamily: WEIGHT.bold,
|
||||
fontSize: SIZE.md,
|
||||
}}>
|
||||
Title
|
||||
</Text>
|
||||
|
||||
<View
|
||||
style={{
|
||||
width: '100%',
|
||||
height: normalize(8),
|
||||
opacity: 0.5,
|
||||
borderRadius: 5,
|
||||
backgroundColor: colors.accent,
|
||||
marginBottom: normalize(8),
|
||||
}}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
width: '100%',
|
||||
height: normalize(8),
|
||||
opacity: 0.5,
|
||||
borderRadius: 5,
|
||||
backgroundColor: colors.accent,
|
||||
marginBottom: normalize(8),
|
||||
}}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
width: '100%',
|
||||
height: normalize(8),
|
||||
opacity: 0.5,
|
||||
borderRadius: 5,
|
||||
backgroundColor: colors.accent,
|
||||
marginBottom: normalize(8),
|
||||
}}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
width: '100%',
|
||||
height: normalize(8),
|
||||
opacity: 0.5,
|
||||
borderRadius: 5,
|
||||
backgroundColor: colors.accent,
|
||||
marginBottom: normalize(8),
|
||||
}}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
width: '100%',
|
||||
height: normalize(8),
|
||||
opacity: 0.5,
|
||||
borderRadius: 5,
|
||||
backgroundColor: colors.accent,
|
||||
marginBottom: normalize(8),
|
||||
}}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
width: '15%',
|
||||
height: normalize(8),
|
||||
borderRadius: 5,
|
||||
backgroundColor: colors.icon,
|
||||
marginRight: '5%',
|
||||
}}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
width: '15%',
|
||||
height: normalize(8),
|
||||
borderRadius: 5,
|
||||
backgroundColor: colors.icon,
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</Animatable.View>
|
||||
|
||||
<Animatable.View
|
||||
animation={slideRight}
|
||||
iterationCount="infinite"
|
||||
duration={3000}
|
||||
iterationDelay={0}
|
||||
direction="alternate"
|
||||
easing="ease-in"
|
||||
useNativeDriver={true}
|
||||
style={{
|
||||
backgroundColor: colors.bg,
|
||||
width: '100%',
|
||||
borderRadius: 5,
|
||||
elevation: 10,
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
width: normalize(10),
|
||||
height: '100%',
|
||||
opacity: 1,
|
||||
elevation: 1,
|
||||
borderRadius: 5,
|
||||
backgroundColor: colors.accent,
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
}}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: colors.nav,
|
||||
borderRadius: 5,
|
||||
padding: normalize(5),
|
||||
paddingBottom: normalize(10),
|
||||
paddingLeft: normalize(15),
|
||||
}}>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.accent,
|
||||
fontFamily: WEIGHT.bold,
|
||||
fontSize: SIZE.md,
|
||||
}}>
|
||||
Title
|
||||
</Text>
|
||||
|
||||
<View
|
||||
style={{
|
||||
width: '100%',
|
||||
height: normalize(8),
|
||||
opacity: 0.5,
|
||||
borderRadius: 5,
|
||||
backgroundColor: colors.accent,
|
||||
marginBottom: normalize(8),
|
||||
}}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
width: '100%',
|
||||
height: normalize(8),
|
||||
opacity: 0.5,
|
||||
borderRadius: 5,
|
||||
backgroundColor: colors.accent,
|
||||
marginBottom: normalize(8),
|
||||
}}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
width: '100%',
|
||||
height: normalize(8),
|
||||
opacity: 0.5,
|
||||
borderRadius: 5,
|
||||
backgroundColor: colors.accent,
|
||||
marginBottom: normalize(8),
|
||||
}}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
width: '100%',
|
||||
height: normalize(8),
|
||||
opacity: 0.5,
|
||||
borderRadius: 5,
|
||||
backgroundColor: colors.accent,
|
||||
marginBottom: normalize(8),
|
||||
}}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
width: '100%',
|
||||
height: normalize(8),
|
||||
opacity: 0.5,
|
||||
borderRadius: 5,
|
||||
backgroundColor: colors.accent,
|
||||
marginBottom: normalize(8),
|
||||
}}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
width: '15%',
|
||||
height: normalize(8),
|
||||
borderRadius: 5,
|
||||
backgroundColor: colors.icon,
|
||||
marginRight: '5%',
|
||||
}}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
width: '15%',
|
||||
height: normalize(8),
|
||||
borderRadius: 5,
|
||||
backgroundColor: colors.icon,
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</Animatable.View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export const TrashPlaceHolder = ({colors, animation}) => {
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
width: 100,
|
||||
height: 15,
|
||||
backgroundColor: colors.accent,
|
||||
borderRadius: 100,
|
||||
marginBottom: 2,
|
||||
alignItems: 'center',
|
||||
zIndex: 10,
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
width: 25,
|
||||
height: 10,
|
||||
backgroundColor: colors.accent,
|
||||
borderTopRightRadius: 5,
|
||||
borderTopLeftRadius: 5,
|
||||
marginBottom: 2,
|
||||
marginTop: -9,
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: 'white',
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
width: 80,
|
||||
height: 100,
|
||||
backgroundColor: Platform.ios
|
||||
? hexToRGBA(colors.accent + '19')
|
||||
: hexToRGBA(colors.shade),
|
||||
borderRadius: 5,
|
||||
zIndex: 10,
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
width: '90%',
|
||||
alignSelf: 'center',
|
||||
justifyContent: 'space-around',
|
||||
alignItems: 'center',
|
||||
height: '100%',
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
width: 12,
|
||||
height: 80,
|
||||
backgroundColor: colors.accent,
|
||||
borderRadius: 5,
|
||||
zIndex: 10,
|
||||
}}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
width: 12,
|
||||
height: 80,
|
||||
backgroundColor: colors.accent,
|
||||
borderRadius: 5,
|
||||
zIndex: 10,
|
||||
}}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
width: 12,
|
||||
height: 80,
|
||||
backgroundColor: colors.accent,
|
||||
borderRadius: 5,
|
||||
zIndex: 10,
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export const FavoritesPlaceHolder = ({colors, animation}) => {
|
||||
const slideRight = {
|
||||
0: {
|
||||
transform: [
|
||||
{scaleX: 0.5},
|
||||
{
|
||||
scaleY: 0.5,
|
||||
},
|
||||
{
|
||||
translateX: 2,
|
||||
},
|
||||
{
|
||||
translateY: 2,
|
||||
},
|
||||
],
|
||||
opacity: 0,
|
||||
},
|
||||
0.6: {
|
||||
transform: [
|
||||
{scaleX: 0.7},
|
||||
{
|
||||
scaleY: 0.7,
|
||||
},
|
||||
{
|
||||
translateX: 0,
|
||||
},
|
||||
{
|
||||
translateY: 0,
|
||||
},
|
||||
],
|
||||
|
||||
opacity: 1,
|
||||
},
|
||||
1: {
|
||||
transform: [
|
||||
{scaleX: 1},
|
||||
{
|
||||
scaleY: 1,
|
||||
},
|
||||
{
|
||||
translateX: -2,
|
||||
},
|
||||
{
|
||||
translateY: -2,
|
||||
},
|
||||
],
|
||||
opacity: 0,
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignSelf: 'center',
|
||||
justifyContent: 'space-around',
|
||||
}}>
|
||||
<Animatable.View
|
||||
animation={slideRight}
|
||||
iterationCount="infinite"
|
||||
duration={5000}
|
||||
delay={3000}
|
||||
iterationDelay={1000}
|
||||
direction="normal"
|
||||
easing="ease-in"
|
||||
useNativeDriver={true}
|
||||
style={{
|
||||
padding: 5,
|
||||
borderRadius: 5,
|
||||
marginBottom: 10,
|
||||
marginTop: -30,
|
||||
}}>
|
||||
<Icon name="star" size={SIZE.xl} color="orange" />
|
||||
</Animatable.View>
|
||||
|
||||
<Animatable.View
|
||||
animation={slideRight}
|
||||
iterationCount="infinite"
|
||||
duration={6000}
|
||||
iterationDelay={0}
|
||||
direction="normal"
|
||||
easing="ease-in"
|
||||
useNativeDriver={true}
|
||||
style={{
|
||||
padding: 5,
|
||||
borderRadius: 5,
|
||||
marginBottom: 10,
|
||||
}}>
|
||||
<Icon name="star" size={SIZE.xl} color="orange" />
|
||||
</Animatable.View>
|
||||
|
||||
<Animatable.View
|
||||
animation={slideRight}
|
||||
iterationCount="infinite"
|
||||
duration={7000}
|
||||
delay={1500}
|
||||
iterationDelay={500}
|
||||
direction="normal"
|
||||
easing="ease-in"
|
||||
useNativeDriver={true}
|
||||
style={{
|
||||
padding: 5,
|
||||
borderRadius: 5,
|
||||
marginBottom: 10,
|
||||
marginTop: -30,
|
||||
}}>
|
||||
<Icon name="star" size={SIZE.xxl} color="orange" />
|
||||
</Animatable.View>
|
||||
|
||||
<Animatable.View
|
||||
animation={slideRight}
|
||||
iterationCount="infinite"
|
||||
duration={5000}
|
||||
delay={3000}
|
||||
iterationDelay={1000}
|
||||
direction="normal"
|
||||
easing="ease-in"
|
||||
useNativeDriver={true}
|
||||
style={{
|
||||
padding: 5,
|
||||
borderRadius: 5,
|
||||
marginBottom: 10,
|
||||
}}>
|
||||
<Icon name="star" size={SIZE.xl} color="orange" />
|
||||
</Animatable.View>
|
||||
|
||||
<Animatable.View
|
||||
animation={slideRight}
|
||||
iterationCount="infinite"
|
||||
duration={5000}
|
||||
delay={3000}
|
||||
iterationDelay={1000}
|
||||
direction="normal"
|
||||
easing="ease-in"
|
||||
useNativeDriver={true}
|
||||
style={{
|
||||
padding: 5,
|
||||
borderRadius: 5,
|
||||
marginBottom: 10,
|
||||
marginTop: -30,
|
||||
}}>
|
||||
<Icon name="star" size={SIZE.xl} color="orange" />
|
||||
</Animatable.View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export const TagsPlaceHolder = ({colors, animation}) => {
|
||||
const slideRight = {
|
||||
0: {
|
||||
transform: [
|
||||
{scaleX: 0.8},
|
||||
{
|
||||
scaleY: 0.8,
|
||||
},
|
||||
{
|
||||
translateX: 2,
|
||||
},
|
||||
{
|
||||
translateY: 2,
|
||||
},
|
||||
],
|
||||
opacity: 0,
|
||||
},
|
||||
0.6: {
|
||||
transform: [
|
||||
{scaleX: 0.9},
|
||||
{
|
||||
scaleY: 0.9,
|
||||
},
|
||||
{
|
||||
translateX: 0,
|
||||
},
|
||||
{
|
||||
translateY: 0,
|
||||
},
|
||||
],
|
||||
|
||||
opacity: 1,
|
||||
},
|
||||
1: {
|
||||
transform: [
|
||||
{scaleX: 1},
|
||||
{
|
||||
scaleY: 1,
|
||||
},
|
||||
{
|
||||
translateX: -2,
|
||||
},
|
||||
{
|
||||
translateY: -2,
|
||||
},
|
||||
],
|
||||
opacity: 0,
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
width: w * 0.6,
|
||||
height: 200,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
<Animatable.View
|
||||
animation={slideRight}
|
||||
iterationCount="infinite"
|
||||
duration={11000}
|
||||
iterationDelay={500}
|
||||
easing="ease-in"
|
||||
useNativeDriver={true}
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
position: 'absolute',
|
||||
left: 10,
|
||||
top: 60,
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
borderRadius: 5,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
padding: 4,
|
||||
}}>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.accent,
|
||||
fontSize: SIZE.sm,
|
||||
}}>
|
||||
#presentations
|
||||
</Text>
|
||||
</View>
|
||||
</Animatable.View>
|
||||
<Animatable.View
|
||||
animation={slideRight}
|
||||
iterationCount="infinite"
|
||||
duration={10000}
|
||||
iterationDelay={1000}
|
||||
easing="ease-in"
|
||||
useNativeDriver={true}
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
top: 100,
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
borderRadius: 5,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
padding: 4,
|
||||
}}>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.accent,
|
||||
fontSize: SIZE.sm,
|
||||
}}>
|
||||
#morningcoffee
|
||||
</Text>
|
||||
</View>
|
||||
</Animatable.View>
|
||||
<Animatable.View
|
||||
animation={slideRight}
|
||||
iterationCount="infinite"
|
||||
duration={15000}
|
||||
iterationDelay={1500}
|
||||
easing="ease-in"
|
||||
useNativeDriver={true}
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
position: 'absolute',
|
||||
left: 120,
|
||||
top: 60,
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
borderRadius: 5,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
padding: 4,
|
||||
}}>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.accent,
|
||||
fontSize: SIZE.sm,
|
||||
}}>
|
||||
#quotesonlife
|
||||
</Text>
|
||||
</View>
|
||||
</Animatable.View>
|
||||
<Animatable.View
|
||||
animation={slideRight}
|
||||
iterationCount="infinite"
|
||||
duration={8000}
|
||||
iterationDelay={1500}
|
||||
easing="ease-in"
|
||||
useNativeDriver={true}
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
position: 'absolute',
|
||||
left: 140,
|
||||
top: 100,
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
borderRadius: 5,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
padding: 4,
|
||||
}}>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.accent,
|
||||
fontSize: SIZE.sm,
|
||||
}}>
|
||||
#workinprogress
|
||||
</Text>
|
||||
</View>
|
||||
</Animatable.View>
|
||||
<Animatable.View
|
||||
animation={slideRight}
|
||||
iterationCount="infinite"
|
||||
duration={12000}
|
||||
iterationDelay={2000}
|
||||
easing="ease-in"
|
||||
useNativeDriver={true}
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
position: 'absolute',
|
||||
left: 20,
|
||||
top: 140,
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
borderRadius: 5,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
padding: 4,
|
||||
}}>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.accent,
|
||||
fontSize: SIZE.sm,
|
||||
}}>
|
||||
#todolists
|
||||
</Text>
|
||||
</View>
|
||||
</Animatable.View>
|
||||
<Animatable.View
|
||||
animation={slideRight}
|
||||
iterationCount="infinite"
|
||||
duration={10000}
|
||||
iterationDelay={0}
|
||||
easing="ease-in"
|
||||
useNativeDriver={true}
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
position: 'absolute',
|
||||
left: 120,
|
||||
top: 140,
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
borderRadius: 5,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
padding: 4,
|
||||
}}>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.accent,
|
||||
fontSize: SIZE.sm,
|
||||
}}>
|
||||
#myschoolwork
|
||||
</Text>
|
||||
</View>
|
||||
</Animatable.View>
|
||||
<SvgXml xml={getSVG()} width="100%" height="100%" />
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user