I'm trying to use BluetoothManager in React Native, already did these steps:
I did fresh install with react-native init MyProject
Imported NativeMoludes in App.js: import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, NativeModules } from 'react-native';
Initialized BluetoothManager: const { BluetoothManager} = NativeModules;
And do alert(BluetoothManager); before return(...)
but it always alerts null. Did I miss something in the RN installation or the import?
I'm using React Native v.0.62.2. Please advice.
I would advise using https://github.com/innoveit/react-native-ble-manager or https://github.com/Polidea/react-native-ble-plx for everything bluetooth related in react-native
You are not importing BluetoothManager properly, You have to install this module,
https://github.com/innoveit/react-native-ble-manager
Link that module(if the auto-linking is not available but or pod install in the case of ios) with your project and then import like below
import BleManager from 'react-native-ble-manager';
Also here is an example of import and usage too.
https://github.com/innoveit/react-native-ble-manager/blob/master/example/App.js
Related
I'm trying to import some native modules in my application.
In index.js I'm trying to do:
import { AppRegistry, NativeModules } from 'react-native';
The, I want to use my my module:
const { NetworkListenerModule } = NativeModules;
However, NativeModules is undefined so does NetworkListenerModule.
It does work in iOS, but I can't make it work on Android for some reason and I don't have any clue for what's wrong.
After upgrading to react native 0.59.5, the app threw the following warning message on simulator:
viewPagerAndroid has been extracted from react-native core...
But there is no import of the viewPagerAndroid in the component file:
import React, { Component} from 'react';
import { SectionList, View, StyleSheet, Text, TouchableOpacity, Platform, AppRegistry } from 'react-native';
import Moment from 'moment';
import DeviceInfo from 'react-native-device-info';
import { GiftedChat } from 'react-native-gifted-chat';
How to remove the warning?
As of react-native 0.59.0 ViewPagerAndroid has been deprecated. You can see that in the changelog here.
That means that if you want to use ViewPagerAndroid in the future you will need to install it separately. You can see its repo here
You are probably seeing this warning even though you haven’t explicitly used ViewPagerAndroid because one of the dependencies that you are using used it.
Most commonly react-native-gesture-handler or react-native-tab-view both use ViewPagerHandler.
At the moment the warning is just that, a warning. It isn’t going to cause you any issues until support for ViewPagerAndroid is dropped.
You can suppress the YellowBox warning so it won’t show on device. Note even if you suppress the warning it will always show in the logs.
Import it from react-native
import { YellowBox } from 'react-native';
Then in your App.js
YellowBox.ignoreWarnings(['ViewPagerAndroid']);
You can read more about suppressing warnings here
I'm adding an audio module in my current react-native project. I have tried installing several modules (react-native-sound, react-native-track-player). Getting in both modules the same Error output, which is always pointing in the 'react-native/Libraries/Image/resolveAssetsource' as module not found.
ERROR in ./node_modules/react-native-track-player/lib/index.js
Module not found: Error: Can't resolve 'react-native/Libraries/Image/resolveAssetsource' in 'D:\workspaces\web\react\blink\node_modules\react-native-track-player\lib'
# ./node_modules/react-native-track-player/lib/index.js 1:401-459
# ./node_modules/react-native-track-player/index.js
# ./components/ui/BlinkAudio/BlinkAudio.web.js
# ./components/ui/BlinkAudio/index.web.js
# ./components/dialogs/ResourceDetails/ResourceDetails.js
# ./components/dialogs/ResourceDetails/index.js
# ./components/panels/catalog/CatalogPanel.js
# ./components/parts/Main/Main.js
# ./components/parts/Main/index.js
# ./index.web.js
This is the current imports in the index file of the audio module react-native-track-player:
import { Platform, AppRegistry, DeviceEventEmitter, NativeEventEmitter, NativeModules } from 'react-native';
import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetsource';
I have tried to fix this including 'resolveAssetsource' from the imports of 'react-native' as below:
import {
Platform,
AppRegistry,
DeviceEventEmitter,
NativeEventEmitter,
NativeModules,
resolveAssetsource
} from 'react-native';
But I am not pretty sure if it would be the best way and normally I don't like to touch package node-modules directly.
I also tried to exclude the audio module from webpack loaders with no result.
module: {
loaders: [
{
test: /\.js?$/,
exclude: function (modulePath) {
return (
/node_modules/.test(modulePath) &&
!/node_modules(\\|\/)react-native-track-player/.test(modulePath)
);
},
I wonder if someone could help me to find an answer and if is possible to deal with this react-native issue, as I'm thinking that these audio modules are calling wrongly the resolveAssetsource, or in the other hand, react-native doesn't provide this specific Library for third parties, I don't know.
This seems to be a syntax error issue. There is no file nor module named resolveAssetsource, the module and filename is resolveAssetSource with a capital S.
Try to remove react-native-track-player with yarn remove react-native-track-player and install it again (or delete the entire node_modules directory and run yarn install again) as the source code under react-native-track-player/lib/index.js has it properly without any errors:
import { Platform, AppRegistry, DeviceEventEmitter, NativeEventEmitter, NativeModules } from 'react-native';
import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
If you use it elsewhere, you'll have to import it like this:
import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
But that is not the prefered way to do it, as this method is a member of the RN Image class/component Image.resolveAssetSource(source), so, it's better to just import the Image component and use it like this:
import {
Platform,
AppRegistry,
DeviceEventEmitter,
NativeEventEmitter,
NativeModules,
Image // Add Image import
} from 'react-native';
// and use the function as of Image method
let audioAssetSource = Image.resolveAssetSource(audioSource);
Either way, you'll have the method working and resolve the asset source information.
Getting
undefined is not an object ( evaluating '_react2.PropTypes.oneOfType')
While using react-native-camera .
using react-native-camera#0.6 with following react native version.
react-native-cli: 2.0.1
react-native: 0.55.2
What i tried inside app.js is
import React, { Component, PropTypes } from 'react';
and
import PropTypes from 'prop-types';
But not worked.
PropTypes package has been separated from react since v15.5 as mentioned here
Since you're using an older version of react-native-camera, therefore they contain old dependencies in their index.js
react-native-camera index.js v0.6 contains
import React, { Component, PropTypes } from 'react';
Therefore you need to update the package since they have major changes and revamped folder structure as seen in Camera.js
I have started learning react native. I am struggling in the simple react native project while importing new js [example Home.js] in index.android.js
I'm getting the following error"
Module does not exist in the module map or in these directories.
UnableToResolveError: Unable to resolve module .src/Components/home/Home/Home.js from C:\Users\Magi\Dictionary1\index.android.js: Module does not exist in the module map or in these directories:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import Home from '.src/Components/home/Home/Home.js';
Some unwanted import can be causing the issue.
For me, this state was creating the issue.
import { exec } from "child_process";
If Home.js and index.android.js are in the same directory, you can replace
import Home from '.src/Components/home/Home/Home.js';
with
import Home from './Home.js';
But if your src folder is at the same level as index.android.js, src needs to be preceded by ./ instead of .:
import Home from './src/Components/home/Home/Home.js';