如何安装react-native-vector-icons？

Question

I literally tried all the resources I could find

This , This , and so many other questions on stack overflow here but I'm not able to get it to work

I first used the

react-native init myapp

Command to start a project and install the react-native-vector-icons as instructed on its github page

I have imported the FontAwesome family like this

import Icon from 'react-native-vector-icons/FontAwesome';

But when ever i run the app I get this error on both android and ios

On Android

The development server returned response error code: 500

URL: http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false

Body:
{"type":"InternalError","errors":[],"message":"Metro Bundler has encountered an internal error, please check your terminal error output for more details"}
processBundleResult
    BundleDownloader.java:242
access$100
    BundleDownloader.java:41
onResponse
    BundleDownloader.java:208
execute
    RealCall.java:135
run
    NamedRunnable.java:32
runWorker
    ThreadPoolExecutor.java:1112
run
    ThreadPoolExecutor.java:587
run
    Thread.java:818

On iOS

Failed to load bundle(http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false) with error:(Metro Bundler has encountered an internal error, please check your terminal error output for more details (null))

__38-[RCTCxxBridge loadSource:onProgress:]_block_invoke.242
    RCTCxxBridge.mm:419
___ZL36attemptAsynchronousLoadOfBundleAtURLP5NSURLU13block_pointerFvP18RCTLoadingProgressEU13block_pointerFvP7NSErrorP9RCTSourceE_block_invoke.118
__80-[RCTMultipartDataTask URLSession:streamTask:didBecomeInputStream:outputStream:]_block_invoke
-[RCTMultipartStreamReader emitChunk:headers:callback:done:]
-[RCTMultipartStreamReader readAllPartsWithCompletionCallback:progressCallback:]
-[RCTMultipartDataTask URLSession:streamTask:didBecomeInputStream:outputStream:]
__88-[NSURLSession delegate_streamTask:didBecomeInputStream:outputStream:completionHandler:]_block_invoke
__NSBLOCKOPERATION_IS_CALLING_OUT_TO_A_BLOCK__
-[NSBlockOperation main]
-[__NSOperationInternal _start:]
_dispatch_client_callout
_dispatch_block_invoke_direct
_dispatch_client_callout
_dispatch_block_invoke_direct
dispatch_block_perform
__NSOQSchedule_f
_dispatch_client_callout
_dispatch_continuation_pop
_dispatch_async_redirect_invoke
_dispatch_root_queue_drain
_dispatch_worker_thread3
_pthread_wqthread
start_wqthread

And on the debugging console I get this errors

deltaUrlToBlobUrl.js:31 GET http://localhost:8081/index.delta?platform=android&dev=true&minify=false 500 (Internal Server Error)

DeltaPatcher.js:58 Uncaught (in promise) Error: DeltaPatcher should receive a fresh Delta when being initialized
at DeltaPatcher.applyDelta (DeltaPatcher.js:58)
at deltaUrlToBlobUrl (deltaUrlToBlobUrl.js:34)
at <anonymous>

I'll be very glad if I could get it working. Thanks in advance.

Answer 1

I finally found the solution

This happens only in the react-native version 0.52.0 The file it is trying to find does in fact declare that module. Something about the order of file searching must have changed with the recent release.

Try this

rm ./node_modules/react-native/local-cli/core/__fixtures__/files/package.json

Link 1 , Link 2

Answer 2

Use npm you can install it in a easy way.Follow the below commonds in the root folder:

* npm install react-native-vector-icons
* react-native link