react-native-ui-nav-bar v0.5.0
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.