We Keep Coding

react-native-document-picker not work in android release mode

i using react-native-document-picker for document selection. It is not working in android release mode. But successfully working in debug mode. So i cant see the error. And it works successfully in IOS.
My package.json file:
{
"name": "app",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"build:ios": "react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#notifee/react-native": "^0.12.2",
"#react-native-community/async-storage": "^1.9.0",
"#react-native-community/checkbox": "^0.5.7",
"#react-native-community/datetimepicker": "^3.0.3",
"#react-native-community/masked-view": "^0.1.9",
"#react-native-community/netinfo": "^9.3.6",
"#react-native-community/picker": "^1.5.1",
"#react-native-community/progress-bar-android": "^1.0.3",
"#react-native-community/progress-view": "^1.2.1",
"#react-native-community/push-notification-ios": "^1.4.1",
"#react-native-firebase/app": "^8.4.1",
"#react-native-firebase/messaging": "7.8.4",
"axios": "^0.21.1",
"date-fns": "^2.28.0",
"moment": "^2.24.0",
"react": "16.13.1",
"react-native": "^0.64.4",
"react-native-animated-pagination-dots": "^0.1.72",
"react-native-autoheight-webview": "^1.6.1",
"react-native-calendars": "^1.1263.0",
"react-native-countdown-circle-timer": "^2.3.7",
"react-native-directory-picker": "^0.0.2",
"react-native-document-picker": "^5.0.0",
"react-native-elements": "^2.1.0",
"react-native-gesture-handler": "^1.6.1",
"react-native-gifted-chat": "^0.16.3",
"react-native-image-picker": "3.2.1",
"react-native-immersive-bars": "^1.0.1",
"react-native-keyboard-aware-scroll-view": "^0.9.1",
"react-native-month-year-picker": "^1.3.4",
"react-native-paper": "^4.9.2",
"react-native-pdf": "^6.2.2",
"react-native-push-notification": "^5.1.0",
"react-native-reanimated": "2.1.0",
"react-native-redash": "^14.2.3",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "^2.5.0",
"react-native-splash-screen": "^3.2.0",
"react-native-svg": "^12.1.0",
"react-native-svg-transformer": "^0.14.3",
"react-native-swipe-list-view": "^3.2.3",
"react-native-vector-icons": "^9.0.0",
"react-native-video": "^4.4.5",
"react-native-webview": "^11.23.1",
"react-navigation": "^4.1.0",
"react-navigation-drawer": "^2.3.4",
"react-navigation-stack": "^2.0.16",
"react-navigation-tabs": "^2.5.6",
"react-redux": "^7.1.3",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0",
"rn-fetch-blob": "^0.12.0"
},
"devDependencies": {
"#babel/core": "^7.11.1",
"#babel/runtime": "^7.11.2",
"#react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.2.2",
"eslint": "^7.6.0",
"jest": "^26.2.2",
"metro-react-native-babel-preset": "^0.61.0",
"react-test-renderer": "16.13.1"
},
"jest": {
"preset": "react-native"
}
}
my document select code:
try {
const res = await DocumentPicker.pick({
//type: [DocumentPicker.types.allFiles],
type: [DocumentPicker.types.pdf, DocumentPicker.types.images],
});
console.log(
'detailsssss',
res,
res[0].uri,
res[0].type, // mime type
res[0].name,
res[0].size,
);
setDocName(res[0].name);
const path = decodeURI(res[0].uri).replace('file://', '');
const fileType =
Platform.OS == 'ios'
? path.substring(path.length - 4, path.length).replace('.', '')
: res[0].type
.substring(res[0].type.length - 4, res[0].type.length)
.replace('/', '');
console.log(fileType);
console.log(path);
RNFS.readFile(path, 'base64')
.then(data => {
console.log(data);
let fileByte = '';
if (fileType.toLowerCase() == 'pdf') {
fileByte = 'data:application/pdf;base64,' + data;
} else {
fileByte =
'data:image/' + fileType.toLowerCase() + ';base64,' + data;
}
console.log('tippp', fileType);
const file = {
ID: 0,
NAME: res[0].name,
FILE_TYPE: docType,
CREATED_DATE: Moment(new Date()).format('DD.MM.YYYY HH:mm'),
FILE_BYTE: fileByte,
};
filesArray.push(file);
setFiles(filesArray);
setDocCount(filesArray.length + ' doküman seçildi.');
console.log(filesArray);
})
.catch(err => console.error('An error occurred', err));
} catch (err) {
if (DocumentPicker.isCancel(err)) {
console.log('error -----', err);
} else {
throw err;
}
}

