React Native Shadow is Missing on iOS but is Okay on Android

In one of our projects, some of the items that had a shadow, was working just fine on Android, but the shadow was missing on iOS.

After investigating it, it turned out to be related to the items that had overflow: 'hidden', which on iOS resulted in shadow being trimmed.

Turns out on iOS, the shadow is part of the UI component that you define it at, which results in removing the shadow, when one has the overflow set to hidden. On Android, the shadow is applied outside of the component, so it is just fine to have overflow: 'hidden' and still get the shadow.

The solution was to wrap the component in another <View /> with the shadow defined in it, while having the overflow: 'hidden' in the inner component.

Example code:

// Before:
// ...
<View style={ { 
  // we need the overflow hidden to round the images in the content
  overflow: 'hidden',
  borderRadius: 20,
  
  // shadow definition
  shadowColor: '#000',
  shadowOffset: {
    width: 0,
    height: 2,
  },
  shadowOpacity: 0.25,
  shadowRadius: 3.84,
  elevation: 5,  
} }>
  { children }
</View>

// After:
<View style={ { 
  // we still need the same radius, so the shadow would have the same shape as
  // the inner container

  borderRadius: 20,
  
  // shadow definition
  shadowColor: '#000',
  shadowOffset: {
    width: 0,
    height: 2,
  },
  shadowOpacity: 0.25,
  shadowRadius: 3.84,
  elevation: 5,  
} }>

  <View style={ {
    // we need the overflow hidden to round the images in the content
    overflow: 'hidden',
    borderRadius: 20,
  } }>
  { children }

  </View>
</View>

So if you end up having missing shadows on iOS, make sure to check for overflow: 'hidden' on the element : )

Android Emulator Losing Internet Connectivity

Spoiler: When having Internet connectivity issues, make sure that Android Studio is running. (because it acts as a proxy for the emulator)

So I’ve had a reoccurring issue where my Android Emulator device would lose connectivity from time to time, and to fix it I went to delete it and create a new device from the Android Virtual Device Manager (AVD). Unfortunately, this was only temporary and the issue would appear again at a point.

After happening again, I decided to try to debug it instead of starting from scratch. It turned out, that in order to have an internet connection, the Android Studio should be started. The reason for losing the connectivity was because I was sometimes closing the Android Studio in order to decrease the load on my PC (I’m working with React Native and expo, and don’t use the Android Studio much).

So before trying something fancy from the SO answers to the “Android emulator not able to access the internet” question, make sure that Android Studio is running 🙂

The native Facebook app on Android is no longer forcing you to use Messenger

Today I found out that the native Facebook app is no longer forcing me to use Messenger! At least on my Nexus 4.

Seems like in the end they understood that forcing a user to do something is never the right way.

From now on feel free to uninstall the crappy Messenger and use the native fb app instead.

Edit: Seems like it was a mistake with the update. So fb are still stupid.

Fixing Gmail’s push notifications on Android ICS

After updating to the newest version of the Gmail App for Android my push notifications stopped working. Here’s how to fix the problem:

  1. Go to the Gmail app
  2. Go to the Settings page
  3. Select one of the accounts you have linked in the app
  4. Under Data Usage select Sync Gmail
  5. If the autosync is turned off it will navigate you to the settings page wher you can turn  it on.
  6. You should get your mail notifications now! (: