### Installation

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/bottom-sheet/README.md

Installs the @sdcx/bottom-sheet package using yarn and installs native dependencies using CocoaPods.

```bash
yarn install @sdcx/bottom-sheet
# &
pod install
```

--------------------------------

### Install react-native-keyboard-insets

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/keyboard-insets/README.md

Installs the library using Yarn. For iOS, a `pod install` is required after installation.

```bash
yarn add @sdcx/keyboard-insets
cd ios
pod install
```

--------------------------------

### Install PullToRefresh

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/pull-to-refresh/README.md

Instructions for installing the PullToRefresh package using Yarn and setting up native dependencies with CocoaPods.

```bash
yarn add @sdcx/pull-to-refresh
# &
pod install
```

--------------------------------

### Install ActivityIndicator

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/activity-indicator/README.md

Installs the ActivityIndicator package using Yarn.

```bash
yarn add @sdcx/activity-indicator
```

--------------------------------

### Installation

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/nested-scroll-webview/README.md

Installs the necessary packages for nested scrolling support. Ensure react-native-webview is installed before @sdcx/nested-scroll-webview.

```sh
yarn add react-native-webview
yarn add @sdcx/nested-scroll-webview
```

--------------------------------

### Install Overlay Package

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/overlay/README.md

Installs the Overlay package using Yarn and links native dependencies using CocoaPods. It also includes instructions for configuring `react-native.config.js` to properly integrate the native module.

```bash
yarn add @sdcx/overlay
pod install
```

--------------------------------

### Installation

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/image-crop/README.md

Installs the ImageCropView component using Yarn and Pods for React Native projects.

```bash
yarn add @sdcx/image-crop
# &
pod install
```

--------------------------------

### Installation

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/nested-scroll/README.md

Installs the @sdcx/nested-scroll package using Yarn and performs pod installation for iOS dependencies.

```sh
yarn add @sdcx/nested-scroll
# & 
pod install
```

--------------------------------

### Basic Usage Example

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/bottom-sheet/README.md

Demonstrates how to use the BottomSheet component in a React Native application. It shows how to import the component, render it with a ScrollView inside, and configure its peekHeight.

```tsx
import BottomSheet from '@sdcx/bottom-sheet'

const App = () => {
  return (
    <View style={styles.container}>
      <ScrollView>...</ScrollView>
      <BottomSheet peeekHeight={200}>
        {
          // 在这里放置你的内容，可以是任何组件，如：
        }
        <View />
        <PagerView>
          <FlatList nestedScrollEnabled />
          <ScrollView nestedScrollEnabled />
          <WebView />
        </PagerView>
      </BottomSheet>
    </View>
  )
}
```

--------------------------------

### Usage Example

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/image-crop/README.md

Demonstrates how to use the ImageCropView component in a React Native application, including style, file URI, cropping style, and callback for cropped image.

```javascript
<ImageCropView
    ref={imageCropViewRef}
    style={'your style'}
    fileUri={'your file uri'}
    cropStyle={'circular' | 'default'}
    onCropped={(uri: string) => {}}
    objectRect={objectRect}
  />
```

--------------------------------

### Using LoadMoreRefreshControl in FlatList

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/pull-to-refresh/README.md

Shows how to integrate the custom `LoadMoreRefreshControl` into a React Native `FlatList` component. This example demonstrates setting up the `refreshing` state and handling the `onRefresh` event to trigger a data load, effectively turning pull-to-refresh into a load-more mechanism.

```javascript
function App() {
  const [loadingMore, setLoadingMore] = useState(false)

  return (
    <FlatList
      nestedScrollEnabled
      refreshControl={
        <LoadMoreRefreshControl
          refreshing={loadingMore}
          onRefresh={() => {
            setLoadingMore(true)
            setTimeout(() => {
              setLoadingMore(false)
            }, 2000)
          }}
        />
      }
      data={Array.from({ length: 20 })}
      renderItem={({ item, index }) => <Text>{index}</Text>}
      keyExtractor={(item, index) => index.toString()}
    />
  )
}
```

--------------------------------

### Custom PullToRefreshHeader Implementation

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/pull-to-refresh/README.md

