We Keep Coding

Trouble Loading Expo React Native On Expo Go

Im having trouble rendering my Expo React Native App app in Expo Go. App is completely fine on web but when I try to render on mobile I get these errors. Before when I removed certain elements it was working but now that I've added a lot more libraries such as native base Im started to see more errors appear. Im somewhat new to coding so bear with me. Thank You!
Mobile Response
Original Code

You need to add alt prop to Image component
like this <Image source={} height={} width={} alt="description of image" />
border is not valid style property use from this
"borderBottomColor",
"borderBottomLeftRadius",
"borderBottomRightRadius",
"borderBottomWidth",
"borderColor",
"borderLeftColor",
"borderLeftWidth",
"borderRadius",
"borderRightColor",
"borderRightWidth",
"borderStyle",
"borderTopColor",
"borderTopLeftRadius",
"borderTopRightRadius",
"borderTopWidth",
"borderWidth`
for alignItems you need to pass any one of these "flex-start", "flex-end", "center", "baseline" or "stretch"

Generate dynamic PDF with React

how can I generate a PDF with React that accepts styling and allows me not to show the content on the page? I want to display a link (probably an a tag) on my app that generates a PDF and shows it instantly on a new tab. I have tested the following packages and here's my take on them: (I can't find a method to fit my needs).
#react-pdf/renderer: Does the job but has a couple drawbacks: 11s loading time (source: Bundlephobia) and uses primitives (View, Image, Text) so the styling is a bit different.
jsPDF: Awesome library but doesn't support CSS. Its styling is too declarative and repetitive. (If someone could explain how to handle my situation with this styling it would be more than welcome!)
html2canvas: Used in conjunction with jsPDF. This method first takes a screenshot of the page, then generates a PDF with the newly created image (jpg or png). Really usefull, but in this case it throws me an error when I don't show in the page the actual 'things' I want to show in the PDF, and, as I tell you, my goal is to only displaythe a tag.
So what's your take on this? What should I do?
Thanks a lot!

Google's Puppeteer is a Node API that allows you to control an instance of Chrome using a Node service. Leveraging this technology, you could generate PDFs using any Javascript framework ( React included ).
For detailed step-by-step guide see: https://www.pdftron.com/blog/react/react-to-pdf
And the related open-source project https://github.com/PDFTron/web-to-pdf

I use pdfMake in my backend and display the pdf with google doc:
<iframe
title="title"
src={`https://docs.google.com/gview?url=${docUrl}&embedded=true`}
style={{ height: "100%", width: "100%" }}
/>
Loading time is also a bit of an issue here. Are you trying to convert HTML directly to a PDF?

I found this library - pdfmake. It allows us to design pdf and it have it's own styling and we can dynamically pass the data using this library. I implemented this in ReactJS.

VSCode auto imports for React Native with JavaScript

I know VSCode supports auto import for JavaScript.
For some reason, it does not work with React Native. There is even a dedicated section on the VSCode website for this. But it only answers how to fix this problem for Typescript (using allowSyntheticDefaultImports). I want it for JavaScript (ES6).
I tried explicitly setting "javascript.suggest.autoImports": true, in my settings.json but that wouldn't change anything, since true is the default anyways.
How to get auto imports for React Native with JavaScript in VSCode?
PS: This plugin (suggested in this similar question) is also only for TypeScript. Besides that, since VSCode includes auto import out of the box there should be a solution without an extension for RN and JS.

You might have the 'Auto Imports' option disabled.
In VSCode go to Settings and search for 'Auto Imports' option, it should be something like this:
Just activate it if it's disabled and you'll be fine.

Install Auto Imports VSC extension, and enable Auto-imports options(for JS) in the VSC settings (File -> Preferences -> Settings).
You may try ctrl+space (for example, after placing the cursor inside the <Text> element) and select the import element from the displayed options.

For me the issue was neither the plug in nor VSCode.
I tried selecting suggestions with library name besides it and it worked for me. i.e if I want component then I will select Componet react from the suggestion and it worked.

Canvas snippets for sublime or atom text editor

How can i convert those textmate snippets for sublime or atom..
https://github.com/johnhunter/JavaScriptCanvas.tmbundle
And please What is the best text editor for developing canvas application that support autocomplete and live preview.

I got it :)
I tried to make this package for Atom and it works fine.
Also think the orginal snippets i've shared above works fine in sublime, i've just tried it.
https://atom.io/packages/canvas-snippets
if someone found more packages can help within developing canvas apps please post it here :)
here.
thanks

Here's Something I made for SublimeText.
Canvas Snippets
Features
Has every methods and Property of the Canvas' Context
And more snippets to initialize and get started setting up canvas
Also has some commonly used code
Has some Math objects property too
A CheatSheet to look up tab triggers

How do I implement jQuery Sifr Plugin properly?

I have been trying all afternoon to get the jQuery Sifr Plugin (http://jquery.thewikies.com/sifr/) to work, without success. The plugin's site has limited documentation and for something so apparently easy, I'm sure I must be nearly there. I also found some info at http://www.eona.com/sifr/ but I think it's for an older version of the plugin.
I have made my own font files using the online Sifr Generator (http://www.sifrgenerator.com/) and also on my own using Flash CS4 and neither seem to work.
Here's my code:
$(document).ready(function(){
$.sifr({
path: 'http://**.com/js/',
save: true
});
$('.pageInfo h1').sifr({
font: 'soho',
debug: true
});
});
Now, the "save: true" is not in the docs for this plugin but I did find it elsewhere on the plugin's site, the funny thing is, that without it, nothing happens but with it included, all I get is the default "Rendered with sIFR3" message instead of the text of my element.
The plugin's site also says "It supports sIFR version 2 and version 3 fonts.", what does this mean? Could my font files be in the newer v3 type?
I would really appreciate any and all help.
Thank you in advance

Here I Am!
Sorry for delay. :)
You must specify at least build and version.
Here's a sample:
$.sifr({
build: 436,
version: 3,
path: 'http://**.com/js/',
save: true
});

I had the same issue using the jQuery plugin (which uses sIFR 3 now), for me it was that the pre-published swf's were < version 436 - specifically fonts from sifrvault. Likely your font needs to be re-published, grab the ttf and use OpensIFRr.
-Jay

Have you tried skipping the font option and passing a direct reference to the swf (including the .swf file extension) to the path option? I experimented with that plugin just a few weeks ago I think that may have been necessary to get things started.
YMMV, but my experience was that many odd little bugs crept in w/ the plugin and it's was far less frustrating (plus just as easy and performant) to run a normal sifr.replaceElement inside your document(ready) code using the official sIFR 2.0.7 release from http://wiki.novemberborn.net/sifr/.

I don't believe the jQuery plugin is compatible with sIFR 3 (which I would recommend you use anyway).