App font is working fine on all platforms before publishing.
Once the app is published, expo publish, font is just not showing.
I have added the font through Xcode. Like that.
Font is added to the app following expo's instructions
Checked, rechecked and reinstalled the yarn package seem to exist (checked by showing some text on screen). Added the package using yarn add 'use-expo/font'
This is how the font is loaded:
import { useFonts } from "#use-expo/font";
export default function App() {
let [fontsLoaded] = useFonts({
Rayando: require("./assets/fonts/crayonsRegular.ttf"),
});
return (
<>
{fontsLoaded && <Text style={[styles.answerText, {fontFamily: "Rayando"}]}>{number ? 1 : 0}</Text>}
</>)
}
Any advice on how resolve this issue, am I missing something?
Using latest version of expo (37.0.0) expo-cli and yarn.
I was also running into a similar problem. As far as I understood expo publish does not behave as expected in ejected projects: the app loads assets differently.
Found out about this in here.
The suggested solution is running expo publish --target managed or, as of my case, deleting ios and android folders to convert bare project to expo-managed.
Related
I have an issue with an npm package react-native-video where it says 'no variant found for :react-native-video.' I've tried uninstalling and reinstalling, deleting node_modules and yarn.lock and clearing gradle, invalidating caches and restarting Android Studio, and any permutation of the above things.
The app builds and syncs perfectly find without react-native-video, but any time I reinstall it and add the files back in the app.gradle and other files (per the installation instructions) it gives me the same error. Has anyone had this issue before, and how do you fix it? I'm assuming it's an Android Studio/Gradle issue, but I'm at a complete loss as to how to fix it.
Please check your version of React Native and react-native-video.
In my case, I use React Native 0.64.1 and react-native-video 5.1.1, and it works well.
Other solution
Assuming you are on a later version of React Native, In android/build.gradle you need to add jcenter(), in this case best to be explicit and only include what is necessary:
...
allprojects {
repositories {
... other repositories
jcenter() {
content {
includeModule("com.yqritc", "android-scalablevideoview")
}
}
}
}
I am new to react native and I want to rename the project name and its package name I gone through this
https://github.com/expo/expo/issues/1946 -- according to this I changed the app.json.
Expo {
name: something
}
Change package name for Android in React Native - according to this I installed rename package but got below
A directory should be created using "react-native init"
And I also want to know how can I check my app package name while using expo as it won't have an android/ios directory.
Both are not showing the expected result. please help.
I'm trying to integrate Font Awesome into a React Native Expo app that I'm working on, but I keep getting the following error:
console.error: "ERROR: icon not found for icon = ", "coffee"
I'm just following the instructions on the following GitHub page for React Native Font Awesome: https://github.com/FortAwesome/react-native-fontawesome
Specifically, first, I ran the following commands:
npm i --save react-native-svg #
npm i --save #fortawesome/fontawesome-svg-core
npm i --save #fortawesome/free-solid-svg-icons
npm i --save #fortawesome/react-native-fontawesome
Those all ran fine. Then I added the following to my home screen code:
import { FontAwesomeIcon } from '#fortawesome/react-native-fontawesome';
...
<FontAwesomeIcon icon="coffee" />
Again, I'm just following the instructions on the GitHub page linked to above. When I do all that though, I get the error noted above. Accordingly to my package.json, I'm on expo version ~36.0.0.
Any ideas? Thank you very much in advance.
import {faCoffee} from "#fortawesome/free-solid-svg-icons";
<FontAwesomeIcon icon={faCoffee} />
I figured it out. It was "easy", but also not so obvious.
Basically, because I'm using Expo to build my React Native app, I had to use the Expo version of Font Awesome. As such, I didn't need any of those npm modules I installed before. They could all be uninstalled.
In place of those modules, I added the following at the top of my file:
import { FontAwesome } from '#expo/vector-icons';
And then the following to get a Font Awesome icon to show up on the screen:
<FontAwesome name="times" />
That's all there was to it. I guess I was fundamentally taking the wrong approach to begin with. Sorry for all the confusion. Thanks again to everyone that helped.
I am new to Expo but so far it seems super neat not having to open up Android Studio / Xcode to run my app locally. Not having to touch that stuff makes it so much more convenient to develop.
However, I want to incorporate in app purchases (subscriptions) in my app and from the research I've done so far it doesn't seem like Expo's solution (https://docs.expo.io/versions/latest/sdk/in-app-purchases/) is very developed.
I found this npm package for in app purchases and it looks promising: https://github.com/dooboolab/react-native-iap. However it is not supported by Expo, and I don't feel like it's worth giving up all the benefits of Expo just for this one feature.
I noticed a comment in the issues here that was quite intriguing: https://github.com/dooboolab/react-native-iap/issues/174#issuecomment-393704277
This person suggests that I can continue using the master branch with Expo, and then following these steps to eject and deploy when time is ready. I've never done this, but I'm wondering if this could work:
On master:
1) Run npm install --save react-native-iap but DON'T run react-native link react-native-iap.
2) Wrap my In App Purchase module with this code. This way your code won't crash when calling IAP methods
import { NativeModules } from 'react-native';
const { RNIapModule } = NativeModules;
function hasIAP() {
return !!NativeModules.RNIapModule;
}
3) Continue developing using Expo, and just skipping the IAP stuff if !hasIAP()
On separate branch used for final QA / deployment:
1) Create a new branch called detached
2) Run expo eject
3) Run react-native link react-native-iap and all the other Manual Installation steps listed here: https://github.com/dooboolab/react-native-iap#manual-installation
4) QA everything
5) Deploy
Does anyone have experience doing this hybrid "expo for development, no expo for production" approach?
If you eject and use the Expo, you can use it like a default React-native project. The Android folder and the iOS folder are created and you will enter the appropriate package name before you create them. The modules you have installed and the modules in Expo are added to the package list when you eject the Expo. Check MainApplication.java for Android or Info.list files for iOS. There are some things that do not apply to App.json settings that were responsible for setting up after you ejected the Expo. It can be set up by referring to the official document.
Once the Expo has been ejected, the React-native link command is performed brilliantly.
ejecting the Expo does not change or disappear from the module usage
I am a beginner at React Native and have begun to take some time off to work on my new app project. I have noticed that there is a lot of difference with RN old and the new version. One is the combination index.js and App.js instead of index.android.js & index.ios.js.
The other is the new folder structure after react-native init-ios/android is completely changed. Following the standard installation guidelines and creating RN project, I do not see App directory created at all (the only folders are tests, android, iOS, node_modules.
Have you seen this after the latest upgrade? How do I rectify this? Any suggestions will be great.
Create your own app directory, put all your logic in there.
Import the root file into App.js in root folder.
$ react-native run-android or $ react-native run-ios` and app should run as expected.
You can use create-reactive-app with expo if don't wish to use the react-native-cli. See react-native docs, getting started for more information.