React Native Screens Documentation Site

Docusaurus-based documentation website for React Native Screens enabling native screen components for React Native applications.

Project Overview

React Native Screens is directly used in React Navigation and Expo Router libraries, making it one of the most essential libraries in the React Native ecosystem.

Project Configuration

package.json

{
  "name": "docs",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "docusaurus": "docusaurus",
    "start": "docusaurus start",
    "build": "docusaurus build",
    "swizzle": "docusaurus swizzle",
    "deploy": "docusaurus deploy",
    "clear": "docusaurus clear",
    "serve": "docusaurus serve",
    "write-translations": "docusaurus write-translations",
    "write-heading-ids": "docusaurus write-heading-ids"
  },
  "dependencies": {
    "@docusaurus/core": "3.7.0",
    "@docusaurus/plugin-google-tag-manager": "3.7.0",
    "@docusaurus/preset-classic": "3.7.0",
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.0",
    "@mdx-js/react": "^3.0.0",
    "@mui/material": "^7.1.0",
    "@swmansion/t-rex-ui": "1.0.0",
    "clsx": "^2.1.0",
    "prettier": "^2.8.4",
    "prism-react-renderer": "^2.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

Docusaurus Configuration

• Title: React Native Screens
• Favicon: img/favicon.ico
• URL: https://docs.swmansion.com
• Base URL: /react-native-screens/
• Organization: software-mansion
• Project: react-native-screens
• i18n: English only (default locale)
• Plugins: Google Tag Manager (GTM-MRHMWWNL)

Babel Configuration

module.exports = {
  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
};

Sidebar Configuration

const sidebars = {
  tutorialSidebar: [{ type: 'autogenerated', dirName: '.' }],
};

Typography System

Font Families

• Title/Heading Font: Aeonik (Regular, Medium, Bold)
• Body Font: Aeonik
• Code Font: DM Mono

Font Specifications

@font-face {
  font-family: 'Aeonik';
  src: url('/static/fonts/Aeonik-Regular.otf') format('opentype');
  font-weight: 400;
}

@font-face {
  font-family: 'DM Mono';
  src: url('/static/fonts/DMMono-Regular.ttf') format('truetype');
  font-weight: 400;
}

Type Scale

• H1: 42px
• H2: 32px
• H3: 22px
• Heading smaller: 18px
• Code: 90% of base

Heading Styles

h1 {
  line-height: 1.15;
  letter-spacing: 0.02em;
}

h2 {
  line-height: 1.2;
}

h3, h4, h5 {
  line-height: 1.3;
}

Color Palette

Navy (Primary)

| Token | Light | Dark | |-------|-------|------| | 100 | #001a72 | #001a72 | | 80 | #33488e | #0a2688 | | 60 | #6676aa | #7485bd | | 40 | #919fcf | #abbcf5 | | 20 | #c1c6e5 | #c1c6e5 | | 10 | #eef0ff | - |

Purple (Accent)

| Token | Light | Dark | |-------|-------|------| | 100 | #782aeb | #b07eff | | 80 | #b58df1 | #c49ffe | | 60 | #d1bbf3 | #d0b2ff | | 40 | #e8dafc | #e9dbff | | 20 | #f5eeff | - |

Blue

| Token | Light | Dark | |-------|-------|------| | 100 | #38acdd | #00a9f0 | | 80 | #5bb9e0 | #6fcef5 | | 60 | #87cce8 | #a8dbf0 | | 40 | #b5e1f1 | #d7f0fa | | 20 | #e1f3fa | - |

Green

| Token | Light | Dark | |-------|-------|------| | 100 | #57b495 | #3fc684 | | 80 | #82cab2 | #7adead | | 60 | #b1dfd0 | #a0dfc0 | | 40 | #dff2ec | #d3f5e4 | | 20 | #ebfcf7 | - |

Red

| Token | Light | Dark | |-------|-------|------| | 100 | #ff6259 | #ff7774 | | 80 | #fa7f7c | #ff8b88 | | 60 | #ffa3a1 | #ffb4b2 | | 40 | #ffd2d7 | #ffdcdb | | 20 | #ffedf0 | - |

Yellow

| Token | Light | Dark | |-------|-------|------| | 100 | #ffd61e | #ffdd44 | | 80 | #ffe04b | #ffe678 | | 60 | #ffe780 | #fff1b2 | | 40 | #fff1b2 | #fff9db | | 20 | #fffae1 | - |

Background Colors

• Off White: #f8f9ff
• White: #fcfcff
• Light Off Navy: #30354a
• Off Navy: #272b3c
• Navy: #232736

Landing Page Structure

Hero Section

The hero section displays the main heading with React Native Screens branding:

• Main heading: "React Native Screens"
• Subheading: "Native Navigation primitives for your React Native app"
• Call-to-action button linking to React Navigation documentation

Overview Section

Three feature tiles explaining the core value propositions:

1. Truly Native

   • Uses native APIs and Fragment on Android
   • Same performance as native apps
   • Consistent behavior across platforms

2. Customisable

   • Freely change appearance of defined paths
   • Control orientation and animations
   • Change presentation types with single property

3. Multiplatform

   • iOS, Android, Web, tvOS, Windows, Vision Pro
   • No platform limitations

Multiplatform Carousel

Animated carousel displaying platform icons:

• VR
• Phone
• Laptop
• TV

Downloads Section

• Download counter: "+1 000 000 / week"
• Direct usage in React Navigation and Expo Router
• Sponsor logos: React Navigation, Expo Router

Learn More Section

• Fabric migration announcement
• Link to blog post about Fabric architecture

Testimonials

Community testimonials from React Native experts:

| Author | Company | Quote | |--------|---------|-------| | Satyajit Sahoo | Callstack | "React Navigation wouldn't be the same today without React Native Screens" | | Ferran Negre | FitHero | "I would never build a serious React Native app without it" | | Sebastien Lorber | This Week In React | "React Native Screens is what makes React Native navigation truly competitive" | | Jamon Holmgren | Infinite Red | "Most underrated React Native libraries" | | Kwesi Kay | - | "Game-changer for performance optimization" | | Brent Vatne | Expo | "One of the most essential libraries in the ecosystem" |

Sponsors

• Expo
• Shopify

Footer Background

Visual footer element with branding.

Theme Configuration

MUI Theme (muiTheme.tsx)

Custom MUI theme configuration for the documentation site.

Navbar Theme (Navbar/index.js)

Custom navbar styling and behavior.

Footer Theme (Footer/index.js)

Custom footer component and styling.

Root Component (Root.js)

Root layout wrapper for the theme provider.

Custom Hooks

useScreenSize

Custom hook for responsive design based on screen dimensions.

usePageType

Custom hook for determining the current page type (docs, blog, etc.).

Styling Patterns

CSS Variables

All styling uses CSS custom properties for theming:

:root {
  --swm-background: var(--swm-white);
  --swm-off-background: var(--swm-off-white);
  --ifm-background-color: var(--swm-background);
}

Dark Mode Support

Dark mode enabled with data-theme='dark' attribute:

:root[data-theme='dark'] {
  --swm-background: var(--swm-navy-dark-140);
  --ifm-font-color-base: var(--swm-navy-light-10);
}

Component Styles

• CSS Modules for component-scoped styles
• styles.module.css files for each component
• Consistent padding and margin patterns

Static Assets

Images (static/img/)

• favicon.ico
• overview-native.png
• overview-customisable.png
• overview-multiplatform.png
• og-image.png
• logo.svg, logo-dark.svg
• github.svg
• expo.svg, expo-dark.svg
• shopify.svg, shopify-dark.svg
• react-navigation.svg
• vr.svg, phone.svg, laptop.svg, tv.svg
• arrow-right-hero.svg

Fonts (static/fonts/)

• Aeonik-Regular.otf
• Aeonik-Medium.otf
• Aeonik-Bold.otf
• DMMono-Regular.ttf

Key Implementation Details

Component Composition

Home
├── LandingBackground
├── StartScreen
├── Downloads
├── Overview
│   ├── OverviewTile (x3)
│   └── Multiplatform
├── LearnMore
├── Testimonials
│   └── TestimonialList
│       └── TestimonialItem (x6)
├── Sponsors
├── FooterBackground
└── HireUsSection (from t-rex-ui)

Navigation Links

• Docs: React Navigation native-stack-navigator documentation
• GitHub: software-mansion/react-native-screens repository

Performance Features

• Fabric renderer support (first React Navigation library to migrate)
• Native screen optimization
• Memory-efficient screen transitions
• 60fps navigation animations

Browser Support

• Production: >0.5% market share, not dead, not op_mini all
• Development: Last 1 version of Chrome, Firefox, Safari
• Node.js: >=18.0