Components that behave more consistently between iOS and Android
https://rnnormalized.netlify.com
Install using:
npm i react-native-normalized
React Native’s built-in components render slightly different on iOS and Android, causing you to spend extra time making the UI more consistent across devices. For example, did you know that when you create a fresh project using react-native init
, the color of a <Text/>
is by default #000000
on iOS and #808080
on Android?
This project provides you with slightly adjusted adaptions of built-in React Native components with the goal of being more consistent between platforms. Think of it as normalize.css for React Native.
To be clear, these are not bugs in React Native, rather RN opts to preserve the default behavior on each platform as much as possible. Nonetheless, you might prefer to use components that behave more consistently.
Simply import a normalized component from react-native-normalized
instead of react-native
:
import React from 'react'
-import {View, Text} from 'react-native'
+import {View} from 'react-native'
+import {Text} from 'react-native-normalized'
class App extends React.Component {
render() {
return (
<View>
<Text>Welcome to React Native Normalized!</Text>
</View>
)
}
}
export default App;
Alert
Alert.alert()
is by default not dismissable. The RN implementation is dismissable on Android but not on iOS.Since React Native v0.60, this is fixed!
<ActivityIndicator/>
Native ActivityIndicator on Android |
Native ActivityIndicator on iOS |
Normalized ActivityIndicator on Android |
---|---|---|
#999999
, the same color as the iOS Activity Indicator.<Image/>
<Image/>
fades in with a 300ms delay. With the normalized component, there is no fade animation.<Text/>
Native Text on Android |
Normalized Text on Android |
---|---|
#000000
Since React Native v0.60, this is fixed!
Native Text on OnePlus phone |
Normalized Text on OnePlus phone |
---|---|
Screenshot shows a Text on OxygenOS which is bold and inside a <View style={{flexDirection: 'row'}}> container
, triggering the bug.
<TextInput/>
Native TextInput on Android |
Native TextInput on iOS |
Normalized TextInput on Android |
---|---|---|
Screenshot shows a TextInput with style {width: '100%', height: 100, backgroundColor: 'white'}
and multiline={true}
.
multiline
is true, the text aligns on top on Android.#C7C7CD
on Android, the same as the iOS defaultunderlineColorAndroid
is transparent
. This is the default behavior since React Native 0.56, so it will only make a difference if you still use an older version.#000
, regardless of dark mode or not. Otherwise the text input color might become ‘#fff’ on iOS if the device turns to dark mode.Do you know of more components that could be made more consistent and that would fit well into this project? Let us know!
Currently we have two ideas for which we welcome code and comments:
This library is brought to you by Piyush Gupta and Jonny Burger.
Author: Kida007
GitHub: https://github.com/Kida007/react-native-normalized
#react-native #mobile-apps #react