Files
react-native-web/docs/guides/web-recipes.md
Nicolas Gallagher c7c1f29016 Reorganize documentation
Close #1092
Close #1095
2018-09-09 11:33:09 -07:00

1.6 KiB

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

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

Example code