2

I am using navIcon of ToolbarAndroid to show the Icon in my react-native application as follows:

<ToolbarAndroid
    actions={[]}
    navIcon={require('./arrow-left-c.png')}
    onIconClicked={navigator.pop}
    style={{height:180,backgroundColor:'#a9a9a9'}}
    titleColor="white"
    title={route.name} />

But the problem is that the icon arrow-left-c is taking the whole width of screen. I only want to display it in the left side as normal icon appears. How can I set the width and height of this navIcon?

Naman Sogani
  • 943
  • 1
  • 8
  • 28

3 Answers3

1

Currently you cannot set the size of navIcon in React native ToolBarAndroid.

Toolbar icon size should be 24dp as mentioned here.

Community
  • 1
  • 1
Jickson
  • 5,133
  • 2
  • 27
  • 38
0

I had same problem,and i solved it.

we know we need the icon with 24dp,and we need rename file name end up with @3X,

such as app_logo.png ===> app_logo@3x.png

you can found this at Images of RN

KuTear
  • 216
  • 3
  • 8
-3

It will be a better option if u use seprate layout for toolbar and then inflate it in toolbar.In this layout you will be able to give any style size color and icon to it.

Take a new xml file app_bar layout and copy the following code in it.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorWhite">

        <ImageView
            android:id="@+id/btnBack"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:padding="10dp"
            android:text="@string/back_font"
            android:textColor="@color/colorBtn"
            android:textSize="30sp" />

        <TextView
            android:id="@+id/lblTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="8dp"
            android:layout_toRightOf="@+id/btnBack"
            android:text="Create Account"
            android:textColor="@color/colorBtn"
            android:textSize="18sp" />
</RelativeLayout>

then in your activity containing toolbar copy this code.

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

final View barview =LayoutInflater.from(this).inflate(R.layout.app_bar_register, toolbar, false);
 toolbar.addView(barview);

 if (toolbar != null) {
                setSupportActionBar(toolbar);
            }
ImageView btnBack= (ImageView) barview.findViewById(R.id.btnBack);
btnBack.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    onBackPressed();
                }
            });
Komal
  • 11
  • 2