kandi background
Explore Kits

react-native-fcm | react native module for firebase cloud messaging | Authentication library

 by   evollu Java Version: v16.2.4 License: MIT

 by   evollu Java Version: v16.2.4 License: MIT

Download this library from

kandi X-RAY | react-native-fcm Summary

react-native-fcm is a Java library typically used in Security, Authentication, React Native, Firebase applications. react-native-fcm has no bugs, it has no vulnerabilities, it has a Permissive License and it has high support. However react-native-fcm build file is not available. You can install using 'npm i react-native-pushnotificationreact' or download it from GitHub, npm.
I'm not longer able to maintain this repo. check react-native-firebase instead.
Support
Support
Quality
Quality
Security
Security
License
License
Reuse
Reuse

kandi-support Support

  • react-native-fcm has a highly active ecosystem.
  • It has 1729 star(s) with 702 fork(s). There are 41 watchers for this library.
  • It had no major release in the last 12 months.
  • There are 287 open issues and 670 have been closed. On average issues are closed in 131 days. There are 21 open pull requests and 0 closed requests.
  • It has a negative sentiment in the developer community.
  • The latest version of react-native-fcm is v16.2.4
react-native-fcm Support
Best in #Authentication
Average in #Authentication
react-native-fcm Support
Best in #Authentication
Average in #Authentication

quality kandi Quality

  • react-native-fcm has 0 bugs and 0 code smells.
react-native-fcm Quality
Best in #Authentication
Average in #Authentication
react-native-fcm Quality
Best in #Authentication
Average in #Authentication

securitySecurity

  • react-native-fcm has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
  • react-native-fcm code analysis shows 0 unresolved vulnerabilities.
  • There are 0 security hotspots that need review.
react-native-fcm Security
Best in #Authentication
Average in #Authentication
react-native-fcm Security
Best in #Authentication
Average in #Authentication

license License

  • react-native-fcm is licensed under the MIT License. This license is Permissive.
  • Permissive licenses have the least restrictions, and you can use them in most projects.
react-native-fcm License
Best in #Authentication
Average in #Authentication
react-native-fcm License
Best in #Authentication
Average in #Authentication

buildReuse

  • react-native-fcm releases are available to install and integrate.
  • Deployable package is available in npm.
  • react-native-fcm has no build file. You will be need to create the build yourself to build the component from source.
  • Installation instructions, examples and code snippets are available.
  • It has 1335 lines of code, 75 functions and 26 files.
  • It has high code complexity. Code complexity directly impacts maintainability of the code.
react-native-fcm Reuse
Best in #Authentication
Average in #Authentication
react-native-fcm Reuse
Best in #Authentication
Average in #Authentication
Top functions reviewed by kandi - BETA

