In React-Native, what is the correct way to convert and display the html string without html quotes and tags?
This is an example text:
"What is the name of James Dean's character in the 1955 movie "Rebel Without a Cause"?"
In React, dangerouslysetinnerhtml option does the trick, but in native I couldn't display it correctly.
The React Native docs recommend React Native WebView.
There are alternative libraries that you can use as well such as react-native-htmlview. This library takes HTML content and renders it as native views.
npm install react-native-render-html
import { ScrollView, useWindowDimensions } from "react-native";
import RenderHTML from "react-native-render-html";
function App() {
const { width } = useWindowDimensions();
const HTML = `What is the name of James Dean's character in the 1955 movie "Rebel Without a Cause"?`
return (
<ScrollView style={{ flex: 1 }}>
<RenderHTML contentWidth={width} source={{ HTML }} />
</ScrollView>
);
}
Related
I have a div tag with all the content which i need to convert to pdf. It is a report layout.
The function below is found inside the .ts file which is called on a button click. On button click the id of the div tag is given to the function to get all the html elements as content to be exported as pdf.
import jsPDF from 'jspdf';
#ViewChild('pdfTableJspdf', { static: false }) pdfTableJspdf!: ElementRef;
downloadAsPDF_UsingJsPdf() {
let pdf = new jsPDF('p','pt','a4');
pdf.html(this.pdfTableJspdf.nativeElement, {
callback: (pdf) => {
pdf.save('sample.pdf');
},
});
}
Problem encountered is that the library jspdf is unable to export the whole content with its appropriate layout.
My requirement is to export a given html element to pdf without using autoTable and canvas.
I'm looking to create a video streaming app using react-native and roll out its web version via react-native-web so I can share the codebase. Unfortunetaly I can't wrap my head around how to properly create e.g. a <video /> element when in the browser context.
This is what I currently have:
import { RTCView, /* ... some other components */ } from 'react-native-webrtc';
import { Platform } from 'react-native';
const VideoViewNative = () => {
// Some logic
return <RTCView {/* props for RTCView */};
}
const VideoViewWeb = () => {
return <video {/* props for web video */} />;
}
export default Platform.OS === 'web' ? VideoViewWeb : VideoViewNative;
While this works as expected it does not "feel" right. I think I am bypassing react-native-web here and gettings some drawbacks from that later on.
What would be the proper way to achieve what I want to achieve and why is the approach above wrong?
you can try splitting the code out into separate files. React Native will detect when a file has a .ios. or .android. or .web. extension and load the relevant platform file when required from other components.
Example:
VideoView.native.js for android and ios, also can be separate
platform-specific VideoView.ios.js and VideoView.android.js
VideoView.js for others or you can also make it VideoView.web.js
And You can then require the component as follows:
import VideoView from './VideoView';
React Native will automatically pick up the right file based on the running platform.
Is it possible to translate strings inside the source code of a component in Angular6.
F. e.
window.confirm("HELP me");
I haven't found anything besides the normal translation for the HTML files (Angular Docs i18n).
Thank you in advance
You can use https://github.com/ngx-translate/i18n-polyfill until Angular i18n get built-in support for it, probably around version 9. The author is working on Angular i18n, so I think it is safe to trust his expectation that it will be close to the future feature in Angular i18n.
There is a lot of interesting information about the future of Angular i18n in this issue: https://github.com/angular/angular/issues/16477
i've tried a solution for that and it works, this how i managed it to translate my ngx-toaster alerts that are called inside my ts file, for example i have this:
ngOnInit() {
this.toastrService.success('created successfully', '');
}
i converted it to this
#ViewChild('test') myDivElementRef: ElementRef;
...
constructor(private toastrService: ToastrService) {}
ngOnInit() {
this.toastrService.success(this.myDivElementRef.nativeElement.outerHTML, '', {
enableHtml : true
});
and in my template, i create a div with #test reference
<h2 i18n="##testTitle" #test [hidden]="true">created successfully</h2>
In Material Angular 6:
import { locale as english } from './i19n/en';
import { locale as français } from './i19n/fr';
import { ToastrManager } from 'ng6-toastr-notifications';
Declaration
#ViewChild('espiontest') myDivElementRef: ElementRef;
in constructor
constructor(
public toastr: ToastrManager){
}
in your function or OnInt
this.toastr.successToastr(this.myDivElementRef.nativeElement.outerHTML, null, {enableHTML: true});
In html, this element {{'Add_Profil_application_lang.Creationeffectuée' | translate}} is translation in files ./i19n/en and ./i19n/fr
<pre>
<p [hidden]="true">
<span #espiontest>{{'Add_Profil_application_lang.Creationeffectuée' | translate}}
</span>
</p>
</pre>
I'm using custom fonts in my site, similar to Font Awesome, which have simple signature:
<i className="icon-plus"></i>
But I want to create own component which will be render dynamic HTML entities like:
const iconEntity = '' // (Font Awesome HTML entity example)
const icon1 = '' // dynamic entities
class OwnIcon extends React.Component {
render() {
return <i>{iconEntity}</i>
}
}
But this doesn't work. After reading this post I trier using dangerouslySetInnerHTML and it works, e.g.:
const iconEntity = ''
class OwnIcon extends React.Component {
render() {
return <i className="icon" dangerouslySetInnerHTML={{__html: iconEntity }}></i>
}
}
But it's a little bit ugly solution.
After reading JSX gotchas I found that there are solutions like:
A safer alternative is to find the unicode number corresponding to the entity and use it inside of a JavaScript string:
<div>{'First \u00b7 Second'}</div>
<div>{'First ' + String.fromCharCode(183) + ' Second'}</div>
But how I could convert(for example, Font Awesome) Unicode Private-Use characters "\f007" or HTML hex entity to get unicode number to get rid of dangerouslySetInnerHTML and render icons in more "clear" way?
Text examples: here
Put it in a Fragment so the value becomes JSX, and will be output as HTML:
const iconEntity = <Fragment></Fragment>
class OwnIcon extends React.Component {
render() {
return <i className="icon">{iconEntity}</i>
}
}
The downside to this, of course, is that you don't get to say "Let's get dangerous!" like Darkwing Duck. ;)
I have searched around...can't quite find what I'm looking for, so I appreciate any help! Here is what I am going for:
I am building a CMS-like setup for a React Native app. This is so that an admin of an app can login to the CMS dashboard, and update a page/view of the app without having to go into the hardcode. I would like them to be able to choose from a pre-set list of components and be able to drag-and-drop them into the app, in whatever order they would want and be able to update the content and colors, etc. Let me provide an example...
There is a home page that I imagine having a rotating banner at the top, then a button for a information modal, then a set of menu links to go to sub-child pages.
So what I think, development-wise, is to give the app admin a WYSIWYG type of setup, and to store the result of this in the Database. It could store in the database as:
<RotatingBanner />
<Modal />
<ContentMenu>
<ContentMenuLink title="About" />
<ContentMenuLink title="Competitive" />
<ContentMenuLink title="Recreational" />
<ContentMenuLink title="Tournaments" />
<ContentMenu />
Right now, when I try to render this into a screen, I continue to have it render that as the actual words vs the components they are representing if that makes sense. So the page looks just like the code block above, instead of seeing a rotating banner and modal, etc.
I have tried a tool to convert HTML into React Native elements...does anyone know how I can convert a fetched JSON that would look like:
{content: "<RotatingBanner /><Modal /><ContentMenu>...."}
and have it create the real components in the render function? Any other thoughts or ideas/advice on creating a CMS like this are greatly appreciated if you would like.
Thanks!
Let's say your have this JSON:
const data = {
"components": [
{"name": "component1", props: {"hello": "world"}},
{"name": "component2", props: {"color": "red"}},
]
}
Make your components and then reference them in an Object (map):
import Component1 from './Component1'
import Component2 from './Component2'
const COMPONENT_MAP = {
component1: Component1,
component2: Component2,
}
Then make your wrapper component:
const Wrapper = ({data}) => (
<View>
{data.components.map(({name, props}) => {
const Component = COMPONENT_MAP[name]
return <Component {...props} />
}}
</View>
)
Voilà :)
<Wrapper data={data} />
I would recommend using Array's to save and render multiple childrens
const Component1 = () => <Text>One</Text>
const Component2 = () => <Text>One</Text>
const childs = [
Component1,
Component2
]
return childs
React is able to render arrays as they are.
Other possible solution could be,
return Object.keys(child).map(item => childs[item] )
A quick solution can be react-native-dynamic-render
Also, you can render nested components with that.
A complete example is here