react-native-toolbar-android / toolbar-android

@react-native-community/toolbar-android

What is it?

A React component that wraps the Android-only Toolbar widget.

This is extracted from react-native per lean core initiative, which removed ToolbarAndroid at v0.61. The goal of this repo is to house the original component and continue to improve and maintain a lean wrapper with zero dependency other than react and react-native.

Getting started

yarn add @react-native-community/toolbar-android

or

npm install @react-native-community/toolbar-android --save

Now link the native code with your project:

# RN >= 0.60
npx pod-install

# RN < 0.60
react-native link @react-native-community/toolbar-android

Manual installation

Manually link the library on Android

android/settings.gradle

include ':react-native-community-toolbar-android'
project(':react-native-community-toolbar-android').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/toolbar-android/android')

android/app/build.gradle

dependencies {
   ...
   implementation project(':react-native-community-toolbar-android')
}

android/app/src/main/.../MainApplication.java

On top, where imports are:

import com.reactnativecommunity.toolbarandroid.ReactToolbarPackage;

Add the toolbar-android class to your list of exported packages.

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.asList(
            new MainReactPackage(),
            new ReactToolbarPackage()
    );
}

Migrating from the core react-native module

This module was created when the ToolbarAndroid was split out from the core of React Native. To migrate to this module you need to follow the installation instructions above and then change you imports from:

import { ToolbarAndroid } from 'react-native';

to:

import ToolbarAndroid from '@react-native-community/toolbar-android';

Usage

see ToolbarAndroid

Contributors

This module was extracted from react-native core.

License

The library is released under the MIT licence. For more information see LICENSE.

toolbar-android's Issues

Tried to register two views with the same name ToolbarAndroid

This is the problem i had oblador/react-native-vector-icons#1193
The problem is in android only: "Tried to register two views with the same name ToolbarAndroid"
i already added by: yarn add @react-native-community/toolbar-android

@react-native-community/toolbar-android": "^0.1.0-rc.2
"react-native-vector-icons": "6.6.0"

I also tried:
"react-native-vector-icons": "7.0.0"
but persist the problem.

Where is this component register?
I need help my friends!

Have the web implementation point to React Native Web instead of React Native

Feature request

Currently, UnimplementedView is used as a general support mechanism to have render compatibility for other non-supported platforms.

For web, ToolbarAndroid.web.js attempts to use it like so

https://github.com/react-native-community/toolbar-android/blob/e7b37ad740580c5ac202524fa888768af419cd67/js/ToolbarAndroid.web.js#L13-L21

However, most web installations alias react-native with react-native-web. Webpack would then try to look for the module in react-native-web/Libraries/Components/UnimplementedViews/UnimplementedView which doesn't exist and thus will always throw a warning.

I think the path should reference react-native-web's actual UnimplementedView path instead of react-native's.

Since .web files are normally only picked up during web targeted builds, I would guess that react-native-web should almost always be installed as well.

Why it is needed