Provides an example of creating a custom header component for PullToRefresh. It utilizes `onStateChanged` and `onOffsetChanged` callbacks to manage the visual state and offset of the refresh indicator.

```tsx
import {
  PullToRefreshHeader,
  PullToRefreshHeaderProps,
  PullToRefreshOffsetChangedEvent,
  PullToRefreshStateChangedEvent,
  PullToRefreshState,
  PullToRefreshStateIdle,
  PullToRefreshStateRefreshing,
} from '@sdcx/pull-to-refresh'

export function CustomPullToRefreshHeader(props: PullToRefreshHeaderProps) {
  const { onRefresh, refreshing } = props

  const [text, setText] = useState('下拉刷新')

  const onStateChanged = useCallback((event: PullToRefreshStateChangedEvent) => {
    const state = event.nativeEvent.state
    if (state === PullToRefreshStateIdle) {
      setText('下拉刷新')
    } else if (state === PullToRefreshStateRefreshing) {
      setText('正在刷新...')
    } else {
      setText('松开刷新')
    }
  }, [])

  const onOffsetChanged = useCallback((event: PullToRefreshOffsetChangedEvent) => {
    console.log('refresh header offset', event.nativeEvent.offset)
  }, [])

  return (
    <PullToRefreshHeader
      style={styles.container}
      onOffsetChanged={onOffsetChanged}
      onStateChanged={onStateChanged}
      onRefresh={onRefresh}
      refreshing={refreshing}>
      <Text style={styles.text}>{text}</Text>
    </PullToRefreshHeader>
  )
}
```

--------------------------------

### Initialize RNBars with Keyboard Handling Disabled

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/keyboard-insets/README.md

When using react-native-troika alongside react-native-bars, it's necessary to disable the built-in keyboard handling logic in RNBars during initialization to avoid conflicts. This example shows how to set the third parameter to `false` in the `RNBars.init` method within `MainActivity.java`.

```java
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import com.zoontek.rnbars.RNBars;

public class MainActivity extends AppCompatActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // ...other code
    RNBars.init(this, "dark-content", false); // <- Set the third parameter to false
    // ...other code
  }
}
```

--------------------------------

### Enable Edge-to-Edge for React Native Modal (Android)

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/modal-edge-to-edge/README.md

This snippet demonstrates how to integrate the modal-edge-to-edge utility to achieve Edge-to-Edge display for React Native Modals on Android. It requires specific setup within your Android project.

```javascript
import React from 'react';
import { Modal, View, Text, StyleSheet } from 'react-native';
import useEdgeToEdge from 'react-native-troika/modal-edge-to-edge';

const MyModal = ({ visible, onClose }) => {
  const { modalStyle } = useEdgeToEdge();

  return (
    <Modal visible={visible} transparent={true} animationType="slide">
      <View style={[styles.overlay, modalStyle]}>
        <View style={styles.modalContent}>
          <Text>This is an Edge-to-Edge Modal!</Text>
          <Text onPress={onClose}>Close</Text>
        </View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalContent: {
    backgroundColor: 'white',
    padding: 20,
    borderRadius: 10,
  },
});

export default MyModal;

```

```kotlin
// In your MainActivity.kt or a relevant Activity file:

package com.your_app_name

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.your_app_name.ui.theme.YourAppTheme

// Import the necessary class from the library
import com.reactnativedev.troika.modal.EdgeToEdgeModalPackage

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // Ensure the EdgeToEdgeModalPackage is registered if needed by the library's internal setup
        // This might be handled automatically by autolinking or require manual registration
        // Example of manual registration if necessary:
        // EdgeToEdgeModalPackage().createReactContextSingleton(this.reactNativeHost)

        setContent {
            YourAppTheme {
                // A surface container using the 'background' color from the theme
                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
                    Greeting("Android")
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = modifier
    )
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    YourAppTheme {
        Greeting("Android")
    }
}

```

--------------------------------

### Configure react-native.config.js

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/overlay/README.md

Configuration for the Overlay package in `react-native.config.js`. This ensures that the native Android package is correctly instantiated with the React Native host.

```javascript
module.exports = {
  dependencies: {
    '@sdcx/overlay': {
      platforms: {
        android: {
          packageInstance: 'new OverlayPackage(getReactNativeHost())',
        },
      },
    },
  },
}
```

