From 6fb4b005fd7b7ec37d19d308f5e4065ebe589038 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Thu, 17 Nov 2022 11:21:04 -0600
Subject: Add tabs explainer and fix 'black screen' during onboard

---
 src/view/com/onboard/FeatureExplainer.tsx | 27 ++++++++++++++++++++++++++-
 src/view/lib/assets.native.ts             |  1 +
 src/view/lib/assets.ts                    |  3 +++
 src/view/screens/Onboard.tsx              |  2 +-
 4 files changed, 31 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/view/com/onboard/FeatureExplainer.tsx b/src/view/com/onboard/FeatureExplainer.tsx
index 0bc0876d1..d6c75ae04 100644
--- a/src/view/com/onboard/FeatureExplainer.tsx
+++ b/src/view/com/onboard/FeatureExplainer.tsx
@@ -10,10 +10,11 @@ import {
   View,
 } from 'react-native'
 import {TabView, SceneMap, Route, TabBarProps} from 'react-native-tab-view'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {UserGroupIcon} from '../../lib/icons'
 import {useStores} from '../../../state'
 import {s} from '../../lib/styles'
-import {SCENE_EXPLAINER} from '../../lib/assets'
+import {SCENE_EXPLAINER, TABS_EXPLAINER} from '../../lib/assets'
 
 const Intro = () => (
   <View style={styles.explainer}>
@@ -49,9 +50,32 @@ const Scenes = () => (
   </View>
 )
 
+const Tabs = () => (
+  <View style={styles.explainer}>
+    <View style={styles.explainerIcon}>
+      <View style={s.flex1} />
+      <FontAwesomeIcon
+        icon={['far', 'clone']}
+        style={[s.black, s.mb5]}
+        size={36}
+      />
+      <View style={s.flex1} />
+    </View>
+    <Text style={styles.explainerHeading}>Tabs</Text>
+    <Text style={styles.explainerDesc}>
+      Never lose your place! Long-press on posts and links to open them in a new
+      tab.
+    </Text>
+    <Text style={styles.explainerDesc}>
+      <Image source={TABS_EXPLAINER} style={styles.explainerImg} />
+    </Text>
+  </View>
+)
+
 const SCENE_MAP = {
   intro: Intro,
   scenes: Scenes,
+  tabs: Tabs,
 }
 const renderScene = SceneMap(SCENE_MAP)
 
@@ -62,6 +86,7 @@ export const FeatureExplainer = () => {
   const routes = [
     {key: 'intro', title: 'Intro'},
     {key: 'scenes', title: 'Scenes'},
+    {key: 'tabs', title: 'Tabs'},
   ]
 
   const onPressSkip = () => store.onboard.next()
diff --git a/src/view/lib/assets.native.ts b/src/view/lib/assets.native.ts
index aa3c816b8..4b5c3efca 100644
--- a/src/view/lib/assets.native.ts
+++ b/src/view/lib/assets.native.ts
@@ -2,3 +2,4 @@ import {ImageSourcePropType} from 'react-native'
 
 export const DEF_AVATAR: ImageSourcePropType = require('../../../public/img/default-avatar.jpg')
 export const SCENE_EXPLAINER: ImageSourcePropType = require('../../../public/img/scene-explainer.jpg')
+export const TABS_EXPLAINER: ImageSourcePropType = require('../../../public/img/tabs-explainer.jpg')
diff --git a/src/view/lib/assets.ts b/src/view/lib/assets.ts
index ad425ca6f..04c368089 100644
--- a/src/view/lib/assets.ts
+++ b/src/view/lib/assets.ts
@@ -4,3 +4,6 @@ export const DEF_AVATAR: ImageSourcePropType = {uri: '/img/default-avatar.jpg'}
 export const SCENE_EXPLAINER: ImageSourcePropType = {
   uri: '/img/scene-explainer.jpg',
 }
+export const TABS_EXPLAINER: ImageSourcePropType = {
+  uri: '/img/tabs-explainer.jpg',
+}
diff --git a/src/view/screens/Onboard.tsx b/src/view/screens/Onboard.tsx
index 0f36494e6..4aa0e6cac 100644
--- a/src/view/screens/Onboard.tsx
+++ b/src/view/screens/Onboard.tsx
@@ -26,7 +26,7 @@ export const Onboard = observer(() => {
   }
 
   return (
-    <View style={{flex: 1}}>
+    <View style={{flex: 1, backgroundColor: '#fff'}}>
       <Com />
     </View>
   )
-- 
cgit 1.4.1