Web Platform

components/Button/ActiveButton.tsx

@@ -3,13 +3,13 @@ import _ from "lodash"
 import React, { useCallback } from "react"
 import {
   GestureResponderEvent,
-  Platform,
   TouchableNativeFeedback,
   TouchableOpacity,
   ViewProps,
-  ViewStyle,
+  ViewStyle
 } from "react-native"
 import Colors from "../../constants/Colors"
+import { DeviceManager } from "../../lib"
 import Styles from "../../styles/Button"
 
 interface WrapperProps {
@@ -24,7 +24,7 @@ const Wrapper: React.FC<WrapperProps> = ({ children, onPress, disabled }) => {
   const debouncedOnPress = useCallback(_.debounce((event: GestureResponderEvent) => {
     onPress(event)
   }, 200), [onPress])
-  if (Platform.OS === `android`) {
+  if (DeviceManager.isAndroid) {
     return (
       <TouchableNativeFeedback
         background={
@@ -39,7 +39,7 @@ const Wrapper: React.FC<WrapperProps> = ({ children, onPress, disabled }) => {
       </TouchableNativeFeedback>
     )
   }
-  if (Platform.OS === `ios`) {
+  if (DeviceManager.isiOS || DeviceManager.isWeb) {
     return (
       <TouchableOpacity
         style={{ backgroundColor: `transparent` }}

components/Button/Button.tsx

@@ -1,6 +1,5 @@
 import React from "react"
 import { ActivityIndicator, Platform } from "react-native"
-
 import Colors from "../../constants/Colors"
 import { ButtonText } from "../Typography"
 import ActiveButton, { ActiveButtonProps } from "./ActiveButton"

components/Button/FloatingButton/index.ts

@@ -1 +1,2 @@
-export { default, FloatingButtonProps } from "./FloatingButton"
+export { default } from "./FloatingButton"
+export type { FloatingButtonProps } from './FloatingButton'

components/Button/index.tsx

@@ -1,9 +1,6 @@
-
 export { default } from './Button'
-export { default as RoundButton } from "./RoundButton"
-export {
-  default as FloatingButton,
-  FloatingButtonProps,
-} from "./FloatingButton"
+export { default as FloatingButton } from "./FloatingButton"
+export type { FloatingButtonProps } from './FloatingButton'
 export { default as LightButton } from './LightButton'
+export { default as RoundButton } from "./RoundButton"
 export { default as SmallButton } from './SmallButton'

components/Input/CheckBox/CheckBox.tsx

@@ -0,0 +1,8 @@
+import CheckBox from '@react-native-community/checkbox'
+import React from 'react'
+
+const CheckBoxComponent = ({ ...props }) => (
+    <CheckBox {...props} />
+)
+
+export default CheckBoxComponent

components/Input/CheckBox/CheckBox.web.tsx

@@ -0,0 +1,3 @@
+const CheckBox = () => null
+
+export default CheckBox

components/Input/CheckBox/index.ts

@@ -0,0 +1 @@
+export { default } from './CheckBox'

components/Input/index.ts

@@ -1,4 +1,5 @@
-export { default as TextInput } from "./TextInput"
+export { default as CheckBox } from './CheckBox'
 export { default as SearchInput } from './SearchInput'
+export { default as TextInput } from "./TextInput"
 
 export default {}

components/ViewPager/ViewPager.tsx

@@ -0,0 +1,3 @@
+import ViewPager from '@react-native-community/viewpager'
+
+export default ViewPager

components/ViewPager/ViewPager.web.tsx

@@ -0,0 +1,52 @@
+/* eslint-disable */
+import React, {
+  useImperativeHandle
+} from 'react'
+
+const ViewPager = ({ children, ref }) => {
+  // const scrollView = useRef<ScrollView>(null)
+  // const dataOrientation = orientation === `vertical`
+  //   ? { 'data-snap-container-vertical': true }
+  //   : { 'data-snap-container-horizontal': true }
+
+  useImperativeHandle(ref, () => ({
+    setPage: () => {
+      console.log(`set page`)
+    },
+    // snapToItem: () => {
+    //   scrollView.current.scrollToEnd()
+    // },
+  }))
+
+  // const [hasUpdated, setUpdated] = useState(false)
+
+  // useEffect(() => {
+  //   if (!hasUpdated) {
+  //     scrollView.current.scrollToEnd()
+  //     setUpdated(true)
+  //   }
+  // }, [hasUpdated, setUpdated])
+
+  const elmts = React.Children.toArray(children)
+
+  return elmts[1]
+  // return (
+  //   <ScrollView
+  //     style={style}
+  //     contentContainerStyle={{ flex: 1 }}
+  //     horizontal={orientation != `vertical`}
+  //     nestedScrollEnabled
+  //     onLayout={onLayout}
+  //     {...dataOrientation}
+  //     ref={scrollView}
+  //   >
+  //     {elmts.map((el) => (
+  //       <View key={el.key} style={{ height: `100%`, width: `100%` }} data-snap-child>
+  //         {el}
+  //       </View>
+  //     ))}
+  //   </ScrollView>
+  // )
+}
+
+export default ViewPager

components/ViewPager/index.ts

@@ -0,0 +1 @@
+export { default } from './ViewPager'

configureStore.ts

@@ -4,6 +4,7 @@ import { persistReducer, persistStore } from "redux-persist"
 import createSecureStore from "redux-persist-expo-securestore"
 import thunk from "redux-thunk"
 import debounce from "./lib/debounce"
+import DeviceManager from './lib/DeviceManager'
 import { SIGN_OUT_USER } from "./redux/constants/userConstants"
 import reducer, { initialState } from "./redux/reducers"
 
@@ -30,7 +31,7 @@ const userPersistConfig = {
   blacklist: [`signIn`],
   debug: __DEV__,
   key: `user`,
-  storage: secureStorage,
+  storage: DeviceManager.isWeb ? AsyncStorage : secureStorage,
 }
 
 const appReducer = combineReducers({

lib/AnalyticsManager.ts

@@ -1,7 +1,7 @@
 import * as Amplitude from 'expo-analytics-amplitude'
 import Constants from 'expo-constants'
-
 import configureStore from "../configureStore"
+import DeviceManager from './DeviceManager'
 
 const { store } = configureStore
 
@@ -11,15 +11,18 @@ const AMPLITUDE_API_KEY = Constants.manifest.extra
   ? Constants.manifest.extra.amplitude.apiKey
   : null
 
-const initialise = (): Promise<void> => Amplitude.initialize(AMPLITUDE_API_KEY)
-
 const shouldTrackAnalytics = (): boolean => (
   AMPLITUDE_API_KEY
-  && !__DEV__
-  && store.getState().user.settings.shouldTrackAnalytics
+    && !__DEV__
+    && !DeviceManager.isWeb
+    && store.getState().user.settings.shouldTrackAnalytics
 )
 
-const setUserId = (userId): void => {
+const initialise = (): Promise<void> => (shouldTrackAnalytics()
+  ? Amplitude.initialize(AMPLITUDE_API_KEY)
+  : null)
+
+const setUserId = (userId: string): void => {
   if (!shouldTrackAnalytics()) { return }
 
   // make sure this is unique

lib/DeviceManager.ts

@@ -2,31 +2,30 @@ import * as Device from 'expo-device'
 import * as Network from 'expo-network'
 import { Platform } from 'react-native'
 
-const isRealDevice = (): boolean => Device.isDevice
+const isWeb = Platform.OS === `web`
+const isAndroid = Platform.OS === `android`
+const isiOS = Platform.OS === `ios`
 
-const isConnectedToInternet = async (): Promise<boolean> => {
-  switch (Platform.OS) {
-    case `android`: {
-      const isAirplaneMode = await Network.isAirplaneModeEnabledAsync()
-      if (isAirplaneMode) {
-        return false
-      }
-      break
-    }
-
-    case `ios`: {
-      break
-    }
+const isRealDevice = Device.isDevice
 
-    default:
+const isConnectedToInternet = async (): Promise<boolean> => {
+  if (isAndroid) {
+    const isAirplaneMode = await Network.isAirplaneModeEnabledAsync()
+    if (isAirplaneMode) {
       return false
+    }
+  } else {
+    return false
   }
 
   const { isInternetReachable } = await Network.getNetworkStateAsync()
   return isInternetReachable
 }
 
 export default {
+  isAndroid,
   isConnectedToInternet,
   isRealDevice,
+  isWeb,
+  isiOS,
 }

lib/MailManager.ts

@@ -1,14 +1,13 @@
 import * as MailComposer from "expo-mail-composer"
 import { MailComposerOptions, MailComposerResult } from "expo-mail-composer"
 import { Alert, Platform } from "react-native"
-
 import ClipboardManager from './ClipboardManager'
 import DeviceManager from './DeviceManager'
 
 const composeAsync = async (
   options: MailComposerOptions,
 ): Promise<MailComposerResult | void> => {
-  if (!DeviceManager.isRealDevice()) {
+  if (!DeviceManager.isRealDevice) {
     console.warn(`Mail services cannot be used in a simulator`)
     return Promise.resolve()
   }

lib/WebBrowserManager.ts

@@ -4,6 +4,9 @@ const openLink = (
   url: string,
 ): Promise<WebBrowser.WebBrowserResult> => WebBrowser.openBrowserAsync(url)
 
+const { maybeCompleteAuthSession } = WebBrowser
+
 export default {
+  maybeCompleteAuthSession,
   openLink,
 }

lib/__tests__/DeviceManager.test.tsx

@@ -10,7 +10,7 @@ describe(`DeviceManager`, () => {
 
   it(`returns if real device`, async () => {
     const DeviceManager = (await import(`../DeviceManager`)).default
-    expect(DeviceManager.isRealDevice()).toBe(true)
+    expect(DeviceManager.isRealDevice).toBe(true)
   })
 
   it(`fails early if airplane mode is enabled`, async () => {

navigation/MainTabNavigator.tsx

@@ -75,7 +75,6 @@ const tabBarOptions = {
     bottom: 0,
     height: 60,
     left: 0,
-    position: `absolute`,
     right: 0,
   },
   tabStyle: {

navigation/__tests__/__snapshots__/MainTabNavigator.test.tsx.snap

@@ -358,7 +358,7 @@ Object {
                 "left": 0,
                 "paddingBottom": 0,
                 "paddingHorizontal": 0,
-                "position": "absolute",
+                "position": null,
                 "right": 0,
                 "transform": Array [
                   Object {
@@ -1268,7 +1268,7 @@ Object {
               "left": 0,
               "paddingBottom": 0,
               "paddingHorizontal": 0,
-              "position": "absolute",
+              "position": null,
               "right": 0,
               "transform": Array [
                 Object {