Invariant Violation: Element type is invalid error in React Native

When I'm trying to run my react native app on my Android emulator or device. This error is displayed on the device or emulator.
Invariant Violation: Element type is invalid: expected a string (for
built-in components) or a class/function (for composite components)
but got: undefined. You likely forgot to export your component from the
file it's defined in. or you might have mixed up default and named imports.
This is my App.js on the root of the project
......
render() {
return (
<Provider store={store}>
<Root>
<AppRouter />
<Spinner />
<NotificationPopup />
<VersionUpdate />
</Root>
</Provider>
);
}
........
and this is my package.json
{
"name": "Nub1",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"android": "react-native run-android",
"ios": "react-native run-ios",
"test": "node node_modules/jest/bin/jest.js --watch",
"lint": "eslint ."
},
"dependencies": {
"#react-native-community/async-storage": "^1.6.1",
"#react-native-community/cookies": "^2.0.9",
"#react-native-community/geolocation": "^2.0.2",
"#react-native-community/netinfo": "^4.2.1",
"#react-native-community/push-notification-ios": "1.7.1",
"#react-native-community/toolbar-android": "0.1.0-rc.2",
"#sentry/react-native": "^2.5.1",
"#stripe/stripe-react-native": "^0.1.4",
"#unpourtous/react-native-search-list": "^2.0.10",
"color": "^3.0.0",
"create-react-class": "^15.6.3",
"native-base": "^3.2.2",
"react": "16.8.6",
"react-native": "0.60.5",
"react-native-awesome-card-io": "^0.8.2",
"react-native-fabric": "0.5.0",
"react-native-fbsdk": "^1.0.3",
"react-native-firebase": "^5.5.6",
"react-native-flexi-radio-button": "0.2.2",
"react-native-gesture-handler": "1.8.0",
"react-native-image-picker": "^1.1.0",
"react-native-image-zoom-viewer": "^2.2.25",
"react-native-mixpanel": "1.2.5",
"react-native-onesignal": "3.7.3",
"react-native-reanimated": "1.10.2",
"react-native-render-html": "^4.1.2",
"react-native-restart": "^0.0.13",
"react-native-safe-area-context": "^3.3.2",
"react-native-safe-area-view": "^1.1.1",
"react-native-screens": "^2.0.0-alpha.3",
"react-native-size-matters": "0.1.3",
"react-native-splash-screen": "^3.2.0",
"react-native-star-rating": "^1.1.0",
"react-native-svg": "^12.1.1",
"react-native-swiper": "1.5.13",
"react-native-tracking-transparency": "^0.1.1",
"react-native-vector-icons": "6.6.0",
"react-native-version-check": "3.0.3",
"react-native-webview": "^7.0.5",
"react-navigation": "^4.0.5",
"react-navigation-drawer": "^2.2.1",
"react-navigation-stack": "^1.7.2",
"react-redux": "^5.0.7",
"react-timer-mixin": "^0.13.4",
"redux": "^4.0.0"
},
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/runtime": "^7.5.5",
"#react-native-community/eslint-config": "^0.0.5",
"babel-eslint": "7.2.3",
"babel-jest": "^24.8.0",
"eslint": "^6.1.0",
"eslint-plugin-flowtype": "2.35.0",
"eslint-plugin-import": "2.7.0",
"eslint-plugin-jsx-a11y": "6.0.2",
"eslint-plugin-prettier": "2.1.2",
"eslint-plugin-react": "7.1.0",
"eslint-plugin-react-native": "3.0.1",
"flow-bin": "0.52.0",
"flow-typed": "^2.5.1",
"graceful-fs": "^4.2.8",
"husky": "0.14.3",
"jest": "^24.8.0",
"jetifier": "^1.6.8",
"metro-react-native-babel-preset": "^0.56.0",
"prettier": "1.5.3",
"react-test-renderer": "16.8.6"
},
"resolutions": {
"graceful-fs": "4.2.4"
},
"jest": {
"preset": "react-native"
},
"rnpm": {
"assets": [
"./assets/fonts"
]
}
}
I don't know it's a native-base issue or not, as I have also tried NativeBaseProvider instead of Root, as per the forums suggestion but there is no luck at all.

Are CSS modules available for excel add-in using React?

