This package has been deprecated

    Author message:

    Package no longer supported. Use at your own risk.


    0.5.0 • Public • Published


    react-native-ui-nav-bar is a very simple React Native navigation bar component. This can especially handy for one screen or in prototypes of brown field applications were not one of the React Native navigation solutions is used.

    Currently all other React Native navigation bar components we looked into don't layout the title view like platform navigation bars, e.g. the title is layed out on the center on Android although it should be left aligned, truncating of title is not done like it should be etc.

    react-native-ui-nav-bar tries to not replace any native navigation bars, in fact I would still recommend to always use native view controllers with native navigation bars or more wholistic React Native navigation solutions if that is possible.

    Current differences between react-native-ui-nav-bar and truly native navigation bar solutions or other navigation solutions like React Navigation:

    • No title animation on iOS
    • No transitions between screens


    This project is currently in beta.

    Core APIs are subject to change. We encourage people to try this library out and provide us feedback as we get it to a stable state.


    npm install react-native-ui-nav-bar --save


    // Props of the navigation bar
    type Props = {
      // Optional left view to be rendered
      leftView?: React.Node,
      // Optional title view to be rendered
      titleView?: React.Node,
      // Optional right view to be rendered
      rightView?: React.Node,
      // Optional style for navigation bar container view
      style?: StyleObj,
      // Define if border should be rendered. Default: false
      renderBorder: boolean,
    // Use it within your component
    export default class ... extends Component<Props, State> {
      // Define how to render left, right and title view
      _renderLeftButtonWithText = () => {
        return (
          <TouchableOpacity style={...} onPress={() => {}}>
            <Text>Button Text</Text>
      _renderRightButtonWithImage = () => {
        return (
            onPress={() => {}}
      _renderTitle = () => {
        return (
          <Text numberOfLines={1}>
            {"Some title"}
      // Define how to render the NavigationBar in render()
      render() {
          // ...
          return (
            // ...
            // ...


    Copyright 2018 Michael Schneider

    Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

    Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.


    npm i react-native-ui-nav-bar

    DownloadsWeekly Downloads






    Unpacked Size

    31.1 kB

    Total Files


    Last publish


    • maicki