Navbar component for React Native

Last update: May 30, 2022

Customizable navbar for react-native

react-native-side-menu demo

Content

Examples

Getting started

  • Install react-native-navbar:

    • By using yarn:
      $ yarn add react-native-navbar
      
    • By using npm:
      $ npm install react-native-navbar --save
      
  • Import it in the file where you want to use it:

    import NavigationBar from 'react-native-navbar';
  • Add it to your React element tree:

const styles = {
  container: {
    flex: 1,
  },
};

const rightButtonConfig = {
  title: 'Next',
  handler: () => alert('hello!'),
};

const titleConfig = {
  title: 'Hello, world',
};

function ComponentWithNavigationBar() {
  return (
    <View style={styles.container}>
      <NavigationBar
        title={titleConfig}
        rightButton={rightButtonConfig}
      />
    </View>
  );
}

That's it, you're ready to go!

API

  • style - (Object, Array) - Style object or array of style objects
  • containerStyle - (Object) - Style object for styling navbar container
  • tintColor - (String) - NavigationBar's tint color
  • statusBar - (Object):
    • style - ('light-content' or 'default') - Style of statusBar
    • hidden - (Boolean)
    • tintColor - (String) - Status bar tint color
    • hideAnimation - ('fade', 'slide', 'none') - Type of statusBar hide animation
    • showAnimation - ('fade', 'slide', 'none') - Type of statusBar show animation
  • leftButton / rightButton - (Object, React Element) - Either plain object with configuration, or React Element which will be used as a custom left/right button element. Configuration object has following keys:
    • title - (String) - Button's title
    • tintColor - (String) - Button's text color
    • style - (Object, Array) - Style object or array of style objects
    • handler - (Function) - onPress function handler
    • disabled - (Boolean) - If true, disable interactions for this button.
    • accessible - (Boolean) - Indicates that the view is an accessibility element
    • accessibilityLabel - (String, React Element) - Overrides the text that's read by the screen reader for the button.
  • title - (Object, React Element) - Either plain object with configuration, or React Element which will be used as a custom title element. Configuration object has following keys:
    • title - (String) - Button's title
    • style - (Object, Array, Number) - Style object or array of style objects
    • tintColor - (String) - Title's text color
    • ellipsizeMode - ('head', 'middle', 'tail', 'clip') - How to display the text
    • numberOfLines - (Number) - How to truncate the text

Usage with Webpack

This module uses JSX syntax and requires a compiler such as babel. React Native's packager runs this automatically but if you use Webpack be sure to compile this module from your dependencies

loaders: [{
  test: /\.js$/,
   include: [
     path.resolve(__dirname, "src"),
     path.resolve(__dirname, "node_modules/react-native-navbar")
   ],
  loader: 'babel',
  query: { stage: 0, plugins: [] }
}]

Questions?

Feel free to ping me on twitter If you want to report a bug, please submit an issue!

GitHub

