Unable to install react native with react native elements

install react native elements
unable to resolve module react-native-elements
unable to resolve "react-native-elements"
react native elements expo
react-native-elements icon not showing
npm install react-native
react native elements form example
react native elements library

React native cli globally installed version : 2.0.1

I then used react-native init project_name to set up a project with the native modules.

I then tried installing React Native Elements UI Toolkit using yarn add react-native-elements@beta followed by yarn add react-native-vector-icons and then react-native link react-native-vector-icons as per the docs here React Native Elements Docs

The install completed successfully with a package.json that looks like this

{
"name": "project_react_native",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
  "test": "jest"
},
"dependencies": {
  "react": "16.2.0",
  "react-native": "0.53.3",
  "react-native-elements": "^1.0.0-beta2"
  "react-native-vector-icons": "^4.5.0"
},
"devDependencies": {
 "babel-jest": "22.4.0",
 "babel-preset-react-native": "4.0.0",
 "jest": "22.4.0",
 "react-test-renderer": "16.2.0"
},
"jest": {
 "preset": "react-native"
}
}

I have used the following as my default component

import React, {Component} from 'react';
import {View} from 'react-native';
import {Button} from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';

export default class App extends Component {
render() {
    return (
        // Try setting `flexDirection` to `column`.
        <View style={{flex: 1, flexDirection: 'row'}}>
            <View style={{width: 50, height: 50, backgroundColor: 
      'powderblue'}}/>
            <Button
                icon={
                    <Icon
                        name='arrow-right'
                        size={15}
                        color='white'
                    />
                }
                text='BUTTON WITH ICON'
            />
        </View>
    );
  }
};

This throws the following error

This is an error in metro bundler around handling paths to direct files. The issue and workarounds have been logged over at the react-native repo.

You can follow this and this github issue for further references.

The work around for solving it is

Create a rn-cli.config.js file in your root directory and paste in the following code.

const blacklist = require('metro/src/blacklist')

module.exports = {
  getBlacklistRE() {
   return blacklist([/react-native\/local-cli\/core\/__fixtures__.*/])
 },
}

Be sure to restart the packager.

Getting Started · React Native Elements, Installation. Installing React Native Elements depends on your type of react native project. Expo | Create React Native App; React Native CLI. Using an Expo app (create-react-native-app or Expo XDE) Delete everything to be sure; rm -rf node_modules yarn.lock package-lock.json Install React Native Elements # npm npm install && npm install react-native-elements --save # yarn yarn && yarn add react-native-elements Install @expo/vector-icons

There are lots of problem in the code just replace your code with this:

import React, {Component} from 'react';
import {View} from 'react-native';

import {Button, Icon} from 'react-native-elements';


export default class App extends Component {
render() {
    return (
        // Try setting `flexDirection` to `column`.
        <View style={{flex: 1, flexDirection: 'row'}}>
            <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}}/>
            <Button
                icon={{  
                        name:'arrow-right',
                        size:15,
                        type: 'font-awesome',
                        color:'white',
                }}
                title='BUTTON WITH ICON'
            />
        </View>
    );
  }
};

Unable to install react native with react native elements, This is an error in metro bundler around handling paths to direct files. The issue and workarounds have been logged over at the react-native  Dismiss Join GitHub today. GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

Doesn't look like you can pass a component to the icon prop. Change your Button to something along these lines:

<Button
  icon={{
      name: 'arrow-right', 
      type: 'font-awesome', 
      buttonStyle: styles.someButtonStyle 
  }}
  text='BUTTON WITH ICON'
/>

See how it goes from there.

react-native-elements, React Native Elements & UI Toolkit. Get unlimited public & private packages + package-based permissions with npm Pro.Get started »  yarn add react-native-elements # or with npm npm install --save react-native-elements Note: If you see the UNMET PEER DEPENDENCY warning for react-native-vector-icons like below, you can ignore it as react-native-vector-icons is already installed by expo or crna .

Unable to resolve "react-navigation" from "App.js" · Issue #72 · react , Here's the steps I took. Clone repo; cd react-native-elements-app; npm install; npm start. Works as expected. Become a backer and show your support for React Native Elements. Sponsors. Do you use React Native Elements in production? If so, consider supporting this project as it will allow the maintainers to dedicate more time to maintaining this project and also building new features for everyone.

Eject Problem occured. · Issue #64 · react-native-elements/react , https://github.com/react-native-training/react-native-elements-app I have used Could not install the app on the device, read the error above for details. Dismiss Join GitHub today. GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

[Solved]react native elements Unable to resolve module @expo , I ejected a CRNA project that had react-native-elements installed (this project), npm installed and linked react native vector icons and then ran it with react-native​  The aim of React Native Elements is to provide an all-in-one UI kit for creating apps in react native. There are many great ui components made by developers all around open source. React Native Elements takes the hassle of assembling these packages together by giving you a ready made kit with consistent api and look and feel.