How to install react-native-vector-icons? - react-native

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