Simple Carousel in React Native – Binoy Patel

Simple Carousel in React Native  #reactnative #javascript #react #reactjs

  • First lets take a look at the code below which builds the carousel component.The carousel is nothing more than a ScrollView component.
  • There are three props that make this happen:Horizontal: As the name suggests, it makes it scroll horizontal instead of vertical.pagingEnabled: This scroll is based on the size of the view inside.
  • In our case, if we set the image width to the size of the view container, the scroll action will change to next Setting this to false, will hide the scroll bars.Inside the ScrollView we are mapping over the images props providing and returning images.
  • {images.map(image = ( Image style={styles.image} source={image.source} / ))}Finally we are wrapping it inside a View with a specific width and height, this is because when we are consuming this, we can place in a specific container instead of taking the whole page.
  • Note: To make this more reusable, it will be useful to provide props to override the width and height of the view.This concludes the tutorial on building a simple carousel.

In this tutorial we will be building a simple carousel. As a change we will be using snack to build this instead of setting a new react native project. Below is the final version of the application…
Continue reading “Simple Carousel in React Native – Binoy Patel”

Recreating the Chrome Console in React – LogRocket

  • Since a session could potentially have thousands of logs, we knew that we’d need to build a virtual list where DOM nodes are unmounted when they leave the viewport.User-interactive JSON treeExpanding objects in the Chrome ConsoleLike the Chrome javascript console, users should be able to expand objects that were logged.
  • Simply knowing the length of the list and having a rowRenderer function that can render a given row is all it needs!Our ImplementationI’m not going to describe every detail of our console implementation since much of it is a standard application of react-virtualized, but there are a few bits where we diverged that are interesting.Row HeightsAs I described earlier, react-virtualized takes a prop rowHeight which is a function that returns the height of a row at a given index.In this screenshot of the LogRocket log viewer, notice that there are 2 states for each row: default, and expanded.
  • However, when a row is expanded, its height varies as the user expands different subtrees of the object.We needed a way to write a rowHeight function that handles dynamic height rows- something like this:In order to implement getExpandedRowHeight in the above psuedo-code, there were two potential options.Guarantee deterministic height of an expanded objectTo achieve this, we would have needed to design the object tree view component from the ground up to make its height a pure function of the subtrees that are expanded.
  • Also, making this guarantee would make it difficult to iterate on the look and feel of the log viewer since changes to things like margins and padding would need to be adjusted for.Use react-measureInstead, we opted to use a library called react-measure which provides a helpful abstraction for writing components that are aware of their own height.react-measure wraps a given component and takes a prop, onResize which is a function that is called whenever the component’s size changes.In our case, whenever the size of a given row changes, we dispatch a Redux action which stores the height of that row in Redux.
  • Then in our rowHeight function, we simply get the height of the row from Redux, and react-virtualized can render it properly.There is a small performance penalty to this approach, since react-measure uses the DOM resize-observer API which isn’t implemented natively in all browsers, but in practice this is fairly minimal.Apollo ClientTo handle data fetching, we use apollo-client which is a GraphQL client that works nicely in React apps.

One of the core features of LogRocket is the replay of console and Redux logs in production web apps. To do this, you add the LogRocket SDK to your app which sends logs to LogRocket. Then, when…
Continue reading “Recreating the Chrome Console in React – LogRocket”

Image Resizing in React Native – Atif Mukhtar – Medium

Image Resizing in React Native  #javascript

  • Image Resizing in React NativeIt appears that it is difficult to create a same sized Views or Images for every device in React Native.
  • Its like calculating percentages of the image on the device screen.
  • */import { Dimensions}from = 1600;maxCanvasHeight2560 = 2560;maxCanvasWidth1536 = 1536;maxCanvasHeight2048 = 2048;export default class ImageResizer { constructor() { deviceHeight = deviceWidth = }// end of constructor getHeight(imgHeight) { if === { return ((imgWidth / maxCanvasHeight2048) * deviceScreenWidth); } else { return ((imgHeight / maxCanvasHeight2560) * deviceHeight); } }// end of getHeight getWidth(imgWidth) { if === { return ((imgWidth / maxCanvasWidth1536) * deviceWidth); } else { return ((imgWidth / maxCanvasWidth1600) * deviceWidth); } }// end of getHeight getCurrentDeviceAspectRadio() { return (deviceWidth / deviceHeight); }// end of getCurrentAspectRadio get2048DeviceAspectRatio() { return (maxCanvasHeight2048 / maxCanvasWidth1536); }// end of getCurrentDeviceAspectRatio}// end of class ImageResizerResizing the ImagesNow giving the height, width and margins to the Views and Images.
  • */import React, {Component} from ‘react’;import { View, StyleSheet, Text, Image}from ‘react-native’;import ImageResizing from ‘.
  • /Utils/ImageResizer’;let imageResizerObj = new ImageResizing();export default class Home extends Component { render() { return ( View style={style.mainContainer} View style={style.topHeader} Image style={style.topLeftButton} resizeMode={‘contain’} /Image /View Image resizeMode={‘contain’} style={style.imgMinion} /Image /View ); }}// end of Homeconst style = StyleSheet.create({ mainContainer: { flex: 1, backgroundColor: ‘white’, }, topHeader: { height: backgroundColor: ‘#cecece’, }, topLeftButton: { height: imageResizerObj.getHeight(72), width: imageResizerObj.getWidth(110), marginTop: imageResizerObj.getHeight(60), marginLeft: imageResizerObj.getWidth(40), }, imgMinion:{ }})// end of StyleSheet CreateScreens shots of two devicesNexus S, Screen size 480 x 800Nexus S (400 x 800)Nexus 5, Screen size 1080 x 1920Nexus 5 (1080 x 1920)This is it.

It appears that it is difficult to create a same sized Views or Images for every device in React Native. So i have created a class name “ImageResizer” that has some methods which returns the height…
Continue reading “Image Resizing in React Native – Atif Mukhtar – Medium”

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”

Get the Dimensions of a React Native Phone Screen

Get the dimensions of a #ReactJS Native phone screen:

  • Your link to unlock this lesson will be sent to this email address.
  • In the lesson we’ll use Dimensions to get the width and height of the screen.
  • Member comments are a way for PRO Members to communicate, interact, and ask questions about a lesson.
  • 1:10 React lesson by Jason Brown
  • Unlock this lesson and all 704 of the free egghead.io lessons, plus get React content delivered directly to your inbox!

In this lesson we’ll use Dimensions to get the width and height of the screen. Also we’ll use onLayout to detect orientation changes.
Continue reading “Get the Dimensions of a React Native Phone Screen”

React Native Heatmap – Wolox Driving Innovation – Medium

Super useuful: #ReactJS Native Heatmap

  • You will need to apply some transformations to your set of points using all of these parameters in the processPoints function .
  • We need to distinguish three points which indicate where to begin and to end the heatmap.
  • With your mapped points, you’ll see how easy it is to render the heatmap.
  • With these two simple steps, you can now incorporate heatmaps in your React Native Projects!
  • At Wolox we are creating react native heatmaps in two simple steps (Yes, two steps!

Not sure how to add a heatmap to your React Native app? We are here to help!
Continue reading “React Native Heatmap – Wolox Driving Innovation – Medium”