How to use custom fonts on Vue native? - react-native

I'm trying to use a custom font on my vue native app, but dontt find how to do this. I've tried use #font-face.enter image description here
i found something like Font.loadAsync from react native, but i don't know how to use this

I been using expo documentation, perhaps this can leads you to a solution
Edit:
Well after installing the given font package, I imported expo-font in my app.vue file then I loaded inside the google font package and that's all
//App.vue
import * as Font from "expo-font";
Font.loadAsync({
VT323_Regular: require("./node_modules/#expo-google-fonts/vt323/VT323_400Regular.ttf"),
});
//export default { ...
.myText {
font-family: VT323_Regular;
}
<template>
<view class="container">
<text class="myText">ABCDEF</text>
</view>
</template>

Related

React Native - Tailwind CSS autocomplete in VSCode for twrnc package

I am using twrnc package for using Tailwind CSS in React Native Project.
The syntax for that is,
<View style={styles.container}>
<Text style={tw.style`text-green-500 font-bold`}>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
</View>
But I am not getting suggestions from VSCode for Tailwind CSS classes. Can anyone suggest or help to get suggestions for classes?
First install Tailwind CSS IntelliSense extenstion. Then in the setting, add style to class attributes
- //Use TailwindCss in ReactNative:
- Install twrnc: npm install twrnc
- import tw from "twrnc";
- Be sure to install the TailWind CSS Intellisense extension in VS code
- Go to the extension settings and
add 'style' in Class Attributes
- Go to your project root folder and
manually create a file named 'tailwind.js' or 'tailwind.config.js'
- Start using TWCSS as in the docs: eg; <View style={tw`bg-gray-300
flex flex-1 px-5 pt-20`}>
If you haven’t already, install the Tailwind CSS IntelliSense extension.
This extension’s autocomplete and code hinting will only work on props named className or class, which React Native’s components do not have. So I’ve found that a worthwhile workaround is to implement your own versions of the React Native components and use those instead. Your version can have a className prop, which enables the suggestions from VSCode for Tailwind.
For example, your implementation of Text:
import { Text as TextRn } from "react-native";
import tw from "twrnc";
const Text = ({ className, children, ...rest }) => {
return <TextRn style={tw.style(className)} {...rest}>{children}</TextRn>
};
export default Text;
And the usage:
import View from "./src/Text"; // or wherever you added the Text.js file
// ...
<Text className="text-green-500 font-bold">Open up App.js to start working on your app!</Text>

Tailwind For Reactnative Not Working I Am Stuck At The Splashscreen

I have a reactnative project, I added:
npm install tailwind-rn
Imported it into the App.js file
**import tw from 'tailwind-rn';
export default function App() {
return (
<View style={tw('bg-blue-200 px-3 py-1 rounded-full')}>
<Text>Hey there!</Text>
</View>
);
}**
When I launch it in Expo am stuck at the Splashscreen, it doesnt go further. But when I remove the tailwind import and publish it passes the Splashscreen and loads normally.
What can be the cause? Why cant tailwimd-rn work with the app? Once I implement it an run on expo it just get stuck at the Splashscreen.
Instead of putting '' in the style tag, use `` and remove the () bracket in the style tag.

Icon showing wrong react-native-vector-icon (icomoon)

