Images in React-Native

-

 Images

Local storage images with React-Native

I will run these code examples in the App.js file, this is an easier way to practice code and see what any alterations do. The return method displays the commands added to it. Safe Area View is an iOS specific command that creates enough padding to avoid the speaker and front facing camera on an Apple phone. You might have noticed media streaming content that does not use the safe area view and cuts of a section of the image or video you might be viewing on the phone. It's only a small section but can become really annoying.

React-Native Style Sheet

The style sheet is needed before adding any images, this allows us to control the image dimensions. The Style sheet API is imported from react-native, this then allows us to create a style sheet container. Best practice is to have a separate style component that gets called into the functional component but for the sake of these examples I will create it at the bottom of the page (Which is also acceptable in certain components) the container dimensions are set in the Style sheet component, this sets the size of the image when it is displayed and controls its dimensions. Finally we set the style of the Safe area view by calling the container style.

React-Native Style Sheet code
Style sheet example

By storing images in the Assets folder, we can use the 

Image source={require("File path")}/>  

to call that image to be displayed. In this example below I have used the football_avatar.png image that is stored in the Assets folder of the application and displayed on an iOS device. When the require function is used, React-native packager will include the image in the bundle. This means that application size will increase with every image required. It is recommend to only use static images only if they are needed to be shipped with the app.


React-Native code for local storage images
Code for local storage Image

Example image display (Football avatar)
Result on iOS device

Network images in React-Native 

For the network images I used a random image form picsum. Lorem picsum generates a random open source image. The require function is no longer needed for network images and an object is passed instead. This object has a property called uri: and is set to string. React-Native wont display a network image without setting the dimensions inside the component. This is allowed with local images because the require function reads the meta data for the images. In the object that is passed to the source prop we set two extra properties of width and height. This adds the dimensions of the image and allows react-native to display the image correctly.

React-Native code for network images
Code for network image

 

Network image displayed on iPhone
Image from Picsum Taken form iOS Device

The image component has a number of props that can be used for example blur radius will blur the image to the degree in which it is set. Loading Indicator source allows an image to be displayed while the actual image is being downloaded. Some props are framework specific like the fade duration prop that is only supported by android, it loads the image with a fade effect that can be changed to set how long the fade in will take to load in the image. In the next post I will go through the steps used to make an image touch responsive.





Comments

Post a Comment

Popular posts from this blog

Touchable Image Components in React-Native

-
Image
Touchable Components in React-Native            Image components do not have a prop or event that allows click or touch. Touchable is used to make an image touchable and set what touching the image will do. The three touchable components in react-native are touchable highlight, touchable opacity and touchable without feedback. The component first has to be imported from react-native.          Touchable without feedback: after importing the component, to make the image touchable wrap the image in a <TouchableWithoutFeedback> component. This component has events like onPress and onLongPress. The onLongPress is useful if you want a user to tap and hold on a component. To handle the onPress event we pass a function by adding in this example a console.log to show the image has been tapped by adding onPress={() => console.log (“Image Tapped”)}> . Now when the image is tapped it does not give any feedback due to the Tou...
Read more

React-Native with Expo

-
Image
React-Native with Expo  I will cut out the environment setup and add a link to one of the many video tutorials you can find on YouTube here . The video linked is the one I followed to get my environment up and running, so it worked on my machine at home. I know bad developer joke.  The whole purpose of this blog is to go over some basic techniques and methods that can be used when developing a React-Native application using expo. Mastering these techniques will give you a great advantage in developing a more complex application. I followed some basic to do list tutorials to get me started and learn react native with expo. Any command line entries I have changed the font and made them bold so we don't confuse them with the normal text around them.  After the environment is set up and you have created a folder to store the new application in. Navigate to that folder and run the command prompt by selecting the file path at the top this...  Highlight all of it and type c...
Read more

Buttons & Alerts in React-Native

-
Image
Implementing Buttons in React-Native The button component in React-Native is like all other components and can be auto imported, by starting to type the <Button> you should see an auto import drop-down, just be careful when using this as it can sometimes auto import from the react-native web or other libraries. In these examples I am importing form "react-native". With buttons the self-closing syntax can be used because there is nothing added between them. Give the button a title ( title="Tap Button" )  or your choice of words and handle the onPress event by passing a function. I'll use the console.log for these examples ( onPress={() => console.log("Button Tapped")}> ) Each platform displays the button according to its native components.  Button Code with console.log Console logging the message Alerts with React-Native For the alert example we can use the button clicked code and change the console.log function to an alert function, it is t...
Read more