# marudy/react-native-responsive-screen architecture

> Architecture diagram of the GitHub repository marudy/react-native-responsive-screen, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-14). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/marudy/react-native-responsive-screen
- Repository: https://github.com/marudy/react-native-responsive-screen

## Overview

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`](https://github.com/marudy/react-native-responsive-screen/blob/master/index.js) (Width DP), [`examples/responsive-screen/App.js`](https://github.com/marudy/react-native-responsive-screen/blob/master/examples/responsive-screen/App.js) (Basic example), [`examples/responsive-screen-styled-components/App.js`](https://github.com/marudy/react-native-responsive-screen/blob/master/examples/responsive-screen-styled-components/App.js) (Styled example), [`package.json`](https://github.com/marudy/react-native-responsive-screen/blob/master/package.json) (Package root)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_root["Library"]
  node_package["Package root<br/>RN library<br/>[package.json]"]
  node_entry["Runtime API<br/>module entry<br/>[index.js]"]
  node_width_dp(("Width DP<br/>converter<br/>[index.js]"))
  node_height_dp(("Height DP<br/>converter<br/>[index.js]"))
  node_orientation(("Orientation<br/>listener layer<br/>[index.js]"))
  node_listen(("Listen change<br/>api<br/>[index.js]"))
  node_remove(("Remove change<br/>api<br/>[index.js]"))
end

subgraph group_examples["Examples"]
  node_ex_screen["Basic example<br/>sample app<br/>[App.js]"]
  node_ex_orient["Orientation example<br/>sample app<br/>[App.js]"]
  node_ex_styled["Styled example<br/>sample app<br/>[App.js]"]
  node_ex_screen_test["Basic test<br/>app test<br/>[App.test.js]"]
  node_ex_orient_test["Orient test<br/>app test<br/>[App.test.js]"]
  node_ex_styled_test["Styled test<br/>app test<br/>[App.test.js]"]
end

subgraph group_typing["Typing"]
  node_index_dts["TypeScript defs<br/>declarations<br/>[index.d.ts]"]
  node_index_flow["Flow defs<br/>declarations<br/>[index.js.flow]"]
end

node_rn_runtime[("React Native<br/>mobile runtime")]
node_styles["Style usage<br/>consumer boundary"]

node_package -->|"exports"| node_entry
node_package -->|"types"| node_index_dts
node_package -->|"flow types"| node_index_flow
node_entry -->|"provides"| node_width_dp
node_entry -->|"provides"| node_height_dp
node_entry -->|"provides"| node_orientation
node_orientation -->|"registers"| node_listen
node_orientation -->|"unregisters"| node_remove
node_width_dp -->|"reads width"| node_rn_runtime
node_height_dp -->|"reads height"| node_rn_runtime
node_orientation -->|"subscribes"| node_rn_runtime
node_width_dp -->|"feeds"| node_styles
node_height_dp -->|"feeds"| node_styles
node_listen -->|"used by"| node_ex_orient
node_remove -->|"used by"| node_ex_orient
node_width_dp -->|"used by"| node_ex_screen
node_height_dp -->|"used by"| node_ex_screen
node_width_dp -->|"used by"| node_ex_styled
node_height_dp -->|"used by"| node_ex_styled
node_ex_screen -->|"validated by"| node_ex_screen_test
node_ex_orient -->|"validated by"| node_ex_orient_test
node_ex_styled -->|"validated by"| node_ex_styled_test
node_ex_screen -->|"illustrates"| node_styles
node_ex_styled -->|"illustrates"| node_styles

click node_package "https://github.com/marudy/react-native-responsive-screen/blob/master/package.json"
click node_entry "https://github.com/marudy/react-native-responsive-screen/blob/master/index.js"
click node_width_dp "https://github.com/marudy/react-native-responsive-screen/blob/master/index.js"
click node_height_dp "https://github.com/marudy/react-native-responsive-screen/blob/master/index.js"
click node_orientation "https://github.com/marudy/react-native-responsive-screen/blob/master/index.js"
click node_listen "https://github.com/marudy/react-native-responsive-screen/blob/master/index.js"
click node_remove "https://github.com/marudy/react-native-responsive-screen/blob/master/index.js"
click node_index_dts "https://github.com/marudy/react-native-responsive-screen/blob/master/index.d.ts"
click node_index_flow "https://github.com/marudy/react-native-responsive-screen/blob/master/index.js.flow"
click node_ex_screen "https://github.com/marudy/react-native-responsive-screen/blob/master/examples/responsive-screen/App.js"
click node_ex_orient "https://github.com/marudy/react-native-responsive-screen/blob/master/examples/responsive-screen-orientation-change/App.js"
click node_ex_styled "https://github.com/marudy/react-native-responsive-screen/blob/master/examples/responsive-screen-styled-components/App.js"
click node_ex_screen_test "https://github.com/marudy/react-native-responsive-screen/blob/master/examples/responsive-screen/App.test.js"
click node_ex_orient_test "https://github.com/marudy/react-native-responsive-screen/blob/master/examples/responsive-screen-orientation-change/App.test.js"
click node_ex_styled_test "https://github.com/marudy/react-native-responsive-screen/blob/master/examples/responsive-screen-styled-components/App.test.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_package,node_entry,node_width_dp,node_height_dp,node_orientation,node_listen,node_remove toneBlue
class node_ex_screen,node_ex_orient,node_ex_styled,node_ex_screen_test,node_ex_orient_test,node_ex_styled_test toneAmber
class node_index_dts,node_index_flow toneMint
class node_rn_runtime,node_styles toneNeutral
```

