I'm making some changes on my app (I have to say I just started on this old app) but it never takes the changes.
The easiest change I can make is update the image for the splashscreen like this:
export const SplashScreen = (props: any) => (
<View style={[styles.container, { width: width, height: height }]}>
<Image
style={styles.background}
source={require("https://imgcomfort.com/Userfiles/Upload/images/illustration-geiranger.jpg")}
/>
</View>
);
Also I changed the index to a default one to remove any extra dependencies.
When I run npm start I get this error:
Error: Compilation of µWebSockets has failed and there is no
pre-compiled binary available for your system. Please install a
supported C++11 compiler and reinstall the module 'uws'.
And when I run react-native run-android I still having the previous image for the splashscreen. After showing this it closes automaticall (so it also doesn't pick the changes in index.tsx).
I tried also removing android and ios folders and running react-native eject but I got some different issues and I don't really want to update the whole thing.
Similar scenario if I update some packages. I'd prefer to run the app as it is.
My Android Studio is also updated to latest changes.
I cannot see any build folder after running the app and I'm using these versions:
"react": "~15.4.0",
"react-native": "0.41.2",
"redux": "^3.6.0",
"redux-saga": "^0.16.0",
"uws": "^10.148.0"
This happens in Windows and Linux (with different Android Studio obviously)
Related
I'm trying to create an app with React Native + Expo for Adnroid TV and onFocus doesn't work on any element.
I tried to fix it by migrating to "react-native": "npm:react-native-tvos#latest" but that doesn't work either.
Any idea how to fix it?
<TouchableHighlight
style={{backgroundColor: 'green', backfaceVisibility: 'visible', shadowColor: 'red'}}
hasTVPreferredFocus
tvParallaxProperties={{ magnification: 1.2 }}
onPress={() => {console.log('pres')}}
onFocus={() => {console.log('focus')}} >
<Text style={{width: 50, height: 50, backgroundColor: 'transparent'}}>1</Text>
</TouchableHighlight >
I have recently solved this issue.
I was under impression that simply changing package.json contents to read "react-native": "npm:react-native-tvos#latest" would suffice, but it won't.
It would, if you would have built the project, but even then it would probably complain about lot of stuff.
Try running npm i react-native#npm:react-native-tvos#latest it should complain about conflicting dependencies. Go one by one, removing the dependencies using npm uninstall [dependency] and then try to install again, until you are successful. Note the dependencies you removed and then install them back again. I've only had to remove react-native react #types/react-native. If it complains about version, just use the suggested version such as npm i react#18.0.0 worked for me. I had to run npm ci to get clean install of all my packages after this process as my build didn't work initially, but after that, everything worked smoothly.
They are mentioning in the documentation of https://www.npmjs.com/package/react-native-tvos that their version is derived from the public version of react-native, but it didn't seem to be the case with the #latest version.
If you are using typescript, don't forget to include import 'react-native/tvos-types.d' in some of your typescript files, preferably the root.
It seems that the package still has some issues, such as not allowing you to set opacity properly for the TouchableHighlight component, but I am currently working on workarounds for everything.
Hope this helps, cheers.
When I add some image from my assets folder using require, the image is apparently being taken from a folder .png-cache , but react native probably has bad paths stored in them because I get an error wherever I've used the same file as the image source.
My code is:
<Image
source={require('#assets/images/thunder.svg')}
height={20}
width={20}
resizeMode={'contain'}
style={styles.actionButtonIconStyle}
/>
The image doesn't show up and the console shows:
Error: Asset not found: C:\Users\<project path>\src\assets\images\.png-cache\thunder-31748fee8334daf886e2bea1259f80c9#3x.png for platform: android
at getAbsoluteAssetRecord (C:\Users\<project path>\node_modules\metro\src\Assets.js:110:11)
at async getAsset (C:\Users\<project path>\node_modules\metro\src\Assets.js:238:18)
at async Server._processSingleAssetRequest (C:\Users\<project path>\node_modules\metro\src\Server.js:352:20)
at async Server._processRequest (C:\Users\<project path>\node_modules\metro\src\Server.js:427:7)
Not sure why the current paths are not valid. Is it possible to make it so that the old cached paths are forgotten and new cache file generated?
What I've tried:
I renamed one image file and it worked but I wouldn't want to rename all the files, looking for a way to reset the cache.
I looked at the solution in Reset internal android image cache in React Native but I can't have dynamic paths in require so this solution didn't work.
I see first time using like #asset...
In my code i everytime use like this:
<Image
source={require('../assets/images/thunder.svg')}
height={20}
width={20}
resizeMode={'contain'}
style={styles.actionButtonIconStyle}
/>
am i missunderstanding what you need?
My problem was solved by resetting the react native cache with the command:
npm start -- --reset-cache
I've tried different icons, however it seems all of them just show an X instead of the actual icon. There aren't any error messages, here is the code I've used:
import Icon from 'react-native-vector-icons/AntDesign';
<Icon name="heart" size={30} color="red" />
In this case, it should show a heart, but it just appears with an X with a box around it.
This post seems to have a solution, but I do not understand what they did to fix it.
react native vector icons showing X instead of icon
Anyone know how to solve this?
Found that you are using an Android emulator. In the past, I had the same issue many told me to link the project to solve the issue but RN v0.60 and above supports auto-linking, so it is not advised to use manual linking.
npx react-native link -- Avoid this for projects above RN v0.60
Automatic way to add fonts
Add this piece of code in android\app\build.gradle. I only want MaterialCommunityIcons.ttf if you want other font add them here it will be added automatically.
project.ext.vectoricons = [
iconFontNames: ['MaterialCommunityIcons.ttf'] // Add fonts needed
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
This is a manual way (If automatic didn't work)
Step 1
Move the .ttf file from the node_modules\react-native-vector-icons\Fonts that you want to android\app\src\main\assets\fonts after that cd android and run ./gradlew clean or gradlew clean
Step 2
Add this line in android\app\build.gradle
project.ext.vectoricons = [
iconFontNames: ['MaterialCommunityIcons.ttf', 'AnotherFont.ttf'] //name of all the fonts added from node_modules in step 1.
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
After that the icons will be visible. Try resetting the cache if it did not work yarn react-native start --reset-cache & yarn react-native run-android
https://github.com/oblador/react-native-vector-icons/issues/1117#issuecomment-589958315
Troubleshooting step from the library if still the above did not work you can try this.
https://github.com/oblador/react-native-vector-icons#the-icons-show-up-as-a-crossed-out-box-on-android
You forgot to load your icon...
put this after your import:
import Icon from 'react-native-vector-icons/AntDesign';
Icon.loadFont();
Cheers!
Here is a complete solution for this. copy the fonts folder from
node_modules\react-native-vector-icons\Fonts
to
android\app\src\main\assets\fonts
you can create the folder there it does not exist by default. then create a file in the root of your project
react-native.config.js
and paste this code.
module.exports = {
project: {
ios: {},
android: {}, // grouped into "project"
},
assets: ["./assets/fonts/"], // stays the same
};
I have upgraded to my app to react-native 60.4 which support Autolinking all packages so that you dont have to manually go about setting things up and thus lowers the chances of error.
The problem is most of the packages have still not gotten compatible with this process and henceforth the app completely breaks.
my error is with https://github.com/corymsmith/react-native-fabric
referring to an issue on the repo for the same -> https://github.com/corymsmith/react-native-fabric/issues/225, which still remains unanswered.
I started giving it a try by forking the repo and understanding the auto link process given by react native.
In the package.json of the node_module package i replaced
"rnpm": {
"android": {
"packageInstance": "new FabricPackage()"
}
},
with file in the package root react-native.config.js
module.exports = {
dependencies: {
'react-native-fabric': {
platforms: {
android: {
"packageImportPath": "import com.smixx.fabric.FabricPackage;",
"packageInstance": "new FabricPackage()"
}
}
}
}
};
I also updated the build gradle to 3.4.1 from 3.1.0
My react native app is able to now find the package.
But when i call the package in my react component i get NoClassDefFoundError, which means that class is not found.
Anybody else gave this a try and have a solution please let me know.
Try to unlink with react-native unlink and then re run your code again.
Putting it here from the above comment to make it more clear:
Ok i got this to work by changing the forked repo -> (adding a react-native.config.js in the root of the package with with auto discovery and link configurations), but i think the only scalable solution i see right now is to degrade to RN ^59.0 as not a lot of packages have auto link config changes. So will wait for RN 60.4 to mature and then upgrade to it in about a month. In addition to this fabric is currently migrating to firebase and plans to complete by year end. This mean that anyways the sdk integration is going to be obsolete and hence this package too.
Also this issue is majorly related to react-native-fabric and not RN itself.
I'm getting this error with React Native, not ReactJS so all the solutions/workarounds with webpack or browserify wont help.
Full error:
You are currently using minified code outside of NODE_ENV=== "production". This means that you are running a slower development build of Redux. You can use ... bla bla bla ( workarounds for ReactJS )
I'm currently running this config :
"expo": "^23.0.0",
"react": "16.0.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-23.0.0.tar.gz",
"react-redux": "^5.0.6",
"redux": "^3.7.2"
I tried starting the service with --no-minify and I always start it with --dev. I'm running the app on expo as well.
If anyone has a solution or a workaround for this it'd be really appreciated.
If you're running into this issue while using an android virtual device, open the debug menu (CMD+M on a Mac) > Dev Settings -> Uncheck JS Minify and reload your app. Pictures included below for reference.