4851 motion modal 2

android/app/build.gradle

@@ -304,7 +304,6 @@ dependencies {
   implementation project(':react-native-pure-jwt')
   implementation project(':react-native-action-sheet')
   implementation project(':react-native-image-crop-picker')
-  implementation project(':react-native-android-open-settings')
   implementation project(':react-native-extra-dimensions-android')
   implementation project(':react-native-localize')
   implementation project(':react-native-gesture-handler')

package.json

@@ -63,7 +63,6 @@
     "react-native": "0.61.5",
     "react-native-action-sheet": "^2.2.0",
     "react-native-actionsheet": "^2.2.2",
-    "react-native-android-open-settings": "^1.3.0",
     "react-native-animated-linear-gradient": "^1.2.0",
     "react-native-background-fetch": "^2.7.1",
     "react-native-background-geolocation-android": "git+https://42af07bf147313e5c1053b3e23ebbc4da0075767:@github.com/transistorsoft/react-native-background-geolocation-android#3.5.1",
@@ -161,4 +160,4 @@
       "pre-commit": "pretty-quick --staged --pattern \"**/*.*(js|jsx|ts|tsx)\""
     }
   }
-}
+}

src/components/Router.tsx

@@ -32,6 +32,7 @@ import BottomMenu from './BottomMenu'
 import DebugScreen from './DebugScreen'
 import LocationGeofenceWarning from './modals/LocationGeofenceWarning'
 import LocationWarning from './modals/LocationWarning'
+import MotionWarning from './modals/MotionWarning'
 import SharePresencePrimer from './modals/SharePresencePrimer'
 import InvisibleExpirationSelector from './modals/InvisibleExpirationSelector'
 import CreationHeader from './Home/CreationHeader'
