147 lines
3.6 KiB
TypeScript
147 lines
3.6 KiB
TypeScript
import React, {useState} from 'react'
|
|
import {
|
|
Animated,
|
|
SafeAreaView,
|
|
StyleSheet,
|
|
Text,
|
|
TouchableOpacity,
|
|
useWindowDimensions,
|
|
View,
|
|
} from 'react-native'
|
|
import {TabView, SceneMap, Route, TabBarProps} from 'react-native-tab-view'
|
|
import {UserGroupIcon} from '../../lib/icons'
|
|
import {useStores} from '../../../state'
|
|
import {s} from '../../lib/styles'
|
|
|
|
const Scenes = () => (
|
|
<View style={styles.explainer}>
|
|
<View style={styles.explainerIcon}>
|
|
<View style={s.flex1} />
|
|
<UserGroupIcon style={s.black} size="48" />
|
|
<View style={s.flex1} />
|
|
</View>
|
|
<Text style={styles.explainerHeading}>Scenes</Text>
|
|
<Text style={styles.explainerDesc}>
|
|
Scenes are invite-only groups of users. Follow them to see what's trending
|
|
with the scene's members.
|
|
</Text>
|
|
<Text style={styles.explainerDesc}>[ TODO screenshot ]</Text>
|
|
</View>
|
|
)
|
|
|
|
const SCENE_MAP = {
|
|
scenes: Scenes,
|
|
}
|
|
const renderScene = SceneMap(SCENE_MAP)
|
|
|
|
export const FeatureExplainer = () => {
|
|
const layout = useWindowDimensions()
|
|
const store = useStores()
|
|
const [index, setIndex] = useState(0)
|
|
const routes = [{key: 'scenes', title: 'Scenes'}]
|
|
|
|
const onPressSkip = () => store.onboard.next()
|
|
const onPressNext = () => {
|
|
if (index >= routes.length - 1) {
|
|
store.onboard.next()
|
|
} else {
|
|
setIndex(index + 1)
|
|
}
|
|
}
|
|
|
|
const renderTabBar = (props: TabBarProps<Route>) => {
|
|
const inputRange = props.navigationState.routes.map((x, i) => i)
|
|
return (
|
|
<View style={styles.tabBar}>
|
|
<View style={s.flex1} />
|
|
{props.navigationState.routes.map((route, i) => {
|
|
const opacity = props.position.interpolate({
|
|
inputRange,
|
|
outputRange: inputRange.map(inputIndex =>
|
|
inputIndex === i ? 1 : 0.5,
|
|
),
|
|
})
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
key={i}
|
|
style={styles.tabItem}
|
|
onPress={() => setIndex(i)}>
|
|
<Animated.Text style={{opacity}}>°</Animated.Text>
|
|
</TouchableOpacity>
|
|
)
|
|
})}
|
|
<View style={s.flex1} />
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const FirstExplainer = SCENE_MAP[routes[0]?.key as keyof typeof SCENE_MAP]
|
|
return (
|
|
<SafeAreaView style={styles.container}>
|
|
{routes.length > 1 ? (
|
|
<TabView
|
|
navigationState={{index, routes}}
|
|
renderScene={renderScene}
|
|
renderTabBar={renderTabBar}
|
|
onIndexChange={setIndex}
|
|
initialLayout={{width: layout.width}}
|
|
tabBarPosition="bottom"
|
|
/>
|
|
) : FirstExplainer ? (
|
|
<FirstExplainer />
|
|
) : (
|
|
<View />
|
|
)}
|
|
<View style={styles.footer}>
|
|
<TouchableOpacity onPress={onPressSkip}>
|
|
<Text style={[s.blue3, s.f18]}>Skip</Text>
|
|
</TouchableOpacity>
|
|
<View style={s.flex1} />
|
|
<TouchableOpacity onPress={onPressNext}>
|
|
<Text style={[s.blue3, s.f18]}>Next</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</SafeAreaView>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
|
|
tabBar: {
|
|
flexDirection: 'row',
|
|
},
|
|
tabItem: {
|
|
alignItems: 'center',
|
|
padding: 16,
|
|
},
|
|
|
|
explainer: {
|
|
flex: 1,
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 16,
|
|
},
|
|
explainerIcon: {
|
|
flexDirection: 'row',
|
|
},
|
|
explainerHeading: {
|
|
fontSize: 42,
|
|
fontWeight: 'bold',
|
|
textAlign: 'center',
|
|
marginBottom: 16,
|
|
},
|
|
explainerDesc: {
|
|
fontSize: 18,
|
|
textAlign: 'center',
|
|
marginBottom: 16,
|
|
},
|
|
|
|
footer: {
|
|
flexDirection: 'row',
|
|
paddingHorizontal: 32,
|
|
paddingBottom: 24,
|
|
},
|
|
})
|