Having to work with an application that someone else developed and not available anymore. Pretty new to React-Native and Expo. Keep on getting this error:
fontFamily 'FontAwesome' is not a system font and has not been loaded through Expo.Font.loadAsync.
- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.
- If this is a custom font, be sure to load it with Expo.Font.loadAsync.
I googled this and got some other links about what people were encountering and how they solved it e.g.
import {Font} from 'expo' and async load it in via componentDidMount
import {FontAwesome} from '#expo/vector-icons' package
tried deleting where it was used and refreshing app
Here is an example of an Icon a previous developer returned:
<Icon name="sign-in" color={'#FFFFFF'} type="font-awesome" />;
which is being imported like this from react-native-elements:
import { Icon, Button } from 'react-native-elements'
All of these ways I tried didn't work. Tried reading up on Custom Font loading but it looks like everything is being done right to me in the repo. Any help appreciated!
I would use react-native-vector-icons to load in font-awesome.
Make sure and run rnpm link after you yarn or npm install the module.
Using
import Icon from 'react-native-vector-icons/FontAwesome';
const myIcon = (<Icon name="rocket" size={30} color="#900" />)
Related
getting this error code on the gatsby local host where the webpage is suppose to be:
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
import React from "react"
//import { Link } from "gatsby"
import Layout from "../components/layout"
import 'bootstrap/dist/css/bootstrap.min.css';
import slide01 from "../images/slide01.jpg"
import { Carousel} from 'react-bootstrap';
const IndexPage = (props) => (
<Layout>
<Carousel>
<Carousel.Item>
<img src={slide01} alt="before and after" />
</Carousel.Item>
</Carousel>
</Layout>
)
export default IndexPage
Most of the time (almost 100%) that this error occurs is because you are loading more than one instance of the react-dom package. This means that you installed the React dependency and another dependency also uses React as an internal package causing a multiple loading.
Take a look at your package.json to check your dependencies.
In addition, you can find useful this GitHub thread because exposes a bunch of different errors, its casuistics, and possible solution for each case that may suit your issue.
How can I use this: https://www.npmjs.com/package/react-native-android-pip
I want to make a webview app can use PIP(Picture in Picture). But Idk how can I use this module in my code.
import * as React from 'react';
import { WebView } from 'react-native-webview';
import AndroidPip from 'react-native-android-pip';
export default class App extends React.Component {
render() {
return <WebView source={{ uri: '(My url)' }} style={{ marginTop: 50 }} />;
}
}
As said here (On the documentation itself), You can use as follow:
import AndroidPip from 'react-native-android-pip';
// Enter Pip mode
AndroidPip.enterPictureInPictureMode()
//Configure aspect ratio, works only on SDK version 26 and above
AndroidPip.configureAspectRatio(width, height)
// When enabled, PIP mode will be automatically entered when app is unfocused( User presses home
//, menu button etc)
AndroidPip.enableAutoPipSwitch()
AndroidPip.disableAutoPipSwitch()
You can call these functions on the click of a button, response of an API, start of a screen, and so on...
[EDIT]
Also, try using the github version of this module, as the npm version is 2 years old, and the github version is at 29 days without an update. Install it as follow:
npm install --save https://github.com/shaun-chiang/rn-android-pip
If you like there is an easier pilgrimage react-native-pip-android
I am using expo's snack, no icon ever showing correctly, what am I doing wrong?
I test this snack https://callstack.github.io/react-native-paper/button.html, and many other snack, but it always show rectangle icon.
I am using expo 36.0.0
The issue is visible in expo log as
Tried to use the icon 'stepforward' in a component from 'react-native-paper', but 'react-native-vector-icons' could not be loaded.
To remove this warning, try installing 'react-native-vector-icons' or use another method to specify icon: https://callstack.github.io/react-native-paper/icons.html.
Even if you try to add package it's still not resolved by this, some issue in expo as reported here Expo forums
Following is the workaround as Snack link
Using Expo vector Icon
import { Ionicons } from '#expo/vector-icons';
2.Get type
import SimpleIcon from 'react-native-vector-icons/SimpleLineIcons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
then pass as child
I already have a react-native project which I cloned and running successfully.
I added a new file to the project and tried to link that page using a button from another page with, this.props.navigation.navigate('DisplayHomeScreen');
I couldn't link the 'DisplayHomeScreen.js'.
But when I link a page which was already there, the navigate function is working fine.
Here is the simple code of DisplayHomeScreen.js
import React, { Component } from 'react';
import { View, Text } from 'react-native';
class DisplayHomeScreen extends Component {
render() {
return (
<View>
<Text>Display Home</Text>
</View>
);
}
}
export default DisplayHomeScreen;
As your code snippet is insufficient to identify the problem.can you please share your navigation stack.Well at spot I can/ recommend doing.
yarn install (if you are using yarn as a package manager)
react-native link
close metro bundle
restart app
In my current react native app.
I am using react-native-navigation for general app navigation.
On the other hand, I would like to use native-base for some basic UI elements.
My question is, how do I pass a <Icon name="ios-search"/> from native-base to a react-native-navigation tab?
Based on this wiki. It seems that they only accept an actual image for a tab icon?
https://github.com/wix/react-native-navigation/wiki/Top-Level-API
As far as i see it, native-base icons is just a wrapper on react-native-vector-icon. In react-native-vector-icon, there is a getImageResource function that allows me to convert icons into images. How do I do it in native-base?
getImageSource function will be added to the Icon in next version of Native Base.
For now, you can import any Icon family directly from react-native-vector-icons and use getImageSource from there.
import Ionicons from 'react-native-vector-icons/Ionicons';
...
...
getImageSource('ios-home', 20, 'red').then((source) => this.setState({ userIcon: source }));