airbnb/react-sketchapp

Support fixed position for prototypes

macintoshhelper opened this issue · 5 comments

macintoshhelper commented

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.
mathieudutour commented

I think the easiest is to extend the flow prop to include fixOnScroll (or something similar). Would there be any downside? It's already Sketch specific

macintoshhelper commented

Hmm, that could work. flow requires targetId, target and animationType at the moment and will register a flow connection if it's truthy, so would need to make them optional and return only { isFixedToViewport } if target is missing.

mathieudutour commented

Yeah. I like having all of them in a flow namespace so that the API surface doesn't expand too much. If Sketch decides to add more stuff related to prototyping later, we can stick it in there as well

  • 👍1
macintoshhelper commented

Great, will open a PR then. Maybe worth creating a new docs page on prototyping too? I think it's a really interesting use-case for React Sketch.app – creating Sketch Cloud web or Sketch Mirror prototypes for React Native codebases.

mathieudutour commented

Sounds good. Your react-sketchapp-router could be a good addition to that page

  • 👍1