## Components

### Library

Core distributable package at the repository root.

- [Package root](https://github.com/marudy/react-native-responsive-screen/blob/master/package.json): RN library · Top-level distributable for the responsive screen utility. · `package.json`
- [Runtime API](https://github.com/marudy/react-native-responsive-screen/blob/master/index.js): module entry · Main runtime entry point exporting the percentage-to-DP helpers and orientation listener API. · `index.js`
- [Width DP](https://github.com/marudy/react-native-responsive-screen/blob/master/index.js): converter · Converts screen-relative width percentages into React Native DP values. · `index.js`
- [Height DP](https://github.com/marudy/react-native-responsive-screen/blob/master/index.js): converter · Converts screen-relative height percentages into React Native DP values. · `index.js`
- [Orientation](https://github.com/marudy/react-native-responsive-screen/blob/master/index.js): listener layer · Optional dimension-change handling that updates measurements and notifies consumers. · `index.js`
- [Listen change](https://github.com/marudy/react-native-responsive-screen/blob/master/index.js): api · Registers orientation or dimension change listeners for consuming components. · `index.js`
- [Remove change](https://github.com/marudy/react-native-responsive-screen/blob/master/index.js): api · Removes previously registered orientation or dimension listeners. · `index.js`

### Examples

Standalone React Native apps demonstrating the library in practice.

- [Basic example](https://github.com/marudy/react-native-responsive-screen/blob/master/examples/responsive-screen/App.js): sample app · Standard StyleSheet.create usage of the responsive helpers. · `examples/responsive-screen/App.js`
- [Orientation example](https://github.com/marudy/react-native-responsive-screen/blob/master/examples/responsive-screen-orientation-change/App.js): sample app · Demonstrates listening for dimension changes and updating layouts. · `examples/responsive-screen-orientation-change/App.js`
- [Styled example](https://github.com/marudy/react-native-responsive-screen/blob/master/examples/responsive-screen-styled-components/App.js): sample app · Shows integration with styled-components at style-definition time. · `examples/responsive-screen-styled-components/App.js`
- [Basic test](https://github.com/marudy/react-native-responsive-screen/blob/master/examples/responsive-screen/App.test.js): app test · Example app test coverage for the standard usage mode. · `examples/responsive-screen/App.test.js`
- [Orient test](https://github.com/marudy/react-native-responsive-screen/blob/master/examples/responsive-screen-orientation-change/App.test.js): app test · Example app test coverage for orientation-change behavior. · `examples/responsive-screen-orientation-change/App.test.js`
- [Styled test](https://github.com/marudy/react-native-responsive-screen/blob/master/examples/responsive-screen-styled-components/App.test.js): app 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](https://github.com/marudy/react-native-responsive-screen/blob/master/index.d.ts): declarations · TypeScript declaration file for the public API. · `index.d.ts`
- [Flow defs](https://github.com/marudy/react-native-responsive-screen/blob/master/index.js.flow): declarations · Flow type definition file for the public API. · `index.js.flow`

### Other components

- **React Native**: mobile runtime · Provides screen dimensions, style props, and DP-based layout behavior.
- **Style usage**: consumer boundary · Responsive values are embedded directly in style definitions such as width, height, fontSize, and margins.

## Connections

- 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.