--------------------------------

### KeyboardInsetsView

Source: https://github.com/sdcxtech/react-native-troika/blob/master/README.md

处理软键盘遮挡输入框的问题，自动模式下无需额外代码，也可实现聊天界面等复杂效果。

```react-native
import KeyboardInsetsView from '@sdcxtech/keyboard-insets';

// 使用示例
<KeyboardInsetsView>
  {/* 内容 */}
</KeyboardInsetsView>
```

--------------------------------

### Overlay

Source: https://github.com/sdcxtech/react-native-troika/blob/master/README.md

React Native原生UI基础设施，用于实现Modal, Alert, Toast, Popover等顶层UI组件。

```react-native
import Overlay from '@sdcxtech/overlay';

// 使用示例
Overlay.showToast('消息');
```

--------------------------------

### BottomSheet API Documentation

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/bottom-sheet/README.md

Provides detailed API documentation for the BottomSheet component, including its properties (peekHeight, state, fitToContents, contentContainerStyle) and callbacks (onStateChanged, onSlide).

```APIDOC
BottomSheet Properties:

- peekHeight: number
  - Description: The height of the BottomSheet when collapsed. Defaults to 200.

- state: 'collapsed' | 'expanded' | 'hidden'
  - Description: The current state of the BottomSheet. 'collapsed' means it's at peekHeight, 'expanded' means it's fully open (fitting content or parent height), and 'hidden' means it has zero height.

- fitToContents: boolean
  - Description: Determines if the BottomSheet should adapt its expanded height to its content. Defaults to false. Keep as false when using with scrollable lists like ScrollView.

- contentContainerStyle: StyleProp<ViewStyle>
  - Description: Styles applied to the inner content container of the BottomSheet.

BottomSheet Callbacks:

- onStateChanged: (event: NativeSyntheticEvent<StateChangedEventData>) => void
  - Description: Callback triggered when the BottomSheet's state changes. Used for controlled mode.
  - EventData:
    - state: BottomSheetState ('collapsed' | 'expanded' | 'hidden')

- onSlide: (event: NativeSyntheticEvent<OffsetChangedEventData>) => void
  - Description: Callback triggered during sliding, useful for animations.
  - EventData:
    - progress: number (0 to 1)
      - Description: The current position of the BottomSheet between collapsedOffset and expandedOffset.
    - offset: number
      - Description: The current position of the BottomSheet.
    - expandedOffset: number
      - Description: The distance from the top of the outer layer to the top of the inner layer when fully expanded. Usually 0, but can be > 0 if fitToContents is true.
    - collapsedOffset: number
      - Description: The distance from the top of the outer layer to the top of the inner layer when fully collapsed. Equal to outer layer height minus peekHeight.
```

--------------------------------

### WheelPicker

Source: https://github.com/sdcxtech/react-native-troika/blob/master/README.md

一个简单且美观的滚轮选择器组件，用于日期、时间或其他列表选择。

```react-native
import WheelPicker from '@sdcxtech/wheel-picker';

// 使用示例
<WheelPicker data={['选项1', '选项2']} onSelect={(item) => console.log(item)} />
```

--------------------------------

### PullToRefresh

Source: https://github.com/sdcxtech/react-native-troika/blob/master/README.md

提供了在React层自定义下拉刷新的能力，允许开发者灵活控制下拉刷新的外观和行为。

```react-native
import PullToRefresh from '@sdcxtech/pull-to-refresh';

// 使用示例
<PullToRefresh onRefresh={() => { /* 处理刷新逻辑 */ }}>
  {/* 可刷新内容 */}
</PullToRefresh>
```

--------------------------------

### Basic Usage of PullToRefresh

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/pull-to-refresh/README.md

Demonstrates how to integrate the PullToRefresh component with a FlatList to provide pull-to-refresh functionality. It includes managing the refreshing state and handling the onRefresh event.

```tsx
import { PullToRefresh } from '@sdcx/pull-to-refresh'

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>
  )
}
```

--------------------------------

### Global SafeArea Handling with react-native-safe-area-context

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/keyboard-insets/README.md