https://github.com/Kureev/react-native-navbar
Comments
  • 1. passProps seem doesn't work

    I call this.props.navigator.push to the next scene, and pass some props to the next scene, and caught an error, the passed prop is undefined in the next view,it seems passProps doesn't work,and code is below:

    /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     */
    'use strict';
    
    var React = require('react-native');
    var Product = require('./product');
    var Adapt = require('./adapt');
    
    var mdskip = require('./data/mock-mdskip');
    var context = require('./data/mock-context');
    var NavigationBar = require('react-native-navbar');
    
    var Detail = require("./ui/detail");
    var styles = require("./ui/style");
    var {
      Navigator,
      NavigatorIOS,
      AppRegistry,
      View,
      Text,
      StyleSheet,
      TouchableHighlight,
      ScrollView
    } = React;
    
    var product = new Product();
    product.set("context", context.ModuleDatas);
    product.set("config", context.TDetail);
    product.set("mdskip", Adapt.transform(mdskip));
    product.set("deviceType", "phone");
    
    var RootComponent = React.createClass({
      getInitialState: function(){
        return {};
      },
      componentDidMount: function() {
        var self = this;
      },
      renderScene: function(route, navigator) {
        var product = this.state.product;
    
        var Component = route.component;
        var navBar = route.navigationBar;
    
        if (navBar) {
          navBar = React.addons.cloneWithProps(navBar, {
            navigator: navigator,
            route: route
          });
        }
    
        return (
          <View style={styles.navigator}>
            {navBar}
            <Component navigator={navigator} route={route} product={product} />
          </View>
        );
      },
      render: function() {
    
        if(context){
          return (
            <Navigator
            style={styles.navigator}
            renderScene={this.renderScene}
            initialRoute={{
              component: Entrance,
              navigationBar: <NavigationBar
                title="Initial View"
                onNext={this.handleNext}
              />
            }}
          />
          );
        }else{
          return (
            <View></View>
          )
        }
      }
    });
    
    var Entrance = React.createClass({
      render: function(){
        return (
          <View style={styles.clickMe}>
            <TouchableHighlight onPress={this.onPress} underlayColor="#B5B5B5">
              <Text style={styles.clickMeText}>点我看详情</Text>
            </TouchableHighlight>
          </View>
        );
      },
      componentDidMount(){
        var self = this;
        product.onLoad(["context", "config", "mdskip"], function(context, config, mdskip){
          self.setState({
            "context": context,
            "config": config,
            "mdskip": mdskip
          });
        })
      },
      onPress: function(){
        var context = this.state.context;
        var config = this.state.config;
        var mdskip = this.state.mdskip;
        var product = this.props.product;
    
        this.props.navigator.push({
          title: context.title.itemTitle,
          component: DetailMain,
          backButtonTitle: 'Back',
          passProps: { config: config, mdskip: mdskip, product: product, context: context}
        });
      }
    });
    
    var DetailMain = React.createClass({
      getInitialState: function(){
        return {
          loading: false
        };
      },
      render: function(){
        return (
          <Detail config={this.props.config} mdskip={this.props.mdskip} product={this.props.product} context={this.props.context} navigator={this.props.navigator}/>
        )
      }
    })
    
    AppRegistry.registerComponent('DetailNative', () => RootComponent);
    
    
    Reviewed by bakso at 2015-04-15 09:51
  • 2. Couldn't change the background of the navbar

    Hi Alexey!! Awesome work on this, I was trying it out and it's great! one thing I couldn't do is set the navbar background to 'transparent'. backgroundColor="transparent"

    Reviewed by alejomendoza at 2015-07-28 17:27
  • 3. get title after leftButton

    If you try to add customTitle it will be rendered before the left Button.

    After looking at the source it seems like you get the title first and then the left button.

    Check: https://github.com/Kureev/react-native-navbar/blob/master/index.js#L199-L200

    Not sure if this is a bug or i'm doing something wrong. I can send a PR if you think this is a bug.

    Reviewed by chirag04 at 2015-04-15 16:21
  • 4. RN 0.16, Invariant Violation error

    When trying to reproduce the readme example, I have:

    var NavigationBar = require('react-native-navbar'); ... render() { var rightButtonConfig = { title: 'Next', handler: function onNext() { alert('hello!'); } };

        var titleConfig = {
            title: 'Hello, world',
        };
        return (
    
            <View style={{ flex: 1, }}>
                <NavigationBar
                    title={titleConfig}
                    rightButton={rightButtonConfig} />
            </View>
        );
    }
    

    When I try to run the example I get this error:

    Unhandled JS Exception: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of AwesomeProject.

    Please help me with this

    Thanks

    Reviewed by linoleum00 at 2015-12-10 16:51
  • 5. Option for Android?

    I just noticed that if you comment out the two lines that reference StatusBarIOS, then the navbar works fine in Android. Maybe we can have a guard clause or something so that it's reusable?

    Reviewed by tgoldenberg at 2015-11-02 07:07
  • 6. Warnings in console log for required properties?

    Warning: Failed propType: Required prop `navbar` was not specified in `NavigationBar`. Check the render method of `ReactParseExample`.
    Warning: Failed propType: Required prop `route` was not specified in `NavigationBar`. Check the render method of `ReactParseExample`.
    

    Don't see how they make sense for the initial route based on the information provided in the documentation

    Reviewed by aaronksaunders at 2015-04-28 18:14
  • 7. componentWillUnmount and componentDidUnmount not working for renderScene components

    Hi Kureev, I have a component for the renderScene called Settings

    this.props.navigate({
                component: Settings,
                navigationBar: <NavigationBar
                    title="Settings"
                    customPrev={<MenuIcon/>}
                    customNext={<ProfileIcon/>}
                    />  
    });
    

    Every time I try to use the componentDidMount and componentWillUnmount functions for the Settings component itself it doesn't work.

    var Settings = React.createClass({
       getInitialState() {
            return {
                phrase: "Hello"
            };
       },
        [...]
      componentDidMount() {
         console.log('Did Mount');
       },
      componentWillUnmount() {
         console.log('Will Unmount');
       },
      componentDidUnmount() {
        console.log('Did Unmount');
       },
        render() {
            return (
              <View style={styles.container}>
                <View style={styles.section}>
                    <Text>{this.state.phrase}</Text>
                </View>
              </View>
            );
        }
    });
    

    as you can imagine, the componentDidUnmount and componentDidUnmount functions don't work for settings or any of the other components rendered with renderScene. Any insights?

    I am using react-native v0.7.1 and react-native-navbar v0.6.0. Thanks

    Reviewed by hmm29 at 2015-07-16 07:03
  • 8. Errors with 0.7.1 release.

    Unable to resolve module NavigatorNavigationBarStyles from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-navbar/index.js
    Unable to resolve module StaticContainer.react from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-navbar/index.js
    Unable to resolve module NavigatorNavigationBarStyles from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-navbar/index.js
    Unable to resolve module StaticContainer.react from /Users/kartikeychauhan/Documents/testcodes/react-native-test/HelloTest/node_modules/react-native-navbar/index.js
    

    Did a fresh new project with react-native-cli and tried integrating the react-native-navbar. It gives me above error.

    AND

    screen shot 2015-07-16 at 5 33 25 pm

    Reviewed by piyushchauhan2011 at 2015-07-16 07:29
  • 9. borderBottom prop

    Would it be possible to provide a property to allow styling of the bottom border of the navbar?

    In my case, I would like to "hide" the navbar from a particular view, while still leaving the customPrev button visible.

    Reviewed by hoodsy at 2015-05-05 16:08
  • 10. Doesn't work with React-native 0.4

    Hello and thanks for the great component.

    I've tried your component and it doesn't seem to work with new version. It does compile but I got blank screen.

    Any help would be appreciated.

    Reviewed by alinz at 2015-04-19 04:41
  • 11. Status bar style

    Hi,

    I think I did it :P #79

    You can know add statusBarStyle={styles.statusBar} to change the background of statusbar.

    style is for navbar and backgroundStyle is for both status and navbar.

    Please let me know if something is wrong.

    Reviewed by Mokto at 2015-10-07 15:32
  • 12. Bump is-my-json-valid from 2.15.0 to 2.20.6 in /examples/Basic

    Bumps is-my-json-valid from 2.15.0 to 2.20.6.

    Commits
    Maintainer changes

    This version was pushed to npm by linusu, a new releaser for is-my-json-valid since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-05-16 16:54
  • 13. Bump moment from 2.17.1 to 2.29.2 in /examples/Basic

    Bumps moment from 2.17.1 to 2.29.2.

    Changelog

    Sourced from moment's changelog.

    2.29.2 See full changelog

    • Release Apr 3 2022

    Address https://github.com/advisories/GHSA-8hfj-j24r-96c4

    2.29.1 See full changelog

    • Release Oct 6, 2020

    Updated deprecation message, bugfix in hi locale

    2.29.0 See full changelog

    • Release Sept 22, 2020

    New locales (es-mx, bn-bd). Minor bugfixes and locale improvements. More tests. Moment is in maintenance mode. Read more at this link: https://momentjs.com/docs/#/-project-status/

    2.28.0 See full changelog

    • Release Sept 13, 2020

    Fix bug where .format() modifies original instance, and locale updates

    2.27.0 See full changelog

    • Release June 18, 2020

    Added Turkmen locale, other locale improvements, slight TypeScript fixes

    2.26.0 See full changelog

    • Release May 19, 2020

    TypeScript fixes and many locale improvements

    2.25.3

    • Release May 4, 2020

    Remove package.json module property. It looks like webpack behaves differently for modules loaded via module vs jsnext:main.

    2.25.2

    • Release May 4, 2020

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-04-09 01:20
  • 14. Bump tmpl from 1.0.4 to 1.0.5 in /examples/Basic

    Bumps tmpl from 1.0.4 to 1.0.5.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-09-21 02:01
  • 15. Bump path-parse from 1.0.5 to 1.0.7

    Bumps path-parse from 1.0.5 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-08-10 22:47
  • 16. Bump tar from 2.2.1 to 2.2.2 in /examples/Basic

    Bumps tar from 2.2.1 to 2.2.2.

    Commits
    • 523c5c7 2.2.2
    • 7ecef07 Bump fstream to fix hardlink overwriting vulnerability
    • 9fc84b9 Use {} for hardlink tracking instead of []
    • 15e59f1 Only track previously seen hardlinks
    • 4f85851 Ignore potentially unsafe files
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-08-04 05:35
  • 17. Bump hosted-git-info from 2.2.0 to 2.8.9 in /examples/Basic

    Bumps hosted-git-info from 2.2.0 to 2.8.9.

    Changelog

    Sourced from hosted-git-info's changelog.

    2.8.9 (2021-04-07)

    Bug Fixes

    2.8.8 (2020-02-29)

    Bug Fixes

    • #61 & #65 addressing issues w/ url.URL implmentation which regressed node 6 support (5038b18), closes #66

    2.8.7 (2020-02-26)

    Bug Fixes

    • Do not attempt to use url.URL when unavailable (2d0bb66), closes #61 #62
    • Do not pass scp-style URLs to the WhatWG url.URL (f2cdfcf), closes #60

    2.8.6 (2020-02-25)

    2.8.5 (2019-10-07)

    Bug Fixes

    • updated pathmatch for gitlab (e8325b5), closes #51
    • updated pathmatch for gitlab (ffe056f)

    2.8.4 (2019-08-12)

    ... (truncated)

    Commits
    • 8d4b369 chore(release): 2.8.9
    • 29adfe5 fix: backport regex fix from #76
    • afeaefd chore(release): 2.8.8
    • 5038b18 fix: #61 & #65 addressing issues w/ url.URL implmentation which regressed nod...
    • 7440afa chore(release): 2.8.7
    • 2d0bb66 fix: Do not attempt to use url.URL when unavailable
    • f2cdfcf fix: Do not pass scp-style URLs to the WhatWG url.URL
    • e1b83df chore(release): 2.8.6
    • ff259a6 Ensure passwords in hosted Git URLs are correctly escaped
    • 624fd6f chore(release): 2.8.5
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by nlf, a new releaser for hosted-git-info since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-05-10 03:04
a fully customizable navbar component for React-Native
a fully customizable navbar component for React-Native

