skills.rest
fyndx
fyndxOFFICIAL
Explore all skills by this author →
GitHub

bottom-sheet

Implement Gorhom Bottom Sheet modal interactions in React Native apps.

1|Updated Oct 19, 2023
Search Tags:#ui component#react native#modal#bottom sheet#gorhom#slide up panel
One-click install
npx skills add https://github.com/fyndx/coinx --skill bottom-sheet
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bottom-sheet
Source: https://github.com/fyndx/coinx/tree/main/skills/bottom-sheet
Command: npx skills add https://github.com/fyndx/coinx --skill bottom-sheet

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a flexible and performant way to implement modal sheets, action sheets, and slide-up panels in your application, enhancing user interaction and navigation.

Core Features & Use Cases

  • Customizable Snap Points: Define precise heights for your sheets to snap to.
  • Interactive Controls: Easily open, close, expand, and collapse sheets programmatically.
  • Backdrop Integration: Control the appearance and behavior of the backdrop behind the sheet.
  • Scrollable Content: Seamlessly integrate ScrollViews and FlatLists within your sheets.
  • Text Input: Include text input fields directly within the sheet interface.
  • Use Case: Displaying a user profile card that slides up from the bottom, offering quick actions or detailed information without navigating away from the main screen.

Quick Start

Use the bottom-sheet skill to open a sheet to 50% of the screen height.

Frequently Asked Questions about bottom-sheet

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a bottom sheet in React Native with customizable snap points?▼

To create a bottom sheet in React Native, implement Gorhom Bottom Sheet to define precise snap point heights. Facilitate programmatic control for expanding, collapsing, and closing interactive slide-up panels with customizable screen height constraints.

What is the best way to integrate scrollable content inside a React Native bottom sheet?▼

Integrate scrollable content inside a React Native bottom sheet by embedding ScrollViews and FlatLists directly within the sheet interface. This facilitates seamless content integration and interactive scrolling without navigating away from the main screen.

Can I programmatically control modal sheet interactions and backdrops in React Native?▼

Yes, you can programmatically control modal sheet interactions and backdrops in React Native. This approach facilitates interactive controls to open, close, and expand sheets while controlling the appearance and behavior of the backdrop behind the sheet.

Does the Gorhom bottom sheet support text input fields and dynamic UI management?▼

Yes, the Gorhom bottom sheet supports text input fields and dynamic UI management. Include text input fields directly within the sheet interface and use dynamic snap points for seamless UI management and user profile card interactions.

When do I need a slide-up panel instead of a standard modal for user interaction?▼

You need a slide-up panel instead of a standard modal when displaying quick actions or detailed information like a user profile card. Action sheets enhance user interaction by sliding up from the bottom without navigating away from the main screen.

Related Skills

Explore More Software Engineering Skills→
yuheitomiyuheitomi

set-up-biome

Configure Biome and Shadcn/UI preferences in React projects with pnpm.

Community
Advanced
NNPopovNNPopov
2

flutter-building-forms

Build validated Flutter forms with StatefulWidget and TextFormField validators.

Community
Intermediate
CriezzzCriezzz

menu-navigation-flow

Manage Unity UI navigation with stack-based push, pop, and modal operations.

Community
Intermediate
1k-off1k-off
1

umbraco-entity-create-option-action

Implement Umbraco backoffice entity create option actions with manifests and custom logic.

Community
Intermediate