@ng-native/components

The React Native element set as Angular components: <view>, <text>, <scroll-view>, <text-input> and the rest, each committing as a real native view through React Native's Fabric renderer.

Alpha: APIs may change before 1.0.

Install

Most apps start from npx create-expo-app@latest my-app --template @ng-native/template, which already has this and its peers set up. Otherwise:

npm install @ng-native/components
npm install @angular/core react-native

react-native-gesture-handler and react-native-reanimated are optional peers, needed only for gestures and Reanimated worklets.

Example

import { Component, input } from '@angular/core';
import { View, Text } from '@ng-native/components';

@Component({
  selector: 'app-greeting',
  imports: [View, Text],
  template: `
    <view>
      <text>Hello, {{ name() }}</text>
    </view>
  `,
})
export class Greeting {
  readonly name = input('there');
}

A template that writes <scroll-view> needs ScrollView in its imports; without it, the element renders as a plain, unstyled view and logs a console warning in development.

What's in the package

• . - View, Text, ScrollView, TextInput, Pressable, Image, Switch, ActivityIndicator, Modal, VirtualList, SafeAreaProvider, SafeAreaView, and the event payload types (LayoutEvent, TouchEvent, ScrollEvent, and more).
• ./gestures - React Native Gesture Handler bindings.
• ./animations - AnimatedStyle, Animated and Easing: React Native's graph on a device, a React-free one with the same API in a browser build.
• ./reanimated - Reanimated worklet bindings.

These three are separate entry points because each reaches into React Native's own uncompiled source, which Node cannot parse; importing them from the main entry point would break loading this package under Node (tests, tooling).

Docs

• Components
• Layout, scroll view, keyboard-avoiding view, lists, text, image, activity indicator, text input, switch, pressable, gestures, modal and animation
• Root README and ARCHITECTURE.md

License

MIT