@@ -71,13 +72,17 @@ const TinyRobotRouter = inject('wocky', 'permissionStore', 'locationStore', 'ico
 
       autorun(
         () => {
-          const {onboarded} = permissionStore!
-          const {scene} = navStore!
-          const {alwaysOn} = locationStore!
-          if (onboarded && !alwaysOn) {
-            if (scene !== 'locationWarning'){
-              if (Actions.locationWarning) Actions.locationWarning({afterLocationAlwaysOn: () => Actions.popTo('home')})
-            }
+          if (permissionStore!.onboarded && !locationStore!.alwaysOn && navStore!.scene !== 'locationWarning' && Actions.locationWarning) {
+            Actions.locationWarning({afterLocationAlwaysOn: () => Actions.popTo('home')})
+          }
+        },
+        {delay: 1000}
+      )
+
+      autorun(
+        () => {
+          if (permissionStore!.onboarded && !permissionStore!.allowsAccelerometer && navStore!.scene !== 'motionWarning' && Actions.motionWarning) {
+            Actions.motionWarning()
           }
         },
         {delay: 1000}
@@ -240,6 +245,7 @@ const TinyRobotRouter = inject('wocky', 'permissionStore', 'locationStore', 'ico
             </Stack>
             <Scene key="reload" hideNavBar type="replace" component={Launch} />
             <Scene key="locationWarning" component={LocationWarning} />
+            <Scene key="motionWarning" component={MotionWarning} />
             <Scene key="geofenceWarning" component={LocationGeofenceWarning} />
             <Scene key="sharePresencePrimer" component={SharePresencePrimer} />
             <Scene key="invisibleExpirationSelector" component={InvisibleExpirationSelector} />

src/components/modals/LocationWarning.tsx

@@ -6,7 +6,6 @@ import {when} from 'mobx'
 import {BlurView} from '@react-native-community/blur'
 import {GradientButton, RText, Separator} from '../common'
 import {WHITE, TRANSLUCENT_WHITE} from 'src/constants/colors'
-import AndroidOpenSettings from 'react-native-android-open-settings'
 import {useLocationStore} from 'src/utils/injectors'
 import {observer} from 'mobx-react'
 
@@ -29,22 +28,10 @@ const LocationWarning = observer(({afterLocationAlwaysOn}: Props) => {
     return disposer
   }, [])
 
-  const onPress = () => {
-    if (Platform.OS === 'ios') {
-      Linking.openURL('app-settings:{1}')
-    } else {
-      AndroidOpenSettings.appDetailsSettings()
-    }
-  }
-
-  return Platform.OS === 'ios' ? (
-    <LocationWarningIOS onPress={onPress} />
-  ) : (
-    <LocationWarningAndroid onPress={onPress} />
-  )
+  return Platform.OS === 'ios' ? <LocationWarningIOS /> : <LocationWarningAndroid />
 })
 
-export const LocationWarningIOS = ({onPress}) => (
+export const LocationWarningIOS = () => (
   <View
     style={[
       StyleSheet.absoluteFill,
@@ -71,7 +58,7 @@ export const LocationWarningIOS = ({onPress}) => (
     <GradientButton
       isPink
       style={{height: 50, width: '80%', borderRadius: 4, marginBottom: 26 * s, marginTop: 40 * s}}
-      onPress={onPress}
+      onPress={() => Linking.openSettings()}
     >
       <RText color={WHITE} size={18.5}>
         Open Settings
@@ -80,7 +67,7 @@ export const LocationWarningIOS = ({onPress}) => (
   </View>
 )
 
-export const LocationWarningAndroid = ({onPress}) => (
+export const LocationWarningAndroid = () => (
   <View
     style={[
       StyleSheet.absoluteFill,
@@ -103,7 +90,7 @@ export const LocationWarningAndroid = ({onPress}) => (
     <GradientButton
       isPink
       style={{height: 50, width: '80%', borderRadius: 4, marginBottom: 26 * s, marginTop: 40 * s}}
-      onPress={onPress}
+      onPress={() => Linking.openSettings()}
     >
       <RText color={WHITE} size={18.5}>
         Change Settings

src/components/modals/MotionWarning.tsx

@@ -0,0 +1,79 @@
+import React, {useEffect} from 'react'
+import {StyleSheet, Image, Linking, View, Platform} from 'react-native'
+import {colors} from '../../constants'
+import {s, minHeight} from '../Global'
+import {BlurView} from '@react-native-community/blur'
+import {GradientButton, RText} from '../common'
+import {WHITE, TRANSLUCENT_WHITE} from 'src/constants/colors'
+import {observer} from 'mobx-react'
+import {useAppState} from 'react-native-hooks'
+import {Actions} from 'react-native-router-flux'
+import {usePermissionStore} from '../../utils/injectors'
+
+const MotionWarning = observer(() => {
+  const currentAppState = useAppState()
+  const permissionStore = usePermissionStore()
+  useEffect(() => {
+    if (currentAppState === 'active') {
+      permissionStore.checkMotionPermissions().then(p => {
+        if (p) Actions.pop()
+      })
+    }
+  }, [currentAppState])
+
+  const settingsName = Platform.OS === 'ios' ? 'Motion & Fitness' : 'Physical Activity'
+
+  return (
+    <View
+      style={[
+        StyleSheet.absoluteFill,
+        {
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: Platform.select({ios: 'transparent', android: TRANSLUCENT_WHITE}),
+        },
+      ]}
+    >
+      <BlurView blurType="xlight" blurAmount={10} style={StyleSheet.absoluteFill as any} />
+      <RText style={styles.title}>{`Allow\r\n${settingsName}`}</RText>
+
+      <RText style={styles.subtext}>
+        {`Using "${settingsName}" increases battery efficiency by intelligently toggling location tracking while moving.`}
+      </RText>
+
+      <Image
+        source={require('../../../images/walkingMan.png')}
+        style={{width: 145 * minHeight, height: 114 * minHeight, marginVertical: 40 * s}}
+      />
+
+      <GradientButton
+        isPink
+        style={{height: 50, width: '80%', borderRadius: 4, marginBottom: 26 * s, marginTop: 40 * s}}
+        onPress={() => Linking.openSettings()}
+      >
+        <RText color={WHITE} size={18.5}>
+          Open Settings
+        </RText>
+      </GradientButton>
+    </View>
+  )
+})
+
+export default MotionWarning
+
+const styles = StyleSheet.create({
+  title: {
+    color: colors.PINK,
+    fontSize: 30,
+    fontFamily: 'Roboto-Light',
+    textAlign: 'center',
+  },
+  subtext: {
+    fontFamily: 'Roboto-Light',
+    fontSize: 18,
+    color: colors.WARM_GREY_2,
+    textAlign: 'center',
+    width: '70%',
+    marginTop: 35,
+  },
+})

src/store/PermissionStore.ts

@@ -28,15 +28,20 @@ export const PermissionStore = types
       self.loaded = value
     },
   }))
+  .actions(self => ({
+    checkMotionPermissions: (): Promise<boolean> =>
+      checkMotion().then(res => {
+        // NOTE: accelerometer checks always come back as "restricted" on a simulator
+        self.setAllowsAccelerometer(res)
+        return res
+      }),
+  }))
   .actions(self => ({
     checkAllPermissions: flow(function*() {
       // check all permissions in parallel
-      const checkPromises = [
+      const checkPromises: Array<Promise<any>> = [
         checkLocation().then(res => self.setAllowsLocation(res)),
-        checkMotion().then(res =>
-          // NOTE: accelerometer checks always come back as "restricted" on a simulator
-          self.setAllowsAccelerometer(res)
-        ),
+        self.checkMotionPermissions(),
       ]
       if (Platform.OS === 'ios') {
         checkPromises.push(checkNotifications().then(res => self.setAllowsNotification(res)))
@@ -67,7 +72,7 @@ export const PermissionStore = types
         wocky &&
         wocky.profile &&
         wocky.profile.clientData.onboarded &&
-        self.allowsAccelerometer &&
+        // self.allowsAccelerometer &&
         self.allowsNotification
       )
     },

src/utils/permissions.ts

@@ -38,7 +38,7 @@ export async function checkLocationWhenInUse() {
   return [GRANTED, UNAVAILABLE].includes(res)
 }
 
-export async function checkMotion() {
+export async function checkMotion(): Promise<boolean> {
   const res: any = await ch(permissionNames.motion)
   return [GRANTED, UNAVAILABLE].includes(res)
 }

storybook/stories/index.tsx

@@ -50,8 +50,8 @@ storiesOf('NotificationBanner', module).add('Notification with Avatar', () => (
 
 storiesOf('Onboarding', module)
   .add('1 - Location', () => <OnboardingLocation onPress={emptyFn} />)
-  .add('1a - Location Warning IOS', () => <LocationWarningIOS onPress={emptyFn} />)
-  .add('1b - Location Warning Android', () => <LocationWarningAndroid onPress={emptyFn} />)
+  .add('1a - Location Warning IOS', () => <LocationWarningIOS />)
+  .add('1b - Location Warning Android', () => <LocationWarningAndroid />)
   .add('2 - Accelerometer', () => <OnboardingAccelerometer onPress={emptyFn} />)
   .add('3 - Notifications', () => <OnboardingNotifications onPress={emptyFn} />)
   .add('4 - FindFriends', () => <OnboardingFindFriends onPress={emptyFn} onSkip={emptyFn} />)

yarn.lock

@@ -8647,11 +8647,6 @@ react-native-actionsheet@^2.2.2:
   resolved "https://registry.yarnpkg.com/react-native-actionsheet/-/react-native-actionsheet-2.4.2.tgz#6a00dd51a75ef2c8974312130e405af73191500f"
   integrity sha512-DBoWIvVwuWXuptF4t46pBqkFxaUxS+rsIdHiA05t0n4BdTIDV2R4s9bLEUVOGzb94D7VxIamsXZPA/3mmw+SXg==
 
-react-native-android-open-settings@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/react-native-android-open-settings/-/react-native-android-open-settings-1.3.0.tgz#c6257f3c88ada62945fffe887933a2a828adf45d"
-  integrity sha512-h4FTWRtTLRVNS7RK4Bg2gAXe8G5bFZL8Jtmfk2rG2a/N/wJR+v1rAY2BxRkC48lQTqwQCIAQRbWgLVkJ8XmaLQ==
-
 react-native-animated-linear-gradient@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/react-native-animated-linear-gradient/-/react-native-animated-linear-gradient-1.2.0.tgz#fe865897528e2ebe2b9a0e8716aa5d3e234ff39c"