src/view/screens/Onboard.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

import React, {useEffect} from 'react'
import {StyleSheet, View} from 'react-native'
import {observer} from 'mobx-react-lite'
import {FeatureExplainer} from '../com/onboard/FeatureExplainer'
import {Follows} from '../com/onboard/Follows'
import {OnboardStage, OnboardStageOrder} from '../../state/models/onboard'
import {useStores} from '../../state'

export const Onboard = observer(() => {
  const store = useStores()

  useEffect(() => {
    // sanity check - bounce out of onboarding if the stage is wrong somehow
    if (!OnboardStageOrder.includes(store.onboard.stage)) {
      store.onboard.stop()
    }
  }, [store.onboard])

  let Com
  if (store.onboard.stage === OnboardStage.Explainers) {
    Com = FeatureExplainer
  } else if (store.onboard.stage === OnboardStage.Follows) {
    Com = Follows
  } else {
    Com = View
  }

  return (
    <View style={styles.container}>
      <Com />
    </View>
  )
})

const styles = StyleSheet.create({
  container: {
    height: '100%',
    backgroundColor: '#fff',
  },
})