Merge pull request #291 from code4romania/fix/reduced-animation

fix: reduced animation support

mobile/app.config.ts

@@ -7,7 +7,7 @@ const expoConfig: ExpoConfig = {
   name: 'vic',
   slug: 'vic',
   scheme: 'vic',
-  version: '1.0.7',
+  version: '1.0.8',
   orientation: 'portrait',
   icon: './src/assets/images/icon.png',
   userInterfaceStyle: 'light',
@@ -18,7 +18,7 @@ const expoConfig: ExpoConfig = {
   },
   assetBundlePatterns: ['**/*'],
   ios: {
-    buildNumber: '10',
+    buildNumber: '11',
     supportsTablet: false,
     bundleIdentifier: 'org.commitglobal.vic',
     entitlements: {
@@ -32,7 +32,7 @@ const expoConfig: ExpoConfig = {
     },
   },
   android: {
-    versionCode: 8,
+    versionCode: 9,
     adaptiveIcon: {
       foregroundImage: './src/assets/images/adaptive-icon.png',
       backgroundColor: '#ffffff',

mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vic-mobile",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
     "start": "NODE_ENV=development expo start",

mobile/src/screens/Contract.tsx

@@ -27,6 +27,7 @@ import BottomSheet from '@gorhom/bottom-sheet';
 import { renderBackdrop } from '../components/BottomSheet';
 import Button from '../components/Button';
 import InlineLink from '../components/InlineLink';
+import { useReducedMotion } from 'react-native-reanimated';
 
 const Contract = ({ navigation, route }: any) => {
   const { t } = useTranslation('documents');
@@ -46,6 +47,8 @@ const Contract = ({ navigation, route }: any) => {
     error: getContractError,
   } = useContractQuery(id);
 
+  const reducedMotion = useReducedMotion();
+
   // bottom sheet ref
   const bottomSheetRef = useRef<BottomSheet>(null);
   // bottom sheet snap points
@@ -240,6 +243,7 @@ const Contract = ({ navigation, route }: any) => {
         ref={bottomSheetRef}
         index={-1}
         snapPoints={snapPoints}
+        animateOnMount={reducedMotion ? false : true}
       >
         <View style={styles.bottomSheetContainer}>
           <View style={styles.textContainer}>

mobile/src/screens/JoinByAccessCode.tsx

@@ -22,6 +22,7 @@ import { SvgXml } from 'react-native-svg';
 import successIcon from '../assets/svg/success-icon';
 import Button from '../components/Button';
 import InlineLink from '../components/InlineLink';
+import { useReducedMotion } from 'react-native-reanimated';
 
 type AccessCodeFormTypes = {
   code: string;
@@ -59,6 +60,8 @@ const JoinByAccessCode = ({ navigation }: any) => {
   // bottom sheet snap points
   const snapPoints = useMemo(() => [1, 410], []);
 
+  const reducedMotion = useReducedMotion();
+
   const {
     control,
     handleSubmit,
@@ -143,6 +146,7 @@ const JoinByAccessCode = ({ navigation }: any) => {
         ref={bottomSheetRef}
         index={-1}
         snapPoints={snapPoints}
+        animateOnMount={reducedMotion ? false : true}
       >
         <View style={styles.container}>
           <SvgXml xml={successIcon} height={100} width={100} />

mobile/src/screens/JoinOrganization.tsx

@@ -24,6 +24,7 @@ import Button from '../components/Button';
 import InlineLink from '../components/InlineLink';
 import { SvgXml } from 'react-native-svg';
 import { ALLOW_FONT_SCALLING } from '../common/constants/constants';
+import { useReducedMotion } from 'react-native-reanimated';
 
 export type JoinNgoFormTypes = {
   referral: REFERRAL;
@@ -53,6 +54,8 @@ const JoinOrganization = ({ navigation, route }: any) => {
   const { isLoading: isCreatingAccessRequest, mutate: createAccessRequest } =
     useCreateAccessrequestMutation();
 
+  const reducedMotion = useReducedMotion();
+
   const {
     control,
     handleSubmit,
@@ -143,6 +146,7 @@ const JoinOrganization = ({ navigation, route }: any) => {
         ref={bottomSheetRef}
         index={-1}
         snapPoints={snapPoints}
+        animateOnMount={reducedMotion ? false : true}
       >
         <View style={styles.bottomSheetContainer}>
           <SvgXml xml={successIcon} height={100} width={100} />

mobile/src/screens/LeaveOrganization.tsx

@@ -15,6 +15,7 @@ import Paragraph from '../components/Paragraph';
 import InlineLink from '../components/InlineLink';
 import Button from '../components/Button';
 import { ALLOW_FONT_SCALLING } from '../common/constants/constants';
+import { useReducedMotion } from 'react-native-reanimated';
 
 const LeaveOrganization = ({ navigation }: any) => {
   const { t } = useTranslation('leave_ngo');
@@ -31,6 +32,8 @@ const LeaveOrganization = ({ navigation }: any) => {
 
   const { organization } = useOrganization();
 
+  const reducedMotion = useReducedMotion();
+
   const onLeaveOrganizationConfirm = () => {
     if (organization) {
       leaveOrganization(
@@ -87,6 +90,7 @@ const LeaveOrganization = ({ navigation }: any) => {
         ref={bottomSheetRef}
         index={-1}
         snapPoints={snapPoints}
+        animateOnMount={reducedMotion ? false : true}
       >
         <View style={styles.bottomSheetContainer}>
           <View style={styles.textContainer}>

mobile/src/screens/NotificationsSettings.tsx

@@ -16,6 +16,7 @@ import { renderBackdrop } from '../components/BottomSheet';
 import { useUserProfile } from '../store/profile/profile.selector';
 import useStore from '../store/store';
 import { ALLOW_FONT_SCALLING } from '../common/constants/constants';
+import { useReducedMotion } from 'react-native-reanimated';
 
 interface NotificationSettingProps {
   title: string;
@@ -97,6 +98,8 @@ const NotificationsSettings = ({ navigation }: any) => {
   );
   const [notificationBy, setNotificationBy] = useState<NotificationBy[]>([]);
 
+  const reducedMotion = useReducedMotion();
+
   // mutation
   const { mutate: updateNotificationsSettings } = useUpdateSettingsMutation();
 
@@ -207,6 +210,7 @@ const NotificationsSettings = ({ navigation }: any) => {
         ref={bottomSheetRef}
         index={-1}
         snapPoints={snapPoints}
+        animateOnMount={reducedMotion ? false : true}
       >
         <View style={styles.contentContainer}>
           {showNotificationFromOptions ? (

mobile/src/screens/OrganizationProfile.tsx

@@ -30,6 +30,7 @@ import Button from '../components/Button';
 import InlineLink from '../components/InlineLink';
 import { useUserProfile } from '../store/profile/profile.selector';
 import { ALLOW_FONT_SCALLING } from '../common/constants/constants';
+import { useReducedMotion } from 'react-native-reanimated';
 
 const OrganizationProfile = ({ navigation, route }: any) => {
   const { t } = useTranslation('organization_profile');
@@ -52,6 +53,8 @@ const OrganizationProfile = ({ navigation, route }: any) => {
     [organization],
   );
 
+  const reducedMotion = useReducedMotion();
+
   const { isFetching: isFetchingOrganization, error: getOrganizationError } = useOrganizationQuery(
     route.params.organizationId,
   );
@@ -276,6 +279,7 @@ const OrganizationProfile = ({ navigation, route }: any) => {
         ref={bottomSheetRef}
         index={-1}
         snapPoints={snapPoints}
+        animateOnMount={reducedMotion ? false : true}
       >
         <View style={styles.bottomSheetContainer}>
           {organization?.organizationVolunteerStatus ===