How can I custom fonts to my React Native project? [closed] - javascript

Closed. This question is not written in English. It is not currently accepting answers.
Stack Overflow is an English-only site. The author must be able to communicate in English to understand and engage with any comments and/or answers their question receives. Don't translate this post for the author; machine translations can be inaccurate, and even human translations can alter the intended meaning of the post.
Closed 6 days ago.
Improve this question
I'm new to React Native and need to finish a project for my team. The app is almost ready, but the fonts are a problem. I've followed many tutorials, step by step, and it's not working. I would like someone who has knowledge to help me.
1- I added my fonts to the 'assets/fonts' folder in the project root.
2- I downloaded and added the fonts enter image description here
3- I created a file called react-native.config.js with the following code:
module.exports = {
project: {
ios:{},
android:{}
},
assets:['./assets/fonts/'],
}
4- I should link these fonts using the 'npx react-native-asset' command (previously 'npx react-native link' which changed in recent versions of React Native), but I can't link it and I don't know why.
5- Once linked, I need to export it globally to all pages. How do I do this?
My app.js
import React from 'react';
import './src/config/ReactotronConfig';
import Home from './src/index';
const App = () => <Home />;
export default App;
I would like help linking the fonts and how to export them globally in my system.

Related

How does React.js handle CSS file? [duplicate]

This question already has answers here:
What is the purpose of css-loader in webpack
(2 answers)
Closed last month.
I am attending Bootcamp on Scrimba and they are using the online platform. In React course, the CSS file, while I am working locally, I use index.css file and then in the index.js file I import it:
// CSS File
import "./index.css";
But I need to understand please how React deals with CSS file?
Why we don't use the normal main.css file in the index.html? How is it translated into that in the index.html file and there is no link for style sheet?
how it is translated into that in the index.html file and there is no link for style sheet
If you pay close attention, there is even no <script> in the HTML file to load your JS application, but it still works!
As implied by Kokodoko in the question comments, some React tooling is at work here. It is usually based on webpack build engine, which uses loaders and plugins to handle different types of files (including your CSS), and to generate an HTML file based on your template, but with injected <script> and <link> (or <style>, depending on your actual loaders and their configuration).
There would be too much to cover if you want more explanations, but there are a lot of resources that describe the history and how it works in details. See e.g.:
webpack concepts: https://webpack.js.org/concepts/
HtmlWebpackPlugin: https://webpack.js.org/plugins/html-webpack-plugin/
BTW, Angular works this way as well, regarding bundling and injection of script and style into HTML.

How do I use Khan academy Perseus to create a simple math question?

I want to create a website that looks like this. I'm trying to use perseus (the official Khan academy API), but I haven't been able to make a mock up yet. I'm new to react and storybook, so I'm having a bit of trouble. I've been able to install everything properly, but I can't figure out how to actually use the storybook widgets and embed them into a react webpage (i.e., render a UI component like in App.js). Does anyone know how to do this?

Twillio Script tags in React component

Im trying to use the Twilio script tag for an international country list dropdown and I am following this twillio guide to do so. However, I got to a point where it is showing a step where I have to include a script in the html file( for me it is index.html which is react's root file) and use the element from the window object.
Here is the snippet in the guide:
The issue here is that this guide was made with regular html,css, and javascript in mind and not with React/JSX files in mind. Is there any way I can handle this in a react file? Here is the doc in case you guys need to take a look. Thanks!
https://www.twilio.com/blog/international-phone-number-input-html-javascript
Twilio developer evangelist here.
The intl-tel-input project was initially built for jQuery, though no longer depends on it. So it wasn't really written for React, though it might be possible to integrate it with some work.
However, there is a project that has reimplemented the intl-tel-input in React, it's called react-intl-tel-input and might be the thing you are looking for.
You can install it with
npm install react-intl-tel-input
And use it in your React project by importing the component and its CSS:
import IntlTelInput from 'react-intl-tel-input';
import 'react-intl-tel-input/dist/main.css';
Then using the <IntlTelInput> component:
<IntlTelInput
containerClassName="intl-tel-input"
inputClassName="form-control"
/>
See the npm project page for more details.

How to know in which files react component is getting exported in whole existing react app?

I am working with one react project and I am new to react. I was used to doing backend stuff. So my question is in a big project you can track to class instances by clicking their references in visual studio. So we don't have to go in each and every file to find where it is being used.
Is there any way like that in React with Visual studio code. to track the component where it's been imported in the whole app. So we don't have to go in each and every file to find whats the used case of that component.
For example, I have this Modal.js stateless component. And I want to know where it's being exported in whole app so I can know whats props are coming to it and how it is used without going each and every file to find its imports.
One way, albeit simple, is to use the search functionality of Visual Studio Code to search "import Modal" (make sure it is case-sensitive).
This should return each instance/file where you import the component in question.
The search function can be found on the left toolbar where the magnifying glass is.

How to download and run code using eval on React Native?

Context:
We are already using a framework to develop our mobile app which is pretty similar to React Native (We write everything in JS and it runs on Android and iOS).
Our framework provides some built-in APIs to display things on the screen and do other stuff.
Example:
function homePage() {
List.addTitle("Welcome");
List.addButton("Next", "goToNextPage()") // List.addButton(label, onclick)
List.show() // will display currently what is in the buffer or List
}
On Android, when a user logs in, they will download the latest code and run it (via eval). On iOS, we need to make a new build and submit to Apple everytime we need to release a new version
Goal
The goal is to migrate to React Native and only reimplement the basic APIs of the old platform (like List) so that we can keep using the code that we already wrote.
I've seen solutions like CodePush / AppCenter but our code is not in ReactNative yet so I don't think it will work for us.
This question and this one are related but do not have concrete answers.
I've written a small Snack to give you an idea of how I hope it would work.
The Login component handles the login
The SignIn component evals the code and renders whatever is in that code
Question
I had to reimplement the List API in the same file as SignIn.js.
If I try to import it, then List will be undefined in the eval.
Why?
With this method, the downloaded code will have to be eval'd everytime we refresh the page or navigate to another screen. I'm worried about the performances, is there a better way to do this?
Thanks a lot for your help

Categories