Add tabs explainer and fix 'black screen' during onboard
parent
3a9bb6a98d
commit
6fb4b005fd
Binary file not shown.
After Width: | Height: | Size: 78 KiB |
|
@ -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()
|
||||
|
|
|
@ -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')
|
||||
|
|
|
@ -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',
|
||||
}
|
||||
|
|
|
@ -26,7 +26,7 @@ export const Onboard = observer(() => {
|
|||
}
|
||||
|
||||
return (
|
||||
<View style={{flex: 1}}>
|
||||
<View style={{flex: 1, backgroundColor: '#fff'}}>
|
||||
<Com />
|
||||
</View>
|
||||
)
|
||||
|
|
Loading…
Reference in New Issue