I am using wix/react-native-navigation I am having white flickering screen while using setRoot or push methods in navigation.
I tried setting waitForRender: true , but it docent help .
snippet I tried dosen't work.
animations: {
setRoot: {
waitForRender: true
}
}
I had similar problem on RNN 7.7.0, what helped me is setting the default options
Navigation.setDefaultOptions({
animations: {
push: {
waitForRender: true,
},
pop: {
waitForRender: true,
},
setStackRoot: {
waitForRender: true,
},
showModal: {
waitForRender: true,
},
dismissModal: {
waitForRender: true,
},
},
})
Related
I have material icons installed and it was working perfectly showing JS icon, but recently VS code is loading the react icon for JS files for some reason and I can't figure out why.
Settings.json:
{
"workbench.startupEditor": "newUntitledFile",
"workbench.iconTheme": "material-icon-theme",
"workbench.preferredLightColorTheme": "Monokai++",
"window.menuBarVisibility": "toggle",
"editor.minimap.enabled": false,
"javascript.updateImportsOnFileMove.enabled": "always",
"[dart]": {
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.rulers": [
80
],
"editor.selectionHighlight": false,
"editor.suggest.snippetsPreventQuickSuggestions": false,
"editor.suggestSelection": "first",
"editor.tabCompletion": "onlySnippets",
"editor.wordBasedSuggestions": false
},
"dart.previewLsp": true,
"dart.debugExternalLibraries": true,
"dart.debugSdkLibraries": false,
"[javascriptreact]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"liveServer.settings.donotShowInfoMsg": true,
"editor.formatOnSave": true,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"workbench.colorTheme": "Monokai++",
"editor.fontWeight": "normal",
"material-icon-theme.activeIconPack": "none",
"material-icon-theme.folders.associations": {
},
"material-icon-theme.files.associations": {
}
}
Try adding the following setting to your config:
"material-icon-theme.files.associations": {
"**.js": "javascript",
}
With this setting you set the icon for every .js file to the javascript icon
I'm using Wix's react-native-navigation V3. I'd need to know if there's a way to call a function whenever Navigation.pop() is finished executing.
My specific case scenario is as follows.
I have 3 stack tab buttons, where I can push a new screen and pop back.
All works fine, except for the case that, from that pushed screen, I'd need to go to a different tab. If I mergeOptions directly to change currentTabIndex, the bottomTabs will disappear. Found out that I have to first, pop() and then mergeOptions.
Is there a way to accomplish this? When I run both in the same function, only pop() is triggered, I need to add some sync to this.
This is my current stack structure:
const startTabs = () => {
Navigation.setRoot({
root: {
bottomTabs: {
animate: true,
visible: false,
drawBehind: true,
elevation: 8,
waitForRender: true,
children: [
{
stack: {
id: 'MainTabStack',
children: [
{
component: {
id: 'MainTab',
name: 'app.MainTab'
}
}
],
options: {
bottomTab: {
text: i18n.t('home'),
icon: iconsMap['home-light'],
selectedIcon: iconsMap['home-solid'],
...navigatorStyle
}
}
}
},
{
stack: {
id: 'MyProfileTabStack',
children: [
{
component: {
id: 'MyProfileTab',
name: 'app.MyProfileTab'
}
}
],
options: {
bottomTab: {
text: i18n.t('myProfile'),
icon: iconsMap['user-light'],
selectedIcon: iconsMap['user-solid'],
...navigatorStyle
}
}
}
},
{
stack: {
id: 'MessageTabStack',
children: [
{
component: {
id: 'MessageScreen',
name: 'app.MessageScreen'
}
}
],
options: {
bottomTab: {
text: i18n.t('messages'),
icon: iconsMap['message-light'],
selectedIcon: iconsMap['message-solid'],
badgeColor: 'red',
...navigatorStyle
}
}
}
}
]
}
}
});
}
So I start from MainTab, then I push a new screen from this MainTab. Let's name it SingleViewScreen. When I'm done doing some stuff in SingleViewScreen, by an onPress function I need to pop() this current screen and go directly to MessageScreen.
Any ideas? Am I doing something wrong? Thanks.
You can use registerCommandCompletedListener
Invoked when a command (i.e push, pop, showModal etc) finishes executing in native. If the command contains animations, for example pushed screen animation, the listener is invoked after the animation ends.
Try this
// Subscribe
const commandCompletedListener = Navigation.events().registerCommandCompletedListener(({ commandId, completionTime, params }) => {
});
...
// Unsubscribe
commandCompletedListener.remove();
I have been stuck on this problem all morning. I have read multiple GitHub issues and StackOverflow posts and nothing has worked.
I want to remove the blue back button in the top left of the below pic.
I have noticed I am having trouble customizing the top bar altogether. I cannot add a title to the back button etc (this hint might indicate what is wrong).
Navigation.setRoot
Navigation.events().registerAppLaunchedListener(() => {
Reactotron.log('5');
Navigation.setRoot({
root: {
stack: {
children: [{
component: {
id: STARTING_SCREEN,
name: STARTING_SCREEN
}
}],
}
},
layout: {
orientation: 'portrait',
},
}).then(()=>Reactotron.log('7'));
Navigation.push
SplashScreen (root screen) -> AccessScreen (next screen).
Navigation.push(this.props.componentId, {
component: {
name: screen
},
options: {
topBar: {
backButton: {
visible: false,
}
}
}
It's almost as if I am specifying the backButton options in the wrong place.
A tricky workaround
leftButtons: [
{
id: 'something',
text: '',
},
],
the text: '' will keep a empty space, so will hide the button.
Actually not hide, but yea you can say that too.
You're good to go!!
Use it but only working for ios
Navigation.setDefaultOptions({
topBar: {
backButton: {
visible: false
}
},
})
or you can customize topBar
Navigation.push(this.props.componentId, {
component: {
name: screen
},
options: {
topBar: {
backButton: {
background: YourComponent
}
}
}
I am using RN 0.55 and RNN 2.1.2. When I am on the root screen of my stack navigator and swipe right (the back action) then attempt to navigate via a push, all user interaction locks and the application becomes unresponsive. It does not crash, nor does it throw an error. It just locks up. Has anyone experienced this or have a fix?
NOTE: There is a small chance that that .push is being called twice very very quickly. It isn't debounced and can be triggered multiple times.
The initial setup in index.js
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setRoot({
root: {
stack: {
children: [
{
component: {
name: "search.ListsOfThings",
options: {
layout: {
orientation: ['portrait']
},
topBar: {
visible: false,
drawBehind: true
}
}
}
}
]
}
}
})
})
the push command inside of ListOfThings
Navigation.push(this.props.componentId, {
component: {
name: 'search.FoundThings',
passProps: {
things: data.foundThings
},
options: {
layout: {
orientation: ['portrait']
},
topBar: {
visible: false,
drawBehind: true
}
}
}
})
To lock you need to follow this:
stack: {
children: [{.....}],
options: { layout: { orientation: ['portrait']}}
},
This should help
How to turn off animation when do Navigation.push when use RNN v2?
Tried set animated: false when use V1 did. But not work on V2
Navigation.push(this.props.homeId, {
component: {
name: 'Screen2',
animated: false,
options: {
animated: false,
topBar: {
title: {
text: 'Pushed Screen Title'
}
}
}
}
})
}
Read the V2 doc, but didn't find anything helpful.
According to the Styling documentation, for pushing and popping screens to and from a stack, you can disable animations separately which seems to satisfy your need.
Navigation.push(this.props.componentId, {
component: {
name: 'Screen2',
options: {
topBar: {
title: {
text: 'Pushed Screen Title'
}
},
animations: {
push: {
enabled: false
}
}
}
}
})