NavbarNative A fully customizable Navbar component for React-Native. It works for both iOS and Android! Content Installation Exported components Getti

Apr 28, 2021
A complete native navigation solution for React Native
A complete native navigation solution for React Native

React Native Navigation React Native Navigation provides 100% native platform navigation on both iOS and Android for React Native apps. The JavaScript

Jun 21, 2022
Native navigation library for React Native applications

Native Navigation DISCLAIMER This project is currently in beta. Many of the core APIs are subject to change, and we do not consider this project "Prod

Jun 18, 2022
A cross-platform (iOS / Android), fully customizable, React Native Navigation Bar component.
A cross-platform (iOS / Android), fully customizable, React Native Navigation Bar component.

No Longer Maintained I wrote this very early when react native was also very new. I no longer recommend using this library. Please consider using a so

May 20, 2022
This is a simple javascript slider component for react native.
This is a simple javascript slider component for react native.

React Native Simple Slider This is a simple javascript slider component for react native. This package is compatible both Android and iOS. Installatio

Nov 26, 2021
A React Native component that creates a Apple-esque large header that fades in a smaller header as you scroll.
A React Native component that creates a Apple-esque large header that fades in a smaller header as you scroll.

react-native-header-scroll-view ?? DEPRECATED and unmaintained ?? This library is an emulation of native iOS large headers. Now you can access the rea

