react-native-instagram-login throwing Invariant Violation #95
Description
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)}
/>