dart_node_react_native: Only 11 of 50+ core components wrapped — no animations, no keyboard handling, no modals

[MelbourneDeveloper]

Summary

dart_node_react_native wraps only 11 of 50+ React Native core components. Missing components include animations, keyboard handling, modals, platform detection, and styling — features required by every production mobile app. The npmComponent() escape hatch works but removes the type safety that is the entire point of the package.

What exists today (11 components)

Component	Status
View	Typed wrapper
Text	Typed wrapper
TextInput	Typed wrapper
TouchableOpacity	Typed wrapper
Button	Typed wrapper
ScrollView	Typed wrapper
SafeAreaView	Typed wrapper
ActivityIndicator	Typed wrapper
FlatList	Typed wrapper
Image	Typed wrapper
Switch	Typed wrapper

Plus: AppRegistry, typed NavigationProp/RouteProp, npmComponent()/npmComponentSafe(), Paper UI wrappers.

What's missing — grouped by priority

P0: Apps look/feel broken without these

Animations — Animated + LayoutAnimation

• Animated.View, Animated.Text, Animated.Image, Animated.ScrollView
• Animated.timing(), Animated.spring(), Animated.decay()
• Animated.parallel(), Animated.sequence(), Animated.stagger()
• Animated.Value, Animated.ValueXY
• LayoutAnimation.configureNext()
• useAnimatedValue hook (from Reanimated if wrapping that too)

Impact: A mobile app without animations looks broken. Every production RN app uses animations for transitions, loading states, list insertions, and micro-interactions. This is the single biggest gap.

KeyboardAvoidingView

Impact: On iOS, any screen with a TextInput will have the keyboard cover the input field. This is a day-one bug for any form-based app. Every app with a login screen, registration form, or chat input needs this.

Modal

Impact: Cannot show confirmation dialogs, bottom sheets, date pickers, or any overlay UI without falling back to untyped npmComponent().

Alert

• Alert.alert(title, message, buttons)
  Impact: Cannot show native alert/confirmation dialogs. Standard UX for destructive actions (delete account, logout, etc.).

P1: Needed for real-world mobile apps

Pressable

The modern replacement for TouchableOpacity (recommended since RN 0.63). Supports pressed/focused/hovered states.

StatusBar

• Show/hide, light/dark content, background color, translucent
  Impact: Cannot control status bar appearance. Apps look unprofessional with default status bar.

Platform

• Platform.OS — 'ios' or 'android'
• Platform.Version — OS version number
• Platform.select({ios: ..., android: ...})
  Impact: Cannot write platform-specific code. iOS and Android have different conventions (back button, status bar, safe areas, fonts).

Dimensions

• Dimensions.get('window') / Dimensions.get('screen')
• useWindowDimensions() hook
  Impact: Cannot get screen dimensions for responsive layouts.

StyleSheet

• StyleSheet.create(styles) — validates and optimizes styles
• StyleSheet.flatten() — merge style arrays
• StyleSheet.absoluteFill / StyleSheet.hairlineWidth
  Impact: Must use raw JS objects for every style. No validation, no optimization, no IDE support.

RefreshControl

Impact: No pull-to-refresh on lists. Standard mobile UX pattern.

SectionList

Impact: No sectioned list support (contacts, settings screens, grouped data).

P2: Important for specific use cases

• Linking — open URLs, deep links, handle incoming URLs
• BackHandler (Android) — handle hardware back button
• Share — native share sheet
• Clipboard — read/write clipboard
• Vibration / haptics
• PermissionsAndroid — request runtime permissions
• Appearance — dark mode detection, useColorScheme() hook
• AppState — foreground/background detection
• AccessibilityInfo — screen reader detection
• VirtualizedList — custom virtualized list base class

Navigation gap

NavigationProp and RouteProp provide type-safe access to navigation state — this is well done. BUT:

You cannot define navigation structure from Dart. There are no wrappers for:

• createStackNavigator() / Stack.Navigator / Stack.Screen
• createBottomTabNavigator() / Tab.Navigator / Tab.Screen
• createDrawerNavigator() / Drawer.Navigator / Drawer.Screen
• NavigationContainer

The examples/mobile/ app defines its navigation structure in JavaScript and only uses Dart for screen components. A fully-Dart RN app is not possible without these.

Test gaps

Files: packages/dart_node_react_native/test/

The component tests only verify existence, not behavior:

test('view function exists', () {
  expect(view, isA<Function>());
});
test('text function exists', () {
  expect(text, isA<Function>());
});

These pass even if the functions produce completely wrong output. The component factory functions are never actually CALLED in these tests.

What IS properly tested:

• NavigationProp methods — tested with mock JS objects, verifying actual calls
• RouteProp accessors — tested with mock JS objects
• extractScreenProps edge cases
• npm module loading/caching
• TestNode tree traversal and querying

What has zero behavioral tests:

• All 11 component wrappers (view, text, textInput, etc.)
• Component prop passing
• Event handler binding
• Style application

Suggested implementation order

1. KeyboardAvoidingView — fixes broken forms, small API surface
2. Modal + Alert — unlocks standard mobile UX patterns
3. Platform + Dimensions + StyleSheet — foundational APIs used everywhere
4. Pressable — modern replacement for TouchableOpacity
5. StatusBar — small API, big visual impact
6. Navigation structure (createStackNavigator, NavigationContainer) — enables fully-Dart apps
7. Animated — largest API surface, biggest impact on app quality
8. Component behavioral tests — actually call the factory functions and verify output

Files to modify

• packages/dart_node_react_native/lib/src/components.dart — add new component wrappers
• packages/dart_node_react_native/lib/src/ — add new files: animated.dart, platform.dart, stylesheet.dart, navigation_structure.dart
• packages/dart_node_react_native/lib/dart_node_react_native.dart — export new modules
• packages/dart_node_react_native/test/ — add behavioral tests for all components