Demonstrates how to use `react-native-safe-area-context` to manage UI elements that might be overlapped by system UI, such as the navigation bar on Android.

```tsx
import { Platform } from 'react-native'
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'

function App() {
  return (
    <SafeAreaProvider>
      <NavigationContainer>...</NavigationContainer>
      {Platform.OS === 'android' && <SafeAreaView mode="margin" edges={['bottom']} />}
    </SafeAreaProvider>
  )
}
```

--------------------------------

### useKeyboard Hook for Manual Control

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/keyboard-insets/README.md

Provides a custom hook `useKeyboard` to access keyboard state and the `onKeyboard` handler, enabling manual management of UI adjustments based on keyboard events.

```tsx
import { useKeyboard } from '@sdcx/keyboard-insets'

function MyComponent() {
  const { keyboard, onKeyboard } = useKeyboard()

  console.log(keyboard.height), // 键盘的高度

  return (
    <KeyboardInsetsView onKeyboard={onKeyboard}>
      <TextInput />
    </KeyboardInsetsView>
  )
}
```

--------------------------------

### ImageCropView

Source: https://github.com/sdcxtech/react-native-troika/blob/master/README.md

用于实现头像裁剪或图片裁剪，仅作为View存在，方便自定义布局，支持设置裁剪区域。

```react-native
import ImageCropView from '@sdcxtech/image-crop';

// 使用示例
<ImageCropView source={{ uri: '...' }} onCrop={(croppedImage) => { /* 处理裁剪后的图片 */ }}>
  {/* 裁剪视图 */}
</ImageCropView>
```

--------------------------------

### Nested KeyboardInsetsView Usage

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/keyboard-insets/README.md

Illustrates that KeyboardInsetsView can be nested, allowing for fine-grained control over keyboard handling within different parts of the UI.

```tsx
import { KeyboardInsetsView } from '@sdcx/keyboard-insets'

function MyComponent() {
  return (
    <KeyboardInsetsView extraHeight={16} style={{ flex: 1 }}>
      ...
      <KeyboardInsetsView extraHeight={8}>
        <TextInput />
      </KeyboardInsetsView>
      ...
    </KeyboardInsetsView>
  )
}
```

--------------------------------

### Setting Default Custom Footer

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/pull-to-refresh/README.md

Configures the globally default custom footer component for all PullToRefresh instances within the application. This is typically done in the application's entry point.

```javascript
import { PullToRefresh } from '@sdcx/pull-to-refresh'

PullToRefresh.setDefaultFooter(CustomPullToRefreshFooter)
```

--------------------------------

### ActivityIndicator

Source: https://github.com/sdcxtech/react-native-troika/blob/master/README.md

在Android上实现了和iOS类似的菊花加载指示器组件，提供一致的加载状态反馈。

```react-native
import ActivityIndicator from '@sdcxtech/activity-indicator';

// 使用示例
<ActivityIndicator animating={true} />
```

--------------------------------

### Basic KeyboardInsetsView Usage

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/keyboard-insets/README.md

Shows how to wrap a ScrollView with KeyboardInsetsView to automatically handle keyboard occlusion. The `extraHeight` prop adds padding between the input and the keyboard.

```tsx
import { KeyboardInsetsView } from '@sdcx/keyboard-insets'

function MyComponent() {
  return (
    <KeyboardInsetsView extraHeight={16} style={{ flex: 1 }}>
      <ScrollView>
        ...
        <TextInput />
        ...
      </ScrollView>
    </KeyboardInsetsView>
  )
}
```

--------------------------------

### BottomSheet

Source: https://github.com/sdcxtech/react-native-troika/blob/master/README.md

将Android的BottomSheetBehavior迁移到React Native，支持iOS，API设计尽量与Android保持一致，用于创建底部弹出的面板。

```react-native
import BottomSheet from '@sdcxtech/bottom-sheet';

// 使用示例
<BottomSheet visible={true}>
  {/* 底部弹窗内容 */}
</BottomSheet>
```

--------------------------------

### Usage of ActivityIndicator

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/activity-indicator/README.md

Demonstrates how to import and use the ActivityIndicator component within a React Native application.

