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"
}
}
Related
Like the question says, I was following a tutorial and it was working fine so I wanted to implement it into my own side project app.
After adding it exactly the same as the doc says the component in the <Stack.Screen/> won't load.
I have tried multiple things but nothing seems to work. No errors either so I'm stuck on how to debug.
As I don't know which part of my code is causing the problem I will post my github repo link here.
https://github.com/totablue/ToyBoxOfWords
Answering my own question.
The thing that was causing my app to get stuck on the splashscreen was the SplashScreen.preventAutoHideAsync()
that was called while the app was loading the font.
const onLayoutRootView = useCallback(async () => {
if (fontsLoaded) {
await SplashScreen.hideAsync();
}
}, [fontsLoaded]);
this part of the code was not running so the splash screen never went away.
Used this video to load custom fonts in a different way and it fixed everything.
https://youtu.be/viIkcDYSBrI
I have tried to run your code, and it worked well. The problem is that you have not added some dependencies!
This is the package.json file that I use with your code.
{
"dependencies": {
"expo-font": "~10.2.0",
"expo-constants": "~13.2.4",
"expo-status-bar": "~1.4.0",
"#expo/vector-icons": "^13.0.0",
"expo-splash-screen": "~0.16.2",
"react-native-paper": "4.9.2",
"react-native-screens": "~3.15.0",
"#react-navigation/native": "*",
"#react-navigation/native-stack": "*",
"react-native-safe-area-context": "4.3.1"
}
}
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.
After installing react native-firebase core app and mlkit. mlkit does not work and fails when I try to use the function textRecognizerProcessImage.
I followed: https://invertase.io/oss/react-native-firebase/v6/ml-vision/quick-start and additionally for ios I did an pod install and saw how mlkit was downloaded.
However, the error from above occurs on android and ios.
Does anybody have a clue?
EDIT: I am also having access to the firebase-project using google-services.jsonand googleservice-info.plist
the relevant part from my package.json. Am using newest versions for all.
(As you can see I am also using /auth and /database both of which work just fine!
"dependencies": {
"#react-native-firebase/app": "^6.0.0",
"#react-native-firebase/auth": "^6.0.0",
"#react-native-firebase/database": "^6.0.0",
"#react-native-firebase/ml-vision": "^6.0.0",
"react": "16.9.0",
"react-native": "0.61.1"
},
the firebase.json:
{
"react-native": {
"ml_vision_face_model": true,
"ml_vision_ocr_model": true,
"ml_vision_barcode_model": true,
"ml_vision_label_model": true,
"ml_vision_image_label_model": true
}
}
simple solution...
The documentation talks about
import vision from '#react-native-firebase/ml-vision';
to import the vision library. However,
vision.anyFunctionHere will not work, since it is no instance.
the solution is to use vision().anyFunctionHere (not the brackets of doom which cost me hours and a hell lot of frustration-.-)
I am building an android wallet using react-native and trying to create an account using web3.eth.accounts.create() . This works with react-native remote debugger enabled. However, when I work the same code with the debugger off, it stops working.
this is my package.json
"cryptico": "^1.0.2",
"native-base": "2.8.0",
"node-libs-browser": "2.1.0",
"react": "16.3.1",
"react-native": "0.55.4",
"react-native-firebase": "^5.2.0",
"react-native-gesture-handler": "^1.0.12",
"react-native-scripts": "1.14.0",
"react-navigation": "^3.0.9",
"socket.io-client": "2.0.4",
"web3": "1.0.0-beta.34"
I fixed it by using ethers.js to create new ethereum wallet.
// this is specifically for react-native
import 'ethers/dist/shims';
import {ethers} from 'ethers';
// to create a ethereum wallet
let randomWallet = ethers.Wallet.createRandom();
Web3.js is really troublesome for react-native
read more here:
https://docs.ethers.io/ethers.js/html/cookbook-react.html#
this is a guide specifically designed for react-native
I've had problems using web3 inside React Native myself, so I switched to ethers.js .
It was working better inside RN and its gives you pretty much everything you will need.
I have tried to apply the normal button of angular material but the ripple affect will not work at all.
Iv'e got:
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
import 'hammerjs';
import 'web-animations-js';
import { MatCheckboxModule } from '#angular/material';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import {MatButtonModule} from '#angular/material/button';
imports: [
MatButtonModule,
MatCheckboxModule,
BrowserAnimationsModule
],
providers: [WeatherService],
bootstrap: [AppComponent, WeatherComponentComponent]
})
In the global styles.css file i have: #import
'~#angular/material/prebuilt-themes/deeppurple-amber.css';
dependancies:
"dependencies": {
"#angular/animations": "^5.2.10",
"#angular/cdk": "^5.2.5",
"#angular/common": "^5.2.10",
"#angular/compiler": "^5.2.10",
"#angular/core": "^5.2.10",
"#angular/forms": "^5.2.10",
"#angular/http": "^5.2.10",
"#angular/material": "^5.2.5",
"#angular/platform-browser": "^5.2.10",
"#angular/platform-browser-dynamic": "^5.2.10",
"#angular/router": "^5.2.10",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.1",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.26"
"devDependencies": {
"#angular/cli": "^1.7.4",
"#angular/compiler-cli": "^5.2.10",
"#types/jasmine": "^2.8.6",
"#types/node": "^9.6.6",
"codelyzer": "^4.3.0",
"jasmine-core": "^3.1.0",
"jasmine-spec-reporter": "^4.2.1",
"karma": "^2.0.2",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.6.0",
"protractor": "^5.3.1",
"ts-node": "^6.0.0",
"tslint": "^5.9.1",
"typescript": "^2.7.0"
}
HTML:
<button mat-raised-button color="primary">Button</button>
I have also tried to link the stylesheet in the global HTML - but doesn't work still.
I got the same problem and I solved the issue at the end.
I looked at several SO posts but none of them works in my case.
I'll show how I did below, so it might help anyone who came across the issue.
Context
I was working on the Tutorial: Tour of Heroes in Angular's site, so my app was fairly small and simple. To use the material components, I follow the "Getting Started" page on the Angular Material official website. I use Angular CLI, so I imported the prebuilt theme css in styles.css, imported MatButtonModule and tried <button mat-button>basic</button>, but the button ripple effect just didn't work.
Solution
In index.html add a class mat-app-background to body like this
<body class="mat-app-background">
...
</body>
And the ripple effect in button is now working!
Explanation Please
This solution is based on Angular Material Theming Guide. They have a few words about additional settings before the theming actually works:
Finally, if your app's content is not placed inside of a mat-sidenav-container element, you need to add the mat-app-background class to your wrapper element (for example the body). This ensures that the proper theme background is applied to your page.
This isn't mentioned in Angular Material's Getting Started page. So if you follow that page and test the mat-button right away, it might not work.
Does that work for everyone?
Definitely not. The solution above is more likely to work if your situation is similar to mine. But I will show you what step I did before, which leads to my situation.
I use Angular CLI to create my Angular app, and I followed the Getting Started tutorial as below:
I installed these packages: #angular/material #angular/cdk #angular/animations
I Imported MatButtonModule in app.module.ts.
In app.module.ts I have
...
import {MatButtonModule} from '#angular/material';
#NgModule({
...
imports: [
BrowserModule,
...
MatButtonModule, // import the Angular Material modules after Angular's BrowserModule, as described in the tutorial.
],
...
})
Import prebuilt theming CSS
In styles.css
#import '~#angular/material/prebuilt-themes/pink-bluegrey.css';
...
Now add the button in HTML
In app.component.html
...
<button mat-button>Basic</button>
...
And I clicked on the button and ripple effect did not work. So I got stuck here. But, a strange thing is, if I switch to the prebuilt theme deeppurple-amber.css, the ripple then works, without applying the Solution above.
If I switch to other prebuilt themes like purple-green.css or pink-bluegrey.css, ripple effect is again not working. I'm not sure what the cause is, but probably the theming is still not configured properly so things become unpredictable. Sometimes it works, sometimes it doesn't, which is not a good sign, so let's proceed to the next step.
If your ripple effect did not work so far like me, follow the information in Solution and the instructions in Theming Guide. According to the theming guide, you either need the element mat-sidenav-container or the class mat-app-background to make material theming configured properly. Then finally, the ripple effect should work now.
Not a solution for OP, but this is what's been causing it for me:
Make sure the BrowserAnimationsModule is imported:
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
#NgModule({
...
imports: [
BrowserAnimationsModule
],
...
})
The project I'm working on had the NoopAnimationsModule included, remove this first; you can't add them both.
For me it was an easy mistake to make if you skim the documentation. This was my problem...
This:
#import '~#angular/material/prebuilt-themes/pink-bluegrey.css';
Was here:
The Component or Module .scss files...
But needed to be here:
The styles.scss file found in the /app directory.
I had the same problem. When, I created buttons using material, the ripple effect was not happening. Later, I found that I did not include any style-theme in the project. So, it's a very basic but most essential thing to check when you are going to start a project in Angular-Material to include at least its pre-built theme style sheet. Then, you are not going to miss the ripple effect. This was my solution to my problem.
Make sure you have MatRippleModule imported into the module of that component
Okay I think I may have found some bug in angular as I was able to track the cause. It was due to usage of variable inside here: {{forecasts.list[0].dt}} Temperature (celsius): {{ weathers.main.temp }} . - So basically using {{ weathers.main.temp }} within that broke the animations in the entire page. –