![]() ![]() 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. REACT IMAGE VIEWER CODEThe 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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |