After long searching for that how to customise the back button on the react-native-navigation I finally gave up. So my idea is to use custom back button if it is possible because it will be the easiest option I think. For example ....
backButton: {
id: "backButton",
icon: require("../../assets/logo.png"),
}
But what happens here is that the icon gets coloured in blue like it is a back arrow. The problem is that is in fact text which have different colours on some chars and I don't want the colour of the png to be changed at all. And the biggest problem is that if it gets changed there is absolutely no way to revert it.
So my question is: Is there any way this logo.png when I put it for icon of the backButton it not to get colour changed? Or if there is no way that to happen this way is there any way this to be done at all?
Thanks in advance. :)
The back button can be customised with a backButton option as described in the docs
Related
For some reason when the orientation changes, I get a white box, which I am assuming is the place of the Drawer pre orientation change. Picture: Simulator Example
If I fully remove and re-render the Home component the white box will go away, but I would like to try and avoid that. I have tried passing height/width props when the dimensions change, but that didn't seem to fix the problem. Would be nice to get some help on this since I am stuck.
I'm hoping to understand how I can achieve this behavior using Jetpack Compose in Android when displaying a dialog on top of the current Composable view.
Desired State:
Animation when clicking on the Filter button at the bottom. This is from the app Culture Trip on iOS.
I currently have a dialog like below. If you notice, my content is still visible but I would like to have it appear as if it's a page layer that's in the background.
Notice the red arrow in the desired state picture. I can mimic that behavior by having a row and setting the background color with padding but looking for a more elegant solution or wondering if there is standard behavior that I don't know about.
Actual State:
For displaying your dialog above, you need to use Box and call dialog at the very bottom of this Box.
Hey their fellow stack over flowers!
As the question states, is it possible to perform such a feat?
If possible how would you go about doing it?
So the situation we have here is that there is a drawer and on top of it lies the bottom tab bar which annoys the whole view of the screen. That's why we should find a way to hide it. Isn't it?
Here's what you've got:
What's required is, hiding the tab bar when clicking on the hamburger menu and taking it back up when you touch or press down the bottom tab area. Obviously, I went through other quality questions with qualities answers here. But nothing seems to provide a providence a least bit
Do you know any clever way to handle this?
THANKS!!
If you are using custom tabBar, you could use React.Context or some kind of global state to trigger hiding your tabBar when you press a button. I would "hide" my tabBar by rendering the tabBar as a transparent Pressable with a certain height that when you click on it, it will rerender the original tabBar. You could also use setTimeout to rehide it automatically.
I saw a package for bottom navigation for Flutter which looks very nice.
Curved Navigation Bar (Flutter)
Basically, it will look like this
I am trying to replicate it in React Native (UI first, then will work on Animation) but not successful. Is it actually possible to replicate this in React Native?
The closest I can get is as shown in this image. However I used 4 different shapes positioned as absolute to achieve this.
This image differentiates the shapes I used (Gray, Orange, Red and Blue) to form the navigation bar.
Please advice me if there is a way to make this perfect (better without the workarounds like I did).
Thank you very much.
The close approach is to use Views like this.
Mask off the red part on yellow or do apply same background color to red. It will look like this.
Since I couldn't found how to mask it, I just applied background color to the red color View.
Then you can use animations and interpolation to move the entire shape on the click event.
And the final product will look like this.
I've published the same on https://www.npmjs.com/package/rn-curved-navigation-bar
Or you can check out and clone the project on github
There is library react-native-tabbar-interaction , you can have a try with it. Look similar as you need
I have made a custom back button component simply to pop up an alert to the user on certain screens where they may be changing data for an entity and will lose those changes if they do not hit Save before navigating away from the screen.
Link to snack for full CustomBackButton component code
(the snack won't run, I'm just using it to provide the full code I am using)
This logic/implementation works as intended, however the appearance is grossly different from the native back button appearance on iOS. I am wondering how best to emulate this as close as possible so the user can feel that the button is the same as the native experience everywhere throughout the application.
What would you advise? I am open to any and all suggestions such as flexbox improvements, hacky RNN mods, etc. etc.
custom back button:
native back button:
for now i am using a marginLeft: -20 on the button container (styles.button)