diff --git a/app/screens/onboarding/header.tsx b/app/screens/onboarding/header.tsx
deleted file mode 100644
index d7fd475cb9..0000000000
--- a/app/screens/onboarding/header.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import {View} from 'react-native';
-
-import FormattedText from '@components/formatted_text';
-import {useIsTablet} from '@hooks/device';
-import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
-import {typography} from '@utils/typography';
-
-type Props = {
- additionalServer: boolean;
- theme: Theme;
-};
-
-const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
- textContainer: {
- marginBottom: 32,
- maxWidth: 600,
- width: '100%',
- paddingHorizontal: 20,
- },
- welcome: {
- marginTop: 12,
- color: changeOpacity(theme.centerChannelColor, 0.64),
- ...typography('Heading', 400, 'SemiBold'),
- },
- connect: {
- width: 270,
- letterSpacing: -1,
- color: theme.centerChannelColor,
- marginVertical: 12,
- ...typography('Heading', 1000, 'SemiBold'),
- },
- connectTablet: {
- width: undefined,
- },
- description: {
- color: changeOpacity(theme.centerChannelColor, 0.64),
- ...typography('Body', 200, 'Regular'),
- },
-}));
-
-const ServerHeader = ({additionalServer, theme}: Props) => {
- const isTablet = useIsTablet();
- const styles = getStyleSheet(theme);
-
- let title;
- if (additionalServer) {
- title = (
-
- );
- } else {
- title = (
-
- );
- }
-
- return (
-
- {!additionalServer &&
-
- }
- {title}
-
-
- );
-};
-
-export default ServerHeader;
diff --git a/app/screens/onboarding/illustrations/calls.svg b/app/screens/onboarding/illustrations/calls.svg
new file mode 100644
index 0000000000..7015eeb94b
--- /dev/null
+++ b/app/screens/onboarding/illustrations/calls.svg
@@ -0,0 +1,64 @@
+
diff --git a/app/screens/onboarding/illustrations/chat.svg b/app/screens/onboarding/illustrations/chat.svg
new file mode 100644
index 0000000000..8441ba906e
--- /dev/null
+++ b/app/screens/onboarding/illustrations/chat.svg
@@ -0,0 +1,210 @@
+
\ No newline at end of file
diff --git a/app/screens/onboarding/illustrations/integrations.svg b/app/screens/onboarding/illustrations/integrations.svg
new file mode 100644
index 0000000000..7153d8feca
--- /dev/null
+++ b/app/screens/onboarding/illustrations/integrations.svg
@@ -0,0 +1,73 @@
+
diff --git a/app/screens/onboarding/illustrations/team_communication.svg b/app/screens/onboarding/illustrations/team_communication.svg
new file mode 100644
index 0000000000..b932592696
--- /dev/null
+++ b/app/screens/onboarding/illustrations/team_communication.svg
@@ -0,0 +1,72 @@
+
diff --git a/app/screens/onboarding/index.tsx b/app/screens/onboarding/index.tsx
index 2b13f582d6..08f8ea1c52 100644
--- a/app/screens/onboarding/index.tsx
+++ b/app/screens/onboarding/index.tsx
@@ -1,16 +1,18 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
-import React, {useRef} from 'react';
-import {Platform, Text, View} from 'react-native';
-import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
+import React, {useCallback, useRef} from 'react';
+import {Platform, Text, View, FlatList, ScrollView, ListRenderItemInfo} from 'react-native';
import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
import {SafeAreaView} from 'react-native-safe-area-context';
-import AppVersion from '@components/app_version';
+import {generateId} from '@app/utils/general';
import Background from '@screens/background';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
+import SlideItem from './slide';
+import slidesData from './slides_data';
+
import type {LaunchProps} from '@typings/launch';
interface OnboardingProps extends LaunchProps {
@@ -22,7 +24,6 @@ const Onboarding = ({
theme,
}: OnboardingProps) => {
const translateX = useSharedValue(0);
- const keyboardAwareRef = useRef(null);
const styles = getStyleSheet(theme);
const transform = useAnimatedStyle(() => {
@@ -32,32 +33,35 @@ const Onboarding = ({
};
}, []);
+ const renderSlide = useCallback(({item: t}: ListRenderItemInfo) => {
+ return (
+
+ );
+ }, []);
+
return (
- item.id}
+ data={slidesData}
+ renderItem={renderSlide}
+ listKey={generateId()}
+ horizontal={true}
+ showsHorizontalScrollIndicator={true}
+ pagingEnabled={true}
bounces={false}
- contentContainerStyle={styles.scrollContainer}
- enableAutomaticScroll={Platform.OS === 'android'}
- enableOnAndroid={false}
- enableResetScrollToCoords={true}
- extraScrollHeight={20}
- keyboardDismissMode='on-drag'
- keyboardShouldPersistTaps='handled'
- ref={keyboardAwareRef}
- scrollToOverflowEnabled={true}
- style={styles.flex}
- >
- {'Hola mundo'}
-
-
+ />
);
diff --git a/app/screens/onboarding/slide.tsx b/app/screens/onboarding/slide.tsx
new file mode 100644
index 0000000000..039baae955
--- /dev/null
+++ b/app/screens/onboarding/slide.tsx
@@ -0,0 +1,57 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {Text, View, useWindowDimensions} from 'react-native';
+
+import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
+import {typography} from '@utils/typography';
+
+type Props = {
+ item: any;
+ theme: Theme;
+};
+
+const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
+ title: {
+ fontWeight: '800',
+ fontSize: 28,
+ marginBottom: 10,
+ color: theme.centerChannelColor,
+ textAlign: 'center',
+ },
+ description: {
+ fontWeight: '300',
+ textAlign: 'center',
+ paddingHorizontal: 64,
+ color: changeOpacity(theme.centerChannelColor, 0.64),
+ ...typography('Body', 200, 'Regular'),
+ },
+ image: {
+ flex: 0.7,
+ justifyContent: 'center',
+ },
+ itemContainer: {
+ flex: 1,
+ },
+}));
+
+const SlideItem = ({theme, item}: Props) => {
+ const {width} = useWindowDimensions();
+ const styles = getStyleSheet(theme);
+ const SvgImg = item.image;
+
+ return (
+
+
+
+ {item.title}
+ {item.description}
+
+
+ );
+};
+
+export default SlideItem;
diff --git a/app/screens/onboarding/slides_data.ts b/app/screens/onboarding/slides_data.ts
new file mode 100644
index 0000000000..331dbc8585
--- /dev/null
+++ b/app/screens/onboarding/slides_data.ts
@@ -0,0 +1,30 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+// pablo - translate each text. turn svgs into react components?
+export default [
+ {
+ id: '1',
+ title: 'Welcome',
+ description: 'Mattermost is an open source platform for developer collaboration. Secure, flexible, and integrated with your tools.',
+ image: require('./illustrations/chat.svg').default,
+ },
+ {
+ id: '2',
+ title: 'Collaborate in real-time',
+ description: 'Persistent channels, direct messaging, and file sharing works seamlessly so you can stay connected, wherever you are.',
+ image: require('./illustrations/team_communication.svg').default,
+ },
+ {
+ id: '3',
+ title: 'Start secure audio calls instantly',
+ description: '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,
+ },
+ {
+ id: '4',
+ title: 'Integrate with tools you love',
+ description: 'Go beyond chat with tightly-integratedproduct solutions matched to common development processes.',
+ image: require('./illustrations/integrations.svg').default,
+ },
+];
diff --git a/index.ts b/index.ts
index 9f8d9199c1..ccceb3ec9e 100644
--- a/index.ts
+++ b/index.ts
@@ -67,7 +67,6 @@ if (global.HermesInternal) {
let alreadyInitialized = false;
Navigation.events().registerAppLaunchedListener(async () => {
// See caution in the library doc https://wix.github.io/react-native-navigation/docs/app-launch#android
- console.log('*** already init', alreadyInitialized);
if (!alreadyInitialized) {
alreadyInitialized = true;
GlobalEventHandler.init();
@@ -83,12 +82,8 @@ Navigation.events().registerAppLaunchedListener(async () => {
await WebsocketManager.init(serverCredentials);
PushNotifications.init();
SessionManager.init();
- console.log('*** already init 2', alreadyInitialized);
}
- console.log('*** already init 3', alreadyInitialized);
-
-
initialLaunch();
});