![]() Also import the ScrollView, Image, and ActivityIndicator components from React Native.Īdd this statement to your App.js function before the return statement, like so: const = eState(false) ![]() Next, import the image array contained in the images file in src. ![]() To ensure our style translates, the image should cover the entire view - specified where we wrote “100 percent width” - and all children should be justified and center-aligned. We then wrap all of the children components in the ImageBackground component and specify the styling. The require statements tell the metro server to include the image in the bundle. The CommonJS syntax is used to tell the metro server when to load the image in the application bundle. Open App.js and add the following code: import from "react-native" Ĭonst staticImage = require("./src/assets/static-image.png") Īs you can see, we imported the ImageComponent and then stored the location of the static image in a variable named staticImage. We’ll use it to demonstrate how React Native loads static images. For this demo, I added an image named “static-image” in the src/assets directory. The final code is in the main branch.įirst, let’s add a background image to the app. If you’d like to follow along, you can clone this repository and checkout to the startup branch. For this tutorial, I am following the Expo installation and setup instructions. To get started, you’ll want to use this React Native environment setup. Now that we’ve gotten past the theory, let’s get our hands dirty with a demo. The ImageBackground component also accepts the same props that the Image component accepts. Background images in React NativeĬSS is typically the language used to add background images, but React Native provides an ImageBackground component that makes similar functionality available in web applications. If you’re interested, you can browse other props in the React Native documentation. style: used for styling the image component.center: centers the image in the view along both dimensions.repeat: repeats the image to cover the view until it’s filled.stretch: scales the width and height independently of each other.contain: the opposite of the cover property, contain scales the width and height of the image to be equal to or lesser than the size of the view.cover: scales the width and height of the image to be equal to or greater than the size of the view.This prop controls how images are adjusted when their dimensions don’t fit the size of the frame. A default image can be specified, which will load until the network image becomes available. This prop is useful when your component expects to load a network image. Source will also accept a cache property that tells the component how to cache network images, but this only works for iOS. ![]() If you need to specify the image’s width and height dimensions, you can also pass multiple URIs through it and leave it to the device to select the best one for use. You can use either a local or remote file here, and basically, just pass the URI of the image to load it. This is the main property that tells the component about the image you want to load. There are quite a few of them, but we’ll focus on the basic ones for now. The React Native Image component provides some properties you can use to configure the component and display the images according to your team’s business or technical needs.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |