React Native: How to truncate text

React Native allows you to automatically truncate text that will not fit within its <View> container.

There is a property numberOfLines that can be passed to the <Text> node. For example:

<View style={styles.container}>
  <Text numberOfLines={1} style={styles.text}>This is a very long text that will overflow on a small device</Text>
</View>

In most cases this is enough for the device to truncate the text, automatically adding ellipsis to the end of the string (…) after however many lines of text you have specified (In this case, we only want 1 line).

If you however find that you have added the numberOfLines property but the text is still not truncated, as so:

Then make sure your text node styles have the flex: 1 property. For the example above, the StyleSheet would look like:

var styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    padding: 10
  },

  text: {
    flex: 1
  }
});

Which will allow the <Text> node to apply the truncation properly:

Cordova plugins not working on iOS? Fix the Target Membership

If you have installed a Cordova plugin and it is not working on iOS, for example the expected JavaScript object for the plugin simply doesn't exist. But you have tested and find that the functionality is working fine on Android, this is usually a symptom of an error in the iOS plugin class target membership.

For example this can often happen with the Cordova SplashScreen plugin. See the screenshot below and ensure that the .m implementation file has a checkmark on the "Target Membership" option for your application.

Only the implementation file should have the target membership checked (so not the .h header file).

This is often the reason why a plugin appears simply not to work. It's always good to check this setting first before debugging further.

Hide the iOS 8 status bar for better App Store screenshots

While working on my mobile application Elite Ice Hockey Action, I recently released an update and discovered that I need to add new App Store screenshots for the iPhone 6 and 6+.

Based on the App Store screenshot guidelines the images uploaded should not contain the iOS status bar (containing the time, battery level etc.). However, when using the iOS simulator for taking screenshots the status bar is always visible and simply cutting it out in Photoshop or Preview is not an option because since the iPhone 6 was released the screenshot dimensions must be exactly the same as the iPhone it was taken on.

There appears to be no way to simply turn off the status bar from the iOS simulator so my only option is to temporarily hide the status bar programmatically in Xcode and then disable this effect again after gathering my images.

Read on to find out the steps I performed to achieve this goal.