I am using the native base library and i want to add a custom Icon i made. I found some answers like this one, but all answers are for react native and i have to export my files from Expo to edit the android and ios folders.
There are three ways to create a custom icon in Expo. I'll tell you one of them. See the rest of the official documents.
Returns your own custom font based on the glyphMap where the key is the icon name and the value is either a UTF-8 character or it's character code. fontFamily is the name of the font NOT the filename. The expoAssetId can be anything that you can pass in to Font.loadAsync. See react-native-vector-icons for more details.
Example
import * as React from 'react';
import * as Font from 'expo-font';
import { createIconSet } from '#expo/vector-icons';
const glyphMap = { 'icon-name': 1234, test: '∆' };
const expoAssetId = require("assets/fonts/custom-icon-font.ttf");
const CustomIcon = createIconSet(glyphMap, 'FontName', expoAssetId);
export default class CustomIconExample extends React.Component {
render() {
return (
<CustomIcon name="icon-name" size={32} color="red" />
);
}
}
Useful Links:
Documents for the Custom Icon
Related
I am trying to write a custom plugin for our Docusaurus site. I am able to wire up the custom component, but I cannot use hooks like useState or useEffect. The page crashes saying I'm using an invalid React hook.
I know its possible to use hooks because I see other plugins doing it so I'm sure its a syntax problem somewhere.
Here's my code:
index.ts
import path from 'path'
module.exports = function () {
return {
name: 'docusaurus-theme-myorg-technology',
getThemePath() {
return path.resolve(__dirname, './theme')
}
};
};
theme/index.tsx
import React from 'react'
import {CustomTOC} from './CustomTOC'
const WrappedTOC = (props: any) => {
return (
<CustomTOC {...props} />
);
};
export default WrappedTOC;
theme/CustomTOC.tsx
import React, { useState } from 'react';
import TOC from '#theme-init/TOC';
export default function CustomTOC(props: any) {
//const [tags, setTags] = useState<any[]>([]); <-- if I comment this out the page crashes
return (
<>
<TOC {...props} />
Hello world
</>
);
}
"Invalid hooks call" link to a doc page, that you should read carefully.
Most likely: you are using a different version of React for your component lib that the one Docusaurus uses internally, and it leads to the React lib being used twice at runtime. Make sure the final project will only include one React version. You can for example use the exact same version that the one Docusaurus uses
After a lot of error messages, especially the following one
If this is a custom font, be sure to load it with Font.loadAsync.
I managed to add Google font to a react native app with the following code:
import AppLoading from "expo-app-loading";
import {
useFonts,
Quicksand_300Light,
Quicksand_400Regular,
Quicksand_500Medium,
Quicksand_600SemiBold,
Quicksand_700Bold,
} from "#expo-google-fonts/quicksand";
const screen = () => {
let [fontLoaded] = useFonts({
Quicksand_300Light,
Quicksand_400Regular,
Quicksand_500Medium,
Quicksand_600SemiBold,
Quicksand_700Bold,
});
if (!fontLoaded) {
return <AppLoading />;
} else {
return (
I use react-navigation and at the moment, I need to add this code to every screen.
I tried to add it to app and receive again the same Font.loadAsync message.
a - How can I import the font once for the whole app?
b - How can I have all the Text in the app use that font without adding it to each Text style?
What is the simplest way to implement Multi-Platform Setup for a component in Expo. I have tried mamy diferent ways.. it was working on web but it is failing on Native and failing with Jest & #testing-library/react-native. Ideally I would like the least amount of custom config etc (do not want to eject). I expect the file structure to look like this:
Component
|- index.tsx
|- Component.native.tsx
|- Component.web.tsx
I am not sure how to do the index.tsx. I saw someone say something like this would work:
// index.tsx
// #ts-ignore
export { default } from "Component"
this didn't work so I did
// index.tsx
// #ts-ignore
export { default } from "./Component"
This worked for web, but the jest test said
Cannot find './Component'
However, Jest was able to find:
'./Component.mobile.tsx'
'./Component.web.tsx'
I tried:
// index.tsx
// #ts-ignore
import Component from "./Component";
export default Component
and the tests was the same
and the native emulator said:
Unable to resolve module ./Component
I tried using lazy loading but this does not work on web.
import { lazy, Suspense } from "react";
import { Platform } from "react-native";
import Loading from "../../components/Loading";
import { ComponentType } from "./types";
const Web = lazy(() => import("./Component.web"));
const Mobile = lazy(() => import("./Component.mobile"));
const Component: ComponentType = (props) => {
const isWeb = Platform.OS === "web";
return (
<Suspense fallback={<Loading message="Loading Component" />}>
{isWeb ? <Web {...props} /> : <Mobile {...props} />}
</Suspense>
);
};
export default Component
Questions
how to use diferent files for components depending on platform (exlude other files from build)
how to make it ok with ts in vscode
Using Expo 44. Thanks
I would use named exports. So begin by having the same component name in both files. Next I would have one file called Component.tsx and the other Component.native.tsx. That will be enough to allow the bundler to pull the native for native and the other for non-native (in other words web). That should be all you need.
I have created an react-native/typescript app with expo CLI, this generate some base code, inlcuding hooks/useCachedResources to load any resources or data that we need prior to rendering the app, in my case in this hook I load custom fonts(in particular Inter Display Font). I'm experimenting some problems because the app loads only two weights: regular and medium, If I try to use semi-bold or bold this doesnt work and use the san serif font that comes by default.
Additional data:
The fonts path its ok
Expo app doesn't show any error. I have seen in other questions errors such as fontFamily "MyFontFamily" is not a system font and has not been loaded through Font.loadAsync. This is not the case.
Font family name is in the correct format.
I'm using React Native UI Kitten and I load the fonts as they suggest in Advanced Configuration and change some especific styles.
According to some answers The out of the box support for custom fonts on Android is a little limited in React Native. It does not support font weights other than normal and bold. So I tried setting fontWeight: normal or any of the weights but nothing works.
useCachedResources hook
This come by default with expo init my-app.
import * as Font from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';
import { useEffect, useState } from 'react';
// Error reporting service
import { logger } from '#utils';
export function useCachedResources(): boolean {
const [isLoadingComplete, setLoadingComplete] = useState(false);
// Load any resources or data that we need prior to rendering the app
useEffect(() => {
async function loadResourcesAndDataAsync() {
try {
await SplashScreen.preventAutoHideAsync();
// Load fonts
await Font.loadAsync({
'inter-display-regular': require('../assets/fonts/InterDisplay-Regular.ttf'),
'inter-display-medium': require('../assets/fonts/InterDisplay-Medium.ttf'),
'inter-display-semibold': require('../assets/fonts/InterDisplay-SemiBold.ttf'),
'inter-display-bold': require('../assets/fonts/InterDisplay-Bold.ttf'),
});
} catch (loadCachedResourcesError) {
logger.log(loadCachedResourcesError);
} finally {
setLoadingComplete(true);
await SplashScreen.hideAsync();
}
}
loadResourcesAndDataAsync();
}, []);
return isLoadingComplete;
}
Consuming the hook in App.tsx
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import useCachedResources from './hooks/useCachedResources';
import Navigation from './navigation';
// again this comes by defautl expo init command
export default function App(): React.ReactElement | null {
const isLoadingComplete = useCachedResources();
if (!isLoadingComplete) {
return null;
}
return (
<SafeAreaProvider>
<Navigation />
<StatusBar />
</SafeAreaProvider>
);
}
mapping.json: specific UI-Kitten configuration to change font style
I can think that the problem comes from here but the thing is, if there was a problem loading the fonts, either expo would have already thrown an error or the other fonts weights(regular/medium) would not load.
{
"strict": {
"text-font-family": "inter-display-regular",
"text-heading-1-font-size": 32,
"text-heading-1-font-weight": "normal",
"text-heading-1-font-family": "inter-display-medium",
"text-paragraph-1-font-size": 16,
"text-paragraph-1-font-weight": "normal",
"text-paragraph-1-font-family": "$text-font-family",
}
}
The problem
I have no idea if the problem comes from expo, ui kitten or if inter font can't be loaded by react native by some other reason.
In your useCachedResources try to remove 'await' keyword from SplashScreen method's:
SplashScreen.preventAutoHideAsync();
SplashScreen.hideAsync();
I am a newbie in react-native and I'm trying to use the react-native-ui-kitten library. The problem is that the documentation is not really helpful.
I have I have installed ui-kitten and the theme as indicated with the command: npm i react-native-ui-kitten #eva-design/eva
The documentation asks to configure the application root which I consider to be the App.js file unless I'm wrong.
So i changed the App.js generated code to this:
import React from 'react';
import {
mapping,
theme,
} from '#eva-design/eva';
import { ApplicationProvider } from 'react-native-ui-kitten';
import { Application } from './path-to/root.component';
export default class App extends React.Component {
public render(): React.ReactNode {
return (
<ApplicationProvider
mapping={mapping}
theme={theme}>
<Application/>
</ApplicationProvider>
);
}
}
Unfortunetely it's not working.
Has anyone recently used ui-kitten library ?
What does the documentation mean by Application Root and how to set up a simple react-native project to use react-native-ui-kitten?
And yes I actually checked the documentation but maybe there is something I am not doing right.
I ran into the same problem.
I discovered that the creators of this UI kit use in fact in their code examples Typescript.
So you need to recreate your Reactnative project using a Typescript template, then rename accordingly the App.js into App.tsx
Any other components need to be renamed with the extension .tsx.
Make sure you read about Typescript:
https://www.typescriptlang.org
Here it is how you can recreate your project with Typescript:
https://facebook.github.io/react-native/blog/2018/05/07/using-typescript-with-react-native
All the best,
I am also a beginner in react-native and it seems we kinda differ in implementing the code. I am not sure if this would help but this is the way I implement your code:
import * as React from 'react';
import { mapping, light as lightTheme } from '#eva-design/eva';
import { ApplicationProvider } from 'react-native-ui-kitten';
import { Application } from './path-to/root.component';
const App = () => (
<ApplicationProvider
mapping={mapping}
theme={lightTheme}>
<Application/>
</ApplicationProvider>
);
export default App;
You could try it and let me know if this suits you. Good luck!