This package has been deprecated

    Author message:

    Package no longer supported. Use at your own risk.

    react-native-ui-nav-bar

    0.5.0 • Public • Published

    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.

    Install

    npm i react-native-ui-nav-bar

    DownloadsWeekly Downloads

    2

    Version

    0.5.0

    License

    Apache-2.0

    Unpacked Size

    31.1 kB

    Total Files

    8

    Last publish

    Collaborators

    • maicki