How to use react native navbar - react-native

Question

I'm trying to work with Navbar from navbar-native but i'm getting this error when I import it for my project (typeerror undefined is not an object (evaluating '_react.proptypes.bool')).
Here is the code :
import React from "react";
import { Image, StyleSheet, View, Text } from "react-native";
import { navbar } from "navbar-native";
import colors from "../config/colors";
function ViewImageScreen(props) {
return (
<View style={styles.container}>
<Navbar
title={"Navbar Native"}
left={{
icon: "ios-arrow-back",
label: "Back",
onPress: () => {alert('Go back!')}
}}
right={[{
icon: "ios-search",
onPress: () => {alert('Search!')}
},{
icon: "ios-menu",
onPress: () => {alert('Toggle menu!')}
}]}
/>
<View style={styles.signinIcon}>
<Text style={styles.signinText}>Se connecter</Text>
</View>
<View style={styles.favoris}>
<Image style={styles.icon} source={require("../assets/logo-red.png")} />
<Text style={styles.settingsText}>Favoris</Text>
</View>
<View style={styles.newsletter}>
<Image style={styles.icon} source={require("../assets/logo-red.png")} />
<Text style={styles.settingsText}>Newsletter</Text>
</View>
<View style={styles.aide}>
<Image style={styles.icon} source={require("../assets/logo-red.png")} />
<Text style={styles.settingsText}>Aide & Contact</Text>
</View>
<View style={styles.apropos}>
<Image style={styles.icon} source={require("../assets/logo-red.png")} />
<Text style={styles.settingsText}>A propos</Text>
</View>
<View style={styles.signupIcon}>
<Text style={styles.signupText}>S'enregistrer</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
signinIcon: {
width: "90%",
height: 50,
position: "absolute",
top: 360,
alignSelf: "center",
borderColor: colors.fm_blue,
borderWidth: 2,
textAlign: "center",
justifyContent: "center",
alignItems: "center",
borderRadius: 5,
},
signupIcon: {
backgroundColor: colors.fm_blue,
width: "90%",
height: 50,
position: "absolute",
top: 300,
alignSelf: "center",
textAlign: "center",
justifyContent: "center",
alignItems: "center",
borderRadius: 5,
},
container: {
backgroundColor: colors.grey,
flex: 1,
},
signinText: {
fontSize: 16,
color: colors.fm_blue,
},
signupText: {
fontSize: 16,
color: colors.white,
},
settingsText: {
fontSize: 14,
margin: 50,
color: colors.black,
},
favoris: {
backgroundColor: colors.white,
width: "100%",
height: 50,
position: "absolute",
top: 40,
alignSelf: "center",
borderColor: colors.white,
textAlign: "center",
justifyContent: "center",
},
newsletter: {
backgroundColor: colors.white,
width: "100%",
height: 50,
position: "absolute",
top: 100,
alignSelf: "center",
borderColor: colors.white,
textAlign: "center",
justifyContent: "center",
},
aide: {
backgroundColor: colors.white,
width: "100%",
height: 50,
position: "absolute",
top: 160,
alignSelf: "center",
borderColor: colors.white,
textAlign: "center",
justifyContent: "center",
},
apropos: {
backgroundColor: colors.white,
width: "100%",
height: 50,
position: "absolute",
top: 220,
alignSelf: "center",
borderColor: colors.white,
textAlign: "center",
justifyContent: "center",
},
icon: {
margin: 20,
width: 20,
height: 20,
position: "absolute",
justifyContent: "center",
},
});
export default ViewImageScreen;
And here is my package.json :
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "~38.0.8",
"expo-status-bar": "^1.0.2",
"navbar-native": "^1.6.1",
"prop-types": "^15.7.2",
"react": "~16.11.0",
"react-dom": "~16.11.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
"react-native-navbar": "^2.1.0",
"react-native-vector-icons": "^7.0.0",
"react-native-web": "~0.11.7"
},
"devDependencies": {
"#babel/core": "^7.8.6",
"#types/react-native-vector-icons": "^6.4.5",
"babel-preset-expo": "~8.1.0"
},
"private": true
}
And here is a screenshot of the error on the android emulator :
Deugger Error

Answer 1

First you need to import Navbar with uppercase
import { Navbar } from "navbar-native";
If not please reference these
https://github.com/redbaron76/navbar-native/issues/12
https://github.com/redbaron76/navbar-native/issues/18
https://github.com/redbaron76/navbar-native/issues/21
Updated Answer: You should wrap Navbar with Container
import React, { Component } from 'react';
import { View } from 'react-native';
import { Container, Navbar } from 'navbar-native';
class ReactNativeProject extends Component {
render() {
return (
<Container>
<Navbar
title={"Navbar Native"}
left={{
icon: "ios-arrow-back",
label: "Back",
onPress: () => {alert('Go back!')}
}}
right={[{
icon: "ios-search",
onPress: () => {alert('Search!')}
},{
icon: "ios-menu",
onPress: () => {alert('Toggle menu!')}
}]}
/>
... other stuff ...
</Container>
);
}
}