react-native-instagram-login throwing Invariant Violation

[souradeepmajumdar05]

I have been trying to integrate instagram login in my app using react-native-instagram-login its currently throwing error, i have done the below changes to make it work also tried to follow a specific solution in link but didn't seem to work ,any help would be greatly appreciated

ERROR Invariant Violation: View config getter callback for component RCTModalHostView must be a function (received undefined).

This error is located at:
in RCTModalHostView (at Modal.js:258)
in Modal (at Instagram.js:119)
in Test(at Instagram.js:44)
in RCTView (at View.js:34)
in View (at Instagram.js:25)
in Test(at SceneView.tsx:122)
...
ERROR Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
in WebView (at Instagram.js:99)
in RCTView (at Instagram.js:126)
in RCTView (at Instagram.js:125)
in RCTView (at AppContainer.js:101)
in RCTView (at AppContainer.js:119)
in AppContainer (at Modal.js:250)
in RCTView (at Modal.js:271)
in RCTModalHostView (at Modal.js:258)
in Modal (at Instagram.js:119)
in Test(at Instagram.js:44)
in RCTView (at View.js:34)
in View (at Instagram.js:25)
in Test(at SceneView.tsx:122)
...

package.json

{ "name": "ui", "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-async-storage/async-storage": "^1.15.5", "@react-native-community/datetimepicker": "^3.5.2", "@react-native-community/masked-view": "^0.1.11", "@react-native-cookies/cookies": "^6.0.8", "@react-navigation/drawer": "^5.12.5", "@react-navigation/native": "^5.9.4", "@react-navigation/stack": "^5.14.5", "react": "17.0.1", "react-native": "0.64.2", "react-native-animatable": "^1.3.3", "react-native-calendars": "^1.1264.0", "react-native-dropdown-autocomplete-textinput": "^1.0.1", "react-native-gesture-handler": "^1.10.3", "react-native-image-crop-picker": "^0.36.2", "react-native-instagram-login": "^2.0.4", "react-native-linear-gradient": "^2.5.6", "react-native-modal-datetime-picker": "^10.0.0", "react-native-paper": "^4.9.2", "react-native-reanimated": "^2.2.0", "react-native-safe-area-context": "^3.2.0", "react-native-screens": "^3.4.0", "react-native-searchable-dropdown": "^1.1.3", "react-native-vector-icons": "^8.1.0", "react-native-webview": "^11.6.5", "toggle-switch-react-native": "^3.2.0" }, "devDependencies": { "@babel/core": "^7.14.6", "@babel/runtime": "^7.14.6", "@react-native-community/eslint-config": "^3.0.0", "babel-jest": "^27.0.5", "eslint": "^7.29.0", "jest": "^27.0.5", "metro-react-native-babel-preset": "^0.66.0", "react-test-renderer": "17.0.1" }, "jest": { "preset": "react-native" } }

Test.js

...
const Test= ({navigation}) =>{
const[token,setToken]=useState('');
setIgToken = (data) => {
console.log('data', data)
this.setToken({ token: data.access_token })
};

return(
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<TouchableOpacity
style={styles.btn}
onPress={() => this.instagramLogin.show()}>
<Text style={{ color: 'white', textAlign: 'center' }}>Login now

<TouchableOpacity
style={[styles.btn, { marginTop: 10, backgroundColor: 'green' }]}
onPress={() => clear()}>
<Text style={{ color: 'white', textAlign: 'center' }}>Logout

<Text style={{ margin: 10 }}>Token: {token}

<InstagramLogin
  ref={ref => (this.instagramLogin = ref)}
  appId='appId'
  appSecret='appSecret'
  redirectUrl='redirectUrl'
  scopes={['publish_video',    'pages_show_list','instagram_basic','instagram_content_publish','pages_read_engagement']}
  onLoginSuccess={this.setIgToken}
  onLoginFailure={(data) => console.log(data)}
/>

); };

[souradeepmajumdar05]

Solution : https://stackoverflow.com/questions/68296055/react-native-instagram-login-throwing-invariant-violation

I had a 2 part issue.

1. multiple react webview is a issue so remove the one inside Instagram log in follow stackoverflow.com/a/67917642/8704042 2) faced connection issue as my emulator couldn't access internet. in my case it turned out to be my dev environment(windows OS) was corrupted, on fixing it started working(OS reformatting worked for me). But i have seen others fixed it via vpn setting check that out too, in my case i kept getting a error like "ERR..... unable to get the IP"

[AmirDoreh]

if you use the latest version you should not face this problem @souradeepmajumdar05

[souradeepmajumdar05]

@AmirDoreh can you share your package.json and npm and node version