How marudy/react-native-responsive-screen works
1. Repository purpose
This is a small React Native utility library, not an application. Its core job is to convert screen-relative percentages into React Native “DP” values so UI dimensions can scale across devices without media queries.
2. Primary package boundary
The main distributable lives at the repository root:
- index.js is the runtime entry point
- index.d.ts provides TypeScript typings
- index.js.flow provides Flow typings
This is a lightweight library package with no backend or server-side subsystem.
3. Core API surface
The library exposes four behaviors:
- widthPercentageToDP
- heightPercentageToDP
- listenOrientationChange
- removeOrientationListener
The first two are the main value-conversion helpers; the last two are an optional orientation-change layer.
4. Runtime data flow
The package conceptually works by reading the device’s current screen width and height from the React Native runtime, then transforming inputs like 53% or 53 into absolute DP values. Those results are intended to be fed directly into style properties such as width, height, fontSize, margins, etc.
5. Orientation support boundary
Orientation handling is optional and separate from the basic percentage conversion path. When enabled, the library listens for dimension changes, updates its internal screen measurements, and triggers rerendering in the consuming component tree by exposing listener registration/removal methods.
6. Consumer integration patterns
The README shows two main integration styles:
- standard StyleSheet.create() usage
- styled-components usage
In both cases, the library is used at style-definition time, so responsive values are embedded directly in styles rather than computed in render logic.
7. Examples as architecture documentation
The examples/ directory contains three self-contained React Native sample apps:
- responsive-screen
- responsive-screen-orientation-change
- responsive-screen-styled-components
These demonstrate the three main usage modes and act as living integration tests for the package.
8. Example app structure
Each example is its own React Native app with:
- its own package.json
- App.js
- App.test.js
- RN config files like app.json, .babelrc, .watchmanconfig
They are isolated from the library core, showing how the package behaves when embedded in real apps.
9. Technology boundary
The repo is tightly bound to React Native APIs and concepts, especially screen dimensions and style props. Its behavior depends on the mobile runtime’s notion of device width/height and on React Native’s DP-based styling model.
10. Typing and compatibility layer
The presence of both Flow and TypeScript declaration files indicates the package is designed to be consumed from multiple typing ecosystems without extra setup. This is part of the public contract, not an implementation detail.
11. Testing and validation
The repository does not appear to include a central test suite for the library itself in the tree shown; instead, confidence is built through the example apps and their tests. Architecturally, the examples are the validation harness for the library’s responsive behavior.
12. Overall diagram shape
A good architecture diagram would show:
- React Native app code importing the package
- the package converting screen dimensions to DP values
- optional orientation listeners feeding updated dimensions back into consumers
- separate example apps demonstrating the integration patterns
There is no data persistence, networking, or external service layer beyond the mobile runtime itself.
Main entry points: index.js Width DP · responsive-screen/App.js Basic example · responsive-screen-styled-components/App.js Styled example · package.json Package root
Components 17
Library
Core distributable package at the repository root.
- Package root · Top-level distributable for the responsive screen utility.
package.json - Runtime API · Main runtime entry point exporting the percentage-to-DP helpers and orientation listener API.
index.js - Width DP · Converts screen-relative width percentages into React Native DP values.
index.js - Height DP · Converts screen-relative height percentages into React Native DP values.
index.js - Orientation · Optional dimension-change handling that updates measurements and notifies consumers.
index.js - Listen change · Registers orientation or dimension change listeners for consuming components.
index.js - Remove change · Removes previously registered orientation or dimension listeners.
index.js
Examples
Standalone React Native apps demonstrating the library in practice.
- Basic example · Standard StyleSheet.create usage of the responsive helpers.
examples/responsive-screen/App.js - Orientation example · Demonstrates listening for dimension changes and updating layouts.
examples/responsive-screen-orientation-change/App.js - Styled example · Shows integration with styled-components at style-definition time.
examples/responsive-screen-styled-components/App.js - Basic test · Example app test coverage for the standard usage mode.
examples/responsive-screen/App.test.js - Orient test · Example app test coverage for orientation-change behavior.
examples/responsive-screen-orientation-change/App.test.js - Styled test · Example app test coverage for styled-components integration.
examples/responsive-screen-styled-components/App.test.js
Typing
Public type definition files for multiple ecosystems.
- TypeScript defs · TypeScript declaration file for the public API.
index.d.ts - Flow defs · Flow type definition file for the public API.
index.js.flow
Other components
- React Native · Provides screen dimensions, style props, and DP-based layout behavior.
- Style usage · Responsive values are embedded directly in style definitions such as width, height, fontSize, and margins.
Connections 24
- Package root → Runtime API: exports · The package root exposes the runtime module.
- Package root → TypeScript defs: types · TypeScript consumers use the declaration file.
- Package root → Flow defs: flow types · Flow consumers use the Flow definition file.
- Runtime API → Width DP: provides · Exports the width conversion helper.
- Runtime API → Height DP: provides · Exports the height conversion helper.
- Runtime API → Orientation: provides · Exports the optional orientation handling layer.
- Orientation → Listen change: registers · Adds dimension or orientation listeners.
- Orientation → Remove change: unregisters · Removes dimension or orientation listeners.
- Width DP → React Native: reads width · Uses React Native screen width to compute DP values.
- Height DP → React Native: reads height · Uses React Native screen height to compute DP values.
- Orientation → React Native: subscribes · Listens for runtime dimension changes.
- Width DP → Style usage: feeds · Outputs values intended for style properties.
- Height DP → Style usage: feeds · Outputs values intended for style properties.
- Listen change → Orientation example: used by · Orientation example demonstrates listener registration.
- Remove change → Orientation example: used by · Orientation example demonstrates listener cleanup.
- Width DP → Basic example: used by · Basic example uses the conversion helpers in StyleSheet definitions.
- Height DP → Basic example: used by · Basic example uses the conversion helpers in StyleSheet definitions.
- Width DP → Styled example: used by · Styled-components example uses width conversion in style definitions.
- Height DP → Styled example: used by · Styled-components example uses height conversion in style definitions.
- Basic example → Basic test: validated by · Example app has a companion test file.
- Orientation example → Orient test: validated by · Example app has a companion test file.
- Styled example → Styled test: validated by · Example app has a companion test file.
- Basic example → Style usage: illustrates · Demonstrates standard StyleSheet.create integration.
- Styled example → Style usage: illustrates · Demonstrates styled-components integration.