```tsx
import ActivityIndicator from '@sdcx/activity-indicator';

function App() {
    return (
        <View style={styles.container}>
            <ActivityIndicator />
        </View>
    );
}
```

--------------------------------

### Pull-to-Load-More with PullToRefresh

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/pull-to-refresh/README.md

Implements the pull-to-load-more functionality using the PullToRefresh component's `onLoadMore` prop. It manages the loading state and a flag for indicating if there's no more data.

```tsx
import { PullToRefresh } from '@sdcx/pull-to-refresh'

function App() {
  const [loadingMore, setLoadingMore] = useState(false)
  const [noMoreData, setNoMoreData] = useState(false)

  const loadMore = () => {
    setLoadingMore(true)
    setTimeout(() => {
      setLoadingMore(false)
    }, 2000)
  }

  return (
    <PullToRefresh loadingMore={loadingMore} onLoadMore={loadMore} noMoreData={noMoreData}>
      <FlatList
        nestedScrollEnabled
        data={Array.from({ length: 20 })}
        renderItem={({ item, index }) => <Text>{index}</Text>}
        keyExtractor={(item, index) => index.toString()}
      />
    </PullToRefresh>
  )
}
```

--------------------------------

### Configure AndroidManifest for Keyboard Adjustment

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/keyboard-insets/README.md

Sets the `android:windowSoftInputMode` attribute to `adjustResize` in the AndroidManifest.xml to ensure the activity correctly resizes when the soft keyboard appears.

```xml
<!-- AndroidManifest.xml -->
<activity
  android:name=".MainActivity"
    ...
  android:windowSoftInputMode="adjustResize">
  <intent-filter>
    ...
  </intent-filter>
</activity>
```

--------------------------------

### Enable Edge-to-Edge on Android

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/keyboard-insets/README.md

Configures the Android application to use edge-to-edge display, allowing the UI to extend behind system bars. This is a prerequisite for optimal keyboard handling.

```java
import androidx.core.view.WindowCompat;

public class MainActivity extends ReactActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(null);
        // enable Edge-to-Edge
        WindowCompat.setDecorFitsSystemWindows(getWindow(), false);
    }
}
```

--------------------------------

### Setting Global Default Header

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/pull-to-refresh/README.md

Demonstrates how to set a custom header component as the global default for all PullToRefresh and RefreshControl instances within the application.

```javascript
import { PullToRefresh } from '@sdcx/pull-to-refresh'

PullToRefresh.setDefaultHeader(CustomPullToRefreshHeader)
```

--------------------------------

### LoadMoreRefreshControl Component

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/pull-to-refresh/README.md

Defines a custom `LoadMoreRefreshControl` component that wraps the `PullToRefresh` component from `@sdcx/pull-to-refresh`. It conditionally renders the `PullToRefresh` component for Android or a `CustomPullToRefreshFooter` for other platforms, allowing for 'load more' functionality.

```tsx
import { RefreshControlProps } from 'react-native'
import { PullToRefresh } from '@sdcx/pull-to-refresh'

export function LoadMoreRefreshControl(props: RefreshControlProps) {
  if (Platform.OS === 'android') {
    return <PullToRefresh footer={<CustomPullToRefreshFooter {...props} />} />
  }
  return <CustomPullToRefreshFooter {...props} />
}
```

--------------------------------

### Using Custom RefreshControl in FlatList

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/pull-to-refresh/README.md

Shows how to integrate the custom RefreshControl into a React Native FlatList component, managing the refreshing state and triggering a refresh action.

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

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

--------------------------------

### NestedScrollView

Source: https://github.com/sdcxtech/react-native-troika/blob/master/README.md

用于实现嵌套滚动，可以和PagerView，TabView等组合使用，方便创建复杂的滚动视图。

```react-native
import NestedScrollView from '@sdcxtech/nested-scroll';

// 使用示例
<NestedScrollView>
  {/* 内容 */}
</NestedScrollView>
```

--------------------------------

### Using RefreshControl with FlatList

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/pull-to-refresh/README.md

Shows an alternative way to use the RefreshControl component directly within a FlatList's refreshControl prop for pull-to-refresh functionality.

