diff --git a/docs/next/improvingux.html b/docs/next/improvingux.html index cda45639fb3..06e6609553f 100644 --- a/docs/next/improvingux.html +++ b/docs/next/improvingux.html @@ -43,19 +43,19 @@
  • Make sure the return button focuses the next field or submits the form

    • Check out TextInput docs for more configuration options.

    - +

    Try it on your phone

    Manage layout when keyboard is visible

    Software keyboard takes almost half of the screen. If you have interactive elements that can get covered by the keyboard, make sure they are still accessible by using the KeyboardAvoidingView component.

    - +

    Try it on your phone

    Make tappable areas larger

    On mobile phones it's hard to be very precise when pressing buttons. Make sure all interactive elements are 44x44 or larger. One way to do this is to leave enough space for the element, padding, minWidth and minHeight style values can be useful for that. Alternatively, you can use hitSlop prop to increase interactive area without affecting the layout. Here's a demo:

    - +

    Try it on your phone

    Use Android Ripple

    Android API 21+ uses the material design ripple to provide user with feedback when they touch an interactable area on the screen. React Native exposes this through the TouchableNativeFeedback component. Using this touchable effect instead of opacity or highlight will often make your app feel much more fitting on the platform. That said, you need to be careful when using it because it doesn't work on iOS or on Android API < 21, so you will need to fallback to using one of the other Touchable components on iOS. You can use a library like react-native-platform-touchable to handle the platform differences for you.

    - +

    Try it on your phone

    Screen orientation lock

    Multiple screen orientations should work fine by default unless you're using Dimensions API and don't handle orientation changes. If you don't want to support multiple screen orientations, you can lock the screen orientation to either portrait or landscape.

    diff --git a/docs/next/improvingux/index.html b/docs/next/improvingux/index.html index cda45639fb3..06e6609553f 100644 --- a/docs/next/improvingux/index.html +++ b/docs/next/improvingux/index.html @@ -43,19 +43,19 @@
  • Make sure the return button focuses the next field or submits the form

    • Check out TextInput docs for more configuration options.

    - +

    Try it on your phone

    Manage layout when keyboard is visible

    Software keyboard takes almost half of the screen. If you have interactive elements that can get covered by the keyboard, make sure they are still accessible by using the KeyboardAvoidingView component.

    - +

    Try it on your phone

    Make tappable areas larger

    On mobile phones it's hard to be very precise when pressing buttons. Make sure all interactive elements are 44x44 or larger. One way to do this is to leave enough space for the element, padding, minWidth and minHeight style values can be useful for that. Alternatively, you can use hitSlop prop to increase interactive area without affecting the layout. Here's a demo:

    - +

    Try it on your phone

    Use Android Ripple

    Android API 21+ uses the material design ripple to provide user with feedback when they touch an interactable area on the screen. React Native exposes this through the TouchableNativeFeedback component. Using this touchable effect instead of opacity or highlight will often make your app feel much more fitting on the platform. That said, you need to be careful when using it because it doesn't work on iOS or on Android API < 21, so you will need to fallback to using one of the other Touchable components on iOS. You can use a library like react-native-platform-touchable to handle the platform differences for you.

    - +

    Try it on your phone

    Screen orientation lock

    Multiple screen orientations should work fine by default unless you're using Dimensions API and don't handle orientation changes. If you don't want to support multiple screen orientations, you can lock the screen orientation to either portrait or landscape.

    diff --git a/docs/next/more-resources.html b/docs/next/more-resources.html index a49547d2794..4e3507005e0 100644 --- a/docs/next/more-resources.html +++ b/docs/next/more-resources.html @@ -54,7 +54,7 @@

    App Center is a service from Microsoft that makes it easy to deploy live updates to your React Native app. If you don't like going through the app store process to deploy little tweaks, and you also don't like setting up your own backend, give App Center a try.

    Expo is a development environment plus application that focuses on letting you build React Native apps in the Expo development environment, without ever touching Xcode or Android Studio. If you wish React Native was even more JavaScripty and webby, check out Expo.

    Yoga is a stand-alone layout engine that extends beyond React Native and allows product engineers to build layouts quickly for multiple platforms with a highly optimized open source layout engine designed with speed, size, and ease of use in mind.

    -

    Bugsnag, Microsoft App Center, and Sentry all provide excellent crash and error monitoring services for React and React Native apps. These services allow you to proactively monitor crashes and issues occuring on your apps in real time so you can fix them quickly and improve user experience.

    +

    Bugsnag, Microsoft App Center, and Sentry all provide excellent crash and error monitoring services for React and React Native apps. These services allow you to proactively monitor crashes and issues occuring on your apps in real time so you can fix them quickly and improve user experience.

    The React Developer Tools are great for debugging React and React Native apps.

    ← NetworkingComponents and APIs →