Skip to content

Latest commit

 

History

History
51 lines (34 loc) · 1.62 KB

web-recipes.md

File metadata and controls

51 lines (34 loc) · 1.62 KB

Web recipes

Examples of how to implement web patterns with React Native.

html and body styles

The html and body elements require certain styles to support full-screen React Native apps, and disable "features" like pull-to-refresh in mobile browsers. Using the body as the root scroll view is not reliably supported.

Example code.

Hover styles

Relying on the web's native hover styles can result in several unwanted UX consequences. Hover styles might be displayed during touch interactions and can remain visually "stuck". Furthermore, there's no way to delay or persist hover for accessibility purposes. This recipe shows how to apply hover styles that integrate with the Responder event system (e.g., the Touchable* press styles) and display styles only when the mouse is active. It can also be used as the basis for programmatic hover delays and rendering of components (e.g., hover cards).

Example code

Link styles

Cross-platform link components are straight-forward to create and can be combined with the hover recipe.

Example code