diff --git a/apps/mobile/src/components/ActionSheetComponent/BouncingView.js b/apps/mobile/src/components/ActionSheetComponent/BouncingView.js
index d5828495a..d2cddfc81 100644
--- a/apps/mobile/src/components/ActionSheetComponent/BouncingView.js
+++ b/apps/mobile/src/components/ActionSheetComponent/BouncingView.js
@@ -1,30 +1,40 @@
-import React, { useEffect } from 'react';
-import Animated, { Easing, timing } from 'react-native-reanimated';
+import React, {useEffect} from 'react';
+import Animated, {Easing, timing} from 'react-native-reanimated';
+
+export const BouncingView = ({
+ children,
+ style,
+ duration = 600,
+ animated = true
+}) => {
+ const scale = Animated.useValue(!animated ? 1 : 0.9);
-export const BouncingView = ({children,style,duration=600}) => {
- const scale = Animated.useValue(0.9);
-
useEffect(() => {
+ if (!animated) return;
scale.setValue(0.9);
timing(scale, {
toValue: 1,
- duration:duration,
+ duration: duration,
easing: Easing.elastic(1)
}).start();
return () => {
+ if (!animated) return;
scale.setValue(0.9);
- }
- },[])
+ };
+ }, []);
return (
+ style={[
+ {
+ transform: [
+ {
+ scale: !animated ? 1 : scale
+ }
+ ]
+ },
+ style
+ ]}>
{children}
);
diff --git a/apps/mobile/src/components/Announcements/body.js b/apps/mobile/src/components/Announcements/body.js
new file mode 100644
index 000000000..3fef67f8d
--- /dev/null
+++ b/apps/mobile/src/components/Announcements/body.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { useTracked } from '../../provider';
+import Paragraph from '../Typography/Paragraph';
+import { getStyle } from './functions';
+
+
+export const Body = ({text, style = {}}) => {
+ const [state] = useTracked();
+ const colors = state.colors;
+
+ return (
+
+ {text}
+
+ );
+};
\ No newline at end of file
diff --git a/apps/mobile/src/components/Announcements/cta.js b/apps/mobile/src/components/Announcements/cta.js
new file mode 100644
index 000000000..599bb8f0e
--- /dev/null
+++ b/apps/mobile/src/components/Announcements/cta.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useTracked } from '../../provider';
+import { Button } from '../Button';
+import { getStyle } from './functions';
+
+export const Cta = ({actions, style = {}}) => {
+ const [state] = useTracked();
+ const colors = state.colors;
+ return (
+
+ {actions.map((item, index) => (
+
+ );
+};
diff --git a/apps/mobile/src/components/Announcements/description.js b/apps/mobile/src/components/Announcements/description.js
new file mode 100644
index 000000000..867bfc221
--- /dev/null
+++ b/apps/mobile/src/components/Announcements/description.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { useTracked } from '../../provider';
+import { SIZE } from '../../utils/SizeUtils';
+import Paragraph from '../Typography/Paragraph';
+import { getStyle } from './functions';
+
+
+export const Description = ({text, style = {}}) => {
+ const [state] = useTracked();
+ const colors = state.colors;
+ return (
+
+ {text}
+
+ );
+};
diff --git a/apps/mobile/src/components/Announcements/functions.js b/apps/mobile/src/components/Announcements/functions.js
new file mode 100644
index 000000000..59d80b5b8
--- /dev/null
+++ b/apps/mobile/src/components/Announcements/functions.js
@@ -0,0 +1,14 @@
+export const margins = {
+ 0: 0,
+ 1: 12,
+ 2: 20
+};
+
+export const getStyle = style => {
+ if (!style) return {};
+ return {
+ marginTop: margins[style.marginTop] || 0,
+ marginBottom: margins[style.marginBottom] || 0,
+ textAlign: style.textAlign || 'left'
+ };
+};
diff --git a/apps/mobile/src/components/Announcements/index.js b/apps/mobile/src/components/Announcements/index.js
new file mode 100644
index 000000000..3eb42c37c
--- /dev/null
+++ b/apps/mobile/src/components/Announcements/index.js
@@ -0,0 +1,163 @@
+import React, {useEffect, useState} from 'react';
+import {FlatList, View} from 'react-native';
+import {useTracked} from '../../provider';
+import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
+import {
+ eCloseAnnouncementDialog,
+ eOpenAnnouncementDialog
+} from '../../utils/Events';
+import BaseDialog from '../Dialog/base-dialog';
+import {Body} from './body';
+import {Description} from './description';
+import {Photo} from './photo';
+import {SubHeading} from './subheading';
+import {List} from './list';
+import {Title} from './title';
+import {Cta} from './cta';
+import {allowedPlatforms} from '../../provider/stores';
+import {ProFeatures} from '../ResultDialog/pro-features';
+
+const announcement_dialog_info = {
+ body: [
+ {
+ type: 'image',
+ src: 'https://media.istockphoto.com/vectors/flash-sale-promotional-labels-templates-set-special-offer-text-design-vector-id1195558677?s=170667a',
+ caption: 'an image of a bear',
+ style: {}
+ },
+ {
+ type: 'title',
+ text: "Don't miss out on this one!",
+ style: {
+ textAlign: 'center',
+ marginTop: 1
+ }
+ },
+ {
+ type: 'description',
+ text: "It's 50% off on Notesnook Pro today. Grab the offer now before it's too late.",
+ style: {
+ textAlign: 'center',
+ marginBottom: 1
+ }
+ },
+ {
+ type: 'features'
+ }
+ // {
+ // type: 'subheading',
+ // text: 'New image tool'
+ // },
+ // {
+ // type: 'body',
+ // text: 'But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer.'
+ // },
+ // {
+ // type: 'list',
+ // items: [
+ // {
+ // text: 'Lorem ipsum dolor sit amet'
+ // },
+ // {
+ // text: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium'
+ // }
+ // ]
+ // }
+ ],
+ callToActions: [
+ {
+ text: 'Get 50% Off for One Year',
+ action: 'none',
+ platforms: ['mobile']
+ }
+ ]
+};
+
+const Features = () => {
+ return (
+
+
+
+ );
+};
+
+const renderItems = {
+ title: Title,
+ description: Description,
+ body: Body,
+ cta: Cta,
+ image: Photo,
+ list: List,
+ subheading: SubHeading,
+ features: Features
+};
+
+const renderItem = ({item, index}) => {
+ const Item = renderItems[item.type];
+
+ return