kandi has reviewed react-native-fcm and discovered the below as its top functions. This is intended to give you an instant insight into react-native-fcm implemented functionality, and help decide if they suit your requirements.

  • This method is used to execute the activity
    • Schedules notification .
      • Create a notification channel .
        • Called when a token is refreshed .
          • Invoked when a message is received .
            • Convert a bundle to a JSON object .
              • Converts a ReadableMap to a JSONObject .
                • Set the badge count .
                  • Creates the native modules
                    • Called when this class is created .

                      Get all kandi verified functions for this library.

                      Get all kandi verified functions for this library.

                      react-native-fcm Key Features

                      react native module for firebase cloud messaging and local notification

                      react-native-fcm Examples and Code Snippets

                      See all related Code Snippets

                      Edit

                      copy iconCopydownload iconDownload
                      buildscript {
                          repositories {
                              // ...
                              google() // Google's Maven repository
                          }
                          // ...
                          dependencies {
                              // ...
                              classpath 'com.google.gms:google-services:4.0.2' // google-services plugin
                          }
                      }
                      
                      allprojects {
                          // ...
                          repositories {
                              // ...
                              google() // Google's Maven repository
                          }
                      }
                      

                      Edit

                      copy iconCopydownload iconDownload
                      dependencies {
                          // ...
                          compile project(':react-native-fcm')
                      
                          // ...
                          
                          // Automatically selecting the latest available version
                          implementation 'com.google.firebase:firebase-core'
                          implementation 'com.google.firebase:firebase-messaging'
                      }
                      
                      // ADD THIS AT THE BOTTOM
                      apply plugin: 'com.google.gms.google-services'
                      

                      Edit

                      copy iconCopydownload iconDownload
                        <application
                          ...
                          android:theme="@style/AppTheme">
                      
                      +    <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@mipmap/ic_notif"/>
                      +    <meta-data android:name="com.google.firebase.messaging.default_notification_channel_id" android:value="my_default_channel"/>
                      
                      +   <service android:name="com.evollu.react.fcm.MessagingService" android:enabled="true" android:exported="true">
                      +     <intent-filter>
                      +       <action android:name="com.google.firebase.MESSAGING_EVENT"/>
                      +     </intent-filter>
                      +   </service>
                      
                      +   <service android:name="com.evollu.react.fcm.InstanceIdService" android:exported="false">
                      +     <intent-filter>
                      +       <action android:name="com.google.firebase.INSTANCE_ID_EVENT"/>
                      +     </intent-filter>
                      +   </service>
                      
                          ...
                      

                      Edit

                      copy iconCopydownload iconDownload
                      + compileSdkVersion 27
                      +    buildToolsVersion "27.0.3"
                      
                          defaultConfig {
                              applicationId "com.google.firebase.quickstart.fcm"
                              minSdkVersion 16
                      +        targetSdkVersion 27
                              versionCode 1
                              versionName "1.0"
                              ndk {
                                  abiFilters "armeabi-v7a", "x86"
                              }
                          }
                      
                       dependencies {
                      +    compile project(':react-native-fcm')
                           compile fileTree(dir: "libs", include: ["*.jar"])
                           compile "com.facebook.react:react-native:+"  // From node_modules
                       }
                       
                       //bottom
                       + apply plugin: "com.google.gms.google-services"
                      

                      Edit

                      copy iconCopydownload iconDownload
                        ...
                      + include ':react-native-fcm'
                      + project(':react-native-fcm').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fcm/android')
                        include ':app'
                      

                      Make sure in

                      copy iconCopydownload iconDownload
                          @Override
                          protected List<ReactPackage> getPackages() {
                            return Arrays.<ReactPackage>asList(
                                new MainReactPackage(),
                                  new MapsPackage(),
                      +           new FIRMessagingPackage()
                            );
                          }
                      
                      + @Override
                      +  public void onCreate() { // <-- Check this block exists
                      +    super.onCreate();
                      +    SoLoader.init(this, /* native exopackage */ false); // <-- Check this line exists within the block
                      +  }
                      

                      Config for notification and

                      copy iconCopydownload iconDownload
                        <activity
                          android:name=".MainActivity"
                          android:label="@string/app_name"
                          android:windowSoftInputMode="adjustResize"
                      +   android:launchMode="singleTop"
                          android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
                          <intent-filter>
                            <action android:name="android.intent.action.MAIN" />
                            <category android:name="android.intent.category.LAUNCHER" />
                          </intent-filter>
                        </activity>
                      

                      Pod approach:

                      copy iconCopydownload iconDownload
                      cd ios && pod init
                      

                      Shared steps

                      copy iconCopydownload iconDownload
                      + @import UserNotifications;
                      +
                      + @interface AppDelegate : UIResponder <UIApplicationDelegate,UNUserNotificationCenterDelegate>
                      - @interface AppDelegate : UIResponder <UIApplicationDelegate>
                      

                      Android

                      copy iconCopydownload iconDownload
                        <uses-permission android:name="android.permission.INTERNET" />
                      + <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
                      + <uses-permission android:name="android.permission.VIBRATE" />
                      
                        <application>
                      +      <receiver android:name="com.evollu.react.fcm.FIRLocalMessagingPublisher"/>
                      +      <receiver android:enabled="true" android:exported="true"  android:name="com.evollu.react.fcm.FIRSystemBootEventReceiver">
                      +          <intent-filter>
                      +              <action android:name="android.intent.action.BOOT_COMPLETED"/>
                      +              <action android:name="android.intent.action.QUICKBOOT_POWERON"/>
                      +              <action android:name="com.htc.intent.action.QUICKBOOT_POWERON"/>
                      +              <category android:name="android.intent.category.DEFAULT" />
                      +          </intent-filter>
                      +      </receiver>
                        </application>
                      

                      Build custom push notification for Android

                      copy iconCopydownload iconDownload
                      {
                        "to":"FCM_TOKEN",
                        "data": {
                          "type":"MEASURE_CHANGE",
                          "custom_notification": {
                            "body": "test body",
                            "title": "test title",
                            "color":"#00ACD4",
                            "priority":"high",
                            "icon":"ic_notif",
                            "group": "GROUP",
                            "id": "id",
                            "show_in_foreground": true
                          }
                        }
                      }
                      

                      Behaviour when sending

                      copy iconCopydownload iconDownload
                      {
                         "to":"some_device_token",
                         "content_available": true,
                         "notification": {
                             "title": "hello",
                             "body": "yo",
                             "click_action": "fcm.ACTION.HELLO"
                         },
                         "data": {
                             "extra":"juice"
                         }
                       }
                      

                      Quick notes about upstream messages

                      copy iconCopydownload iconDownload
                      FCM.send('984XXXXXXXXX', {
                        my_custom_data_1: 'my_custom_field_value_1',
                        my_custom_data_2: 'my_custom_field_value_2'
                      });
                      

                      Sending remote notifications with category on iOS

                      copy iconCopydownload iconDownload
                      {
                         "to": "some_device_token",
                         "content_available": true,
                         "notification": {
                             "title": "Alarm",
                             "subtitle": "First Alarm",
                             "body": "First Alarm",
                             "click_action": "com.myapp.MyCategory" // The id of notification category which you defined with FCM.setNotificationCategories
                         },
                         "data": {
                             "extra": "juice"
                         }
                       }
                      

                      Q & A

                      copy iconCopydownload iconDownload
                          compile(project(':react-native-maps')) {
                              exclude group: 'com.google.android.gms', module: 'play-services-base'
                          }
                      

                      Sending remote notification

                      copy iconCopydownload iconDownload
                      https://fcm.googleapis.com/fcm/send
                      

                      Channels

                      copy iconCopydownload iconDownload
                      <meta-data android:name="com.google.firebase.messaging.default_notification_channel_id" android:value="@string/default_notification_channel_id"/>
                      

                      React Native: Opening a push notification at a specific deeplink URL

                      copy iconCopydownload iconDownload
                      // push handler component
                      class PushHandler extends React.Component {
                        componentDidMount() {
                          FCM.getInitialNotification(notification => {
                            if (!notification) {
                              // the app was not opened with a notification.
                              return;
                            }
                      
                            // extract route from `notification` here
                      
                            this.props.navigation.navigate(route);
                          }
                        }
                      
                        // ... rest of push notification handling code
                      }
                      

                      Reset Push Notifications/Device Registration/Instance Id - App Update via TestFlight or App Store - Firebase Cloud Messaging iOS/React Native Firebase

                      copy iconCopydownload iconDownload
                      await firebase.messaging().ios.registerForRemoteNotifications()
                      
                      firebase.iid().delete();
                      
                         configureFirebaseCloudMessaging = async () => {
                          //wire up Firebase Cloud Messaging onTokenRefresh listener
                      
                          this.fcmOnTokenRefreshUnsubscribe = await firebase.messaging().onTokenRefresh(async fcmToken => {
                            console.log('*********************** onTokenRefresh *****************');
                            //this is callBack called typically sometime in the future but can be call with app loaded but user not logged in
                            //check for that case and exit if there is no accessToken to call APIs
                            const accessToken = await AsyncStorage.getItem('access-token');
                            if (!accessToken) {
                              console.log('************** user is not logged in exit onTokenRefresh do not register device ************');
                              return;
                            }
                            await this.registerDevice(fcmToken, BASE_URL);
                            await AsyncStorage.setItem('fcmToken', fcmToken);
                            firebase.crashlytics().log(`flushed new fcmToken: ${fcmToken}`);
                            console.log('***************** success  account updated with latest token **************');
                          });
                      
                          //Firebase Cloud Messaging time
                          await this.requestPushPermission();
                          await this.checkFlushv();
                        }
                      
                        checkFlushv = async () => {
                          let FLUSHV = `${DeviceInfo.getVersion()}-build-${DeviceInfo.getBuildNumber()}`;
                      
                          const flush = await AsyncStorage.getItem(FLUSHV);
                          console.log('======= checking FLUSHV=========', flush);
                          if (flush) {
                            console.log('***** device token already been flushed ******');
                            return;
                          }
                      
                          const accessToken = await AsyncStorage.getItem('access-token');
                          console.log('flushy access token:', accessToken);
                          if (!accessToken) {
                            console.log('******** user is not logged in do not flush ************');
                            return;
                          }
                      
                          //force push notifications, this will fire onTokenRefresh callback
                          await firebase.iid().delete();
                      
                          //iterate all keys and remove other builds to keep tidy and TestFlighters possibly going up and back down build versions for testing
                          const keys = await AsyncStorage.getAllKeys();
                          const buildKeys = keys.filter(key => {
                            return key.indexOf('build') !== -1;
                          });
                          await AsyncStorage.multiRemove(buildKeys);
                      
                          //add current build key so no more flushy
                          await AsyncStorage.setItem(FLUSHV, FLUSHV);
                          console.log(`=================FLUSHV clear: ${FLUSHV}===================`)
                        }
                      
                        registerDevice = async (token, baseUrl) => {
                          console.log(`******** registerDevice token: ${token}, baseUrl: ${baseUrl}`);
                          let data = {
                            device: 'firebase',
                            token: token
                          }
                      
                          //register token with  account
                          axios.post(`${baseUrl}/myapi/register_device`, data)
                            .then(response => {
                              return {}
                            })
                            .catch(err => {
                              console.log(err)
                              return {}
                            })
                        }
                      
                        async componentDidUpdate() {
                          //a new version of the app could be loaded post/after App.componentDidMount
                          await this.checkFlushv();
                        }
                      
                        async componentWillUnmount() {
                          console.log('app componentWillUnmount');
                          this.fcmOnTokenRefreshUnsubscribe(); //not really sure unsubcribe is needed but keeping tidy
                          this.fcmOnTokenRefreshUnsubscribe = null;
                        }
                      
                        async componentDidMount() {
                          await this.configureFirebaseCloudMessaging();
                        }
                      
                      firebase.iid().delete();
                      
                         configureFirebaseCloudMessaging = async () => {
                          //wire up Firebase Cloud Messaging onTokenRefresh listener
                      
                          this.fcmOnTokenRefreshUnsubscribe = await firebase.messaging().onTokenRefresh(async fcmToken => {
                            console.log('*********************** onTokenRefresh *****************');
                            //this is callBack called typically sometime in the future but can be call with app loaded but user not logged in
                            //check for that case and exit if there is no accessToken to call APIs
                            const accessToken = await AsyncStorage.getItem('access-token');
                            if (!accessToken) {
                              console.log('************** user is not logged in exit onTokenRefresh do not register device ************');
                              return;
                            }
                            await this.registerDevice(fcmToken, BASE_URL);
                            await AsyncStorage.setItem('fcmToken', fcmToken);
                            firebase.crashlytics().log(`flushed new fcmToken: ${fcmToken}`);
                            console.log('***************** success  account updated with latest token **************');
                          });
                      
                          //Firebase Cloud Messaging time
                          await this.requestPushPermission();
                          await this.checkFlushv();
                        }
                      
                        checkFlushv = async () => {
                          let FLUSHV = `${DeviceInfo.getVersion()}-build-${DeviceInfo.getBuildNumber()}`;
                      
                          const flush = await AsyncStorage.getItem(FLUSHV);
                          console.log('======= checking FLUSHV=========', flush);
                          if (flush) {
                            console.log('***** device token already been flushed ******');
                            return;
                          }
                      
                          const accessToken = await AsyncStorage.getItem('access-token');
                          console.log('flushy access token:', accessToken);
                          if (!accessToken) {
                            console.log('******** user is not logged in do not flush ************');
                            return;
                          }
                      
                          //force push notifications, this will fire onTokenRefresh callback
                          await firebase.iid().delete();
                      
                          //iterate all keys and remove other builds to keep tidy and TestFlighters possibly going up and back down build versions for testing
                          const keys = await AsyncStorage.getAllKeys();
                          const buildKeys = keys.filter(key => {
                            return key.indexOf('build') !== -1;
                          });
                          await AsyncStorage.multiRemove(buildKeys);
                      
                          //add current build key so no more flushy
                          await AsyncStorage.setItem(FLUSHV, FLUSHV);
                          console.log(`=================FLUSHV clear: ${FLUSHV}===================`)
                        }
                      
                        registerDevice = async (token, baseUrl) => {
                          console.log(`******** registerDevice token: ${token}, baseUrl: ${baseUrl}`);
                          let data = {
                            device: 'firebase',
                            token: token
                          }
                      
                          //register token with  account
                          axios.post(`${baseUrl}/myapi/register_device`, data)
                            .then(response => {
                              return {}
                            })
                            .catch(err => {
                              console.log(err)
                              return {}
                            })
                        }
                      
                        async componentDidUpdate() {
                          //a new version of the app could be loaded post/after App.componentDidMount
                          await this.checkFlushv();
                        }
                      
                        async componentWillUnmount() {
                          console.log('app componentWillUnmount');
                          this.fcmOnTokenRefreshUnsubscribe(); //not really sure unsubcribe is needed but keeping tidy
                          this.fcmOnTokenRefreshUnsubscribe = null;
                        }
                      
                        async componentDidMount() {
                          await this.configureFirebaseCloudMessaging();
                        }
                      
                      firebase.iid().delete();
                      
                         configureFirebaseCloudMessaging = async () => {
                          //wire up Firebase Cloud Messaging onTokenRefresh listener
                      
                          this.fcmOnTokenRefreshUnsubscribe = await firebase.messaging().onTokenRefresh(async fcmToken => {
                            console.log('*********************** onTokenRefresh *****************');
                            //this is callBack called typically sometime in the future but can be call with app loaded but user not logged in
                            //check for that case and exit if there is no accessToken to call APIs
                            const accessToken = await AsyncStorage.getItem('access-token');
                            if (!accessToken) {
                              console.log('************** user is not logged in exit onTokenRefresh do not register device ************');
                              return;
                            }
                            await this.registerDevice(fcmToken, BASE_URL);
                            await AsyncStorage.setItem('fcmToken', fcmToken);
                            firebase.crashlytics().log(`flushed new fcmToken: ${fcmToken}`);
                            console.log('***************** success  account updated with latest token **************');
                          });
                      
                          //Firebase Cloud Messaging time
                          await this.requestPushPermission();
                          await this.checkFlushv();
                        }
                      
                        checkFlushv = async () => {
                          let FLUSHV = `${DeviceInfo.getVersion()}-build-${DeviceInfo.getBuildNumber()}`;
                      
                          const flush = await AsyncStorage.getItem(FLUSHV);
                          console.log('======= checking FLUSHV=========', flush);
                          if (flush) {
                            console.log('***** device token already been flushed ******');
                            return;
                          }
                      
                          const accessToken = await AsyncStorage.getItem('access-token');
                          console.log('flushy access token:', accessToken);
                          if (!accessToken) {
                            console.log('******** user is not logged in do not flush ************');
                            return;
                          }
                      
                          //force push notifications, this will fire onTokenRefresh callback
                          await firebase.iid().delete();
                      
                          //iterate all keys and remove other builds to keep tidy and TestFlighters possibly going up and back down build versions for testing
                          const keys = await AsyncStorage.getAllKeys();
                          const buildKeys = keys.filter(key => {
                            return key.indexOf('build') !== -1;
                          });
                          await AsyncStorage.multiRemove(buildKeys);
                      
                          //add current build key so no more flushy
                          await AsyncStorage.setItem(FLUSHV, FLUSHV);
                          console.log(`=================FLUSHV clear: ${FLUSHV}===================`)
                        }
                      
                        registerDevice = async (token, baseUrl) => {
                          console.log(`******** registerDevice token: ${token}, baseUrl: ${baseUrl}`);
                          let data = {
                            device: 'firebase',
                            token: token
                          }
                      
                          //register token with  account
                          axios.post(`${baseUrl}/myapi/register_device`, data)
                            .then(response => {
                              return {}
                            })
                            .catch(err => {
                              console.log(err)
                              return {}
                            })
                        }
                      
                        async componentDidUpdate() {
                          //a new version of the app could be loaded post/after App.componentDidMount
                          await this.checkFlushv();
                        }
                      
                        async componentWillUnmount() {
                          console.log('app componentWillUnmount');
                          this.fcmOnTokenRefreshUnsubscribe(); //not really sure unsubcribe is needed but keeping tidy
                          this.fcmOnTokenRefreshUnsubscribe = null;
                        }
                      
                        async componentDidMount() {
                          await this.configureFirebaseCloudMessaging();
                        }
                      

                      See all related Code Snippets

                      Community Discussions

                      Trending Discussions on react-native-fcm
                      • Cannot Read Property Show of Undefined When Using DocumentPicker.show() in React Native
                      • React Native: Opening a push notification at a specific deeplink URL
                      • Reset Push Notifications/Device Registration/Instance Id - App Update via TestFlight or App Store - Firebase Cloud Messaging iOS/React Native Firebase
                      Trending Discussions on react-native-fcm

                      QUESTION

                      Cannot Read Property Show of Undefined When Using DocumentPicker.show() in React Native

                      Asked 2022-Mar-22 at 18:08

                      I followed some answers from here that are similar to my issues. But unfortunately, the error is not removed. That is why I asked here again.

                      This is an old versioned React Native project where react-native-document-picker version was 2.1.0. When I upgraded the version to 8.0.0, the error shows as the following screenshot:

                      documentpicker error

                      The current files are as like below;

                      android/settings.gradle

                      ...    
                      include ':react-native-document-picker'
                      project(':react-native-document-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-document-picker/android')
                      ...
                      

                      android/app/build.gradle

                      dependencies {
                          implementation fileTree(dir: "libs", include: ["*.jar"])
                          ...
                          ...
                          implementation project(':react-native-document-picker')
                      }
                      

                      package.json

                      {
                        "name": "awesomeproject",
                        "version": "0.0.1",
                        "private": true,
                        "scripts": {
                          "android": "react-native run-android",
                          "ios": "react-native run-ios",
                          "start": "react-native start",
                          "test": "jest",
                          "lint": "eslint ."
                        },
                        "dependencies": {
                          "@react-native-community/datetimepicker": "^6.0.2",
                          "@react-navigation/drawer": "^6.3.1",
                          "@react-navigation/native": "^6.0.8",
                          "@react-navigation/stack": "^6.1.1",
                          "axios": "^0.26.1",
                          "moment": "^2.29.1",
                          "native-base": "^3.3.7",
                          "react": "17.0.2",
                          "react-native": "0.67.2",
                          "react-native-action-button": "^2.8.5",
                          "react-native-document-picker": "^8.0.0",
                          "react-native-dropdownalert": "^4.5.1",
                          "react-native-fcm": "^16.2.4",
                          "react-native-fetch-blob": "^0.10.8",
                          "react-native-fs": "^2.19.0",
                          "react-native-gesture-handler": "^2.3.2",
                          "react-native-image-picker": "^4.7.3",
                          "react-native-iphone-x-helper": "^1.3.1",
                          "react-native-keyboard-aware-scroll-view": "^0.9.5",
                          "react-native-keyboard-spacer": "^0.4.1",
                          "react-native-loading-spinner-overlay": "^3.0.0",
                          "react-native-modal-datetime-picker": "^13.1.0",
                          "react-native-modalbox": "^2.0.2",
                          "react-native-reanimated": "^2.4.1",
                          "react-native-safe-area-context": "^4.1.2",
                          "react-native-screens": "^3.13.0",
                          "react-native-simple-radio-button": "^2.7.4",
                          "react-native-simple-toast": "^1.1.3",
                          "react-native-svg": "^12.3.0",
                          "react-native-swiper": "^1.6.0",
                          "react-native-vector-icons": "^9.1.0",
                          "react-redux": "^7.2.6",
                          "redux": "^4.1.2",
                          "redux-logger": "^3.0.6",
                          "redux-saga": "^1.1.3"
                        },
                        "devDependencies": {
                          "@babel/core": "^7.12.9",
                          "@babel/runtime": "^7.12.5",
                          "@react-native-community/eslint-config": "^2.0.0",
                          "babel-jest": "^26.6.3",
                          "eslint": "7.14.0",
                          "jest": "^26.6.3",
                          "metro-react-native-babel-preset": "^0.66.2",
                          "react-test-renderer": "17.0.2"
                        },
                        "jest": {
                          "preset": "react-native"
                        }
                      }
                      

                      app.js

                      import {DocumentPicker, DocumentPickerUtil} from 'react-native-document-picker';
                      
                          pressOnAttach() {
                              Keyboard.dismiss();
                              this.refs.NoticeTitle.blur();
                              this.refs.NoticeDescription.blur();
                              setTimeout(() => {
                                      DocumentPicker.show({
                                      filetype: [DocumentPickerUtil.allFiles()],
                                  }, (error, res) => {
                                      if (error === null) {
                                          setTimeout(() => {
                                              if (!this.checkFileExtension(res.fileName)) {
                                                  alert(AppText.VALID_EXTENSION_MESSAGE)
                                              } else {
                                                  this.generateList(res.uri, res.fileName, res.fileSize);
                                              }
                                          }, 1000)
                                      }
                                  });
                              }, 1000)
                          }
                      

                      When I console.log the DocumentPicker and DocumentPickerUtil, it returns undefined always.

                      Could anyone help me please to fix this issue? Thanks in advance!

                      ANSWER

                      Answered 2022-Mar-22 at 18:08

                      The reason you are getting DocumentPicker undefined is the react-native-document-picker version 8.0.0 has been updated since version 2.1.0 which code you've posted.

                      According to the library doc, you have to import the DocumentPicker differently. And the util DocumentPickerUtil is also not available to the updated version. For react-native-document-picker version 8.0.0 you have to import in the following way

                      import DocumentPicker, { types } from 'react-native-document-picker';

                      And also DocumentPicker.show method is no longer available you have to use the DocumentPicker.pick method.

                      Ref:

                      Source https://stackoverflow.com/questions/71575875

                      Community Discussions, Code Snippets contain sources that include Stack Exchange Network

                      Vulnerabilities

                      No vulnerabilities reported

                      Install react-native-fcm

                      Run npm install react-native-fcm --save
                      Link libraries Note: the auto link doesn't work with xcworkspace so CocoaPods user needs to do manual linking
                      You many need this package for huawei phone
                      NOTE: local notification does NOT have any dependency on FCM library but you still need to include Firebase to compile. If there are enough demand to use this functionality alone, I will separate it out into another repo.
                      Firebase android misses important feature of android notification like group, priority and etc. As a work around you can send data message (no notification payload at all) and this repo will build a local notification for you. If you pass custom_notification in the payload, the repo will treat the content as a local notification config and shows immediately. NOTE: By using this work around, you will have to send different types of payload for iOS and Android devices because custom_notification isn't supported on iOS. WARNING: custom_notification cannot be used together with notification attribute. use data ALONE.

                      Support

                      For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

                      DOWNLOAD this Library from

                      Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
                      over 430 million Knowledge Items
                      Find more libraries
                      Reuse Solution Kits and Libraries Curated by Popular Use Cases
                      Explore Kits

                      Save this library and start creating your kit

                      Share this Page

                      share link
                      Consider Popular Authentication Libraries
                      Try Top Libraries by evollu
                      Compare Authentication Libraries with Highest Support
                      Compare Authentication Libraries with Highest Quality
                      Compare Authentication Libraries with Highest Security
                      Compare Authentication Libraries with Permissive License
                      Compare Authentication Libraries with Highest Reuse
                      Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
                      over 430 million Knowledge Items
                      Find more libraries
                      Reuse Solution Kits and Libraries Curated by Popular Use Cases
                      Explore Kits

                      Save this library and start creating your kit

                      • © 2022 Open Weaver Inc.