stripe / stripe-react-native

React Native library for Stripe.
https://stripe.dev/stripe-react-native
MIT License
1.28k stars 264 forks source link

Native Module can not be null in ios #352

Closed Avinashjain881 closed 3 years ago

Avinashjain881 commented 3 years ago

After installing the package and using the provider in the App.js i get Native Module can not be null , my package.json looks like this [{ "name": "react-native-starter", "version": "2.0.0", "private": false, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest", "test:update": "jest -u", "test:coverage": "jest --coverage", "run:ios": "react-native run-ios", "run:android": "react-native run-android", "lint": "./node_modules/eslint/bin/eslint.js src", "lint:fix": "./node_modules/eslint/bin/eslint.js src --fix", "flow": "./node_modules/flow-bin/cli.js", "e2e:build": "detox build --configuration ios.sim.debug", "e2e:test": "detox test --configuration ios.sim.debug", "postinstall": "patch-package" }, "optionalDependencies": { "fsevents": "*" }, "dependencies": { "@react-native-community/datetimepicker": "^2.1.0", "@react-native-community/geolocation": "^2.0.2", "@react-native-firebase/analytics": "^6.2.0", "@react-native-firebase/app": "^6.2.0", "@stripe/stripe-react-native": "^0.1.4", "detox": "16.9.2", "event-emitter": "^0.3.5", "i18n-js": "^3.2.1", "immutability-helper": "^3.0.1", "jwt-decode": "^2.2.0", "lodash": "^4.17.13", "moment": "^2.24.0", "patch-package": "^6.2.2", "react": "16.8.3", "react-native": "^0.59.9", "react-native-calendars": "^1.22.0", "react-native-dialog": "^5.6.0", "react-native-geo-fencing": "^0.1.0", "react-native-geocoding": "^0.4.0", "react-native-gesture-handler": "1.0.17", "react-native-gifted-chat": "^0.7.2", "react-native-google-places": "^3.1.2", "react-native-google-recaptcha-v2": "^1.0.4", "react-native-iphone-x-helper": "^1.2.1", "react-native-lightbox": "^0.8.0", "react-native-linear-gradient": "^2.5.3", "react-native-localize": "^1.0.4", "react-native-maps": "0.25.0", "react-native-modal": "^9.0.0", "react-native-modal-datetime-picker": "^8.0.3", "react-native-modal-dropdown": "^0.6.2", "react-native-paper": "^2.12.0", "react-native-range-slider": "^0.1.2", "react-native-reanimated": "1.13.0", "react-native-safe-area-context": "^3.1.9", "react-native-safe-area-view": "^1.1.1", "react-native-screens": "^2.0.0-alpha.7", "react-native-snap-carousel": "^3.8.0", "react-native-ui-lib": "^3.18.0", "react-native-vector-icons": "6.3.0", "react-native-webview": "^7.5.0", "react-navigation": "^4.0.10", "react-navigation-drawer": "^2.3.3", "react-navigation-header-buttons": "^2.1.2", "react-navigation-material-bottom-tabs": "^1.0.0", "react-navigation-stack": "^1.10.3", "react-navigation-tabs": "2.10.1", "react-redux": "^6.0.1", "recompose": "^0.30.0", "redux": "^4.0.1", "redux-logger": "^3.0.6", "redux-persist": "^5.10.0", "redux-promise": "^0.6.0", "redux-thunk": "^2.3.0", "rn-range-slider": "^1.2.8", "standard-http-error": "^2.0.1", "victory-native": "^31.0.0" }, "devDependencies": { "@babel/core": "^7.14.2", "@babel/preset-flow": "^7.13.13", "babel-eslint": "^10.0.1", "babel-jest": "^24.5.0", "danger": "^7.0.2", "detox": "12.9.0", "enzyme": "^3.7.0", "enzyme-adapter-react-16": "^1.7.0", "eslint": "^5.9.0", "eslint-config-airbnb": "^17.1.0", "eslint-config-prettier": "^3.6.0", "eslint-plugin-import": "^2.14.0", "eslint-plugin-jsx-a11y": "^6.1.2", "eslint-plugin-react": "^7.11.1", "flow-bin": "^0.92.0", "jest": "^24.5.0", "jsdom": "13.0.0", "jsdom-global": "3.0.2", "metro-react-native-babel-preset": "^0.53.1", "plop": "^2.2.0", "prettier": "^1.16.1", "react-addons-test-utils": "^15.6.2", "react-dom": "^16.6.3", "react-test-renderer": "16.8.3", "sinon": "^7.1.1" }, "jest": { "preset": "react-native", "transform": { "^.+\.js$": "/node_modules/react-native/jest/preprocessor.js" }, "collectCoverage": true, "collectCoverageFrom": [ "src/*/.{js,jsx}", "!/node_modules/", "!android/", "!ios/", "!assets/**" ], "coverageDirectory": "jest_coverage", "setupFiles": [ "./jest-setup.js" ], "testPathIgnorePatterns": [ "/node_modules/", "/e2e/" ] }, "rnpm": { "assets": [ "./assets/fonts/" ] }, "detox": { "configurations": { "ios.sim.debug": { "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/ReactNativeStarter.app", "build": "xcodebuild -UseModernBuildSystem=NO -project ios/ReactNativeStarter.xcodeproj -scheme ReactNativeStarter -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build", "type": "ios.simulator", "name": "iPhone XS" }, "ios.sim.release": { "binaryPath": "ios/build/Build/Products/Release-iphonesimulator/ReactNativeStarter.app", "build": "xcodebuild -UseModernBuildSystem=NO -project ios/ReactNativeStarter.xcodeproj -scheme ReactNativeStarter -configuration Release -sdk iphonesimulator -derivedDataPath ios/build", "type": "ios.simulator", "name": "iPhone 7" } }, "test-runner": "jest" } }

and my app.js looks like this import { Provider } from 'react-redux'; import React from 'react'; import { View, ActivityIndicator, StyleSheet } from 'react-native'; import { PersistGate } from 'redux-persist/integration/react'; import { colors } from './src/styles'; import { SafeAreaProvider } from 'react-native-safe-area-context'; import SafeAreaView from 'react-native-safe-area-view';

import { store, persistor } from './src/redux/store';

import AppView from './src/modules/AppViewContainer'; import { StripeProvider } from '@stripe/stripe-react-native';

export default function App() { return (

} persistor={persistor} >

); }

const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'white', }, safeAreaView:{ flex: 1, backgroundColor: colors.primary, } });

and my podfile looks like

Uncomment the next line to define a global platform for your project

platform :ios, '11.0'

target 'ReactNativeStarter' do

Comment the next line if you don't want to use dynamic frameworks

use_frameworks!

rn_path = '../node_modules/react-native' rn_maps_path = '../node_modules/react-native-maps'

Pods for ReactNativeStarter

pod 'Firebase/Core' pod 'React', path: rn_path, subspecs: [ 'Core', 'CxxBridge', 'DevSupport', 'RCTActionSheet', 'RCTAnimation', 'RCTGeolocation', 'RCTImage', 'RCTLinkingIOS', 'RCTNetwork', 'RCTSettings', 'RCTText', 'RCTVibration', 'RCTWebSocket', 'RCTPushNotification' ]

React Native third party dependencies podspecs

pod 'yoga', path: "#{rn_path}/ReactCommon/yoga/yoga.podspec" pod 'DoubleConversion', :podspec => "#{rn_path}/third-party-podspecs/DoubleConversion.podspec"
pod 'Folly', :podspec => "#{rn_path}/third-party-podspecs/Folly.podspec" pod 'glog', :podspec => "#{rn_path}/third-party-podspecs/glog.podspec"

If you are using React Native <0.54, you will get the following error:

"The name of the given podspec GLog doesn't match the expected one glog"

Use the following line instead:

pod 'GLog', :podspec => "#{rn_path}/third-party-podspecs/GLog.podspec"

react-native-maps dependencies

pod 'react-native-maps', path: rn_maps_path pod 'react-native-google-maps', path: rn_maps_path # Unomment this line if you want to support GoogleMaps on iOS pod 'GoogleMaps' # Uncomment this line if you want to support GoogleMaps on iOS pod 'Google-Maps-iOS-Utils' # Uncomment this line if you want to support GoogleMaps on iOS pod 'react-native-geo-fencing', path: '../node_modules/react-native-geo-fencing'

pod 'react-native-google-places', :path => '../node_modules/react-native-google-places' pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler'

for DateTimePicker

pod 'RNDateTimePicker', :path => '../node_modules/@react-native-community/datetimepicker/RNDateTimePicker.podspec'

Pods for ReactNativeStarter

pod 'RNReanimated', :path => '../node_modules/react-native-reanimated'

pod 'react-native-webview', :path => '../node_modules/react-native-webview'

pod 'RNFBAnalytics', :path => '../node_modules/@react-native-firebase/analytics'

pod 'RNFBApp', :path => '../node_modules/@react-native-firebase/app'

pod 'Firebase/Analytics'

pod 'react-native-geolocation', :path => '../node_modules/@react-native-community/geolocation'

pod 'react-native-safe-area-context', :path => '../node_modules/react-native-safe-area-context'

pod 'RNScreens', :path => '../node_modules/react-native-screens'

pod 'RNRangeSlider', :path => '../node_modules/rn-range-slider'

pod 'react-native-stripe', path: '../node_modules/@stripe/stripe-react-native'

target 'ReactNativeStarterTests' do inherit! :search_paths

Pods for testing

end

end

post_install do |installer| installer.pods_project.targets.each do |target|

The following is needed to ensure the "archive" step works in XCode.

# It removes React & Yoga from the Pods project, as it is already included in the main project.
# Without this, you'd see errors when you archive like:
# "Multiple commands produce ... libReact.a"
# "Multiple commands produce ... libyoga.a"

targets_to_ignore = %w(React yoga)

if targets_to_ignore.include? target.name
  target.remove_from_project
end    

if target.name == 'react-native-google-maps'
  target.build_configurations.each do |config|
    config.build_settings['CLANG_ENABLE_MODULES'] = 'No'
  end
end
if target.name == "React"
  target.remove_from_project
end

end react_project = Xcodeproj::Project.open("../node_modules/react-native/React/React.xcodeproj") react_project.main_group["React/Views"].files.each do |file| if file.path.match(/^RCTWebView/) file.remove_from_project end end react_project.save end

target 'ReactNativeStarter-tvOS' do

Comment the next line if you don't want to use dynamic frameworks

use_frameworks!

Pods for ReactNativeStarter-tvOS

target 'ReactNativeStarter-tvOSTests' do inherit! :search_paths

Pods for testing

end

end

how can i resolve this issue any help would be great

](url) simulator_screenshot_DF9CE80F-4F32-4857-B077-49368E139871

thorsten-stripe commented 3 years ago

Can you please update to a newer version of React Native and see if that resolves it?

Avinashjain881 commented 3 years ago

Okay i will try this

IyiolaOwabumowa commented 3 years ago

I have the same issue as well

IyiolaOwabumowa commented 3 years ago

Found a solution at #241

Edit the Xcodeproject file with VSCode and search for LIBRARY_SEARCH_PATHS

Then remove $(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME) and $(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME)

Save and run your build.

The issue is that the READ ME for this library did not tell us to open the xcodeproject file with another text editor.

Well this was what got my problem solved a few seconds ago.

Cheers! 💰🥳

Avinashjain881 commented 3 years ago

there is no such paths exists in the xcodeproject file

flora8984461 commented 3 years ago

I am having the same issue and only on my standalone app. I use expo management flow and everything works fine, after I run expo build: ios, and download the app through testflight or my simulator, it crashes when I try to launch it with the following error:

Terminating app due to uncaught exception 'ExpoFatalError', reason: 'Expo encountered a fatal error: Unhandled JS Exception: Invariant Violation: Native module cannot be null.'

I notice that I have to run pod install in ios folder, but the issue is, I am using expo management flow, which does not provide ios / android folder. I wonder if my only way is to eject? Or there are other ways to handle expo management flow with react native stripe?

I am currently trying to use expo run:ios to see if I can modify ios folder. https://docs.expo.io/workflow/customizing/

Any help is appreciated!

flora8984461 commented 3 years ago

After some trial with expo run:ios, kinda ejected from expo, I got rid of the error.

I am having the same issue and only on my standalone app. I use expo management flow and everything works fine, after I run expo build: ios, and download the app through testflight or my simulator, it crashes when I try to launch it with the following error:

Terminating app due to uncaught exception 'ExpoFatalError', reason: 'Expo encountered a fatal error: Unhandled JS Exception: Invariant Violation: Native module cannot be null.'

I notice that I have to run pod install in ios folder, but the issue is, I am using expo management flow, which does not provide ios / android folder. I wonder if my only way is to eject? Or there are other ways to handle expo management flow with react native stripe?

I am currently trying to use expo run:ios to see if I can modify ios folder. https://docs.expo.io/workflow/customizing/

Any help is appreciated!

arekkubaczkowski commented 3 years ago

@Avinashjain881 Have you tried to update RN version? Are you still facing this issue?

thorsten-stripe commented 3 years ago

Closing due to inactivity.

Avinashjain881 commented 3 years ago

@Avinashjain881 Have you tried to update RN version? Are you still facing this issue?

Yes after updating the RN version it worked.