react-native-ui-nav-bar

react-native-ui-nav-bar

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

DISCLAIMER

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.

Installation

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

Usage

// 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>
      </TouchableOpacity>
    );
  };

  _renderRightButtonWithImage = () => {
    return (
      <TouchableOpacity
        style={...}
        onPress={() => {}}
      >
        <Image
          source={require("./img/close-button-x.png")}
          style={styles.backButtonIcon}
        />
      </TouchableOpacity>
    );
  };

  _renderTitle = () => {
    return (
      <Text numberOfLines={1}>
        {"Some title"}
      </Text>
    );
  };

  // Define how to render the NavigationBar in render()
  render() {
      // ...
      return (
        // ...
        <NavigationBar
          renderBorder={true}
          leftView={this._renderLeftButtonWithText()}
          titleView={this._renderTitle()}
          rightView={this._renderRightButtonWithImage()}
        />
        // ...
      )
  }
}

License

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 http://www.apache.org/licenses/LICENSE-2.0

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.