```tsx
import { RefreshControl } from '@sdcx/pull-to-refresh'

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

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

--------------------------------

### Custom PullToRefreshFooter Component

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/pull-to-refresh/README.md

Defines a custom footer component for pull-to-load-more functionality. It handles different states (idle, refreshing, no more data) and displays corresponding text. It also logs offset changes and handles the refresh action.

```tsx
import {
  PullToRefreshFooter,
  PullToRefreshFooterProps,
  PullToRefreshStateChangedEvent,
  PullToRefreshStateIdle,
  PullToRefreshStateRefreshing,
} from '@sdcx/pull-to-refresh'

export function CustomPullToRefreshFooter(props: PullToRefreshFooterProps) {
  const { onRefresh, refreshing, noMoreData } = props

  const [text, setText] = useState('上拉加载更多')

  const onStateChanged = useCallback((event: PullToRefreshStateChangedEvent) => {
    const state = event.nativeEvent.state
    if (state === PullToRefreshStateIdle) {
      setText('上拉加载更多')
    } else if (state === PullToRefreshStateRefreshing) {
      setText('正在加载更多...')
    } else {
      setText('松开加载更多')
    }
  }, [])

  const onOffsetChanged = useCallback((event: PullToRefreshOffsetChangedEvent) => {
    console.log('refresh footer offset', event.nativeEvent.offset)
  }, [])

  return (
    <PullToRefreshFooter
      style={styles.container}
      manual={true /* 设置模式为手动 */}
      onOffsetChanged={onOffsetChanged}
      onStateChanged={onStateChanged}
      onRefresh={onRefresh}
      refreshing={refreshing}
      noMoreData={noMoreData}>
      <Text style={styles.text}>{noMoreData ? '没有更多数据了' : text}</Text>
    </PullToRefreshFooter>
  )
}
```

--------------------------------

### Basic Usage

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/nested-scroll/README.md

Demonstrates the basic usage of NestedScrollView and NestedScrollViewHeader components in a React Native application. It shows how to structure a layout with a header and inner scrollable content.

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

const App = () => {
  return (
    <NestedScrollView>
      <NestedScrollViewHeader stickyHeaderBeginIndex={1}>
        <Image />
        <TabBar />
      </NestedScrollViewHeader>
      <PagerView>
        <FlatList nestedScrollEnabled />
        <ScrollView nestedScrollEnabled />
        <WebView />
      </PagerView>
    </NestedScrollView>
  )
}
```

--------------------------------

### Custom RefreshControl Implementation

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/pull-to-refresh/README.md

Demonstrates how to create a custom RefreshControl component that conditionally renders a PullToRefresh component on Android or a custom header on other platforms. It accepts standard RefreshControlProps.

```tsx
import { RefreshControlProps } from 'react-native'
import { PullToRefresh } from '@sdcx/pull-to-refresh'

export function CustomRefreshControl(props: RefreshControlProps) {
  if (Platform.OS === 'android') {
    return <PullToRefresh header={<CustomPullToRefreshHeader {...props} />} />
  }
  return <CustomPullToRefreshHeader {...props} />
}
```

--------------------------------

### getEdgeInsetsForView Utility

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/keyboard-insets/README.md

A utility function to determine the insets (distances from screen edges) for a specific view, useful for precise layout adjustments.

```tsx
import { getEdgeInsetsForView } from '@sdcx/keyboard-insets'

function MyComponent() {
  const inputRef = useRef<TextInput>(null)

  const onLayout = useCallback(() => {
    const viewTag = findNodeHandle(inputRef.current)
    if (viewTag === null) {
      return
    }

    // 获得 TextInput 距离屏幕四边的距离
    getEdgeInsetsForView(viewTag, insets => {
      console.log('insets', insets)
    })
  }, [])

  return (
    <View>
      <TextInput ref={inputRef} onLayout={onLayout} />
    </View>
  )
}
```

--------------------------------

### Setting Page-Specific Custom Footer

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/pull-to-refresh/README.md

Applies a custom footer component to a specific page or component by passing it to the `footer` prop of the PullToRefresh component. This allows for localized customization.

```tsx
import { PullToRefresh } from '@sdcx/pull-to-refresh'

function App() {
  const [loadingMore, setLoadingMore] = useState(false)

  return (
    <PullToRefresh
      footer={
        <LocalPullToRefreshFooter
          loadingMore={loadingMore}
          onLoadMore={() => {
            setLoadingMore(true)
            setTimeout(() => {
              setLoadingMore(false)
            }, 2000)
          }}
        />
      }>
      <FlatList
        nestedScrollEnabled
        data={Array.from({ length: 20 })}
        renderItem={({ item, index }) => <Text>{index}</Text>}
        keyExtractor={(item, index) => index.toString()}
      />
    </PullToRefresh>
  )
}
```

--------------------------------

### Setting Local Specific Header

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/pull-to-refresh/README.md

Illustrates how to apply a specific custom header to an individual PullToRefresh component, overriding any global default settings.

```tsx
import { PullToRefresh } from '@sdcx/pull-to-refresh'

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

  return (
    <PullToRefresh
      header={
        <CustomPullToRefreshHeader
          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>
  )
}
```

--------------------------------

### Cropping Function

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/image-crop/README.md

Triggers the image cropping process using the ImageCropView component's crop method. The result is returned via the onCropped callback.

```javascript
imageCropViewRef.crop()
```

--------------------------------

### NestedScrollViewHeader API

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/nested-scroll/README.md

Outlines the properties for NestedScrollViewHeader, including 'stickyHeaderBeginIndex' to fix components at the top, 'stickyHeight' for a fixed header area, and 'onScroll' for parallax effects.

```APIDOC
NestedScrollViewHeader:
  - stickyHeaderBeginIndex: Index from which child components become fixed at the top.
  - stickyHeight: The height of the area to be fixed at the top, takes precedence over stickyHeaderBeginIndex.
  - onScroll: Callback function for implementing parallax effects on the header.
    type OnScroll = (event: {
      nativeEvent: {
        contentOffset: {
          x: number
          y: number
        }
      }
    }) => void
```

--------------------------------

### Nested Scrolling Requirement

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/bottom-sheet/README.md

Highlights the requirement to enable `nestedScrollEnabled` for list components when using the BottomSheet with scrollable views on Android, due to its reliance on the NestedScrolling API.

```javascript
/*
 * Android is implemented based on the [NestedScrolling API](https://developer.android.com/reference/androidx/core/view/NestedScrollingChild).
 *
 * Please remember to enable the `nestedScrollEnabled` property for your lists.
 */
```

--------------------------------

### Register RNCNestedScrollWebViewManager in Android

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/nested-scroll-webview/README.md

This Java code demonstrates how to register the RNCNestedScrollWebViewManager in your React Native application's Android project. It involves creating a custom ReactPackage and adding it to the list of packages in MainApplication.java.

```java
package com.example.myuidemo;

import com.reactnativecommunity.webview.RNCNestedScrollWebViewManager;
import java.util.Arrays;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.Collections;
import java.util.List;
import androidx.annotation.NonNull;

public class MyUiPackage implements ReactPackage {
    @NonNull
    @Override
    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @NonNull
    @Override
    public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
        return Arrays.asList(
                new RNCNestedScrollWebViewManager()
        );
    }
}
```

```java
import com.facebook.react.ReactPackage;
import java.util.List;
import java.util.Arrays;

// ... other imports

@Override
protected List<ReactPackage> getPackages() {
    @SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();
    packages.add(new MyUiPackage());
    return packages;
}
```

--------------------------------

### Object Rect Properties

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/image-crop/README.md

Defines the properties for objectRect, which specifies the default cropping area in pixels. This is applicable when cropStyle is set to 'default'.

```typescript
objectRect: {
  left: number;
  top: number;
  width: number;
  height: number;
}
```

--------------------------------

### NestedScrollView API

Source: https://github.com/sdcxtech/react-native-troika/blob/master/packages/nested-scroll/README.md

Details the properties available for the NestedScrollView component. 'bounces' is iOS-specific for scroll elasticity, and 'contentContainerStyle' is Android-specific for styling the content view.

```APIDOC
NestedScrollView:
  - bounces: (iOS only) Controls scroll elasticity. Defaults to false. If true, inner scroll views lose elasticity.
  - contentContainerStyle: (Android only) Styles the content view of the NestedScrollView.
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.