How to use react native navbar

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