React Native gotchas

react-native-gotchas.md

Android gotchas

This document aims to list some "gotchas" in Android development using React Native, or in other words, common problems that a developer might face during the development of Android views and how to solve it.

Shadows

Following the React Native documentation, to set a shadow in an element it needs the following properties: shadowColor, shadowOffset, shadowOpacity and shadowRadius. However, on Android, it needs to use the elevation view style prop from react-native to add shadows, which will also affects the z-index value.

{
  // iOS
  shadowColor: "#000",
  shadowOffset: { height: 8, width: 0 },
  shadowOpacity: 0.3,
  shadowRadius: 8, 
  // Android
  elevation: 3.
}

z-index

Sometimes, the z-index property will not be enough to specify the stack order of an element. Try a shot using elevation, but have in mind it might add a shadow around the element:

{
  zIndex: 5,
  elevation: 1, // `1` might be enough
}

Close modals, go back functions for navigations, pop-ups, etc

As the Android system provides a back button on its GUI, consider handling this button on your modal component and navigation. For example on the Modal component from React Native:

<Modal 
  visible={visibility}
  onRequestClose={onClose} // Prop to handle Android's back button
>
  {children}
</Modal>

Negative margins

Sometimes in order to draw a UI, it needs to use negative margins, which works fine on iOS. In the other hand, Android set an overflow in its View components, so actually, the negative margins will work but, the content will be clipped if necessary to fit the padding-box as well.

I haven't found any solution so far

PanResponder doesn't work

Android ignores pan responder handlers on a transparent view, so the easiest way to fix it is given to the element a background or in case the UI doesn't allow a background, it might be an almost transparent background color:

<View
  style={{ backgroundColor: 'rgba(255,255,255,.01)', }}
  {...panResponder.current.panHandlers}
          >
  {children}
</View>

Text field is not selectable

Make sure the parent view or scrollview has no absolute position, because it seems that Android doesn't handle the events in a view like this very well. More information facebook/react-native#29308

Push notification troubleshooting

In those cases that for some reason push notification is not working, consider use react-native-firebase/messaging in order to manually get the device token and send it to wherever you want, like:

    const getToken = async () => {
      const token = await firebase.messaging().getToken();
      return Intercom.sendTokenToIntercom(token);
    };

    firebase
      .messaging()
      .hasPermission()
      .then(async (enabled) => {
        if (enabled) {
          return getToken();
        }

        firebase.messaging().requestPermission().then(getToken);
      });

iOS gotchas

Date picker is not what it used to be in iOS 14

To update the layout to "wheel" one, which used to be the default one, just add the following lines of code in the function didFinishLaunchingWithOptions in your ios/APP_NAME/AppDelegate file.

if (@available(iOS 14, *)) {
  UIDatePicker *picker = [UIDatePicker appearance];
  picker.preferredDatePickerStyle = UIDatePickerStyleWheels;
}

After restarting your app the date picker should show the old wheel style.