I'm running an EXPO project (https://mrousavy.com/react-native-vision-camera/docs/guides/#installing-the-library)
I've ran
expo install react-native-vision-camera
added the plugin in my app.json (code below)
expo prebuild
{
"plugins": [
[
"react-native-vision-camera",
{
"cameraPermissionText": "$(PRODUCT_NAME) needs access to your Camera.",
// optionally, if you want to record audio:
"enableMicrophonePermission": true,
"microphonePermissionText": "$(PRODUCT_NAME) needs access to your Microphone."
}
]
]
}
Still getting this issue:
https://i.stack.imgur.com/OpezF.png
EXPO SDK 46
react-native-vision-camera: 2.15.1
Read a bunch of docs saying react-native-vision-camera does not work with Expo - but there are setup docs with expo. Not sure how to move forward from here.
Thanks guys
I've tried running pod install in ios dir, installation was successful but no luck.
Related
I am developing a React Native mobile application using Expo. The application has a filtering function for certain parameters. When I launch the app via Expo on my device, everything works correctly. However, after building the .apk (I use eas-cli for this purpose) and opening the application on the same (my) device, the filtering function stops working (no errors occur).
how it looks on the Expo server;
how it looks in .apk;
how it looks in .apk;
I don't have any thoughts at all about why this might happen, because everything works correctly on the Expo server.
This is my build file:
{
"build": {
"preview2": {
"android": {
"gradleCommand": ":app:assembleRelease",
"buildType": "apk"
}
},
"production": {}
}
}
the command I use to build:
eas build -p android --profile preview2
First time I use Expo (react native app) to deploy an app into Googgle play store. Expo Generates an aab -file that I can upload to the store. But it seems like it is not obfuscated. Reading through the Expo documents I don't get my head around how to define this in my build process.
If I understand documentation correctly it is in my eas.json file I should define this, or have I misunderstood?
But I don't know how the code should look like. Any suggestions for how?
Follow this steps
Make sure expo-build-properties is installed, or install it if needed:
expo install expo-build-properties
In your app.json / app.config.js change this dependency:
"plugins": [
"expo-build-properties"
]
to
"plugins": [
[
"expo-build-properties",
{
"android": {
"enableProguardInReleaseBuilds": true
}
}
]
]
After these steps, it should be obfuscated.
Source: https://docs.expo.dev/versions/latest/sdk/build-properties/#example-appjson-with-config-plugin
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.
Goal
Be able to create a new project for react-native (using react-native init), and enabling flow checks on Visual Studio Code.
What I Did
I just created a new react-native project
react-native init iaptris
then opened Visual Studio code
cd iaptris
code .
I saw this errors
Whis these error descriptions (in italian, sorry)
Googling I concluded I must install Flow Extension for VsCode and I did.
I then disabled native checking for current workspace, setup file association and path to flow command
{
"javascript.validate.enable": false,
"files.associations": {
"*.json": "json",
"*.js": "javascriptreact"
},
"flow.pathToFlow": "C:\\Users\\mirko\\.vscode\\extensions\\flowtype.flow-for-vscode-1.0.1\\node_modules\\.bin\\flow.cmd"
}
Closed and restarted vscode on same workspace
The problem
At this point, errors disappeared, but also, removing a curly brace to throw a new syntax error, I do not see any errors. No errors.
Question
What else must I do now?
Actual solution, please post your answer if this is not the better method. And I think it's not the better method.
react-native init <project name>
open VsCode
disable Javascript -> Validate for the current workspace only (sorry if next image is in italian, but it's enough as reference)
install a plugin
yarn add eslint babel-eslint eslint-plugin-flowtype --dev
or
npm install eslint babel-eslint eslint-plugin-flowtype --save-dev
create a .eslintrc with following content
{
"parser": "babel-eslint",
"plugins": [
"flowtype"
],
"extends": [
"plugin:flowtype/recommended"
]
}
close and reopen vscode and the workspace
I am experiencing a lot of difficulties integrating React navigation in a React native WEB project.
I have created a mini project with react native web and react navigation in a cloud sandbox, everything works as expected.
Please have a look, I am not using the latest react navigation but I have tried previously the latest(updating the code as the API changed) and it works fine.
React Native web Running in Sandbox
I have cloned this project exactly as it is, installed all the dependencies and tried different versions of React Native Web, Webpack(version 3 and 4), babel(version 6 and 7) and the latest React Navigation (version 3+). I was not able to make it run on localhost, the error is:
Module parse failed: Unexpected token (10:22)
You may need an appropriate loader to handle this file type.
|
| class TabView extends React.PureComponent {
| static defaultProps = {
| lazy: true,
| removedClippedSubviews: true,
on React Navigation version 1.5.8 and a similar error on The latest version. But it works fine in the Sandbox.
Is anybody familiar with this type of setup and why the exact same code does not work on localhost?
I have tried also creating a webpack.config.js in the root and change configurations as some suggested but no luck.
You can clone this repo which is exactly the same sandbox and see for yourself.
Clone this Github Repo
Please any help would be greatly appreciated
This happened to me as well. The reason is because some of the modules provided by React Navigation are not transpiled to their corresponding react-native-web equivalent. What I mean is you need to transpile those modules individually using babel-loader or whatever you are using. Something like below in webpack.config or .babelrc should work:
{
test: /\.(js|jsx)$/,
include: [
path.resolve(root, "node_modules/#react-navigation"),
path.resolve(root, "node_modules/react-navigation"),
path.resolve(root, 'node_modules/react-native-uncompiled'),
path.resolve(root, "node_modules/react-native-tab-view"),
path.resolve(root, "node_modules/react-native-gesture-handler"),
path.resolve(root, "node_modules/react-native-vector-icons"),
path.resolve(root, "node_modules/react-native-web"),
path.resolve(root, "node_modules/react-native-tab-view"),
path.resolve(root, "node_modules/react-native-drawer"),
....and whatever module gives problem....
] // external non react-native packages to be compiled by Babel
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
plugins: ['react-native-web']
...
}
}
};
Here is an article with clear explanation on this topic: https://pickering.org/using-react-native-react-native-web-and-react-navigation-in-a-single-project-cfd4bcca16d0