From d58a27dcd89e3cb990a016142b39d631abecbdb6 Mon Sep 17 00:00:00 2001 From: pleportz Date: Wed, 18 Jul 2018 14:49:08 +0200 Subject: [PATCH 1/5] Add standard: what differences between iOS and android should I be aware of --- README.MD | 1 + .../differences-between-ios-and-android.s.md | 95 +++++++++++++++++++ 2 files changed, 96 insertions(+) create mode 100644 react-native/debugging/differences-between-ios-and-android.s.md diff --git a/README.MD b/README.MD index 03c610d..d129297 100644 --- a/README.MD +++ b/README.MD @@ -112,6 +112,7 @@ we help them solve their problem and then together write either a [Standard] or - [[MO] Debug two iOS apps simultaneously](/react-native/debugging/debug-two-ios-apps-simultaneously.mo.md) - [[MO] Get iOS Logs](/react-native/debugging/get-ios-logs.mo.md) - [[MO] How to analyse and react to a bug on a React-Native project](/react-native/debugging/analyse-bug.mo.md) +- [[Standard] What differences between iOS and android should I be aware of as a react-native developer?](/react-native/debugging/differences-between-ios-and-android.s.md) ### React diff --git a/react-native/debugging/differences-between-ios-and-android.s.md b/react-native/debugging/differences-between-ios-and-android.s.md new file mode 100644 index 0000000..f58163b --- /dev/null +++ b/react-native/debugging/differences-between-ios-and-android.s.md @@ -0,0 +1,95 @@ +## What differences between iOS and android should I be aware of as a react-native developer? +## ... and when should I double check my feature on both platforms? + +*react-native is awesome because it lets you build both iOS and android apps with the same javascript codebase...* + +While coding I usually use the iOS simulator only. Most of the time, if the feature works on iOS then it works on android automatically. Of course there are a few exceptions: in this article you will find a non comprehensive list of caveats. + + +### I modified the native code + +- I added/updated a **font** + + - Why: You might have forgotten to update the font for one of the two OSs. + - References: See [How to add/update icons with an icomoon font](https://github.com/bamlab/dev-standards/blob/master/react-native/features/icomoon.mo.md) and [How to add a new font to a react-native app](https://medium.com/react-native-training/react-native-custom-fonts-ccc9aacf9e5e) + + +- I installed a **native library** + + - Why: + + - The installation process depends on the platform + - For many reasons, the building phase might go wrong with one of the OSs. For instance there might be code signing issues with iOS + - Once installed, the library might behave differently on iOS and android + + - References: See [How to add a native module](https://github.com/bamlab/dev-standards/blob/master/react-native/setup/add-native-module.mo.md) + +### I added a fixed height property to a component + +- Why: Unlike iOS, android sets the default behaviour to the react-native `` component to `overflow: hidden`. Using a fixed height often ends up with cut texts or cut images on android. + +### I added shadows to a component + +- Works on iOS / does not on android: + +```javascript +Hello + +const styles = { + container: { + shadowColor: 'grey', + shadowRadius: 10, + shadowOpacity: 0.2, + shadowOffset: { height: 1, width: 1 }, + elevation: 3, + }, +} +``` + +- Works on both platforms: + +```javascript +Hello + +const styles = { + container: { + shadowColor: 'grey', + shadowRadius: 10, + shadowOpacity: 0.2, + shadowOffset: { height: 1, width: 1 }, + elevation: 3, + backgroundColor: 'white', // <-- backgroundColor is mandatory for android + }, +} +``` + +### I used react-native's `` component + +- Why: does not render identically on android and iOS: + + - With android you might need to specify the `underlineColorAndroid` prop (can be set to `"transparent"` for example) + - The vertical alignment of the input text is not the same. This can be solved by using a marginTop that depends on the platform: `marginTop: Platform.OS === 'ios ? ...'` + +### I mistakenly added text direcly as a ``'s child + +- Why: `Hello` does not crash iOS but crashes on android with the following error `Cannot add a child that doesn't have a YogaNode to a parent without a measure function! (Trying to add a 'ReactVirtualTextShadowNode' to a 'NativeViewWrapper')` + +- Typical example - This is extremely dangerous on android: + + ```javascript + {this.props.myText && this.props.myText} + ``` + + If this.props.myText is equal to `''` then you end up with `''` and the app **crashes** on android. One way to do this correctly is: + + + ```javascript + {!!this.props.myText && this.props.myText} + ``` + +### I used a javascript function that is not implemented the same way in react-native's javascript interpreters for android and iOS + +- Why: As of July 2018, react-native's javascript interpreter for android is a little bit late compared to iOS's. There are a few methods that just won't work with android: + + - `Number.prototype.toLocaleString()` + - `String.prototype.normalize()` From b6f43cb7595d6e17c87dcf027e5e6686aa93e403 Mon Sep 17 00:00:00 2001 From: pleportz Date: Tue, 24 Jul 2018 23:17:25 +0200 Subject: [PATCH 2/5] Format improvements --- SUMMARY.MD | 1 + .../differences-between-ios-and-android.s.md | 17 +++++++++-------- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/SUMMARY.MD b/SUMMARY.MD index 07566b7..0c11270 100644 --- a/SUMMARY.MD +++ b/SUMMARY.MD @@ -63,6 +63,7 @@ - [[MO] Debug Native iOS Code](/react-native/debugging/debug-native-ios.mo.md) - [[MO] Debug Javascript on an iOS Device](/react-native/debugging/debug-javascript-ios-device.mo.md) - [[MO] Debug a React Native WebView](/react-native/debugging/debug-webviews.mo.md) + - [[Standard] What differences between iOS and android should I be aware of as a react-native developer?]((/react-native/debugging/differences-between-ios-and-android.s.md) - [[MO] Handle gradle dependencies versions clashes](/react-native/debugging/handle-gradle-dependencies-clash.mo.md) - [[MO] Debug two iOS apps simultaneously](/react-native/debugging/debug-two-ios-apps-simultaneously.mo.md) - [[MO] Get iOS Logs](/react-native/debugging/get-ios-logs.mo.md) diff --git a/react-native/debugging/differences-between-ios-and-android.s.md b/react-native/debugging/differences-between-ios-and-android.s.md index f58163b..b3b3d4f 100644 --- a/react-native/debugging/differences-between-ios-and-android.s.md +++ b/react-native/debugging/differences-between-ios-and-android.s.md @@ -1,12 +1,13 @@ -## What differences between iOS and android should I be aware of as a react-native developer? +# [Standard] What differences between iOS and android should I be aware of as a react-native developer? ## ... and when should I double check my feature on both platforms? *react-native is awesome because it lets you build both iOS and android apps with the same javascript codebase...* -While coding I usually use the iOS simulator only. Most of the time, if the feature works on iOS then it works on android automatically. Of course there are a few exceptions: in this article you will find a non comprehensive list of caveats. +While coding I usually use the iOS simulator only. Most of the time, if the feature works on iOS then it works on android automatically. Of course there are a few exceptions: in this article you will find a non comprehensive list of these exceptions. +## Owner: [Pierre-Louis Le Portz](https://github.com/pleportz) -### I modified the native code +## I modified the native code - I added/updated a **font** @@ -24,11 +25,11 @@ While coding I usually use the iOS simulator only. Most of the time, if the feat - References: See [How to add a native module](https://github.com/bamlab/dev-standards/blob/master/react-native/setup/add-native-module.mo.md) -### I added a fixed height property to a component +## I added a fixed height property to a component - Why: Unlike iOS, android sets the default behaviour to the react-native `` component to `overflow: hidden`. Using a fixed height often ends up with cut texts or cut images on android. -### I added shadows to a component +## I added shadows to a component - Works on iOS / does not on android: @@ -63,14 +64,14 @@ const styles = { } ``` -### I used react-native's `` component +## I used react-native's `` component - Why: does not render identically on android and iOS: - With android you might need to specify the `underlineColorAndroid` prop (can be set to `"transparent"` for example) - The vertical alignment of the input text is not the same. This can be solved by using a marginTop that depends on the platform: `marginTop: Platform.OS === 'ios ? ...'` -### I mistakenly added text direcly as a ``'s child +## I mistakenly added text direcly as a ``'s child - Why: `Hello` does not crash iOS but crashes on android with the following error `Cannot add a child that doesn't have a YogaNode to a parent without a measure function! (Trying to add a 'ReactVirtualTextShadowNode' to a 'NativeViewWrapper')` @@ -87,7 +88,7 @@ const styles = { {!!this.props.myText && this.props.myText} ``` -### I used a javascript function that is not implemented the same way in react-native's javascript interpreters for android and iOS +## I used a javascript function that is not implemented the same way in react-native's javascript interpreters for android and iOS - Why: As of July 2018, react-native's javascript interpreter for android is a little bit late compared to iOS's. There are a few methods that just won't work with android: From e77e45b6424709e1053e03ca89a41283c40774ab Mon Sep 17 00:00:00 2001 From: pleportz Date: Tue, 24 Jul 2018 23:19:55 +0200 Subject: [PATCH 3/5] Add check for the native code modification case --- react-native/debugging/differences-between-ios-and-android.s.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/react-native/debugging/differences-between-ios-and-android.s.md b/react-native/debugging/differences-between-ios-and-android.s.md index b3b3d4f..7d55a4f 100644 --- a/react-native/debugging/differences-between-ios-and-android.s.md +++ b/react-native/debugging/differences-between-ios-and-android.s.md @@ -9,6 +9,8 @@ While coding I usually use the iOS simulator only. Most of the time, if the feat ## I modified the native code +*Check: there is a commit change in either the `android/` or the `ios/. directory* + - I added/updated a **font** - Why: You might have forgotten to update the font for one of the two OSs. From b8e032a15957461916aec6dda4163fdfcdb29ce2 Mon Sep 17 00:00:00 2001 From: pleportz Date: Tue, 24 Jul 2018 23:23:28 +0200 Subject: [PATCH 4/5] Add checks part --- .../debugging/differences-between-ios-and-android.s.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/react-native/debugging/differences-between-ios-and-android.s.md b/react-native/debugging/differences-between-ios-and-android.s.md index 7d55a4f..819c7da 100644 --- a/react-native/debugging/differences-between-ios-and-android.s.md +++ b/react-native/debugging/differences-between-ios-and-android.s.md @@ -7,6 +7,10 @@ While coding I usually use the iOS simulator only. Most of the time, if the feat ## Owner: [Pierre-Louis Le Portz](https://github.com/pleportz) +## Checks + +If I am in one of the cases below, I made sure to check me feature on both ios and android before deploying for validation. + ## I modified the native code *Check: there is a commit change in either the `android/` or the `ios/. directory* From edac22c89d76dbfc3096dca2df40e85f44af7589 Mon Sep 17 00:00:00 2001 From: pleportz Date: Tue, 24 Jul 2018 23:33:51 +0200 Subject: [PATCH 5/5] Improve Checks part --- react-native/debugging/differences-between-ios-and-android.s.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react-native/debugging/differences-between-ios-and-android.s.md b/react-native/debugging/differences-between-ios-and-android.s.md index 819c7da..1ed37d4 100644 --- a/react-native/debugging/differences-between-ios-and-android.s.md +++ b/react-native/debugging/differences-between-ios-and-android.s.md @@ -9,7 +9,7 @@ While coding I usually use the iOS simulator only. Most of the time, if the feat ## Checks -If I am in one of the cases below, I made sure to check me feature on both ios and android before deploying for validation. +If I am in one of the cases below, I made sure to check my feature on both ios and android before deploying to the validation platform. ## I modified the native code