--- title: Building Adaptive User Interfaces in React Native description: React Native provides components and APIs to adapt to changes in device sizes and orientations. The Dimensions API in React Native allows you to obtain the... canonical: https://daily.dev/posts/building-adaptive-user-interfaces-in-react-native-ihzpuc86m twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Building Adaptive User Interfaces in React Native | daily.dev og:description: React Native provides components and APIs to adapt to changes in device sizes and orientations. The Dimensions API in React Native allows you to obtain the... og:url: https://daily.dev/posts/building-adaptive-user-interfaces-in-react-native-ihzpuc86m og:image: https://api.daily.dev/og/posts/IhZPuC86M.png og:image:alt: Building Adaptive User Interfaces in React Native og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Building Adaptive User Interfaces in React Native **[Builder.io](https://daily.dev/sources/builderio)** · 1 min read · 49 upvotes · 2 comments ## Summary React Native provides components and APIs to adapt to changes in device sizes and orientations. The Dimensions API in React Native allows you to obtain the device's width and height. You can use these values to adapt styles based on the device size. For more complex platform-specific scenarios, you can split your code into separate files. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@brdnicolas** · 0 upvotes > intresting, thank's for sharing! **@whyu9** · 0 upvotes > Great post! --- Tags: [#android](https://daily.dev/tags/android), [#ios](https://daily.dev/tags/ios), [#react-native](https://daily.dev/tags/react-native) [View this post on daily.dev](https://daily.dev/posts/building-adaptive-user-interfaces-in-react-native-ihzpuc86m) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Building Adaptive User Interfaces in React Native","url":"https://daily.dev/posts/building-adaptive-user-interfaces-in-react-native-ihzpuc86m","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/building-adaptive-user-interfaces-in-react-native-ihzpuc86m"},"datePublished":"2023-09-04T07:25:20.795Z","dateModified":"2023-09-04T07:24:23.243Z","description":"React Native provides components and APIs to adapt to changes in device sizes and orientations. The Dimensions API in React Native allows you to obtain the...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/9117064196b51a98812370aa808576dd?_a=AQAEufR","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/9117064196b51a98812370aa808576dd?_a=AQAEufR","isAccessibleForFree":true,"articleSection":"Builder.io","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Builder.io","logo":"https://media.daily.dev/image/upload/s--jap1dv3o--/f_auto/v1791797395/squads/builderio?_a=BAMAMicg0","url":"https://daily.dev/squads/builderio"},"commentCount":2,"discussionUrl":"https://daily.dev/posts/building-adaptive-user-interfaces-in-react-native-ihzpuc86m","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":49},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":2}],"keywords":"android,ios,react-native","timeRequired":"PT1M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Builder.io","item":"https://daily.dev/squads/builderio"},{"@type":"ListItem","position":3,"name":"Building Adaptive User Interfaces in React Native"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/building-adaptive-user-interfaces-in-react-native-ihzpuc86m","comment":[{"@type":"Comment","text":"intresting, thank’s for sharing!","datePublished":"2023-09-11T16:48:13.689Z","url":"https://daily.dev/posts/IhZPuC86M#c-G8FgPn0VV","author":{"@type":"Person","name":"Nicolas B.","url":"https://daily.dev/brdnicolas","image":"https://avatars.githubusercontent.com/u/43219297?v=4"}},{"@type":"Comment","text":"Great post!","datePublished":"2023-09-12T09:20:51.167Z","url":"https://daily.dev/posts/IhZPuC86M#c-CY2fXFrS1","author":{"@type":"Person","name":"Wahyu","url":"https://daily.dev/whyu9","image":"https://avatars.githubusercontent.com/u/53975838?v=4"}}]} ```