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/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 new file mode 100644 index 0000000..1ed37d4 --- /dev/null +++ b/react-native/debugging/differences-between-ios-and-android.s.md @@ -0,0 +1,102 @@ +# [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 these exceptions. + +## Owner: [Pierre-Louis Le Portz](https://github.com/pleportz) + +## Checks + +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 + +*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. + - 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()`