I need to show SVG icons inside my application, I did the entire process of installing the react-native-vector-icons library and configuring icomon. Also, I went to the icomon website and created my font files. But when I use it, the application renders an icon different from the one I should be reloaded by the file.
config icomon
import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import icoMoonConfig from '../../assets/customIcons/selection.json';
export default createIconSetFromIcoMoon(
icoMoonConfig,
);
icon that should be loaded.
icon being loaded
My code
export function ItemMenuDropdown({ item }) {
const navigation = useNavigation();
return (
<Container onPress={() => navigation.navigate(item.navigation)}>
<Content>
<CustomIcon name="pencil" size={normalize(18)} color="#F68B1F" />
<Text>{item.item}</Text>
</Content>
</Container>
)
I've looked for several solutions here on the site, but I haven't found one that works. Can someone help me?
I think the problem is in your selection.json file. It's either out of date or you're having some kind of cache problem. Maybe you want to try the same operation using this module.
react-icomoon

How do I add a FontAwesome icon in expo

I'd like to include font awesome icons in my app.
I'm using expo to buil a native app.
The documentation states I don't need to install font awesome, but I do need to import as well as get the syntax right.
Any help would be greatly appreciated.
import { FontAwesome } from '#expo/vector-icons';
<TabBarIcon
focused={focused}
name={Platform.OS === 'ios' ? 'fa-newspaper-o' : 'md-link'}
/>
I'm doing something wrong as the icon is not showing up.
You should use it like this
import { FontAwesome } from '#expo/vector-icons';
...
<FontAwesome name={'newspaper-o'} />
It needs to be wrapped in its own named component.
You should also make sure that you use the correct name as per the directory https://expo.github.io/vector-icons/
fa-newspaper-o isn't the correct name it should be newspaper-o
Also md-link is an Ionicons icon, using that in a FontAwesome component will cause a warning and it won't work.
In my case I was trying to use Font Awesome 5 Icons with just font awesome, I had to use
import { FontAwesome5 } from '#expo/vector-icons';
<FontAwesome5 name={iconName} />

Render HTML in React Native

In my React Native app, I am pulling in JSON data that has raw HTML elements like this: <p>This is some text. Let’s figure out...</p>
I've added the data to a view in my app like this:
<Text>{this.props.content}</Text>
The problem is that the HTML comes out raw, it does not render like it would in a browser. Is there a way to get my JSON data to look like it would in a browser, inside my app view?
Edit Jan 2021: The React Native docs currently recommend React Native WebView:
<WebView
originWhitelist={['*']}
source={{ html: '<p>Here I am</p>' }}
/>
https://github.com/react-native-webview/react-native-webview
If you don't want to embed a WebView, there are also third party libraries to render HTML into native views:
react-native-render-html
react-native-htmlview
Edit March 2017: the html prop has been deprecated. Use source instead:
<WebView source={{html: '<p>Here I am</p>'}} />
https://facebook.github.io/react-native/docs/webview.html#html
Thanks to Justin for pointing this out.
Edit Feb 2017: the PR was accepted a while back, so to render HTML in React Native, simply:
<WebView html={'<p>Here I am</p>'} />
Original Answer:
I don't think this is currently possible. The behavior you're seeing is expected, since the Text component only outputs... well, text. You need another component that outputs HTML - and that's the WebView.
Unfortunately right now there's no way of just directly setting the HTML on this component:
https://github.com/facebook/react-native/issues/506
However I've just created this PR which implements a basic version of this feature so hopefully it'll land in some form soonish.
I found this component. https://github.com/jsdf/react-native-htmlview
This component takes HTML content and renders it as native views, with customisable style and handling of links, etc.
A pure JavaScript react-native component that renders your HTML into 100% native views. It's made to be extremely customizable and easy to use and aims at being able to render anything you throw at it.
react-native-render-html
Using this component will improve your application memory footprint and performance when compared to embedded WebViews.
Install
npm install react-native-render-html --save or yarn add react-native-render-html
Basic usage
import React from "react";
import { ScrollView, useWindowDimensions } from "react-native";
import RenderHTML from "react-native-render-html";
const html = `
<h1>This HTML snippet is now rendered with native components !</h1>
<h2>Enjoy a webview-free and blazing fast application</h2>
<img src="https://i.imgur.com/dHLmxfO.jpg?2" />
<em style="textAlign: center;">Look at how happy this native cat is</em>
`;
export default function App() {
// Allow images to scale to available width
// with contentWidth prop.
const { width } = useWindowDimensions();
return (
<ScrollView style={{ flex: 1 }}>
<RenderHTML contentWidth={width} source={{ html }} />
</ScrollView>
);
}
RenderHTML Props reference
You may customize the style of elements via class names, tags, and you can even register custom renders for tags. More info on the official website.
i uses Js function replace simply.
<Text>{item.excerpt.rendered.replace(/<\/?[^>]+(>|$)/g, "")}</Text>
React Native has updated the WebView component to allow for direct html rendering. Here's an example that works for me
var htmlCode = "<b>I am rendered in a <i>WebView</i></b>";
<WebView
ref={'webview'}
automaticallyAdjustContentInsets={false}
style={styles.webView}
html={htmlCode} />
<WebView ref={'webview'} automaticallyAdjustContentInsets={false} source={require('../Assets/aboutus.html')} />
This worked for me :) I have html text aboutus file.
import HTML from "react-native-render-html";
var htmlCode = "<b>I am <i>Italic</i></b>";
<HTML source={{html: htmlCode}}/>
The WebView component was not rendering for me HTML snippets, like
<b>hello</b>, world!
But if I would enclose the HTML snippet in a document, like the example below, then it did actually render the document:
<View style={styles.accContent}>
<WebView source={{html: `<!DOCTYPE html><html><body style="font-size: 3rem">${data.content}</body></html>`}} />
</View>