Image dimensions for cards

[LydiaCha]

Hi,

I'm using the apple-cards as articles and each article will be uploaded through a CMS with an image. The image needs to be resized prior to being uploaded as it might not work with the card. For example, a landscape image might not fit well with the view.

What are the width and height of the card so that I can revise the images accordingly?

I have attaches a screenshot of my attempt to find the right dimensions. The image I've used for now is 1995 × 2020.

[WrathChaos]

Hello @LydiaCha, Thank you for reaching me and using this library :)

Actually it depends on the device's screen width and height but I'm refactoring the whole library with Typescript. It will be fully customizable. It will be ready in an hour. I will inform you when it is ready and you can customize the card as you need :)

[LydiaCha]

Hello @LydiaCha, Thank you for reaching me and using this library :)

Actually it depends on the device's screen width and height but I'm refactoring the whole library with Typescript. It will be fully customizable. It will be ready in an hour. I will inform you when it is ready and you can customize the card as you need :)

amazing, thanks!

[WrathChaos]

Hey again @LydiaCha, Here is the newest version of the Apple Card Views. It is fully customizable now and finally re-written with Typescript. Please test it out and if you need anything else please open another issue :)

Here is the example of how to customize the card:

 <AppleCard
       footnoteText=""
       source={require("./assets/hero_bg_brawlstars_.jpg")}
       onPress={() => {}}
       resizeMode="cover"
       backgroundStyle={{
          height: 200,
       }}
 />

You can customize it depends on your use-case :)

Release 1.0.2 🥳

• Typescript Conversion
• Fully Customizable Version 🥳
• New props for customization
• Reduced the library size 8Mb to 11.6 kB 🎉

[LydiaCha]

Amazing thanks!

[LydiaCha]

@WrathChaos

Hey, sorry to bother you again but is this normal? It seems like the card is duplicated, I have both the js and tsx files. And there seems to be an error with 'source'

[WrathChaos]

@WrathChaos

Hey, sorry to bother you again but is this normal? It seems like the card is duplicated, I have both the js and tsx files. And there seems to be an error with 'source'

Hey again @LydiaCha, It is on purpose for better debugging but it is not necessary. It should not cause an error. Have you tried the new example? Because I did not get any error.

Try this command and re-run your code please.

rm -rf node_modules && rm -rf package-lock.json && npm i 

If error still there, please send me the screenshot of it with the example code.

[LydiaCha]

It's working in terms of being able to change the size of the card etc but it can't find the "./assets/hero_bgbrawlstars.jpg" I tried putting a link to an image online instead of the hero_bgbrawlstars but it's erroring:

[WrathChaos]

It's working in terms of being able to change the size of the card etc but it can't find the "./assets/hero_bgbrawlstars.jpg" I tried putting a link to an image online instead of the hero_bgbrawlstars but it's erroring:

You cannot get the online uri with require. You need to do like this:

{
   uri: "your-url"
} 

Replace it with this.

[LydiaCha]

Ahhh ok thanks! I'm pretty new to react and react-native. If I'm pulling images from firebase can I use require?

[WrathChaos]

It's okay, you can ask anything :) I need to see an example for firebase, are you trying to get the images from uri? If it is you cannot use require. You can only use require for local images which means they're inside the project itself.

[LydiaCha]

Long story short, I have a web CMS in react where I create articles. The data is saved in firebase and then the plan is to pull everything to my react-native app. I managed to upload the images to firebase storage but I'm having trouble referencing the images in Firestore. As a result, the images don't know to which 'article' they belong. When When I manage to make the connection, the idea is that the 'Storage location' from Storage will be saved as a field in my documents. So I assume that when I pull the images I will do so from the fileUrl in Firestore where I'm referencing the 'Storage location' in Storage.

Hope this makes sense! If you have the time and energy to also have a look at my mess of a code and the issue I'm having adding the 'fileUrl' field with all the other fields, I made a post on Stack Overflow, got an idea of what needs to happen from one of the responses but now I'm getting an error saying 'Unhandled Rejection (TypeError): Cannot read property 'state' of undefined'. It's my first react and react-native project 😔

error--> https://freeimage.host/i/screenshot-2020-08-27-111724.d4bSdG

Stack overflow--> https://stackoverflow.com/questions/63598418/how-do-i-join-the-file-url-field-firestore-storage-with-the-other-fields-in-fi/63600524?noredirect=1#comment112468913_63600524

[WrathChaos]

I will take a look at that when I have time. Let's don't mess this issue up. I will answer you from StackOverflow :)

[LydiaCha]

Thanks so much, I appreciate this!