Pixel perfect cloud images in React Native – uncommon

Pixel perfect cloud images in React Native:  #ReactJS #JavaScript

  • It could simply define itself with a flex, like belowImage style={{flex: 1, backgroundColor: ‘red’}} resizeMode={‘cover’} source={{uri: /You could use Image component’s resize mode techniques to achieve the desired effect.Issue here is that you have not optimized image for exact screen resolution of the device.To do that, you need to generate a cloud url that includes dimensions of the image, which, is known only at runtime when Image layout is measured.
  • So you end up providing onLayout function to Image component, get those dimensions, generate a url and then finally re-render Image component with probably a state change in the parent component.You need to go through the same chore every time you would like to fetch an image from cloud service.
  • I will be using Cloudinary as image service provider, but the concept can be extended to any other cloud image service.CLImage component needs to track image width, image height.
  • Here is the snippet for renderImagerenderImage() { let opts = {} Object.assign(opts, this.props.options,{ width: this.state.imageWidth, height: this.state.imageHeight })return ( Image style={{ width: this.state.imageWidth, height: this.state.imageHeight }} source={{ uri: opts) }}/ )}And finally the placeholderrenderFreeForm() { return ( View style={[this.props.style, styles.background]} onLayout= {(event) = / )}Since React Native deals with device independent pixels, it is important to use PixelRatio to determine actual pixel size of the image.
  • This is how imageUrl function is going to look likeimageUrl(cloudId, options={}) { let opts = {} Object.assign(opts, {crop: “fill”, gravity: “face”, format: “jpg”, quality: 75, secure: true}, options) opts.width = opts.height = let url = cloudinary.url(cloudId, opts) console.log(“Image url is:” + url) return url}with CLImage component built, now I can use it to render cloud images with out explicitly specifying width/height, see belowView style={styles.mainContainer} CLImage cloudId={“sample_1”} / View CLImage cloudId={“sample_3”} / CLImage cloudId={“sample_4”} / CLImage cloudId={“sample_2”} / View CLImage cloudId={“sample_6”} / CLImage cloudId={“sample_5”} //ViewStyles for the sameconst styles = StyleSheet.create({ mainContainer: { flex: 5 }, flexOneContainer: { flex: 1 }, portraitContainer: { flex: 2, flexDirection: ‘row’}})You would have noticed that we have not given any information on width and height of the image.

Mobile devices come in multiple screen resolutions. When we display images it is important to ensure that the images displayed are optimized for screen resolution. This will ensure that images will…
Continue reading “Pixel perfect cloud images in React Native – uncommon”

Jest 14.0: React Tree Snapshot Testing · Jest

  • For Facebook’s native apps we use a system called “snapshot testing”: a snapshot test system that renders UI components, takes a screenshot and subsequently compares a recorded screenshot with changes made by an engineer.
  • As a result many people stopped writing tests altogether which eventually led to instabilities.
  • With snapshot testing I do not need the output files, the snapshots are generated for free by Jest!
  • Engineers frequently told us that they spend more time writing a test than the component itself.
  • import renderer from ‘react/lib/ReactTestRenderer’ ; test ( ‘Link renders correctly’ , ( ) = > { const tree = renderer .

Read the full article, click here.


@cpojer: “Jest 14.0: React Snapshot Testing, experimental React-Native support and future plans for Jest. Try it out now!”


One of Jest’s philosophies is to provide an integrated “zero-configuration” experience. We want to make it as frictionless as possible to write good tests that are useful. We observed that when engineers are provided with ready-to-use tools, they end up writing more tests, which in turn results in stable and healthy code bases.


Jest 14.0: React Tree Snapshot Testing · Jest