React Native Troika

React Native Troika is a collection of native UI components designed to extend React Native capabilities. The available packages include:

• @sdcx/nested-scroll: Implements nested scrolling, compatible with PagerView, TabView, etc.
• @sdcx/pull-to-refresh: Provides pull-to-refresh capabilities with customization at the React layer.
• @sdcx/bottom-sheet: A port of Android's BottomSheetBehavior to React Native, supporting both Android and iOS. The 1.x version supports the New Architecture (RN >= 0.82).
• @sdcx/activity-indicator: Provides an iOS-style activity indicator for Android.
• @sdcx/image-crop: A specialized View for image cropping (e.g., avatars) that allows for easy custom layout integration.
• @sdcx/keyboard-insets: Handles soft keyboard overlapping issues. It features an automatic mode that requires no extra code and can be used to build chat-like interfaces.
• @sdcx/overlay: A native UI infrastructure that floats above the app, used for implementing Modals, Alerts, Toasts, Popovers, Notifications, and Hoverballs.
• @sdcx/wheel-picker: A simple wheel picker component.

NestedScrollView is a native UI component designed to coordinate vertical scrolling between a top-level scrollable view and nested scrollable views (like FlatList, ScrollView, or WebView).

It is typically used in a structure where:

1. The outermost layer is the NestedScrollView.
2. The header is provided by NestedScrollViewHeader.
3. The middle layer is a horizontally scrollable view (like a PagerView or a horizontal ScrollView).
4. The innermost layer contains vertical scrollable components.

Crucial for Android: The implementation is based on the Android NestedScrolling API. You must enable the nestedScrollEnabled prop on your innermost list components (e.g., FlatList, ScrollView) for the coordination to work.

import { NestedScrollView, NestedScrollViewHeader } from '@sdcx/nested-scroll';

const App = () => {
  return (
    <NestedScrollView>
      <NestedScrollViewHeader stickyHeaderBeginIndex={1}>
        <Image />
        <TabBar />
      </NestedScrollViewHeader>
      <PagerView>
        {/* Remember to set nestedScrollEnabled={true} on Android lists */}
        <FlatList nestedScrollEnabled />
        <ScrollView nestedScrollEnabled />
        <WebView />
      </PagerView>
    </NestedScrollView>
  );
};

You can implement pull-to-refresh in two functionally identical ways.

1. Using PullToRefresh wrapper: Wrap your scrollable component (e.g., FlatList, ScrollView, WebView) with the PullToRefresh component.
2. Using RefreshControl: Pass a RefreshControl component to the refreshControl prop of your list.

CRITICAL (Android): Because this library is based on the Android NestedScrolling API, you must enable the nestedScrollEnabled prop on your list component (e.g., <FlatList nestedScrollEnabled ... />).

import { PullToRefresh } from '@sdcx/pull-to-refresh';
import { FlatList, Text } from 'react-native';
import { useState } from 'react';

function App() {
  const [refreshing, setRefreshing] = useState(false);

  return (
    <PullToRefresh
      refreshing={refreshing}
      onRefresh={() => {
        setRefreshing(true);
        setTimeout(() => setRefreshing(false), 2000);
      }}
    >
      <FlatList
        nestedScrollEnabled
        data={Array.from({ length: 20 })}
        renderItem={({ item, index }) => <Text>{index}</Text>}
        keyExtractor={(item, index) => index.toString()}
      />
    </PullToRefresh>
  );
}

1. Setup

• Rename your module file from .m to .mm.
• Run bundle exec pod install to generate the C++ glue code.

2. Implement the Module

• Your class must conform to the generated NativeOverlaySpec protocol.
• You must implement getTurboModule to return an instance of NativeOverlaySpecJSI.

3. Emit Events

• Your class should inherit from the generated NativeOverlaySpecBase class. This base class provides the emit<EventName>: methods.

4. Lifecycle Management

• Implement the RCTInitializing and RCTInvalidating protocols.
• Use the initialize and invalidate methods to manage state and resources.

// RNOverlayModule.mm
RCT_EXPORT_MODULE(OverlayHost)

- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:(const facebook::react::ObjCTurboModule::InitParams &)params {
  return std::make_shared<facebook::react::NativeOverlaySpecJSI>(params);
}

// Lifecycle implementation
- (void)initialize {
    // Initialization logic
}

- (void)invalidate {
    // Resource cleanup
}