Jun 17, 2022
🎯 A React Native component that displays hotspots over desired components to help lead your users through an onboarding flow or direct them towards new UI elements
🎯 A React Native component that displays hotspots over desired components to help lead your users through an onboarding flow or direct them towards new UI elements

react-native-hotspot A React Native component that displays hotspots over desired components to help lead your users through an onboarding flow or dir

May 23, 2022
A performant customizable bottom sheet component made on top of wix react-native-navigation library.
A performant customizable bottom sheet component made on top of wix react-native-navigation library.

A performant customizable bottom sheet component made on top of wix react-native-navigation library.

Jun 2, 2022
React Native component to change bottom bar/navigation bar color on Android
React Native component to change bottom bar/navigation bar color on Android

React Native Navigation Bar Color Change React Native Navigation Bar Color Change is a React Native library for change color of navigation/Bottom bar

Jun 22, 2022
A set of React hooks for React Native Navigation.
A set of React hooks for React Native Navigation.

React Native Navigation Hooks A set of React hooks for React Native Navigation docs. Quick Links Documentation Changelog Stack Overflow Installation F

Jun 18, 2022
Bindings for using react-navigation with react-native-magic-move 🐰🎩✨
Bindings for using react-navigation with react-native-magic-move 🐰🎩✨

react-navigation-magic-move Bindings for using react-navigation with react-native-magic-move ?? ?? ✨ Why is this needed react-native-magic-move trigge

