React Native Tutorial #27 - Using Images

----------------------------------------

🐱‍💻 🐱‍💻 Course Links:

🐱‍💻 🐱‍💻 Other Related Courses:

[grgrsm]

dynamic paths and javascript syntax logic doesn't work with require because these images are preloaded and bundled by a bundler script, that reads the code literally as text, before any javascript execution. It then replaces the require keyword with some object definition that links to the resource location, and then starts your application.

[JackChan]

I’m have been following this series for some time and i gotta say this, you are the clumsiest ninja i have ever seen. The amount of typos you make is just driving me crazy

[irynakvachuk]

if you have problems with images visualisation, that could be because of size, try to add this style for <Image/>:
image: {
flex: 1,
width: null,
height: null,
resizeMode: 'contain'
}

[PayDaySeaFood]

Which is the best way to display dynamic images? Like in an application that users can upload images, it will not be possible to hardcode the images.

[kevinariza]

Hello, people! I had problems rendering the image. Such a problem was caused because the Image component must have the style property with its height and width defined in it. Since the width of the images is different for each image, I took advantage of the rating const number, which we get from navigation.getParam('rating') multiplying it by 21, which is the heart (rating-1.png) size in pixels. This is what I did: <Image style={{width: rating*21, height: 21}} />

[os-geeks]

rating: {
flexDirection: 'row',
justifyContent: 'center',
paddingTop: 16,
marginTop: 16,
borderTopWidth: 1,
borderTopColor: '#eee'
}

[ramonlopez]

require uses a string as parameter in wich you cant' concatenate other variables inside, but what if you just declare a let variable to pass the already defined string into require?, would that work?
i mean something lijke this

export default function ReviewDetails({ navigation }){
let '.jpg'
return(
<Image source={require(imgPath)}/>
)
}

[developersdiary]

working solution would be to use function with switch case statements ;)

[sebaisaad]

hey guys. if
const rating = didn't work, try
const { rating } = route.params;

[Muzly]

Is it possible to render an image multiple times based on a variable? For example, render a single heart three time for a rating of 3?

[webpapi]

had to use params here to fix...

const params = useLocalSearchParams

<Image
source={images?.['rating' + params.rating]}
/>

...

where I put all my images in a folder to read the { images.whatever }

[mikehu]

fortunately the rating images are in sorted order.
because "images.ratings[rating]" is actually parsing through an array
and the key aren't really used here

[seifamr]

what about using template strings to require dynamic rating icon?

[sstp]

Hardcode all the images is not a practical approach. What if you are fetching an API or getting images from database? I think we coulud just declare a variable for the image path from props and then pass as the require parameter. e.g. const imgPath = ...

[RavindraKumar-mnjk]

Asset images are not showing sometime when we reopen application. I had used require statement as per the React Native documentation. After clear data we show those images .Can you suggest me how to load these asset images so I can handle this issue.

[pavanbillore]

bvlineargradient was not found in the uimanager? solution plz

[muhammadtaufik]

Anyone help me, I tried the Image element but my application suddenly crashes when displaying photos

[suruchisrivastava]

can anybody tell how to add Scrollbar if I'm going to use huge no. of Items in list.

[StarBattle]

Lol, and i i'm over here thinking i was smart by using template string until i found out it doesn't work 🤪

[StarBattle]

why did we define the ratings property as strings instead of just number