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?
Related
I have a screen on my react native expo managed workflow where the image from a previous screen is passed as a prop the relevant screen as props.pic
What I am trying to now do is share that link as a picture to other apps (like whatsapp or sms) or even just share the image link (if it's not possible to share the picture from the uri). This is what I have tried so far but it keeps giving me this error that I do not have to access the provided file from my firebase storage (I do because a simple copy and paste of the same link works fine everywhere else including in the app):
import React, {useState, useEffect} from 'react';
import { View, TouchableOpacity,Text
Image} from 'react-native';
import * as Sharing from 'expo-sharing';
const Details = props =>{
const [i, setI] = useState(props.pic);
const openShareDialogAsync = async () => {
if (Platform.OS === 'web') {
alert(`Uh oh, sharing isn't available on your platform`);
return;
}
if (!(await Sharing.isAvailableAsync())) {
alert(`Uh oh, sharing isn't available on your platform`);
return;
}
await Sharing.shareAsync(images[i]);
};
return (
<View>
<TouchableOpacity onPress={openShareDialogAsync}>
<Text>Share</Text>
</TouchableOpacity>
</View>
)
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 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
I was wondering how I would render some Shoutem extension, for simplicity I am going to render it as my only component like so:
import 'es6-symbol/implement';
import React from 'react';
import {
AppRegistry,
View
} from 'react-native';
import { AppBuilder } from '#shoutem/core';
import { NavigationBar } from '#shoutem/ui';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import extensions from './extensions.js';
import { screens } from './extensions/kevinyclu.restaurants/app/index';
const List = screens.List;
const store = createStore((state, action) => state);
const App = () => <Provider store={store}><View><List /></View></ Provider>;
// noinspection JSCheckFunctionSignatures
AppRegistry.registerComponent('Restaurant', () => App);
But this gives me an error that says:
Though if I replace the const App = ... with the code that was initially there when I did shoutem configure
const App = new AppBuilder()
.setExtensions(extensions)
.setRenderNavigationBar(renderNavigationBar)
.build();
Then everything works fine, so I was wondering how would I use a Shoutem extension? Or am I missing the point of the extension completely?
You simply add it in the Builder by adding a screen. The flow is explained in our getting started docs. You create an extension, create a screen with a shortcut and then upload it to the Shoutem servers and install it in one of your apps on the Builder.
After that, you can go to the app in the Builder and add that new extension's screen by clicking the + button next to Screens. You can easily find your new extension by selecting the Custom category.
Remember that after installing a new app, you should run shoutem configure in the cloned app's directory. This will set up the new configuration you have after you've installed a new extension on the Builder.
Some advice; if you ever uninstall an extension on the Builder, it's good to re-clone your app completely, because shoutem configure will not remove the extension's from the directory, which may "hide" errors. For example, you could be importing something from that extension that you uninstalled, but you won't get an error because the files are all still there, even though they're uninstalled.
In my react-native app, I want to share a text message with a specific application, e.g whatsapp or texting application without having to first land on the dialog with all the social applications.
For instance if I press the share button and whatsapp is called directly.
I tried using react-native-share but it seems to not be working anymore.
You can use Linking, which gives you a general interface to interact with both incoming and outgoing app links.
For example:
import React, { Component } from 'react';
import { Linking, Button } from 'react-native';
export class App extends Component {
render() {
return <Button
onPress={() => {
let url = 'whatsapp://send?text=Hola Mundo';
Linking.openURL(url).then((data) => {
console.log('open whatsapp')
}).catch(() => {
console.log('App not installed')
});
}}
title="Whatsapp"
color="#4FBE3C"/>;
}
}
For Android, the React Native Share module uses the default ACTION_SEND android intent:
Intent sharingIntent = new Intent(android.content.Intent.ACTION_SEND);
In order to have a different behavior, you need either write our own RN plugin that would talk to the app you want it to (if such feature is available) or find a similar plugin on npm.
I assume your plugin should do something like this:
Intent sendIntent = new Intent();
sendIntent.setAction(Intent.ACTION_SEND);
sendIntent.putExtra(Intent.EXTRA_TEXT, "This is my text to send.");
sendIntent.setType("text/plain");
startActivity(sendIntent);
sendIntent.setPackage("com.whatsapp");