Screen width in React Native

Question

How do I get screen width in React native     I need it because I use some absolute components that overlap and their position on screen changes with different devices

User · Answer

React Native comes with  Dimensions  api which we need to import from  react-native   import   Dimensions   from  react-native     Then    lt Image source  pic  style   width  Dimensions get  window   width  height  Dimensions get  window   height   gt  lt  Image gt

User · Answer

If you have a Style component that you can require from your Component  then you could have something like this at the top of the file   const Dimensions   require  Dimensions     const window   Dimensions get  window      And then you could provide fulscreen   width  window width  height  window height   in your Style component  Hope this helps

User · Answer

Simply declare this code to get device width  let deviceWidth   Dimensions get  window   width     Maybe it s obviously but  Dimensions is an react-native import  import   Dimensions   from  react-native    Dimensions will not work without that

User · Answer

I think using react-native-responsive-dimensions might help you a little better on your case    You can still get   device-width by using and responsiveScreenWidth 100    and   device-height by using  and responsiveScreenHeight 100   You also can more easily arrange the locations of your absolute components by setting margins and position values with proportioning it over 100  of the width and height

User · Answer

Step 1 - Import  quot Dimensions quot  api from  react-native  import   Dimensions   from  react-native    Step 2 - Get Dimensions  Window width height  const   width  height     Dimensions get  quot window quot     Step 3 - Use width and height variable   lt View style   width width height height 20  gt   lt Text gt test lt Text  gt                  lt  View gt

User · Answer

First get Dimensions from react-native import   Dimensions   from  react-native    then const windowWidth   Dimensions get  window   width   const windowHeight   Dimensions get  window   height   in windowWidth you will find the width of the screen while in windowHeight you will find the height of the screen

User · Answer

April 10th 2020 Answer    The suggested answer using Dimensions is now discouraged  See  https   reactnative dev docs dimensions  The recommended approach is using the useWindowDimensions hook in React  https   reactnative dev docs usewindowdimensions which uses a hook based API and will also update your value when the screen value changes  on screen rotation for example    import  useWindowDimensions  from  react-native    const windowWidth   useWindowDimensions   width  const windowHeight   useWindowDimensions   height    Note  useWindowDimensions is only available from React Native 0 61 0  https   reactnative dev blog 2019 09 18 version-0 61

User · Answer

In React-Native we have an Option called Dimensions  Include Dimensions at the top var where you have include the Image and Text and other components   Then in your Stylesheets you can use as below   ex    width  Dimensions get  window   width  height  Dimensions get  window   height     In this way you can get the device window and height

User · Answer

React Native Dimensions is only a partial answer to this question  I came here looking for the actual pixel size of the screen  and the Dimensions actually gives you density independent layout size   You can use React Native Pixel Ratio to get the actual pixel size of the screen   You need the import statement for both Dimenions and PixelRatio  import   Dimensions  PixelRatio   from  react-native     You can use object destructuring to create width and height globals or put it in stylesheets as others suggest  but beware this won t update on device reorientation   const   width  height     Dimensions get  window      From React Native Dimension Docs      Note  Although dimensions are available immediately  they may change  e g due to  device rotation  so any rendering logic or styles that depend on these constants  should try to call this function on every render  rather than caching the value   for example  using inline styles rather than setting a value in a StyleSheet     PixelRatio Docs link for those who are curious  but not much more there   To actually get the screen size use   PixelRatio getPixelSizeForLayoutSize width     or if you don t want width and height to be globals you can use it anywhere like this  PixelRatio getPixelSizeForLayoutSize Dimensions get  window   width

User · Answer

Just discovered react-native-responsive-screen repo here   Found it very handy   react-native-responsive-screen is a small library that provides 2 simple methods so that React Native developers can code their UI elements fully responsive  No media queries needed  It also provides an optional third method for screen orienation detection and automatic rerendering according to new dimensions

User · Answer

Only two simple steps    import   Dimensions   from  react-native  at top of your file  const   height     Dimensions get  window      now the window screen height is stored in the height variable

[react-native] Screen width in React Native

Examples related to react-native