@planningcenter/chat-react-native 4.4.1-qa-staging.40 → 4.4.1-qa-staging.41

package/build/navigation/screenLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"screenLayout.d.ts","sourceRoot":"","sources":["../../src/navigation/screenLayout.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAA;CAAE,2CAY1E;AAED,wBAAgB,8BAA8B,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAA;CAAE,2CAQ5F"}
+{"version":3,"file":"screenLayout.d.ts","sourceRoot":"","sources":["../../src/navigation/screenLayout.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAA;CAAE,2CAa1E;AAED,wBAAgB,8BAA8B,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAA;CAAE,2CAQ5F"}

package/build/navigation/screenLayout.js

@@ -2,7 +2,7 @@ import { c as _c } from "react/compiler-runtime";
 import { useRoute } from '@react-navigation/native';
 import React from 'react';
 import { Suspense } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, useWindowDimensions, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { DefaultLoading } from '../components/page/loading';
 import { PageErrorBoundary } from '../components/page/page_error_boundary';
@@ -10,13 +10,16 @@ import { ChatAccessGate } from './chat_access_gate';
 import { PAGE_ERROR_FALLBACKS } from './page_error_fallbacks';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function ScreenLayout(t0) {
-  const $ = _c(10);
+  const $ = _c(11);
   const {
     children
   } = t0;
   const route = useRoute();
   const genericFallback = PAGE_ERROR_FALLBACKS[route.name];
   const styles = useStyles();
+  const {
+    fontScale
+  } = useWindowDimensions();
   let t1;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     t1 = /*#__PURE__*/_jsx(DefaultLoading, {});
@@ -36,30 +39,31 @@ export function ScreenLayout(t0) {
     t2 = $[2];
   }
   let t3;
-  if ($[3] !== styles.screen || $[4] !== t2) {
+  if ($[3] !== fontScale || $[4] !== styles.screen || $[5] !== t2) {
     t3 = /*#__PURE__*/_jsx(View, {
       style: styles.screen,
       children: t2
-    });
-    $[3] = styles.screen;
-    $[4] = t2;
-    $[5] = t3;
+    }, fontScale);
+    $[3] = fontScale;
+    $[4] = styles.screen;
+    $[5] = t2;
+    $[6] = t3;
   } else {
-    t3 = $[5];
+    t3 = $[6];
   }
   let t4;
-  if ($[6] !== genericFallback || $[7] !== route.name || $[8] !== t3) {
+  if ($[7] !== genericFallback || $[8] !== route.name || $[9] !== t3) {
     t4 = /*#__PURE__*/_jsx(PageErrorBoundary, {
       screenName: route.name,
       genericFallback: genericFallback,
       children: t3
     });
-    $[6] = genericFallback;
-    $[7] = route.name;
-    $[8] = t3;
-    $[9] = t4;
+    $[7] = genericFallback;
+    $[8] = route.name;
+    $[9] = t3;
+    $[10] = t4;
   } else {
-    t4 = $[9];
+    t4 = $[10];
   }
   return t4;
 }

package/build/navigation/screenLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"screenLayout.js","names":["useRoute","React","Suspense","StyleSheet","View","useSafeAreaInsets","DefaultLoading","PageErrorBoundary","ChatAccessGate","PAGE_ERROR_FALLBACKS","jsx","_jsx","ScreenLayout","t0","$","_c","children","route","genericFallback","name","styles","useStyles","t1","Symbol","for","t2","fallback","t3","screen","style","t4","screenName","ScreenLayoutWithChatAccessGate","insets","left","right","create","flex","paddingLeft","paddingRight"],"sources":["../../src/navigation/screenLayout.tsx"],"sourcesContent":["import { useRoute } from '@react-navigation/native'\nimport React from 'react'\nimport { Suspense } from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { DefaultLoading } from '../components/page/loading'\nimport { PageErrorBoundary } from '../components/page/page_error_boundary'\nimport { ChatAccessGate } from './chat_access_gate'\nimport { PAGE_ERROR_FALLBACKS } from './page_error_fallbacks'\n\nexport function ScreenLayout({ children }: { children: React.ReactElement }) {\n  const route = useRoute()\n  const genericFallback = PAGE_ERROR_FALLBACKS[route.name as keyof typeof PAGE_ERROR_FALLBACKS]\n  const styles = useStyles()\n\n  return (\n    <PageErrorBoundary screenName={route.name} genericFallback={genericFallback}>\n      <View style={styles.screen}>\n        <Suspense fallback={<DefaultLoading />}>{children}</Suspense>\n      </View>\n    </PageErrorBoundary>\n  )\n}\n\nexport function ScreenLayoutWithChatAccessGate({ children }: { children: React.ReactElement }) {\n  return (\n    <ScreenLayout>\n      <ChatAccessGate>\n        <Suspense fallback={<DefaultLoading />}>{children}</Suspense>\n      </ChatAccessGate>\n    </ScreenLayout>\n  )\n}\n\nconst useStyles = () => {\n  const insets = useSafeAreaInsets()\n\n  return StyleSheet.create({\n    screen: {\n      flex: 1,\n      paddingLeft: insets.left,\n      paddingRight: insets.right,\n    },\n  })\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"screenLayout.js","names":["useRoute","React","Suspense","StyleSheet","useWindowDimensions","View","useSafeAreaInsets","DefaultLoading","PageErrorBoundary","ChatAccessGate","PAGE_ERROR_FALLBACKS","jsx","_jsx","ScreenLayout","t0","$","_c","children","route","genericFallback","name","styles","useStyles","fontScale","t1","Symbol","for","t2","fallback","t3","screen","style","t4","screenName","ScreenLayoutWithChatAccessGate","insets","left","right","create","flex","paddingLeft","paddingRight"],"sources":["../../src/navigation/screenLayout.tsx"],"sourcesContent":["import { useRoute } from '@react-navigation/native'\nimport React from 'react'\nimport { Suspense } from 'react'\nimport { StyleSheet, useWindowDimensions, View } from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { DefaultLoading } from '../components/page/loading'\nimport { PageErrorBoundary } from '../components/page/page_error_boundary'\nimport { ChatAccessGate } from './chat_access_gate'\nimport { PAGE_ERROR_FALLBACKS } from './page_error_fallbacks'\n\nexport function ScreenLayout({ children }: { children: React.ReactElement }) {\n  const route = useRoute()\n  const genericFallback = PAGE_ERROR_FALLBACKS[route.name as keyof typeof PAGE_ERROR_FALLBACKS]\n  const styles = useStyles()\n  const { fontScale } = useWindowDimensions()\n\n  return (\n    <PageErrorBoundary screenName={route.name} genericFallback={genericFallback}>\n      <View key={fontScale} style={styles.screen}>\n        <Suspense fallback={<DefaultLoading />}>{children}</Suspense>\n      </View>\n    </PageErrorBoundary>\n  )\n}\n\nexport function ScreenLayoutWithChatAccessGate({ children }: { children: React.ReactElement }) {\n  return (\n    <ScreenLayout>\n      <ChatAccessGate>\n        <Suspense fallback={<DefaultLoading />}>{children}</Suspense>\n      </ChatAccessGate>\n    </ScreenLayout>\n  )\n}\n\nconst useStyles = () => {\n  const insets = useSafeAreaInsets()\n\n  return StyleSheet.create({\n    screen: {\n      flex: 1,\n      paddingLeft: insets.left,\n      paddingRight: insets.right,\n    },\n  })\n}\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "4.4.1-qa-staging.40",
+  "version": "4.4.1-qa-staging.41",
   "description": "",
   "repository": {
     "type": "git",
@@ -33,7 +33,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^7.2.0",
     "@fortawesome/react-native-fontawesome": "^0.3.2",
-    "@planningcenter/emoji-keyboard": "4.4.1-qa-staging.40",
+    "@planningcenter/emoji-keyboard": "4.4.1-qa-staging.41",
     "lodash-inflection": "^1.5.0"
   },
   "peerDependencies": {
@@ -84,5 +84,5 @@
     "sf-symbols-typescript": "^2.2.0",
     "typescript": "~6.0.3"
   },
-  "gitHead": "2f70b94610adf193b243c90cdfa4c6b20a599e13"
+  "gitHead": "382bfa092bf544d43feca8879e595cebe31446de"
 }

package/src/__tests__/navigation/screen_layout.test.tsx

@@ -0,0 +1,55 @@
+import { render } from '@testing-library/react-native'
+import React, { useEffect } from 'react'
+import { ScreenLayout } from '../../navigation/screenLayout'
+
+jest.mock('react-native', () => {
+  const actual = jest.requireActual('react-native')
+  return Object.defineProperty(actual, 'useWindowDimensions', {
+    value: jest.fn(),
+    configurable: true,
+  })
+})
+jest.mock('@react-navigation/native', () => ({ useRoute: () => ({ name: 'Conversations' }) }))
+jest.mock('react-native-safe-area-context', () => ({
+  useSafeAreaInsets: () => ({ top: 0, right: 0, bottom: 0, left: 0 }),
+}))
+jest.mock('../../components/page/page_error_boundary', () => ({
+  PageErrorBoundary: ({ children }: { children: React.ReactNode }) => children,
+}))
+
+const mockUseWindowDimensions = require('react-native').useWindowDimensions
+const onMount = jest.fn()
+
+function Child() {
+  useEffect(() => {
+    onMount()
+  }, [])
+  return null
+}
+
+describe('ScreenLayout', () => {
+  afterEach(() => jest.clearAllMocks())
+
+  test('remounts its screen when the font scale changes, and only then', () => {
+    mockUseWindowDimensions.mockReturnValue({ fontScale: 1 })
+    const screen = render(
+      <ScreenLayout>
+        <Child />
+      </ScreenLayout>
+    )
+    screen.rerender(
+      <ScreenLayout>
+        <Child />
+      </ScreenLayout>
+    )
+    expect(onMount).toHaveBeenCalledTimes(1)
+
+    mockUseWindowDimensions.mockReturnValue({ fontScale: 1.2 })
+    screen.rerender(
+      <ScreenLayout>
+        <Child />
+      </ScreenLayout>
+    )
+    expect(onMount).toHaveBeenCalledTimes(2)
+  })
+})

package/src/navigation/screenLayout.tsx

@@ -1,7 +1,7 @@
 import { useRoute } from '@react-navigation/native'
 import React from 'react'
 import { Suspense } from 'react'
-import { StyleSheet, View } from 'react-native'
+import { StyleSheet, useWindowDimensions, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { DefaultLoading } from '../components/page/loading'
 import { PageErrorBoundary } from '../components/page/page_error_boundary'
@@ -12,10 +12,11 @@ export function ScreenLayout({ children }: { children: React.ReactElement }) {
   const route = useRoute()
   const genericFallback = PAGE_ERROR_FALLBACKS[route.name as keyof typeof PAGE_ERROR_FALLBACKS]
   const styles = useStyles()
+  const { fontScale } = useWindowDimensions()
 
   return (
     <PageErrorBoundary screenName={route.name} genericFallback={genericFallback}>
-      <View style={styles.screen}>
+      <View key={fontScale} style={styles.screen}>
         <Suspense fallback={<DefaultLoading />}>{children}</Suspense>
       </View>
     </PageErrorBoundary>