• Some CI systems fail on warning by default (that's mine!)
• Even though it shouldn't be used on Web
  • It will error since the module will return {} rather than a generic View component that UnimplementedView implements
  • This should circumvent that above scenario majority of the time
• Even if the module is not found, it will still have the same intended fallback behavior before the change

The current workaround is using webpack's resolve.alias like so

resolve = {
  alias: {
      'react-native/Libraries/Components/UnimplementedViews/UnimplementedView$': 'react-native-web/dist/modules/UnimplementedView',
      'react-native': 'react-native-web',
      ...
  }
}

but I think in a create-react-app scenario, it'd be a huge hassle to tell users to modify the webpack config since it's not readily available.

Possible implementation

Change the path to react-native-web/dist/modules/UnimplementedView

Code sample

let m;
try {
  // This is an optional dependency. However, webpack might still show warning message.
  m = require('react-native-web/dist/modules/UnimplementedView');
} catch {
  // If failed to find react-native-web's UnimplementedView, just returns an empty module so
  // this won't cause bundling related error, however any subsequent attempt of using this module
  // in such situation shall caused compile-error because it really should not be used for web.
  m = {};
}

I can open a PR if you'd like.

IconImageInfo is not abstract and does not override abstract method getExtras() in HasImageMetadata

Hi there,

there seems to be a new problem that arose for me after upgrading to React Native 0.65.1. When I try to build my app on Android, I receive the following error:

IconImageInfo is not abstract and does not override abstract method getExtras() in HasImageMetadata
  private static class IconImageInfo implements ImageInfo {

For now, I was able to get over this error by adding the following lines to node_modules/@react-native-community/toolbar-android/android/src/main/java/com/reactnativecommunity/toolbarandroid/ReactToolbar.java.

Additional import statements at top of file:

...
import java.util.Map;
import java.util.HashMap;
...

Additional method added in class IconImageInfo:

public Map<String,Object> getExtras() { return new HashMap<String,Object>(); }

This lets me at least get around this error message. But it's a "dirty workaround" and it would be good to solve the issue within the package.

InvariantViolation: "ToolbarAndroid" was not found in the UIManeger

Problem

InvariantViolation: requireNativeComponent: "ToolbarAndroid" was not found in the UIManager

I followed the steps of the installation tutorial and the implementation tutorial, but when running on the android application the following stack appears:

InvariantViolation: requireNativeComponent: "ToolbarAndroid" was not found in the UIManager.

This error is located at:
   in ToolbarAndroid (at ToobarAndroid.android.js:228)
   in ToolbarAndroid (at ToobarAndroid.android.js:242)
   in FowardRef (at Main.js:9)
   in Main (created by SceneView)
   in SceneView (created by Drawer)
   in RCTView (created by ResourceSavingScene)
   ...

I'm using:

• Expo 37.0.3 (SDK37)
• React Native: 0.61.4
• React Navigation: 4.3.9
• App Expo Client version: 2.15.4

Error while using toolbar-android with use_frameworks in podfile

Xcode Version : 12.4
react-native version : 0.63.3
react version : 16.13.1
@react-native-community/toolbar-android version: "0.1.0-rc.2"

Podfile :

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
source 'https://github.com/BlinkReceipt/PodSpecRepo.git'
source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '10.0'

# Override Firebase SDK Version
# $FirebaseSDKVersion = '6.34.0'

# Allow iOS Static Frameworks
$RNFirebaseAsStaticFramework = true

target 'AppName' do
  config = use_native_modules!
  use_frameworks!
  # use_frameworks! :linkage => :static
  # use_frameworks! :linkage => :dynamic
  use_react_native!(:path => config["reactNativePath"])
  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
  # pod 'BlinkReceipt'
  pod 'BlinkEReceipt'

  target 'AppNameTests' do
    inherit! :complete
    # Pods for testing
  end

  # Enables Flipper.
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable these next few lines.
  # use_flipper!
  # post_install do |installer|
  #   flipper_post_install(installer)
  # end
end

We want to use the android toolbar in the project which is using use_frameworks in podfile. But it is causing linking issues. We have tried to add framework in the build Phases but still we are getting the same problem. I have added the screenshots of the issue shown in the xcode. Can anybody help with this?

Makes building fail on react-native 0.65

Hello 👋

React Native 0.65 bumped the fresco dependency from 2.3.0 to 2.5.0 which means a new method getEtras() now needs to be implemented in IconImageInfo.

node_modules\@react-native-community\toolbar-android\android\src\main\java\com\reactnativecommunity\toolbarandroid\ReactToolbar.java:107: error: IconImageInfo is 
not abstract and does not override abstract method getExtras() in HasImageMetadata
  private static class IconImageInfo implements ImageInfo {
                 ^

ImageInfo on fresco
HasImageMetadata on fresco

Error in render method of of ToolbarAndroidNative in toolbar-android v 0.2.1

Error on line 230, column 24 in ToolbarAndroid.android.js (see screenshot for error message)
'.. requireNativeComponent is not a function it is an object'

package.json

  "devDependencies": {
    "@babel/core": "^7.20",
    "@babel/preset-flow": "^7",
    "flow-bin": "^0.221",
    "flow-typed": "^3.9",
    "npm-run-all": "^4",
    
    "@types/react": "~18.2.14",
    "typescript": "^5.1.3"
      
  },
  "dependencies": {
    "expo": "~50.0.0-alpha.6",
    "expo-status-bar": "~1.9.0",
    "react": "18.2.0",
    "react-native": "0.72.5",
    "@react-native-community/checkbox": "^0",
    "@react-native-community/slider": "^4",
    "@react-native-community/toolbar-android": "^0.2",
    "@react-native-picker/picker": "^2",
    "@types/react": "~18.0.27",
    "expo-av": "^13",
    "expo-splash-screen": "~0.24.0",
    "js-search": "^2",
    "prop-types": "^15",
    "pubsub-js": "^1",
    "react-native-markdown-display": "^6",
    "react-native-modal": "^13",
    "react-native-vector-icons": "^10",
    "react-router-native": "^6.3",
    "tree-model": "^1",
    "unmutable": "^0"
  },
  "expo": {
    "autolinking": {
      "android": {
        "exclude": [
          "@expo/vector-icons",
          "react-native-webview"
        ]
      },
      "ios": {
        "exclude": [
          "@expo/vector-icons",
          "expo-keep-awake",
          "expo-font"
        ]
      }
    }
  }

Activity invoking the React native (using autolinking, and I confirmed that com.reactnativecommunity.toolbarandroid.ReactToolbarPackage; is included in the array of packages (List packages ).

        mReactRootView = new ReactRootView(this);
        List<ReactPackage> packages = new PackageList(getApplication()).getPackages();
    
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setCurrentActivity(this)
                .setBundleAssetName("index.android.bundle")
                .setJSMainModulePath("index")  
                .addPackages(packages) //adding autloinked packages
                .addPackage(new SurveyMgrReactPackage())

                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();

Class where I use the tool bar:

import isEqual from 'lodash/isEqual';
import pick from 'lodash/pick';

import React, {Component} from 'react';
import { Text } from 'react-native';

import PropTypes from 'prop-types';
import {Icon} from '../../mdk/RNVI';

import type { Node } from 'react';


import ToolbarAndroid from '@react-native-community/toolbar-android';


const ICON_PROP_NAMES = ['iconSize', 'iconColor', 'titleColor'];
const LOGO_ICON_PROP_NAMES = [...ICON_PROP_NAMES, 'logoName'];
const NAV_ICON_PROP_NAMES = [...ICON_PROP_NAMES, 'navIconName'];
const OVERFLOW_ICON_PROP_NAMES = [...ICON_PROP_NAMES, 'overflowIconName'];
const ACTIONS_PROP_NAMES = [...ICON_PROP_NAMES, 'actions'];

const arePropsEqual = (keys) => (prevProps, nextProps) =>
  isEqual(pick(prevProps, keys), pick(nextProps, keys));

const areLogoIconPropsEqual = arePropsEqual(LOGO_ICON_PROP_NAMES);
const areNavIconPropsEqual = arePropsEqual(NAV_ICON_PROP_NAMES);
const areOverflowIconPropsEqual = arePropsEqual(OVERFLOW_ICON_PROP_NAMES);
const areActionPropsEqual = arePropsEqual(ACTIONS_PROP_NAMES);

const IconNamePropType = PropTypes.oneOf(Object.keys(Icon.getRawGlyphMap()));

let getImageSource = Icon.getImageSource;

export class LCSIconToolbarShim extends React.PureComponent {
  static defaultProps = {
    iconSize: 24,
  };

  static propTypes = {
    logoName: IconNamePropType,
    navIconName: IconNamePropType,
    overflowIconName: IconNamePropType,
    actions: PropTypes.arrayOf(
      PropTypes.shape({
        title: PropTypes.string.isRequired,
        iconName: IconNamePropType,
        iconSize: PropTypes.number,
        iconColor: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
        show: PropTypes.oneOf(['always', 'ifRoom', 'never']),
        showWithText: PropTypes.bool,
      }),
    ),
    iconSize: PropTypes.number,
    iconColor: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    titleColor: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  };

  constructor(props) {
    super(props);

    this.state = {
      logo: undefined,
      navIcon: undefined,
      overflowIcon: undefined,
      actions: undefined,
    };
  } /* end of constructor */

  componentDidMount() {
    this.updateLogoIconSource();
    this.updateNavIconSource();
    this.updateOverflowIconSource();
    this.updateActionIconSources();
  }

  componentDidUpdate(prevProps) {
    if (!areLogoIconPropsEqual(prevProps, this.props)) {
      this.updateLogoIconSource();
    }
    if (!areNavIconPropsEqual(prevProps, this.props)) {
      this.updateNavIconSource();
    }
    if (!areOverflowIconPropsEqual(prevProps, this.props)) {
      this.updateOverflowIconSource();
    }
    if (!areActionPropsEqual(prevProps, this.props)) {
      this.updateActionIconSources();
    }
  }

  async updateLogoIconSource() {
    const {logoName, iconSize, iconColor, titleColor} = this.props;
    if (logoName) {
      const logo = await getImageSource(
        logoName,
        iconSize,
        iconColor || titleColor,
      );
      this.setState({logo});
      // eslint-disable-next-line react/destructuring-assignment
    } else if (this.state.logo) {
      this.setState({logo: undefined});
    }
  }

  async updateNavIconSource() {
    const {navIconName, iconSize, iconColor, titleColor} = this.props;
    if (navIconName) {
      const navIcon = await getImageSource(
        navIconName,
        iconSize,
        iconColor || titleColor,
      );
      this.setState({navIcon});
      // eslint-disable-next-line react/destructuring-assignment
    } else if (this.state.navIcon) {
      this.setState({navIcon: undefined});
    }
  }

  async updateOverflowIconSource() {
    const {overflowIconName, iconSize, iconColor, titleColor} = this.props;
    if (overflowIconName) {
      const overflowIcon = await getImageSource(
        overflowIconName,
        iconSize,
        iconColor || titleColor,
      );
      this.setState({overflowIcon});
      // eslint-disable-next-line react/destructuring-assignment
    } else if (this.state.overflowIcon) {
      this.setState({overflowIcon: undefined});
    }
  }

  async updateActionIconSources() {
    const {actions, iconSize, iconColor, titleColor} = this.props;
    const updatedActions = await Promise.all(
      (actions || []).map((action) => {
        if (action.iconName) {
          return getImageSource(
            action.iconName,
            action.iconSize || iconSize,
            action.iconColor || iconColor || titleColor,
          ).then((icon) => ({...action, icon}));
        }
        return Promise.resolve(action);
      }),
    );
    this.setState({actions: updatedActions});
  }

  render(): Node {
    return <ToolbarAndroid {...this.props} {...this.state} />;
  }
} /*end of LCSIconToolbarShim class */

I am using Hermes java script engine. More info on the enviroment

> react-native info

info Fetching system and libraries information...
System:
  OS: Linux 5.15 Manjaro Linux
  CPU: (6) x64 12th Gen Intel(R) Core(TM) i7-12700H
  Memory: 1.15 GB / 15.28 GB
  Shell:
    version: 5.2.15
    path: /bin/bash
Binaries:
  Node:
    version: 18.16.0
    path: ~/.nvm/versions/node/v18.16.0/bin/node
  Yarn:
    version: 1.22.19
    path: ~/.nvm/versions/node/v18.16.0/bin/yarn
  npm:
    version: 9.5.1
    path: ~/.nvm/versions/node/v18.16.0/bin/npm
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
IDEs:
  Android Studio: Not Found
Languages:
  Java:
    version: 11.0.21
    path: /sbin/javac
  Ruby:
    version: 3.0.6
    path: /sbin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.5
    wanted: 0.72.5
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

See screen shot for the error location

Npm 404 error

`npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@react-native-community%2ftoolbar-android - Not found
npm ERR! 404
npm ERR! 404 '@react-native-community/[email protected]' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/passwordis1234/.npm/_logs/2020-08-06T09_18_58_867Z-debug.log`

Android build fails on RN 0.65 after updating toolbar-android to 0.2.0

Issue

Task :react-native-community_toolbar-android:compileDebugJavaWithJavac FAILED

After updating React Native from 64.1 to 65.1, android build fails with the error below:

node_modules/@react-native-community/toolbar-android/android/src/main/java/com/reactnativecommunity/toolbarandroid/ReactToolbar.java:133: error: method does not override or implement a method from a supertype
    @Override
    ^
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
1 error

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':react-native-community_toolbar-android:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.

I updated toolbar-android to 0.2.0 since the previous version was causing issues as well.

As a current workaround, I removed the @ Override above the getExtras() method (that's where the issue is pointing at). Doing this fixes my issue and my app works without a problem. Not sure if it an issue with my environment or if anyone has had this issue before.