# Angular Native > Angular components rendering real native iOS and Android views, with React never in the render path. Angular components render real iOS and Android views on React Native's Fabric renderer, with an Expo app around them. Templates use lowercase element names from `@ng-native/components` (``, ``, ``), styled with React Native style objects, component CSS or Tailwind. There is no DOM. ## Guide - [Getting started](https://ng-native.com/guide/getting-started.md): Create an Expo app, render your first Angular component as native views, and run its test. - [Existing apps](https://ng-native.com/guide/manual-setup.md): Wiring the framework into an Expo app you already have, one file at a time. - [How it compares](https://ng-native.com/guide/comparison.md): Where this sits next to React Native, NativeScript, Ionic and Flutter, and why. - [Theming and Tailwind](https://ng-native.com/guide/theming.md) - [Build a form](https://ng-native.com/guide/forms.md): Signal Forms over native controls, validated and submitted, with no adapter code. - [Working offline](https://ng-native.com/guide/offline.md): Show the cache, fetch when online, fall back to the cache offline, queue writes for later. - [Localisation](https://ng-native.com/guide/localisation.md): Ship an app in more than one language with Angular's own i18n, translated at runtime. - [Extracting messages](https://ng-native.com/guide/localisation-extraction.md): Pull messages.json out of a Metro bundle with localize-extract, then translate a copy of it. - [Loading a language](https://ng-native.com/guide/localisation-loading.md): Decide LOCALE_ID and load its translations before the app's first frame. - [Switching language](https://ng-native.com/guide/localisation-switching.md): Restart the JavaScript to change LOCALE_ID in the app, or let the system do it. - [Formatting and RTL](https://ng-native.com/guide/localisation-formatting.md): Dates, numbers and currency from Angular's locale data, and mirroring a layout for Arabic. - [Shipping](https://ng-native.com/guide/shipping.md): Development builds, release builds, signing, EAS Build and local builds, and submitting to a store. ## Concepts - [Architecture](https://ng-native.com/guide/architecture.md) - [Native and web](https://ng-native.com/guide/native-and-web.md) - [Known limitations](https://ng-native.com/guide/limitations.md): What the alpha does not do yet, and the workaround for each. - [AI](https://ng-native.com/guide/ai-assistants.md): What a coding agent needs to build with Angular Native, and where it finds it. ## Packages - [Components](https://ng-native.com/packages/components.md): The React Native element set as Angular components, one per native view. - [Layout and views](https://ng-native.com/packages/components/layout.md): , Yoga's flexbox defaults, and safe area insets. - [Safe area](https://ng-native.com/packages/components/safe-area.md): Keep content clear of the notch, status bar and home indicator with safe-area-provider and safe-area-view. - [Scroll view](https://ng-native.com/packages/components/scroll-view.md): , its content container, sticky headers, and pull-to-refresh. - [Keyboard-avoiding view](https://ng-native.com/packages/components/keyboard-avoiding-view.md): moves its content clear of the on-screen keyboard. - [Lists](https://ng-native.com/packages/components/lists.md): and , the windowed replacement for FlatList and SectionList. - [Text](https://ng-native.com/packages/components/text.md): , why text cannot be bare, and how fonts and truncation work. - [Image](https://ng-native.com/packages/components/image.md): , sources at several scales, and alt text as the accessibility label. - [Activity indicator](https://ng-native.com/packages/components/activity-indicator.md): , a native spinner, and why it needs an explicit size. - [Text input](https://ng-native.com/packages/components/input.md): , keyboards, and the props a browser has no name for. - [Switch](https://ng-native.com/packages/components/switch.md): , a native toggle wired for Signal Forms, controlled the way React Native's is. - [Pressable](https://ng-native.com/packages/components/pressable.md): , , and the touch responder negotiation behind them. - [Gestures](https://ng-native.com/packages/components/gestures.md): react-native-gesture-handler's pans, pinches and rotations, without React. - [Modal](https://ng-native.com/packages/components/modal.md): , presented over everything else, shown and hidden with [visible] or @if. - [Animation](https://ng-native.com/packages/components/animation.md): Plain CSS, AnimatedStyle, and Reanimated worklets - and when to reach for each. - [Router](https://ng-native.com/packages/router.md): Angular's own Router, driving a real native stack, native tabs and a native header. - [Screens and navigation](https://ng-native.com/packages/router/screens.md): Pushing, replacing, presenting and resetting a native stack through NativeNavigation. - [The native header](https://ng-native.com/packages/router/header.md): NativeHeader and NativeHeaderItem, where their default colours come from, and withHeaderDefaults. - [Tabs](https://ng-native.com/packages/router/tabs.md): NativeTabsOutlet renders a real tab bar, with each tab declared as content. - [Device](https://ng-native.com/packages/device.md): Signal-based services for screen size, colour scheme, safe areas and the rest of the host. - [Screen](https://ng-native.com/packages/device/screen.md): The window `Screen` tracks, the physical display, orientation, and the `compact` breakpoint. - [Safe area](https://ng-native.com/packages/device/safe-area.md): The insets `SafeArea` reports, and how `` feeds them in. - [Colour scheme](https://ng-native.com/packages/device/color-scheme.md): Light or dark mode, as the user set it, for the decisions CSS cannot make. - [Accessibility](https://ng-native.com/packages/device/accessibility.md): The screen reader, reduced motion, bold text and font scale settings `Accessibility` reports. - [Direction](https://ng-native.com/packages/device/direction.md): Which way round the world is, for the TypeScript the cascade cannot decide. - [Status bar](https://ng-native.com/packages/device/status-bar.md): A stack of claims on the status bar's style, visibility and colour, not a setter. - [Keyboard](https://ng-native.com/packages/device/keyboard.md): The software keyboard's height, position and animation timing. - [Hardware back](https://ng-native.com/packages/device/hardware-back.md): Claiming Android's hardware back button, and letting the platform decide when nobody does. - [App state](https://ng-native.com/packages/device/app-state.md): Whether the app is in front of the user, for anything that should stop when it is not. - [Deep links](https://ng-native.com/packages/device/deep-links.md): The url an app was launched with, and every link that arrives while it runs, as paths. - [Android permissions](https://ng-native.com/packages/device/android-permissions.md): A common shape for Android's runtime permissions, granted outright on iOS. - [Layout animation](https://ng-native.com/packages/device/layout-animation.md): Animating a layout change - a list insertion, a row leaving - which CSS cannot express. - [Dialogs](https://ng-native.com/packages/device/dialogs.md): The platform's own alert, confirmation, prompt, action sheet and toast, as promises. - [Sharing](https://ng-native.com/packages/device/sharing.md): The system share sheet, and what its result does and does not confirm. - [Vibration](https://ng-native.com/packages/device/vibration.md): The phone's motor - for an alarm, a timer or an incoming call, not for button feedback. - [Dev menu](https://ng-native.com/packages/device/dev-menu.md): Adding switches to the shake menu in development, gone entirely in a release build. - [Expo](https://ng-native.com/packages/expo.md): Angular services over Expo's native modules - battery, haptics, storage and more. - [Using a module](https://ng-native.com/packages/expo/using-a-module.md): Install the Expo module, import its service by entry point, and what happens without it. - [Permissions](https://ng-native.com/packages/expo/permissions.md): Permission turns any Expo module's get/request pair into signals. - [Battery](https://ng-native.com/packages/expo/battery.md): The battery level, charging state and Low Power Mode, as signals. - [Brightness](https://ng-native.com/packages/expo/brightness.md): Set and restore the app's own screen brightness, for a boarding pass or a QR code. - [Network](https://ng-native.com/packages/expo/network.md): Connection type and a reachability estimate, as signals - not proof a request will land. - [Device orientation](https://ng-native.com/packages/expo/orientation.md): The screen orientation, and locking it, through expo-screen-orientation. - [Locale](https://ng-native.com/packages/expo/locale.md): The user's preferred locales and calendar settings, kept current as they change. - [Sensors](https://ng-native.com/packages/expo/sensors.md): Accelerometer, gyroscope, magnetometer, device motion, barometer and light, one shape. - [Keep awake](https://ng-native.com/packages/expo/keep-awake.md): Hold the screen on with a tag, for as long as something needs it and no longer. - [App info](https://ng-native.com/packages/expo/app-info.md): The app's version, build and identifier, and the device it is running on, as plain values. - [Haptics](https://ng-native.com/packages/expo/haptics.md): Impact, notification and selection feedback, fired and forgotten. - [Clipboard](https://ng-native.com/packages/expo/clipboard.md): Read and write the pasteboard, and count changes without prompting for them. - [Notifications](https://ng-native.com/packages/expo/notifications.md): The notification that launched the app, the one just tapped, and a push token for your server. - [Storage](https://ng-native.com/packages/expo/storage.md): A persisted value as a two-way signal, backed by AsyncStorage or the keychain. - [File system](https://ng-native.com/packages/expo/file-system.md): The cache and document directories, and the create-then-write dance a first write needs. - [Database](https://ng-native.com/packages/expo/database.md): A SQLite database, opened on first use, migrated before the first query sees it. - [Assets](https://ng-native.com/packages/expo/assets.md): Bundled images, downloaded before they are needed, as an Angular resource. - [Image picker](https://ng-native.com/packages/expo/image-picker.md): Pick a photo from the library, or take one with the system camera. - [Camera](https://ng-native.com/packages/expo/camera.md): on screen, and a picture taken from it without a React ref. - [Video and audio player](https://ng-native.com/packages/expo/player.md): videoPlayer()/audioPlayer(), released on destroy, and the view. - [Location](https://ng-native.com/packages/expo/location.md): A position signal, filled once by current() or continuously by start(). - [Maps](https://ng-native.com/packages/expo/maps.md): - Apple Maps on iOS and Google Maps on Android, with markers, shapes, a camera and taps. - [Biometrics](https://ng-native.com/packages/expo/biometrics.md): Face ID, Touch ID and fingerprint unlock through one authenticate() call. - [Browser](https://ng-native.com/packages/expo/browser.md): An in-app browser, and a sign-in session through expo-web-browser. - [On-device AI](https://ng-native.com/packages/expo/language-model.md): The language model the phone already has, as a service - Apple Foundation Models and Gemini Nano. - [Fonts](https://ng-native.com/packages/expo/fonts.md): Registering a stylesheet's custom fonts with the platform before the app mounts. - [Splash screen](https://ng-native.com/packages/expo/splash-screen.md): Holding the native splash until the app has something worth showing, and letting it go. - [Updates](https://ng-native.com/packages/expo/updates.md): Checking for and downloading an OTA update, and applying it on the app's own terms. - [Native views](https://ng-native.com/packages/expo/native-views.md): Register an Expo module's view, or a community library's, as an element by name. - [Expo UI](https://ng-native.com/packages/expo/expo-ui.md): Real SwiftUI and Jetpack Compose controls as elements, inside a . - [DOM components](https://ng-native.com/packages/expo/dom-components.md): An Angular component rendered by a browser, in a web view, inside a native screen - with its inputs and outputs bound from native. - [Testing](https://ng-native.com/packages/testing.md): Testing Library for native components, in Node, with no simulator and no device. - [Setup](https://ng-native.com/packages/testing/setup.md): Vitest or node:test, what the compile step does, and what to do when a test will not load. - [Writing a test](https://ng-native.com/packages/testing/writing-a-test.md): Render, query, interact and assert - the recipes for forms, async work, services, HTTP, the router and styling follow. - [Testing a form](https://ng-native.com/packages/testing/testing-forms.md): Typing into a field, touched state, and a field a form has disabled. - [Testing async work](https://ng-native.com/packages/testing/testing-async.md): findBy* queries and waitFor, for whatever arrives after the first frame. - [Testing with services](https://ng-native.com/packages/testing/testing-services.md): Replacing an injected dependency with a stand-in for the test. - [Testing HttpClient](https://ng-native.com/packages/testing/testing-http.md): Answering a request from the test instead of the network, with HttpTestingController. - [Testing the router](https://ng-native.com/packages/testing/testing-navigation.md): Pushing a screen on the native stack, route parameters as inputs, and native router features. - [Testing styles](https://ng-native.com/packages/testing/testing-styling.md): A component's own CSS with nothing extra, and a global stylesheet passed to render(). - [API reference](https://ng-native.com/packages/testing/api.md): Every export of @ng-native/testing, the query matrix, and the exact events each interaction sends. - [End-to-end tests](https://ng-native.com/packages/testing/end-to-end.md): Driving the real app on a simulator with Maestro, in Expo Go or a development build. - [Tailwind](https://ng-native.com/packages/tailwind.md): A Tailwind v4 preset for native, plus the variants a touch device needs. - [Variants](https://ng-native.com/packages/tailwind/variants.md): Platform, dark-mode, hover and focus-visible variants, and what they mean on native. - [Safe area and hairlines](https://ng-native.com/packages/tailwind/utilities.md): Utility classes for safe-area insets and the thinnest line a screen can show. - [Icons](https://ng-native.com/packages/icons.md): Render an ng-icons icon set as real native shapes with NgIcon. - [Web](https://ng-native.com/packages/web.md): Run the same Angular components in a browser through mount - previews, docs, demos. - [Islands](https://ng-native.com/packages/web/islands.md): Angular Native components inside an existing Angular web app, or as separate apps on one page. - [Web limits](https://ng-native.com/packages/web/limits.md): The router, worklet animation and gesture handling have no browser build. - [Platform](https://ng-native.com/packages/platform.md): The seam that bootstraps an Angular app onto a native screen, not a DOM. - [Bootstrapping](https://ng-native.com/packages/platform/bootstrapping.md): What mount() takes, what it returns, and what it puts in the injector. - [The renderer](https://ng-native.com/packages/platform/renderer.md): What NativeRendererFactory and NativeRenderer do with a component once it exists. - [Fabric](https://ng-native.com/packages/fabric.md): The retained tree, native view mapping and CSS engine underneath every rendered screen. - [The CSS engine](https://ng-native.com/packages/fabric/css-engine.md): How component stylesheets get compiled, matched and cascaded with no DOM involved. - [Supported CSS](https://ng-native.com/packages/fabric/supported-css.md): A scannable reference for what compiles to native and what is dropped with a build warning. - [Animations](https://ng-native.com/packages/fabric/animation.md): How transitions, animate.enter/leave and @keyframes actually run with no DOM. - [Metro](https://ng-native.com/packages/metro.md): The Babel transformer that compiles Angular ahead of time and turns CSS into a rule set. - [Configuration](https://ng-native.com/packages/metro/configuration.md): What withAngularNative wires up, and how component CSS and hot reload work. - [Angular CLI](https://ng-native.com/packages/schematics.md): ng add for an Angular CLI workspace, with a native app beside the web one that ng serve, ng build and ng test run. - [Nx](https://ng-native.com/packages/nx.md): nx add and an app generator for an Nx workspace, with Expo's targets inferred by @nx/expo's plugin. ## Optional - [Everything above in one file](https://ng-native.com/llms-full.txt) - [Rules for a coding agent, as an app's AGENTS.md](https://ng-native.com/agents.md)