I have created a reactjs project using the Yeoman office generator. I am trying to keep the components and the styling files together. Are css modules available for this type of projects? Below is my code:
import * as React from "react";
import classes from "./Header.module.css"
const Header = (props) => {
return <header className={classes["header-main"]}>...</header>;
};
export default Header;
For this case my Header.module.css is in the same folder as the Header.js file. But my Header.module.css file doesn't appear to have any effect on my component.
Is there something missing in my packages? Below is my package.json file.
{
"name": "office-addin-taskpane-react-js",
"version": "0.0.1",
"repository": {
"type": "git",
"url": "https://github.com/OfficeDev/Office-Addin-TaskPane-React-JS.git"
},
"license": "MIT",
"config": {
"app_to_debug": "excel",
"app_type_to_debug": "desktop",
"dev_server_port": 3000
},
"scripts": {
"build": "webpack -p --mode production --https false",
"build:dev": "webpack --mode development --https false",
"build-dev": "webpack --mode development --https false && echo . && echo . && echo . && echo Please use 'build:dev' instead of 'build-dev'.",
"dev-server": "webpack-dev-server --mode development",
"lint": "office-addin-lint check",
"lint:fix": "office-addin-lint fix",
"prettier": "office-addin-lint prettier",
"start": "office-addin-debugging start manifest.xml",
"start:desktop": "office-addin-debugging start manifest.xml desktop",
"start:web": "office-addin-debugging start manifest.xml web",
"stop": "office-addin-debugging stop manifest.xml",
"validate": "office-addin-manifest validate manifest.xml",
"watch": "webpack --mode development --watch"
},
"dependencies": {
"#fluentui/react": "^8.16.0",
"core-js": "^3.9.1",
"es6-promise": "^4.2.8",
"office-ui-fabric-react": "^7.10.0",
"react": "^16.8.2",
"react-dom": "^16.10.2",
"regenerator-runtime": "^0.13.7"
},
"devDependencies": {
"#babel/core": "^7.13.10",
"#babel/plugin-proposal-class-properties": "^7.3.0",
"#babel/preset-env": "^7.6.3",
"#babel/preset-react": "^7.6.3",
"#types/es6-collections": "^0.5.29",
"#types/find-process": "1.2.0",
"#types/office-js": "^1.0.180",
"#types/office-runtime": "^1.0.17",
"#types/react": "^16.8.22",
"#types/react-dom": "^16.8.4",
"#types/react-hot-loader": "^4.1.0",
"#types/webpack": "^4.4.34",
"#types/webpack-dev-server": "^3.1.6",
"babel-loader": "^8.2.2",
"babel-polyfill": "^6.26.0",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^6.4.1",
"css-loader": "^5.2.4",
"eslint": "^7.20.0",
"eslint-plugin-office-addins": "^1.0.0",
"eslint-plugin-react": "^7.16.0",
"extract-text-webpack-plugin": "4.0.0-beta.0",
"file-loader": "^4.2.0",
"find-process": "^1.4.4",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^4.5.1",
"less": "^3.10.3",
"less-loader": "^5.0.0",
"office-addin-cli": "^1.2.2",
"office-addin-debugging": "^4.2.2",
"office-addin-dev-certs": "^1.6.2",
"office-addin-lint": "^1.3.2",
"office-addin-manifest": "^1.6.2",
"office-addin-prettier-config": "^1.1.0",
"postcss-loader": "^4.0.0",
"react-hot-loader": "^4.12.6",
"source-map-loader": "^0.2.4",
"style-loader": "^0.23.1",
"ts-loader": "^6.2.2",
"typescript": "^4.1.3",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2"
},
"prettier": "office-addin-prettier-config"
}
Any insight is appreciated.

In your className you pretend the string as object.. you can replace with that.
return <header className={classes.header-main}>...</header>;
and most of the cases in your module.css file is better to name it as camelCase for example ".headerMain"

How to resolve eslient token error that is not further specified?

