React-native: New Guide: "Improving User Experience"

[frantic]

As discussed with @brentvatne and other during ChainReact '17, it would be great to have a section in the docs that lists mobile-specific important UX details.

This is a rough checklist:

• [x] hitSlop
• [ ] tab bar
  
  
  
  • tab selected tab to pop
  
  
  • if empty stack, scroll to top
  
  
• [x] touchable with ripple
• [ ] keyboard:
  
  
  
  • [x] autofocus and return key
  
  
  • [x] space under keyboard and dismissing
  
  
  • [x] keyboard type, capitalization and autocorrect
  
  
• [ ] animated with useNativeDriver
  
  
  
  • only some properties supported -- no layout properties. use
    
    transforms whenever you can rather than width/height/margin,
    
    so you can take advantage of this
  
  
• [ ] nativedriver for animated.event in scroll view or it'll be janky
• [ ] loading states
  
  
  
  • onPressIn trick for preloading
  
  
  • placeholder elements
  
  
  • using data that you already have to partially render
  
  
  • loading state for image: what do you see when it's not there? maybe
    
    grey placeholder, maybe gradient, maybe activity indicator, maybe
    
    low-res version
  
  
• [ ] deferring rendering expensive (eg: maps) when possible
• [ ] status bar color, size
• [ ] fading in network images
• [ ] cancellable gestures
• [ ] meaningful animations -- shared transitions for example
• [ ] respect battery state
• [ ] prompt before asking permissions
• [ ] portrait / landscape: lock if you don't support
• [ ] android back button: navigation library can do some things but not all
  for you, need to consider where else users expect it to work
• [ ] compress images properly, provide 2x/3x
• [ ] sometimes text should be selectable
• [ ] ellipsize truncated text
• [ ] respect network status
• [ ] splash screen (white flash)

[hramos]

Yes, yes, yes. These are all things that I quickly notice when an app doesn't get it right. Thanks for driving this!

[brentvatne]

@hramos - let us know if we missed anything here too!

[AlanFoster]

deferring rendering expensive (eg: maps) when possible

I feel that would be a useful topic to cover - as it's not currently clear what the idiomatic approach within react-native is. For instance, I understand it can be a common UX pattern to use a placeholder/skeleton component in order to get a fast initial render, then have a deferred render to replace the skeleton component with the real, expensive, component.

In a similar vein, it's perhaps worth re-mentioning the benefit of avoiding re-renders entirely if possible, with shouldComponentUpdate etc perhaps? 🤔

[joegoodall1]

Hi @frantic,

I just watched your talk from Chain React (after a recommendation from someone I spoke to at React Native EU).

I can see from the checklist above there are a number of things that need to be added to the guide.

Would it be helpful if I contributed to these docs? If it would be should I follow the process outlined here?

[hramos]

The docs are now live in master at http://facebook.github.io/react-native/releases/next/docs/improvingux.html

PRs appreciated!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[jasonkoirala]

Finishing activity like in android.

[hramos]

I think it's worth keeping this open as a TODO. We have a new repo for the docs, so lets open it there: facebook/react-native-website

[brentvatne]

agreed, moved it over @hramos