Feb 15, 2022
React-only Navigation for React Native
React-only Navigation for React Native

Reactigation JS-only Navigation for React Native. Installation npm i reactigation Usage A minimal setup with two screens looks like this. import Reac

May 19, 2022
Routing and navigation for your React Native apps

React Navigation 6 Routing and navigation for your React Native apps. Documentation can be found at reactnavigation.org. If you are looking for versio

Jun 21, 2022
The first declarative React Native router
The first declarative React Native router

React Native Router (v4.x) Follow author @PAksonov react-native-router-flux is a different API over react-navigation. It helps users to define all the

Jun 19, 2022
React Native starter kit with over 40 screens and modern Light and Dark theme for creating stunning cross-platform mobile applications.
React Native starter kit with over 40 screens and modern Light and Dark theme for creating stunning cross-platform mobile applications.

Kitten Tricks This perfect starter kit is an app based on React Native and UI Kitten library with Light and Dark themes support. It’s completely free

Jun 20, 2022
Awesome navigation for your React Native app.

React Native Router Awesome navigation for your React Native app. NOTE: This project is deprecated. Please use React Navigation instead! Legacy instru

Apr 15, 2022
Route-centric navigation for React Native

?? This library is no longer maintained ?? Please use "react-navigation", or other alternatives instead. ExNavigation A route-centric, batteries-inclu

May 5, 2022
Route-centric navigation built on top of React Native's Navigator

ExNavigator Deprecation Warning There are a few bugs in ex-navigator that require mutation of the state for the state to pass through the Navigator [I

Feb 9, 2022
A slide menu inspired from Android for React-Native

React Native Slide Menu (Navigation Drawer) Description A slide menu as we can see in Android which permits to route an item from the menu to a view d

Apr 16, 2022