Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add layout and screenLayout props for screens #11741

Merged
merged 1 commit into from
Dec 13, 2023

Conversation

satya164
Copy link
Member

@satya164 satya164 commented Dec 11, 2023

Motivation

This adds a new layout prop that can be used to wrap screens.

It makes it easier to provide things such as a global error boundary and suspense fallback for a group of screens without having to manually add HOCs for every screen separately.

See #11152

Usage:

<Stack.Screen
  name="MyScreen"
  component={MyScreenComponent}
  layout={({ children }) => (
    <ErrorBoundary>
      <React.Suspense
        fallback={
          <View style={styles.fallback}>
            <Text style={styles.text}>Loading…</Text>
          </View>
        }
      >
        {children}
      </React.Suspense>
    </ErrorBoundary>
  )}
/>

Or in group/navigator

<Stack.Group
  screenLayout={({ children }) => (
    <ErrorBoundary>
      <React.Suspense
        fallback={
          <View style={styles.fallback}>
            <Text style={styles.text}>Loading…</Text>
          </View>
        }
      >
        {children}
      </React.Suspense>
    </ErrorBoundary>
  )}>
  {/* screens */}
</Stack.Group>

Test plan

This adds unit tests for testing, as well as a demo screen in the example app showing error boundary and suspense using the layout prop.

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2023-12-11.at.01.16.58.mp4

@satya164 satya164 requested a review from osdnk December 11, 2023 00:18
Copy link

netlify bot commented Dec 11, 2023

Deploy Preview for react-navigation-example ready!

Name Link
🔨 Latest commit ef2dd73
🔍 Latest deploy log https://app.netlify.com/sites/react-navigation-example/deploys/6576570877f87c000845dad3
😎 Deploy Preview https://deploy-preview-11741--react-navigation-example.netlify.app/
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@codecov-commenter
Copy link

codecov-commenter commented Dec 11, 2023

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (ad7c703) 75.98% compared to head (ef2dd73) 76.01%.

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files
@@            Coverage Diff             @@
##             main   #11741      +/-   ##
==========================================
+ Coverage   75.98%   76.01%   +0.02%     
==========================================
  Files         207      207              
  Lines        6080     6087       +7     
  Branches     2362     2367       +5     
==========================================
+ Hits         4620     4627       +7     
  Misses       1407     1407              
  Partials       53       53              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

This adds a new `layout` prop that can be used to wrap screens.

It makes it easier to provide things such as a global error boundary and suspense fallback for a group of screens without having to manually add HOCs for every screen separately.

See #11152
Copy link
Member

@osdnk osdnk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks reasonable

@satya164 satya164 merged commit 2dc2178 into main Dec 13, 2023
8 checks passed
@satya164 satya164 deleted the @satya164/screen-layout branch December 13, 2023 14:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants