{"id":13452242,"url":"https://github.com/Kida007/react-native-normalized","last_synced_at":"2025-03-23T19:33:55.753Z","repository":{"id":34559934,"uuid":"178475574","full_name":"Kida007/react-native-normalized","owner":"Kida007","description":"Components that behave more consistently between IOS and Android","archived":false,"fork":false,"pushed_at":"2023-01-03T19:22:02.000Z","size":1219,"stargazers_count":112,"open_issues_count":24,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-12T04:47:58.216Z","etag":null,"topics":["normalized","react-native","stylesheet","ui-components"],"latest_commit_sha":null,"homepage":"","language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Kida007.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-29T21:06:59.000Z","updated_at":"2024-12-22T03:49:20.000Z","dependencies_parsed_at":"2023-01-15T07:46:41.604Z","dependency_job_id":null,"html_url":"https://github.com/Kida007/react-native-normalized","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kida007%2Freact-native-normalized","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kida007%2Freact-native-normalized/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kida007%2Freact-native-normalized/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kida007%2Freact-native-normalized/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kida007","download_url":"https://codeload.github.com/Kida007/react-native-normalized/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245159235,"owners_count":20570347,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["normalized","react-native","stylesheet","ui-components"],"created_at":"2024-07-31T07:01:18.098Z","updated_at":"2025-03-23T19:33:55.115Z","avatar_url":"https://github.com/Kida007.png","language":"Objective-C","funding_links":[],"categories":["Objective-C"],"sub_categories":[],"readme":"\u003ch2\u003e\u003cdiv align=\"center\"\u003ereact-native-normalized\u003c/div\u003e\u003c/h2\u003e\n\u003cp align=\"center\"\u003eComponents that behave more consistently between iOS and Android\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003ca href=\"https://rnnormalized.netlify.com/\"\u003ehttps://rnnormalized.netlify.com\u003c/a\u003e \u003c/p\u003e\n\n\n\u003cdiv align=\"center\"\u003e\u003csub\u003eInstall using:\u003c/sub\u003e\u003c/div\u003e\n\u003cp align=\"center\"\u003e\u003ccode\u003enpm i react-native-normalized\u003c/code\u003e\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n\u003c/p\u003e\n\nReact 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 `\u003cText/\u003e` is by default \u003cimg src=\"https://raw.githubusercontent.com/Kida007/react-native-normalized/HEAD/readme-assets/000000.png\" width=\"16\" /\u003e `#000000` on iOS and \u003cimg src=\"https://raw.githubusercontent.com/Kida007/react-native-normalized/HEAD/readme-assets/808080.png\" width=\"16\" /\u003e `#808080` on Android?\n\nThis 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](https://github.com/necolas/normalize.css) for React Native.\n\nTo 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.\n\n## Usage\nSimply import a normalized component from `react-native-normalized` instead of `react-native`:\n\n```diff\nimport React from 'react'\n-import {View, Text} from 'react-native'\n+import {View} from 'react-native'\n+import {Text} from 'react-native-normalized'\n\nclass App extends React.Component {\n    render() {\n        return (\n            \u003cView\u003e\n                \u003cText\u003eWelcome to React Native Normalized!\u003c/Text\u003e\n            \u003c/View\u003e\n        )\n    }\n}\n\nexport default App;\n```\n\n## APIs and Components\n\n### `Alert`\n\n* `Alert.alert()` is by default not dismissable. The RN implementation is dismissable on Android but not on iOS.\n\u003e ✅ Since React Native v0.60, this is fixed!\n\n### `\u003cActivityIndicator/\u003e`\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003e\nNative \u003cbr/\u003e\u003ccode\u003eActivityIndicator\u003c/code\u003e\u003cbr/\u003e on Android\n\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\nNative \u003cbr/\u003e\u003ccode\u003eActivityIndicator\u003c/code\u003e\u003cbr/\u003e on iOS\n\u003c/td\u003e\n\u003cth\u003e\nNormalized \u003cbr/\u003e \u003ccode\u003eActivityIndicator\u003c/code\u003e\u003cbr/\u003e on Android\n\u003c/th\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/Kida007/react-native-normalized/HEAD/readme-assets/native-activityindicator.png\"/\u003e\n\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/Kida007/react-native-normalized/HEAD/readme-assets/ios-activityindicator.png\"/\u003e\n\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/Kida007/react-native-normalized/HEAD/readme-assets/normalized-activityindicator.png\"/\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n\u003cul\u003e\n\u003cli\u003eThe default color of the activity indicator is \u003ccode\u003e#999999\u003c/code\u003e, the same color as the iOS Activity Indicator.\n\u003c/ul\u003e\n\n### `\u003cImage/\u003e`\n\n* By default, on Android, an `\u003cImage/\u003e` fades in with a 300ms delay. With the normalized component, there is no fade animation.\n\n### `\u003cText/\u003e`\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003e\nNative \u003ccode\u003eText\u003c/code\u003e on Android\n\u003c/td\u003e\n\u003cth\u003e\nNormalized \u003ccode\u003eText\u003c/code\u003e on Android\n\u003c/th\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/Kida007/react-native-normalized/HEAD/readme-assets/native-text.png\"/\u003e\n\u003c/td\u003e\n\u003ctd\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/Kida007/react-native-normalized/HEAD/readme-assets/normalized-text.png\"/\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n\n\u003cul\u003e\n\u003cli\u003eThe default color of the text is black \u003ccode\u003e#000000\u003c/code\u003e\n    \u003cblockquote\u003e ✅ Since React Native v0.60, this is fixed!\u003c/blockquote\u003e\n\n\u003cli\u003eThe default font on Android is explicitly set to Roboto. This \u003ca target=\"_blank\" href=\"https://github.com/facebook/react-native/issues/15114\"\u003efixes an issue which cuts off text on Oppo and OnePlus phones:\u003c/a\u003e\n\u003c/ul\u003e\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003e\nNative \u003ccode\u003eText\u003c/code\u003e on OnePlus phone\n\u003c/td\u003e\n\u003cth\u003e\nNormalized \u003ccode\u003eText\u003c/code\u003e on OnePlus phone\n\u003c/th\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/Kida007/react-native-normalized/HEAD/readme-assets/bold-text-native-oppo.png\"/\u003e\n\u003c/td\u003e\n\u003ctd\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/Kida007/react-native-normalized/HEAD/readme-assets/bold-text-normalized.png\"/\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\u003cp align=\"center\"\u003e\u003csup\u003eScreenshot shows a Text on OxygenOS which is bold and inside a \u003ccode\u003e\u0026lt;View style={{flexDirection: 'row'}}\u003e container\u003c/code\u003e, triggering the bug.\u003c/sup\u003e\u003c/p\u003e\n\n### `\u003cTextInput/\u003e`\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003e\nNative\u003cbr/\u003e\u003ccode\u003eTextInput\u003c/code\u003e\u003cbr/\u003eon Android\n\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\nNative\u003cbr/\u003e\u003ccode\u003eTextInput\u003c/code\u003e\u003cbr/\u003eon iOS\n\u003c/td\u003e\n\u003cth\u003e\nNormalized\u003cbr/\u003e\u003ccode\u003eTextInput\u003c/code\u003e\u003cbr/\u003eon Android\n\u003c/th\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/Kida007/react-native-normalized/HEAD/readme-assets/native-textinput.png\"/\u003e\n\u003c/td\u003e\n\u003ctd\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/Kida007/react-native-normalized/HEAD/readme-assets/ios-textinput.png\"/\u003e\n\u003c/td\u003e\n\u003ctd\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/Kida007/react-native-normalized/HEAD/readme-assets/normalized-textinput.png\"/\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\u003cp align=\"center\"\u003e\u003csup\u003eScreenshot shows a TextInput with style \u003ccode\u003e{width: '100%', height: 100, backgroundColor: 'white'}\u003c/code\u003e and \u003ccode\u003emultiline={true}\u003c/code\u003e.\u003c/sup\u003e\u003c/p\u003e\n\n\n\u003cul\u003e\n\u003cli\u003eIf \u003ccode\u003emultiline\u003c/code\u003e is true, the text aligns on top on Android.\n\u003cli\u003eThe default placeholder text color is \u003ccode\u003e#C7C7CD\u003c/code\u003e on Android, the same as the iOS default\n\u003cli\u003eThe default \u003ccode\u003eunderlineColorAndroid\u003c/code\u003e is \u003ccode\u003etransparent\u003c/code\u003e. This is the default behavior since React Native 0.56, so it will only make a difference if you still use an older version.\n\u003cli\u003e\u003cstrong\u003eNew since 2.0.0:\u003c/strong\u003e The default color is `#000`, regardless of dark mode or not. Otherwise the text input color might become '#fff' on iOS if the device turns to dark mode.\n\u003c/ul\u003e\n\n## Development and Ideas\n\nDo you know of more components that could be made more consistent and that would fit well into this project? Let us know!\n\nCurrently we have two ideas for which we welcome code and comments:\n\n- [x] ~~[Consistent dismissal behavior for Alert.alert()](https://github.com/Kida007/react-native-normalized/issues/2)~~ **Implemented in v1.1.0**\n- [x] [Consistent \u0026lt;Picker/\u0026gt;](https://github.com/Kida007/react-native-normalized/issues/1)\n\n## Authors\nThis library is brought to you by [Piyush Gupta](https://twitter.com/kidaa007) and [Jonny Burger](https://twitter.com/JNYBGR).\n\n## License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKida007%2Freact-native-normalized","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FKida007%2Freact-native-normalized","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKida007%2Freact-native-normalized/lists"}