diff --git a/public/img/scene-explainer.jpg b/public/img/scene-explainer.jpg
new file mode 100644
index 0000000000..2478b0552d
Binary files /dev/null and b/public/img/scene-explainer.jpg differ
diff --git a/src/view/com/onboard/FeatureExplainer.tsx b/src/view/com/onboard/FeatureExplainer.tsx
index 227ad73dcd..0bc0876d16 100644
--- a/src/view/com/onboard/FeatureExplainer.tsx
+++ b/src/view/com/onboard/FeatureExplainer.tsx
@@ -1,6 +1,7 @@
import React, {useState} from 'react'
import {
Animated,
+ Image,
SafeAreaView,
StyleSheet,
Text,
@@ -12,6 +13,23 @@ import {TabView, SceneMap, Route, TabBarProps} from 'react-native-tab-view'
import {UserGroupIcon} from '../../lib/icons'
import {useStores} from '../../../state'
import {s} from '../../lib/styles'
+import {SCENE_EXPLAINER} from '../../lib/assets'
+
+const Intro = () => (
+
+
+ Welcome to Bluesky
+
+
+ Let's do a quick tour through the new features.
+
+
+)
const Scenes = () => (
@@ -25,11 +43,14 @@ const Scenes = () => (
Scenes are invite-only groups of users. Follow them to see what's trending
with the scene's members.
- [ TODO screenshot ]
+
+
+
)
const SCENE_MAP = {
+ intro: Intro,
scenes: Scenes,
}
const renderScene = SceneMap(SCENE_MAP)
@@ -38,7 +59,10 @@ export const FeatureExplainer = () => {
const layout = useWindowDimensions()
const store = useStores()
const [index, setIndex] = useState(0)
- const routes = [{key: 'scenes', title: 'Scenes'}]
+ const routes = [
+ {key: 'intro', title: 'Intro'},
+ {key: 'scenes', title: 'Scenes'},
+ ]
const onPressSkip = () => store.onboard.next()
const onPressNext = () => {
@@ -122,7 +146,7 @@ const styles = StyleSheet.create({
explainer: {
flex: 1,
paddingHorizontal: 16,
- paddingVertical: 16,
+ paddingTop: 80,
},
explainerIcon: {
flexDirection: 'row',
@@ -138,6 +162,11 @@ const styles = StyleSheet.create({
textAlign: 'center',
marginBottom: 16,
},
+ explainerImg: {
+ resizeMode: 'contain',
+ maxWidth: '100%',
+ maxHeight: 330,
+ },
footer: {
flexDirection: 'row',
diff --git a/src/view/lib/assets.native.ts b/src/view/lib/assets.native.ts
index 1655b6a0ce..aa3c816b83 100644
--- a/src/view/lib/assets.native.ts
+++ b/src/view/lib/assets.native.ts
@@ -1,3 +1,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')
diff --git a/src/view/lib/assets.ts b/src/view/lib/assets.ts
index 8e85b94893..ad425ca6ff 100644
--- a/src/view/lib/assets.ts
+++ b/src/view/lib/assets.ts
@@ -1,3 +1,6 @@
import {ImageSourcePropType} from 'react-native'
export const DEF_AVATAR: ImageSourcePropType = {uri: '/img/default-avatar.jpg'}
+export const SCENE_EXPLAINER: ImageSourcePropType = {
+ uri: '/img/scene-explainer.jpg',
+}