I am trying to execute a simple function. But eslient tells me that I have a Parsing error: Unexpected token.
export class SomeComponent extends Component {
function foo () { console.log ("hello") return }
render() {
return (
<React.Fragment>
</React.Fragment>
);
}
}
I saw in other posts that the problem might lie in my package configuration. That is why I also provide the configuration here:
{
"name": "test-project",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/runtime": "7.0.0-beta.55",
"#fortawesome/fontawesome-free": "^5.13.0",
"#material-ui/core": "^4.10.2",
"#material-ui/icons": "^4.9.1",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.0",
"#testing-library/user-event": "^7.2.1",
"#types/jest": "^24.9.1",
"#types/node": "^12.12.28",
"#types/react": "^16.9.21",
"#types/react-dom": "^16.9.5",
"#types/react-router-dom": "^5.1.3",
"axios": "^0.19.2",
"bootstrap": "^4.4.1",
"classnames": "^2.2.6",
"d3-ease": "^1.0.6",
"html-react-parser": "^0.10.3",
"html-to-react": "^1.4.2",
"i": "^0.3.6",
"install": "^0.13.0",
"jquery": "^3.4.1",
"material-kit-react": "^1.8.0",
"mdbreact": "^4.25.5",
"npm": "^6.14.6",
"prop-types": "^15.7.2",
"pure-react-carousel": "^1.26.1",
"react": "^16.12.0",
"react-alert": "^6.0.1",
"react-alert-template-basic": "^1.0.0",
"react-audio-player": "^0.11.1",
"react-bootstrap": "^1.0.0-beta.17",
"react-bootstrap-carousel": "^4.0.3",
"react-card-carousel": "^1.1.3",
"react-dom": "^16.12.0",
"react-geocode": "^0.2.1",
"react-google-autocomplete": "^1.1.2",
"react-google-maps": "^9.4.5",
"react-h5-audio-player": "^2.4.2",
"react-image-appear": "^1.2.23",
"react-loader-spinner": "^3.1.14",
"react-loading-image": "^0.5.0",
"react-redux": "^7.2.0",
"react-redux-loading-bar": "^5.0.0",
"react-reveal": "^1.2.2",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.0",
"react-scroll": "^1.7.9",
"react-select": "^3.1.0",
"react-slick": "^0.23.1",
"react-split-pane": "^2.0.3",
"react-transition-group": "^4.3.0",
"react-user-profile": "^1.0.3",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"slick-carousel": "^1.8.1",
"styled-components": "^5.0.1",
"typescript": "^3.7.5"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/plugin-proposal-decorators": "^7.10.3",
"babel-eslint": "^10.1.0",
"customize-cra": "^1.0.0",
"react-app-rewired": "^2.1.6"
}
}
I followed the following post and installed babel eslient via yarn add -D babel-eslint. However, afterwards react was giving me the error that I installed an incompatible babel eslient version and I had to reinstall all packages again.

Are you trying to use class or functional components, you have some errors in your code.
Class components should look like this:
class ClassComponent extends React.Component {
constructor(props) {
super(props)
// state here
}
printMessage = (msg) => {
console.log(msg);
};
render() {
this.printMessage("Hello World");
return <div>jsx here</div>;
}
}
Functional components should look like this:
function FunctionalComponent(props) {
const printMessage = (msg) => {
console.log(msg);
};
printMessage()
return <div>jsx here</div>;
}

babel-runtime module not found when using material-ui-pickers

i have a react project built using brunch. I am now trying to use material-ui-pickers, by just trying the very first example:
// Imports
/* eslint-disable */
import MuiPickersUtilsProvider from 'material-ui-pickers/utils/MuiPickersUtilsProvider';
// pick utils
import MomentUtils from 'material-ui-pickers/utils/moment-utils';
And wrapping the whole app:
<MuiPickersUtilsProvider utils={MomentUtils}>
<App />
</MuiPickersUtilsProvider>
I am having the following error in the console:
Uncaught Error: Cannot find module 'babel-runtime/core-js/object/get-prototype-of' from 'material-ui-pickers/utils/MuiPickersUtilsProvider.js'
My package.json:
{
"name": "brunch-app",
"description": "Brunch.io application",
"private": true,
"author": "",
"version": "0.0.1",
"repository": "",
"scripts": {
"start": "brunch watch --server",
"build": "brunch build --production"
},
"dependencies": {
"#material-ui/core": "^1.4.0",
"babel-runtime": "^6.26.0",
"material-ui-pickers": "^1.0.0-rc.11",
"moment": "^2.22.2",
"prop-types": "^15.6.0",
"react": "^16.2",
"react-dom": "^16.2",
"react-redux": "~5.0.6",
"react-router-dom": "^4.3.1",
"redux": "~3.7.2",
"shortid": "^2.2.11"
},
"devDependencies": {
"auto-reload-brunch": "^2",
"babel-brunch": "~6.1.1",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "~6.24",
"brunch": "^2",
"clean-css-brunch": "^2",
"enzyme": "^3.3.0",
"eslint": "^4.16.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.6.1",
"hmr-brunch": "^0.1",
"uglify-js-brunch": "^2"
}
}
I haven't found much info, the only thing was about installing babel-runtime, which i did but did not work.
Thanks.