Invalid UIAccessibilityTraits 'tablist' using #react-navigation/material-bottom-tabs - react-native

I get the following error after installing #react-navigation/material-bottom-tabs react-native-paper react-native-vector-icons and creating a stack following the example at https://reactnavigation.org/docs/material-bottom-tab-navigator/#example:
Error setting property 'accessibilityRole' of RCTView with tag #227: Invalid UIAccessibilityTraits 'tablist'. should be one of: (
adjustable,
allowsDirectInteraction,
button,
disabled,
frequentUpdates,
header,
image,
key,
link,
none,
pageTurn,
plays,
search,
selected,
startsMedia,
summary,
text
)
The error appears when navigating to the stack, and the stack appears as normal. It only pops up on ios and I have no issues at all when using android. I am also following the bare react-native workflow due to limitations of the library I am using, thus no expo support.
The relevant dependencies on my package.json is as follows:
{
"dependencies": {
"#react-navigation/material-bottom-tabs": "^6.2.4",
"#react-navigation/native": "^6.0.13",
"#react-navigation/native-stack": "^6.9.1",
"#react-navigation/stack": "^6.3.2",
"react": "17.0.2",
"react-native": "0.65.1",
"react-native-gesture-handler": "^2.7.1",
"react-native-paper": "^4.12.5",
"react-native-safe-area-context": "^4.4.1",
"react-native-screens": "^3.18.2",
"react-native-vector-icons": "^9.2.0",
"react-navigation-stack": "^2.10.4",
},
}
Anyone out there knows how to get rid of this error?
I've tried solutions such as the one on Invalid UIAccessibilitys 'tablist' error after installing react-native-vector-icons and running pod update on ios where i change in
/node_modules/#react-navigation/material-bottom-tabs/lib/commonjs/ views/MaterialBottomTabView.js
/node_modules/#react-navigation/material-bottom-tabs/lib/module/ views/MaterialBottomTabView.js
/node_modules/#react-navigation/material-bottom-tabs/src/views/ MaterialBottomTabView.tsx
accessibilityRole: "link"
to
accessibilityRole: "none"
but it is not working. Might also be because this example makes changes in the bottom-tabs/ folder while mine is located in material-bottom-tabs/ folder. I am also not sure where the tablist is being imported from.

Related

Is it possible to use React Navigation with snack.expo.io?

