> For the complete documentation index, see [llms.txt](https://the-sheet.gitbook.io/the-sheet-v2/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://the-sheet.gitbook.io/the-sheet-v2/roadmaps/02-the-road.md).

# Chapter 2: The Road

* [x] Introduce HeightBudgetProvider, HeightConsumer, HeightBudgetConsumer API
  * To solve the extreme problem with ScrollView nested deeply in the tree but still wants dynamic sizing behavior
* [x] Fix styling prop interface for ScrollView and FlatList
  * `styles`, `style`, and `contentContainerStyle` are not consistent

***

* [x] Note a rule for component design
  * Make all props to be like in Skia (except the ones related directly to render conditions, such as those in `SheetStackItem`)

```tsx
type AnimatedProp<T> = T | { value: T }

type AnimatedProps<T, O extends keyof T | never = never> = {
  [K in keyof T]: K extends 'children'
    ? T[K]
    : K extends O
      ? T[K]
      : AnimatedProp<T[K]>
}

type SkiaProps<P = object, O extends keyof P | never = never> = AnimatedProps<
  P,
  O
>
```

***

* [x] Template patterns
  * Encourage users to create a reusable template for their sheets
  * Easier to maintain, migrate, and update what features they want to use

***

* [x] Create YouTube clone

Need to handle image scaling a little differently (Support for both vertically fit and horizontally fit)

To support that, we need:

* maxTranslate = initialImageTop - topInset
* dockSheetTop = topInset + imageHeight
* requiredSheetTravel = collapsedSheetTop - dockSheetTop
* progress = clamp(sheetTravel / requiredSheetTravel, 0, 1)
* translateY = -progress \* maxTranslate

***

* [x] Support for VirtualizedList + SectionList
* [x] Support for FlashList

***

* [x] Add a mechanism to swap a sheet stack item to the top and re-present (like on YouTube iPad)

***

* [x] Introduce bottom sheet presenter registry
* [x] Introduce bottom sheet presenter: presenterVisibleHeight, presenterVisibleRatio
* [x] Make registry providers optional

***

* [ ] Explore <https://benji.org/family-values>. See if we can re-create something similar
  * [x] **Bottom sheet case**: Reuse bottom sheet presenter to present the tray. The tray only needs to animate height based on its content
  * [x] **Tray from a button (simple)**: Tray spawns (morphs) from a button. The tray also has only one primary action, so it does not need to morph the button's position and size
  * [ ] **Tray from a button (hard)**: Tray spawns (morphs) from a button. The tray could have two or more actions, so it needs to morph the button's position and size to the correct position and size of the tray's primary action
  * [ ] **Tray expanding to full screen**: Tray animates to fill the whole screen

Similar projects:

* <https://github.com/sivantha96/react-native-trays>
* <https://github.com/torsello/react-native-floating-tray>

***

* [ ] A different type of keyboard expander that works based on `react-native-keyboard-controller`
  * Why? Because on Android, this will provide a more accurate behavior for keyboard expander, especially if the keyboard changes height due to emoji, GIF, or other panels

***

* [ ] Example with iOS glass effect

***

* [ ] Create Google clone
* [ ] Create Instagram clone


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://the-sheet.gitbook.io/the-sheet-v2/roadmaps/02-the-road.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.