Skip to content

RNTester Globally Caches Screen Width #30325

@NickGerleman

Description

@NickGerleman

Description

Relates to microsoft/react-native-windows#6303

RNTester after being redesigned sets the width of an example paged based on a globally cached width from Dimensions.

https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/components/ExamplePage.js#L25

const ScreenWidth = Dimensions.get('window').width;
import {RNTesterThemeContext} from './RNTesterTheme';
const styles = StyleSheet.create({
...
  examplesContainer: {
    width: ScreenWidth,
    flexGrow: 1,
  },
...
});

Setting the width explicitly isn't needed, but causes a couple of issues. The first is when the viewport is resized, invalidating the globally cached dimensions. Seen below on Windows:

image

This same issue is likely to be seen if the app supports rotation, or windowing on phone/iPad. It causes some further issues on desktop platforms though, which may be multi-window, (where the Dimensions API is considered unsafe).

React Native version:

0.0.0-9b094ee77 (>= 0.64)

Steps To Reproduce

  1. Open RNTester app
  2. Open example
  3. Resize Viewport

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions