React Native Actions Sheet Replacement

https://github.com/talktothelaw/react-native-actions-sheet-replacement
Admin
Tokens:4,355
Snippets:18
Trust Score:4.9
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Start Metro Bundler

Source: https://github.com/talktothelaw/react-native-actions-sheet-replacement/blob/main/example/README.md

Starts the Metro JavaScript bundler, which is essential for building and running your React Native application. This command should be run from the root of your project.

```sh
# Using npm
npm start

# OR using Yarn
yarn start
```

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

### Run Example App

Source: https://github.com/talktothelaw/react-native-actions-sheet-replacement/blob/main/CONTRIBUTING.md

Commands to start the Metro server and run the example application on Android or iOS devices/simulators. Changes to library code are reflected in the example app.

```shell
yarn example start
yarn example android
yarn example ios
```

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

### Install Ruby Dependencies for iOS

Source: https://github.com/talktothelaw/react-native-actions-sheet-replacement/blob/main/example/README.md

Installs Ruby dependencies required for iOS development, primarily for managing CocoaPods. This command is typically run once or after updating native dependencies.

```sh
bundle install
```

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

### Build and Run iOS App

Source: https://github.com/talktothelaw/react-native-actions-sheet-replacement/blob/main/example/README.md

Builds and runs the React Native application on an iOS simulator or device. This command requires the Metro bundler to be running and CocoaPods dependencies to be installed.

```sh
# Using npm
npm run ios

# OR using Yarn
yarn ios
```

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

### Install iOS CocoaPods Dependencies

Source: https://github.com/talktothelaw/react-native-actions-sheet-replacement/blob/main/example/README.md

Installs CocoaPods dependencies for the iOS project. This command is crucial after cloning a project or updating native dependencies to ensure all required libraries are linked correctly.

```sh
bundle exec pod install
```

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

### Install Project Dependencies

Source: https://github.com/talktothelaw/react-native-actions-sheet-replacement/blob/main/CONTRIBUTING.md

Installs all necessary project dependencies using Yarn workspaces. This is the initial step to set up the development environment for the project.

```shell
yarn
```

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

### Build and Run Android App

Source: https://github.com/talktothelaw/react-native-actions-sheet-replacement/blob/main/example/README.md

Builds and runs the React Native application on an Android device or emulator. Ensure the Metro bundler is running in a separate terminal before executing this command.

```sh
# Using npm
npm run android

# OR using Yarn
yarn android
```

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

### Install react-native-actions-sheet-replacement (npm/yarn)

Source: https://github.com/talktothelaw/react-native-actions-sheet-replacement/blob/main/README.md

Shows how to install the library using npm or yarn package managers. This is the first step before using the component in your React Native project.

```npm
npm install react-native-actions-sheet-replacement
```

```yarn
yarn add react-native-actions-sheet-replacement
```

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

### Delayed Closing for Nested Sheets

Source: https://github.com/talktothelaw/react-native-actions-sheet-replacement/blob/main/README.md

Provides a JavaScript example for closing multiple nested action sheets with a small delay between operations. This ensures better visual transitions when managing complex sheet hierarchies.

```javascript
// Close child sheet first, then parent with a slight delay
const closeBothSheets = () => {
  SheetManager.hide('childSheetId');
  
  setTimeout(() => {
    SheetManager.hide('parentSheetId');
  }, 300);
};
```

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

### Direct Rendering for Nested Action Sheets (React Native)

Source: https://github.com/talktothelaw/react-native-actions-sheet-replacement/blob/main/README.md

Demonstrates using `isModal={false}` for parent and child ActionSheets to enable direct rendering, which improves stacking behavior for complex nesting scenarios on iOS. Includes examples of opening and closing sheets via SheetManager.

```jsx
const ParentSheet = forwardRef((props, ref) => {
  const { sheetId } = props;
  
  const openChildSheet = () => {
    SheetManager.show('childSheet', {
      payload: { parentId: sheetId }
    });
  };
  
  return (
    <ActionSheet ref={ref} sheetId={sheetId} isModal={false}>
      <View style={{ padding: 20 }}>
        <Text>Parent Sheet</Text>
        <Button title="Open Child Sheet" onPress={openChildSheet} />
        <Button 
          title="Close"
          onPress={() => SheetManager.hide(sheetId)}
        />
      </View>
    </ActionSheet>
  );
});

const ChildSheet = forwardRef((props, ref) => {
  const { sheetId } = props;
  
  return (
    <ActionSheet ref={ref} sheetId={sheetId} isModal={false}>
      <View style={{ padding: 20 }}>
        <Text>Child Sheet</Text>
        <Button 
          title="Close"
          onPress={() => SheetManager.hide(sheetId)}
        />
      </View>
    </ActionSheet>
  );
});
```

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

### Implement Nested Sheets using Modal-Based Nesting

Source: https://github.com/talktothelaw/react-native-actions-sheet-replacement/blob/main/README.md

Explains how to achieve nested sheets, where one sheet can open another. This example shows modal-based nesting, the default behavior, where child sheets are presented modally on top of parent sheets.

```jsx
import React, { forwardRef } from 'react';
import { View, Text, Button } from 'react-native';
import { ActionSheet, SheetManager } from 'react-native-actions-sheet-replacement';

const ParentSheet = forwardRef((props, ref) => {
  const { sheetId } = props;
  
  const openChildSheet = () => {
    SheetManager.show('childSheet', {
      payload: { parentId: sheetId }
    });
  };
  
  return (
    <ActionSheet ref={ref} sheetId={sheetId}>
      <View style={{ padding: 20 }}>
        <Text>Parent Sheet</Text>
        <Button title="Open Child Sheet" onPress={openChildSheet} />
        <Button 
          title="Close" 
          onPress={() => SheetManager.hide(sheetId)} 
        />
      </View>
    </ActionSheet>
  );
});

// Assume 'childSheet' is also defined and registered elsewhere
```

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

### Publish New Versions

Source: https://github.com/talktothelaw/react-native-actions-sheet-replacement/blob/main/CONTRIBUTING.md

Publishes new versions of the library to npm using release-it. This script handles version bumping, tag creation, and release processes.

```shell
yarn release
```

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

### Run Unit Tests

Source: https://github.com/talktothelaw/react-native-actions-sheet-replacement/blob/main/CONTRIBUTING.md

Executes the project's unit tests using Jest. It's recommended to add tests for any new changes or bug fixes.

```shell
yarn test
```

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

### Verify Code Quality

Source: https://github.com/talktothelaw/react-native-actions-sheet-replacement/blob/main/CONTRIBUTING.md

Commands to verify code quality by running TypeScript type checking and ESLint for linting. Use the `--fix` flag to automatically correct formatting issues.

```shell
yarn typecheck
yarn lint
yarn lint --fix
```

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

### Use ActionSheet with Refs in React Native

Source: https://github.com/talktothelaw/react-native-actions-sheet-replacement/blob/main/README.md

Demonstrates the basic usage of `ActionSheet` by creating a ref and opening/closing it. It shows how to embed custom React Native components within the ActionSheet.

```jsx
import React, { useRef } from 'react';
import { View, Button, Text } from 'react-native';
import { ActionSheet } from 'react-native-actions-sheet-replacement';

export default function App() {
  // Create a ref for the ActionSheet
  const actionSheetRef = useRef(null);

  // Open the ActionSheet
  const openActionSheet = () => {
    actionSheetRef.current?.open();
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Open ActionSheet" onPress={openActionSheet} />

      <ActionSheet ref={actionSheetRef}>
        <View style={{ padding: 20 }}>
          <Text style={{ fontSize: 18, fontWeight: 'bold' }}>ActionSheet Title</Text>
          <Text style={{ marginTop: 10 }}>This is a basic ActionSheet</Text>
          <Button 
            title="Close" 
            onPress={() => actionSheetRef.current?.close()} 
          />
        </View>
      </ActionSheet>
    </View>
  );
}
```

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

### Wrap App with SheetProvider for Global Access

Source: https://github.com/talktothelaw/react-native-actions-sheet-replacement/blob/main/README.md

Explains how to wrap the root of your React Native application with `SheetProvider`. This enables the `SheetManager` to manage sheets globally across the app, allowing sheets to be shown from any component without prop drilling.

```jsx
import React from 'react';
import { SheetProvider } from 'react-native-actions-sheet-replacement';

export default function App() {
  return (
    <SheetProvider>
      {/* Your app content */}
    </SheetProvider>
  );
}
```

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

### Show and Hide Sheets using SheetManager API

Source: https://github.com/talktothelaw/react-native-actions-sheet-replacement/blob/main/README.md

Illustrates how to programmatically show and hide registered sheets using the `SheetManager`. You can pass arbitrary `payload` data when showing a sheet and receive a `result` when it's closed.

```jsx
// Show a sheet with optional payload
SheetManager.show('mySheet', {
  payload: {
    data: 'Hello World!',
    timestamp: Date.now(),
  },
}).then(result => {
  console.log('Sheet closed with result:', result);
});

// Hide a sheet with optional result data
SheetManager.hide('mySheet', { success: true, data: 'Some result data' });
```

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

### Define and Register Custom Sheets with SheetManager

Source: https://github.com/talktothelaw/react-native-actions-sheet-replacement/blob/main/README.md

Details how to define a custom sheet component using `forwardRef` and register it with `SheetManager` using a unique ID. This allows sheets to be invoked by name from anywhere in the application.

```jsx
import React, { forwardRef } from 'react';
import { View, Text, Button } from 'react-native';
import { ActionSheet, SheetManager, type ActionSheetRef } from 'react-native-actions-sheet-replacement';

// Define your sheet component
const MySheet = forwardRef((props, ref) => {
  const { sheetId, payload } = props;
  
  return (
    <ActionSheet ref={ref}>
      <View style={{ padding: 20 }}>
        <Text>Sheet Content</Text>
        {payload && (
          <Text>Payload: {JSON.stringify(payload)}</Text>
        )}
        <Button 
          title="Close" 
          onPress={() => SheetManager.hide(sheetId)} 
        />
      </View>
    </ActionSheet>
  );
});

// Register the sheet
SheetManager.register('mySheet', MySheet);
```
Tokens:
Raw