I like to use snack.expo.io because I'm new to programming and it makes it quick and easy to manage and access what I'm working on. However, I just tried to use React Navigation and can't get it to work. I keep getting "Unable to resolve module 'react-navigation.js'. I pulled up the React Navigation snacks at https://expo.io/snacks/#react-navigation and most of those have the same error. Am I missing something?
Perhaps my initial question should have asked if there is some initialization step I'm missing. I know I have to import it with something like
import { DrawerNavigator } from 'react-navigation';
But is there a dependency I have to manually add? I thought Expo took care of that sort of thing for you, but again, I'm not super experienced with all of this.
I don't know if this is the correct way, but I managed to get past the "unable to resolve" problem. I welcome a better solution from someone more knowledgeable than myself.
It did come down to a dependency issue. Again, in the past I'm pretty sure writing the import line resulted in Snack automatically handling the appropriate dependencies, but for some reason it did not here. So in order to get the React Navigation bottom tab navigator to show up I added
"#react-navigation/bottom-tabs": "latest",
to my package.json. My import line had to adjust to
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
This came from me poking around the Tab navigation page on reactnavigation.org (https://reactnavigation.org/docs/tab-based-navigation/) Interestingly enough, that did result in Snack pulling in a couple of other dependencies on app reload. I have no clue what the # in front of react-navigation does; it's the first time I've run into it.
Just set their dependencies in package.json and it should work fine:
{
"dependencies": {
"#expo/vector-icons": "^10.0.0",
"#react-native-community/masked-view": "0.1.10",
"#react-navigation/bottom-tabs": "^5.8.0",
"#react-navigation/drawer": "^5.9.0",
"#react-navigation/material-bottom-tabs": "^5.2.16",
"#react-navigation/material-top-tabs": "^5.2.16",
"#react-navigation/native": "^5.7.3",
"#react-navigation/stack": "^5.9.0",
"react-native-paper": "^4.0.1",
"react-native-reanimated": "~1.13.0",
"react-native-safe-area-context": "3.1.4",
"react-native-gesture-handler": "~1.7.0",
"react-native-screens": "~2.10.1",
"react-native-tab-view": "^2.15.1"
}
}

Getstream Chat Error: AnimatedValue: Attempting to set value to undefined

I am working with Getstream chat SDk in react native,
My package.json file looks like:
"dependencies": {
"#react-native-community/masked-view": "^0.1.10",
"#react-native-community/netinfo": "^5.9.4",
"react": "16.13.1",
"react-native": "0.63.1",
"react-native-device-info": "^5.6.2",
"react-native-document-picker": "^3.5.3",
"react-native-fast-image": "^8.1.5",
"react-native-gesture-handler": "^1.6.1",
"react-native-image-picker": "^2.3.2",
"react-native-safe-area-context": "^3.1.1",
"react-native-screens": "^2.9.0",
"react-navigation": "4.1.0",
"react-navigation-stack": "^2.8.2",
"stream-chat-react-native": "^0.13.1"
},
I am using the same react native code in the "native message example" provided in the link : https://github.com/GetStream/stream-chat-react-native
While running, The chat list screen is presenting , but on selecting a chat it shows an error as :
Error: AnimatedValue: Attempting to set value to undefined
Do anyone has the same issue, Could you please help me to solve this.
Thanks in advance.
TLDR:
Mine working version for 1.3.2,
Please read readme.md and bug.md as walktrough.
https://github.com/ilovejs/ReactNative-GetStream-Bugfix
Explaination:
What are the problems in 'official' demo ?
"react-native-image-picker": "^2.3.4"
index.js introduce patch uuid crpyto bug, that reported in readme.md
"react-native-reanimated": "1.13.1",

Unhandled JS Exception: Invariant Violation: Invalid hook call with React-Redux Connect #15822

I am new to react native and I am trying to implement Redux in my application. React native throwing error while using connect function from react-redux as follows.
export default connect()(MyComponent);
I checked all 3 options and I am not breaking any:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks(Not sure)
You might have more than one copy of React in the same app
Version of dependancies listed below:
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-native": "0.57.7",
"react-native-elements": "^0.19.1",
"react-native-geocoding": "^0.3.0",
"react-native-gesture-handler": "^1.0.12",
"react-native-maps": "https://github.com/react-community/react-native-maps.git",
"react-native-modal": "^9.0.0",
"react-native-router-flux": "^4.0.6",
"react-native-size-matters": "^0.1.4",
"react-native-super-grid": "^3.0.4",
"react-native-vector-icons": "^4.6.0",
"react-navigation": "^3.0.9",
"react-redux": "^7.0.3",
"redux": "^4.0.1",
"redux-logger": "^3.0.6"
Error disappear when I remove connect(). But it prevents from implanting Redux
Is this a bug in React Native or I am doing something wrong here?
Try to update react-native to 0.59.x.
Looks like react-redux switched to use React hooks internally. But react-native added React hooks support starting from version 0.59 (https://facebook.github.io/react-native/blog/2019/03/12/releasing-react-native-059).

Unrecognized font family 'simple-line-vector'

I have installed react-native and tried to run my app, but I immediately get the error Unrecognized font family 'simple-line-icons'.
Then, I tried to link react-native-vector-icons as mentioned in other solutions in stack-overflow or GitHub. Here's the command I tried to link it : react-native link react-native-vector-icons.
This prompt another error, which is : Cannot read property 'pbxprojPath' of null.
Again, I looked further if someone had a solution for this second error, and the most common answer I found is that I need to upgrade my react-native. So I did with the follow command react-native-git-upgrade but I got this error:
Error: react-native version in "package.json" (https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz) doesn't match the installed version in "node_modules" (0.57.1).
Here's my project properties :
package.json :
...
"dependencies": {
"#expo/samples": "2.1.1",
"#expo/vector-icons": "^9.0.0",
"expo": "^32.0.0",
"expo-cli": "^2.14.0",
"native-base": "^2.10.0",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-vector-icons": "^6.1.0",
},
...
app.json :
...
"expo": {
...
"sdkVersion": "32.0.0",
...
...
I have already tried to clean my cache.
Also, I am working with npm.
Has someone encountered the same problem?

React Native on device causes "Unhandled JS Exception: new.target"

Hoping this is a simple issue but I couldn't find anything on a Google search. Running on emulator (with any build type) works perfectly. Connecting a device however with any build type (debug or release) the following issue occurs at runtime (the app can build successfully):
My package.json has the following deps:
"dependencies": {
"#redux-offline/redux-offline": "2.4.0",
"babel-plugin-transform-remove-console": "6.9.4",
"buffer": "5.2.0",
"crypto-js": "3.1.9-1",
"lodash": "4.17.10",
"react": "16.3.1",
"react-native": "0.54.4",
"react-native-fast-image": "4.0.14",
"react-native-firebase": "4.3.8",
"react-native-fs": "2.10.14",
"react-native-maps": "0.21.0",
"react-native-maps-super-cluster": "1.4.1",
"react-native-navigation": "1.1.471",
"react-native-svg": "6.4.1",
"react-native-tab-view": "1.0.2",
"react-redux": "5.0.7",
"redux": "4.0.0",
"redux-logger": "3.0.6",
"redux-thunk": "2.3.0",
"whatwg-url": "6.5.0"
},
"devDependencies": {
"babel-eslint": "^8.2.3",
"babel-jest": "23.0.1",
"babel-preset-flow": "6.23.0",
"babel-preset-react-native": "4.0.0",
"eslint": "4.19.1",
"eslint-config-airbnb": "16.1.0",
"eslint-plugin-flowtype": "2.49.3",
"eslint-plugin-import": "2.12.0",
"eslint-plugin-jsx-a11y": "6.0.3",
"eslint-plugin-react": "7.9.1",
"flow-bin": "0.65.0",
"husky": "0.14.3",
"jest": "23.1.0",
"lint-staged": "7.1.3",
"prettier": "1.13.4",
"react-native-schemes-manager": "1.0.4",
"react-test-renderer": "16.3.0-alpha.1"
},
My .babelrc has the following:
{
"presets": ["react-native", "flow"],
"env": {
"production": {
"plugins": ["transform-remove-console"]
}
}
}
I am using react-native-schemes-manager to build a flavour of base app. The config for this is in the package.json like so:
"xcodeSchemes": {
"Debug": [
"FakeAppNameDebug"
],
"Release": [
"FakeAppNameRelease"
]
}
None of this explains how it works perfectly fine on a simulator but wants to throw tantrums when running on a device though. Any ideas?
I had the same problem, that's what I've found out:
JS in RN is executed in two different environments (V8 or JavaScriptCore), depending on how you run it. E.g. in my case the app worked properly on iOS simulator with and without remote js debugger; on Android simulator worked only with remote debugger turned on and threw the error without it; on a real Android device threw the error. Taking into consideration that JSC comes in two different versions (supplied by iOS or packaged in RN app for Android), I concluded that the iOS JSC and V8 do understand target.new, whilst the Android-packaged JSC doesn't (btw neither does Babel).
That's the reason why new.target fails, depending on where you run it.
Now where this bug comes from: I used this method to find the culrpit and located it in the whatwg-url package, in node_modules/whatwg-url/lib/URL.js:
return iface.setup(Object.create(new.target.prototype), args);
tl;dr; There are several possible solutions:
Get rid of whatwg-url. This may be just a temporary solution, because there are more things that the original JSC doesn't support (e.g. proxies or symbols that can't be simply transpiled or polyfilled).
Replace JSC with an alternative. The 2 options I've found are: jsc-android-buildscripts (an RN go-to solution, so probably a better option) and LiquidCore. This can be a good investment since the original JSC hasn't been developed since 2016 (:sick:).
Wait for RN v0.59, which will replace the JSC.
Bonus: You can try changing the new.target occurrences to new . target (which apparently is supported in all the engines) just to check if newTarget is the only problem you have. In my case, it appeared that it's also proxies that aren't supported (I'm using mobx v5), so just getting rid of whatwg-url wouldn't solve my problem.