I am using Airbnb's native navigation library for navigation bars, specifically Navigator.Config. On Android, I want to replace the default back button by this material icon on a screen that is presented like a modal. I have tried setting a new icon using the navIcon prop of Navigator.Config, but Android does not recognize any URI I give e.g. ../icons/icon.png.
Is there a way to set another Android back icon from the JS side, or from the Android side?
EDIT: Precised that the screen is presented as a modal
Related
I'm trying to make a fullscreen (no notification bar and no botton android buttons) android app with react-native.
I found the react-native-fullscreen-chz library that works well with a basic screen but it doesn't expand when using a Bottom Tab Bar. I'm getting the following:
How can I achieve the full screen mode with a Bottom Tab Bar? I'm using react-navigation 5.x.
I use React Native CLI. With Alert, the full screen of the app is covered and the navigation bar becomes transparent. However this does not happen with a Modal, which does not cover the navigation bar. (and it looks a bit bad). I don't understand why that happens and I'd be grateful if someone could help me out.
Example when using Modal.
Example when using Alert.
Try setting transparent prop to 'true' - https://reactnative.dev/docs/modal#transparent
I'm using React Navigation Wix for my App and I want to achieve something similar to the below design (Attached image).
Actually the problem with the wix is that we don't have the ability to customize too much things, we can config the text and the icon only.
Note that its hard for me to convert to the react navigation library right now.
Right now there is no way to add a custom component as Bottom Tab Bar in "react-native-navigation" by Wix.
But you can implement the approach briefly described here
disable bottom tabs showing
create your own tabs component
add it to every screen
get fun :-)
But you need to be aware that you will lose the default badge showing behavior (small red circles near the icon) provided by this lib.
Using a custom drawer navigator in React Native, how do I highlight the current screen name? Is there a prop that is supposed to be passed? For example in the image, I am on the "Home" screen. How do I know the screen I am on to change the text colour of home, for example.
I would like to try and use the native Google ActionBar class for my application however, I would like to be able to change the left most image dynamically, disable the icon and center the title. I was wondering if this is possible of if I should implement my own ActionBar?
My reason for wanting to change the left most image (IE the navigation drawer indicator) is because I am using the navigation drawer but on some screens would like to display the up indicator instead.
Looking through the documentation for the ActionBarDrawerToggle, there is a method to enable/disable the navigation drawer icon (setDrawerIndicatorEnabled), when disabled it reverts to the home-as-up indicator.
Another option is to recreate the drawer in those specific screens you want the icon different and specify the new icon in the creation of the drawer, not sure if this would work though.
http://developer.android.com/reference/android/support/v4/app/ActionBarDrawerToggle.html
Here is the android guide which explains how to do this, but allow me to give a brief overview.
You do not have to have the app icon as the leftmost icon so in certain pages you can disable it by specifying another "android:logo" item in the XML file, or by simply diabling it entirely.
The android logo, which is what you are talking about as the "leftmost item", can have an onClickListener() set for it which is how you can change it simply to an uparrow image which you can download from google.