Image resizing in React Native

Question

I am trying to resize an image  smaller to fit screen  in my react native app but am unable to do it as it is too big   Here is the code    use strict    var React   require  react-native    var     StyleSheet    Text    TextInput    View    TouchableHighlight    ActivityIndicatorIOS    Image    Component     React   var styles   StyleSheet create     description        marginBottom  20      fontSize  18      textAlign   center       color    656565         container        padding  30      marginTop  65      alignItems   center         flowRight        flexDirection   row       alignItems   center       alignSelf   stretch         buttonText        fontSize  18      color   white       alignSelf   center         button        height  36      flex  1      flexDirection   row       backgroundColor    48BBEC       borderColor    48BBEC       borderWidth  1      borderRadius  8      marginBottom  10      alignSelf   stretch       justifyContent   center         searchInput        height  36      padding  4      marginRight  5      flex  4      fontSize  18      borderWidth  1      borderColor    48BBEC       borderRadius  8      color    48BBEC         image        width  200      height  220           class SearchPage extends Component     render         return          lt View style  styles container  gt            lt Image source  require  image rclogo    style  styles image   gt            lt Text style  styles description  gt            Search for RCers           lt  Text gt            lt Text style  styles description  gt            Search          lt  Text gt            lt View style  styles flowRight  gt             lt TextInput             style  styles searchInput              placeholder  Search by Batch  Name  Interest      gt             lt TouchableHighlight style  styles button                underlayColor   99d9f4  gt               lt Text style  styles buttonText  gt Go lt  Text gt             lt  TouchableHighlight gt           lt  View gt            lt TouchableHighlight style  styles button              underlayColor   99d9f4  gt             lt Text style  styles buttonText  gt Location lt  Text gt           lt  TouchableHighlight gt          lt  View gt                  I tried to take it out of the container tag but cannot seem to understand why it will not render properly   Can this be done with flexbox resizeMode  How do you do it  I can t find any docs on it

User · Answer

Hey to make your image responsive is simple: here is an article i wrote about it. https://medium.com/@ashirazee/react-native-simple-responsive-images-for-all-screen-sizes-with-flex-69f8a96dbc6f

you can simply do this and it will scale

_x000D_

container: {
    width: 200,
    height: 220
  },// container holding your image 


  image: {
    width: '100%',
    height: '100%',
    resizeMode: cover,
  },
});

_x000D_

this is because the container which holds the image determines the height and width, so by using percentages you will be able to make your image responsive to all screens size.

here is another example:

_x000D_

<View style={{
width: 180,
height: 200,
aspectRatio: 1 * 1.4,
}}>
<Image
source={{uri : item.image.url}}
style={{
resizeMode: ‘cover’,
width: ‘100%’,
height: ‘100%’
}}
/>
</View>

_x000D_

User · Answer

I tried other solutions and I didn t get the result I was looking for  This works for me   lt TouchableOpacity onPress       gt  navigation goBack    style    flex  1    gt           lt Image style    height  undefined  width  undefined  flex  1                source    uri  link    resizeMode  quot contain quot            gt   lt  TouchableOpacity gt   Note I needed to set this as property of image tag than in css  resizeMode  quot contain quot   Also note that  you need to set flex  1 on your parent container  For my component  TouchableOpacity is the root of the component

User · Answer

This worked for me   image      flex  1    width  900    height  900    resizeMode   contain      Just need to make sure that the width and height are bigger than you need as it is limited to what you set

User · Answer

Here s my solution if you know the aspect ratio  which you can either get from the image metadata or prior knowledge   This fills the whole width of the screen  but that  of course  can be adjusted    function imageStyle aspect          Include any other style requirements in your returned object      return  alignSelf   stretch   aspectRatio  aspect  resizeMode   stretch        This looks a bit nicer than contain  and takes less finessing with sizes  and it will adjust the height to maintain the proper aspect ratio so your images don t look skewed   Using contain will preserve the aspect ratio but will scale it to fit your other style requirements  which may drastically shrink the image

User · Answer

This worked for me   image        flex  1      aspectRatio  1 5       resizeMode   contain          aspectRatio is just width height  my image is 45px wide x 30px high

User · Answer

Use Resizemode with  cover  or  contain  and set the height and with of the Image

User · Answer

I adjust your answer a bit  shixukai   image        flex  1      width  50      height  50      resizeMode   contain      When I set to null  the image wont show at all  I set to certain size like 50

User · Answer

After setting the width and the height of the image then use the resizeMode property by setting it to cover or contain The following blocks of code translate from normal css to react-native StyleSheet    In normal css  image     width  100px     height  100px     object-fit  cover         in react-native StyleSheet image      width  100     height  100     resizeMode   quot cover quot       OR object-fit contain    In normal css   image     width  100px     height  100px     object-fit  contain          in react-native StyleSheet image      width  100     height  100     resizeMode   quot contain quot

User · Answer

flex  1  resizeMode   contain    worked for me  I didn t need the aspectRatio

User · Answer

Try this   for more details click here   image    flex  1  height  undefined  width  undefined  resizeMode   contain

User · Answer

image auto fix the View  image        flex  1      width  null      height  null      resizeMode   contain

User · Answer

In my case I could not set  width  and  height  to null because I m using TypeScript   The way I fixed it was by setting them to  100     backgroundImage        flex  1      width   100        height   100        resizeMode   cover

User · Answer

Ran into the same problem and was able to tweak the resize mode until I found something I was happy with  Alternative approaches include    Reduce the size of the Static Resource using an image editor Add a transparent border to the static resource using an image editor Use a Network Resource at the expense of UX   To prevent loss of quality while tweaking images consider working with vector graphics so you can experiment with different sizes easily  Inkscape is free tool and works well for this purpose

User · Answer

After trying some combinations  I get this working like this   image        width  null      resizeMode   contain       height  220     Specifically in that order  I hope this can be helpful for someone   I know that is an old question

User · Answer

flex  1  height  undefined  width  undefined  resizeMode   contain     If you are using these attributes in your style prop in the  lt Image   gt  and the image is disappeared  Put your image into a  lt View gt  tag  Like this   lt View    style          width   100         height   30            gt             lt Image             source  require     logo png                style                  flex  1                height  undefined                width  undefined                resizeMode   contain                             resizeMode   cover               gt   lt  View gt    Give your view the width and height you want

User · Answer

This worked for me   image        width  200      height 220      resizeMode   cover      You can also set your resizeMode   contain   I defined the style for my network images as    lt Image     source   uri rowData banner path      style         width  80       height  80       marginRight  10       marginBottom  12       marginTop  12     gt    If you are using flex  use it in all the components of parent View  else it is redundant with height  200  width  220

[javascript] Image resizing in React Native

Examples related to javascript

Examples related to reactjs

Examples related to react-native