airbnb / airbnb/react-sketchapp

Support fixed position for prototypes

Open
#507 5 comments 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
TypeScript
Stars
14.9k
Forks
797
PR merge metrics
No merged PRs in 30d

Description

_I am..._

| -------------------------------------------------------------------------------------------------
| Requesting a new feature
| -------------------------------------------------------------------------------------------------

**Proposal/Feature-request:**

Would be great to support some kind of version of `position: fixed;` to be used in Sketch prototypes. Fixed position translates nicely to Sketch's `Fix position when scrolling`. This would allow for having bottom navigation tab bars, etc in prototypes.

React Native doesn't support `position: fixed;` though, so if the same component/styling is used in a React Native app, it may break it. Some alternative ideas that should solve that:

- Create a new `react-sketchapp` only styling prop: e.g. `prototypePosition: 'fixed'`
- Use `position: 'fixed'`, but document that this could be platform specific (`position: Platform.OS === 'sketch' ? 'fixed' : 'relative')
- Implement a new `ScrollView` component, and have an `Artboard` prop that makes anything not inside this component fixed. Not sure how much value this would have though for code re-use between web and React Native though when components like `FlatList` are more likely to be used.

Contributor guide

Open the contributing guide

Research direction

Start with the existing Artboard and ScrollView concepts mentioned in the proposal, then compare the three suggested approaches for representing Sketch's “Fix position when scrolling.” Done should provide fixed-position prototype elements such as bottom navigation while preserving compatibility with shared React Native components.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, react-native
Domain
design
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.