diff --git a/app/screens/onboarding/illustrations/calls.svg b/app/screens/onboarding/illustrations/calls.svg
deleted file mode 100644
index 7015eeb94..000000000
--- a/app/screens/onboarding/illustrations/calls.svg
+++ /dev/null
@@ -1,64 +0,0 @@
-
diff --git a/app/screens/onboarding/illustrations/calls_svg.tsx b/app/screens/onboarding/illustrations/calls_svg.tsx
new file mode 100644
index 000000000..fa1a6f6d1
--- /dev/null
+++ b/app/screens/onboarding/illustrations/calls_svg.tsx
@@ -0,0 +1,247 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import * as React from 'react';
+import {StyleProp, ViewStyle} from 'react-native';
+import Svg, {Ellipse, Path, Mask, G} from 'react-native-svg';
+
+type SvgProps = {
+ styles: StyleProp;
+};
+
+const CallsSvg = ({styles}: SvgProps) => {
+ return (
+
+ );
+};
+
+export default CallsSvg;
diff --git a/app/screens/onboarding/illustrations/chat.svg b/app/screens/onboarding/illustrations/chat.svg
deleted file mode 100644
index 8441ba906..000000000
--- a/app/screens/onboarding/illustrations/chat.svg
+++ /dev/null
@@ -1,210 +0,0 @@
-
\ No newline at end of file
diff --git a/app/screens/onboarding/illustrations/chat_svg.tsx b/app/screens/onboarding/illustrations/chat_svg.tsx
new file mode 100644
index 000000000..155174cc1
--- /dev/null
+++ b/app/screens/onboarding/illustrations/chat_svg.tsx
@@ -0,0 +1,338 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import * as React from 'react';
+import {StyleProp, ViewStyle} from 'react-native';
+import Svg, {
+ G,
+ Path,
+ Mask,
+ Ellipse,
+ Defs,
+ Pattern,
+ Use,
+ ClipPath,
+ Image,
+} from 'react-native-svg';
+
+type SvgProps = {
+ styles: StyleProp;
+};
+
+const ChatSvg = ({styles}: SvgProps) => {
+ return (
+
+ );
+};
+
+export default ChatSvg;
diff --git a/app/screens/onboarding/illustrations/integrations.svg b/app/screens/onboarding/illustrations/integrations.svg
deleted file mode 100644
index 7153d8fec..000000000
--- a/app/screens/onboarding/illustrations/integrations.svg
+++ /dev/null
@@ -1,73 +0,0 @@
-
diff --git a/app/screens/onboarding/illustrations/integrations_svg.tsx b/app/screens/onboarding/illustrations/integrations_svg.tsx
new file mode 100644
index 000000000..705567009
--- /dev/null
+++ b/app/screens/onboarding/illustrations/integrations_svg.tsx
@@ -0,0 +1,458 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import * as React from 'react';
+import {StyleProp, ViewStyle} from 'react-native';
+import Svg, {
+ Rect,
+ Path,
+ Circle,
+ Ellipse,
+ Mask,
+ G,
+ Defs,
+ Pattern,
+ Use,
+ Image,
+} from 'react-native-svg';
+
+type SvgProps = {
+ styles: StyleProp;
+};
+
+const IntegrationsSvg = ({styles}: SvgProps) => {
+ return (
+
+ );
+};
+
+export default IntegrationsSvg;
diff --git a/app/screens/onboarding/illustrations/team_communication.svg b/app/screens/onboarding/illustrations/team_communication.svg
deleted file mode 100644
index b93259269..000000000
--- a/app/screens/onboarding/illustrations/team_communication.svg
+++ /dev/null
@@ -1,72 +0,0 @@
-
diff --git a/app/screens/onboarding/illustrations/team_communication_svg.tsx b/app/screens/onboarding/illustrations/team_communication_svg.tsx
new file mode 100644
index 000000000..d707ccea0
--- /dev/null
+++ b/app/screens/onboarding/illustrations/team_communication_svg.tsx
@@ -0,0 +1,282 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import * as React from 'react';
+import {StyleProp, ViewStyle} from 'react-native';
+import Svg, {Ellipse, Path, Mask, G, Defs, ClipPath} from 'react-native-svg';
+
+type SvgProps = {
+ styles: StyleProp;
+};
+
+const TeamCommunicationSvg = ({styles}: SvgProps) => {
+ return (
+
+ );
+};
+
+export default TeamCommunicationSvg;
diff --git a/app/screens/onboarding/slide.tsx b/app/screens/onboarding/slide.tsx
index 35ecfae86..2811fe5ac 100644
--- a/app/screens/onboarding/slide.tsx
+++ b/app/screens/onboarding/slide.tsx
@@ -1,8 +1,8 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
-import React, { useEffect, useState } from 'react';
-import {View, useWindowDimensions, Text} from 'react-native';
+import React, {useEffect, useState} from 'react';
+import {View, useWindowDimensions} from 'react-native';
import Animated, {Extrapolate, interpolate, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
@@ -61,7 +61,6 @@ const SlideItem = ({theme, item, scrollX, index}: Props) => {
const {width} = useWindowDimensions();
const styles = getStyleSheet(theme);
const FIRST_SLIDE = 0;
- const SvgImg = item.image;
/**
* Code used to animate the first image load
@@ -181,12 +180,7 @@ const SlideItem = ({theme, item, scrollX, index}: Props) => {
(index === FIRST_SLIDE && firstLoad ? styles.firstSlideInitialPosition : undefined),
]}
>
-
+ {item.image}
{
const intl = useIntl();
+ const callsSvg = ();
+ const chatSvg = ();
+ const teamCommunicationSvg = ();
+ const integrationsSvg = ();
const slidesData: OnboardingItem[] = [
{
id: '1',
title: intl.formatMessage({id: 'onboarding_screen.welcome', defaultMessage: 'Welcome'}),
description: intl.formatMessage({id: 'onboaring.welcome_description', defaultMessage: 'Mattermost is an open source platform for developer collaboration. Secure, flexible, and integrated with your tools.'}),
- image: require('./illustrations/chat.svg').default,
+ image: chatSvg,
},
{
id: '2',
title: intl.formatMessage({id: 'onboarding.realtime_collaboration', defaultMessage: 'Collaborate in real-time'}),
description: intl.formatMessage({id: 'onboarding.realtime_collaboration_description', defaultMessage: 'Persistent channels, direct messaging, and file sharing works seamlessly so you can stay connected, wherever you are.'}),
- image: require('./illustrations/team_communication.svg').default,
+ image: teamCommunicationSvg,
},
{
id: '3',
title: intl.formatMessage({id: 'onboarding.calls', defaultMessage: 'Start secure audio calls instantly'}),
description: intl.formatMessage({id: 'onboarding.calls_description', defaultMessage: 'When typing isn’t fast enough, switch from channel-based chat to secure audio calls with a single tap.'}),
- image: require('./illustrations/calls.svg').default,
+ image: callsSvg,
},
{
id: '4',
title: intl.formatMessage({id: 'onboarding.integrations', defaultMessage: 'Integrate with tools you love'}),
description: intl.formatMessage({id: 'onboarding.integrations_description', defaultMessage: 'Go beyond chat with tightly-integratedproduct solutions matched to common development processes.'}),
- image: require('./illustrations/integrations.svg').default,
+ image: integrationsSvg,
},
];