Im trying to using stripe-react-native (with expo and using android) library but immediately I use the StripeProvider I got this error (I followed the Docs):
TypeError: null is not an object (evaluating '_NativeStripeSdk["default"].initialise')
This error is located at:
in StripeProvider (at App.js:35)
in EnsureSingleNavigator (at BaseNavigationContainer.tsx:409)
in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91)
in ThemeProvider (at NavigationContainer.tsx:90)
...
This is where I use it:
...
import { StripeProvider } from '#stripe/stripe-react-native'
//pass the ref to your navigation container
import { PersistGate } from 'redux-persist/integration/react'
import { store, persistor } from './store'
import { Provider } from 'react-redux'
import { AppTab } from './Navigation'
export default function App() {
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<NavigationContainer>
<StripeProvider
publishableKey="pk_live_L4zEu37Als6Z..."
>
<AppTab />
</StripeProvider>
</NavigationContainer>
</PersistGate>
</Provider>
)
}
my package.json:
...
"expo": "~41.0.1",
"expo-status-bar": "~1.0.4",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
"react-native-web": "~0.13.12",
...
"#stripe/stripe-react-native": "^0.1.2",
....
I dont find anything on this problem can someone help me seeing what im doing wrong? thanks!
You'll need to update your Expo client, support for stripe-react-native was only added recently: https://github.com/stripe/stripe-react-native/issues/3#issuecomment-846225534
As I don't have enough reputation to comment, I'll have to post this as an answer. Extending Paul's solution, it's also helpful to checkout the "Upgrading your app" section of the Expo SDK 41 release blog post: https://blog.expo.io/expo-sdk-41-12cc5232f2ef#e10c.
Some key things to remember are that you will also need to upgrade the Expo apps on the devices you are using. If they are physical then use their respective app stores, and if not then you can can delete the apps and recreate them, or run expo client:install:ios and expo client:install:android. A final piece that helped me was to do a clean run after the upgrade: expo start -c.
Related
This is my app.js code
import React from 'react';
import {
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
Text,
useColorScheme,
View,
} from 'react-native';
import { createDrawerNavigator } from '#react-navigation/drawer';
import { NavigationContainer } from '#react-navigation/native';
import Home from './src/components/Home';
import Login from './src/components/Login';
const Drawer = createDrawerNavigator();
function App() {
return(
<NavigationContainer>
<Drawer.Navigator>
<Drawer.Screen name="Home" component={Home} />
<Drawer.Screen name="Login" component={Login} />
</Drawer.Navigator>
</NavigationContainer>
)
}
export default App;
This is my dependency package
"dependencies": {
"#react-navigation/bottom-tabs": "^6.2.0",
"#react-navigation/drawer": "^6.3.1",
"#react-navigation/native": "^6.0.8",
"#react-navigation/native-stack": "^6.5.1",
"react": "17.0.2",
"react-native": "^0.65.0",
"react-native-gesture-handler": "^1.10.3",
"react-native-reanimated": "^1.13.2"
},
Error
ERROR TypeError: null is not an object (evaluating '_ReanimatedModule.default.createNode')
ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
When i try to start react-native this error comes...
Please any one help me and rectify me
I was getting the same error.
Upgrading the react-native-reanimated version to react-native-reanimated#2.2.0 solved my issue
I used npm install react-native-reanimated#2.2.0, after uninstalling the previous version
I am using the Expo Managed React Native.
I am trying to use a drawer navigation and have followed the the React Navigation documentation here.
import React from 'react';
import { createDrawerNavigator } from '#react-navigation/drawer';
import { NavigationContainer } from '#react-navigation/native';
import HomeScreen from './src/screens/HomeScreen'
const Drawer = createDrawerNavigator();
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={HomeScreen} />
</Drawer.Navigator>
</NavigationContainer>
);
}
I run the expo start command and scan the QR code with my mobile phone.
When running, it throws this error and doesn't run at all. I have tried using a stack navigator and it works fine. Only when using the drawer navigator, the error shows up.
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export
your component from the file it's defined in, or you might have mixed up default and named imports.
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `DrawerNavigator`.
My dependencies are as follows
"dependencies": {
"#react-native-community/masked-view": "0.1.10",
"#react-navigation/drawer": "^6.0.0-next.21",
"#react-navigation/native": "^5.9.4",
"#react-navigation/stack": "^5.14.5",
"expo": "~42.0.1",
"expo-linear-gradient": "~9.2.0",
"expo-splash-screen": "~0.11.2",
"expo-status-bar": "~1.0.4",
"expo-updates": "~0.8.1",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "~0.63.4",
"react-native-gesture-handler": "~1.10.2",
"react-native-reanimated": "~2.2.0",
"react-native-safe-area-context": "3.2.0",
"react-native-screens": "~3.4.0",
"react-native-unimodules": "~0.14.5",
"react-native-web": "~0.13.12",
"react-native-webview": "11.6.2",
"react-native-youtube-iframe": "^2.1.0"
},
i had the same problem, i changed the version > 6... with :
1 (uninstall)-> npm uninstall #react-navigation/drawer
2 -> npm install #react-navigation/drawer#^5.x
that is it!
check your #react-navigation/drawer with #react-navigation/native
i am using #expo/vector-icons here is my package.json file
"dependencies": {
"#expo/vector-icons": "^4.1.1",
"color": "^1.0.3",
"expo": "^30.0.1",
"moment": "^2.22.2",
"react": "16.3.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-
30.0.0.tar.gz",
"react-native-extended-stylesheet": "^0.4.0" },
when i import #expo/vector-icon library in my component
import { Ionicons } from '#expo/vector-icons';
it gives error
The library comes by default so you don't need to install #expo/vector-icons.
You can just do this for example:
import { Ionicons } from '#expo/vector-icons';
and then you can use it like:
<Ionicons name="ios-pizza" color="red" size={200} />
FYI, this directory is helpful in finding different icons https://expo.github.io/vector-icons/
In your dependencies (package.json) remove #expo/vector-icons. They are included in the expo package and different versions of expo and expo/vector-icons can cause errors like this one.
From the official docs:
This library is installed by default on the template project that get
through expo init -- it is part of the expo package. It includes
popular icon sets and you can browse all of the icons using the
#expo/vector-icons directory.
Update 2021:
The official docs changed a bit, and instead of searching for icons in:
#expo/vector-icons directory
You can now search using:
icons.expo.fyi
This makes it far easier than before.
Go to 'https://icons.expo.fyi/' choose whatever you want, then import via copy, then use it.
import React from 'react'
import { Entypo } from '#expo/vector-icons';
import { View } from 'react-native';
export const Example = () => {
return(
<View>
<Entypo name="plus" size={24} color="black" />
</View>
)
}
Delete your node module folder and run expo init. And run the project
I am trying to get Font Awesome icons running my React Native application by following the instructions posted here. However, after completing the instructions, my simulator doesn't load the application and the command line gives me the following error:
error: bundling failed: Error: While trying to resolve module `#fortawesome/fontawesome-svg-core` from file `/Users/agaidis/Auto-ID-Lab/AudioApp/App.js`, the package `/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/#fortawesome/fontawesome-svg-core/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/#fortawesome/fontawesome-svg-core/index.js`. Indeed, none of these files exist:
* `/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/#fortawesome/fontawesome-svg-core/index.js(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)`
* `/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/#fortawesome/fontawesome-svg-core/index.js/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)`
at ResolutionRequest.resolveDependency (/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:92:15)
at DependencyGraph.resolveDependency (/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/node-haste/DependencyGraph.js:237:485)
at Object.resolve (/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/lib/transformHelpers.js:116:25)
at dependencies.map.result (/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:298:29)
at Array.map (<anonymous>)
at resolveDependencies (/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:294:16)
at /Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:159:33
at Generator.next (<anonymous>)
at step (/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:239:307)
at /Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:239:467
BUNDLE [ios, dev] ../../index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.
My code is as follows:
App.js
import React, {Component} from 'react';
import {AppRegistry} from 'react-native';
import MainApp from './src/components/MainApp';
import AudioExample from './src/components/AudioExample';
// For icons we use font awesome
import { library } from '#fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faStroopwafel } from '#fortawesome/free-solid-svg-icons';
library.add(faStroopwafel)
AppRegistry.registerComponent('audioApp', () => MainApp);
export default MainApp;
Relevant piece of LangPage.js:
import React from 'react'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import {View, Text, StyleSheet, Picker} from 'react-native'
import PropTypes from 'prop-types'
import Menu from './Menu'
class LangPage extends React.Component{
static propTypes = {
List: PropTypes.array.isRequired,
passFunc: PropTypes.func.isRequired,
}
render(){
return(
<View style={styles.container}>
<View style={styles.boxContainers}>
<FontAwesomeIcon icon="stroopwafel" />
<Text style={styles.header}>Select a Language</Text>
</View>
<View style={[styles.boxContainers, styles.menuBox]}>
<Menu givenL={this.props.List} selectFunc={this.props.passFunc}/>
</View>
</View>
)
}
}
For reference, I am using:
"#fortawesome/fontawesome-svg-core": "^1.2.0-14",
"#fortawesome/free-solid-svg-icons": "^5.1.0-11",
"#fortawesome/react-fontawesome": "0.1.0-11",
"i": "^0.3.6",
"npm": "^6.3.0",
"react": "16.4.1",
"react-native": "0.56.0"
Any thoughts on how I could fix this? Thanks!
Good morning,
I strongly recommend you to use the react-native-vectors-icons library instead of directly using fontAwesome. It may be why it doesn't work. For more informations, click here.
EDIT: You need to import the react-native-vector-icons in your dependencies. Go in your package.json file and type this line in the 'dependencies' section :
"react-native-vector-icons": "^4.5.0",
In your LangPage.js file, you will be able to import them like this :
import Icon from 'react-native-vector-icons/FontAwesome';
With that done, you will be able to display easily icons from font-awesome in your react native components, just like that :
<Icon
color={Colors.primaryBackground}
name={stroopwafel}
size={40}
/>
Hope it helped :)
Have a good day
William is on the right track for getting you where you want to be, however, there are a couple of things missing from his answer.
react-native-vector-icons needs to be linked, either by running
react-native link react-native-vector-icons
or by following the manual linking example in the README.
You can check if linking has worked correctly by checking the following files;
Android:
android/app/src/main/java/.../MainApplication.java
android/settings.gradle
android/app/build.gradle
iOS:
ios/<APP_NAME>/Info.plist
ios/<APP_NAME>/<APP_NAME>.xcodeproj/project.pbxproj
I may have missed some files, but these should be the main ones.
If you have used react-native-create-app and have an expo project that hasn't been ejected yet, then I would recommend using the expo vector-icons package.
Hope this helps.
just:
npm i --save #fortawesome/react-native-fontawesome
remove the libraries
"react-native-linear-gradient": "^2.5.6",
"react-native-vector-icons": "^4.5.0",
and then Reload (cmd+R) the app
I am getting the following error when attempting to switch to another tab via TabViewAnimated in my React Native app.
I have two sub-components and Provider is used as follows:
render() {
const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
return (
<Provider store={store}>
<TabViewAnimated
style={styles.container}
navigationState={this.state}
renderScene={this._renderScene}
renderHeader={this._renderHeader}
onRequestChangeTab={this._handleChangeTab}
/>
</Provider>
);
}
The first sub-component has access to the state tree via props, but when loading the second sub-component I get the error.
My dependencies are as follows:
"react": "16.0.0-alpha.6",
"react-native": "^0.44.0",
"react-native-tab-view": "0.0.66",
"react-redux": "^5.0.5",
"redux": "^3.6.0",
"redux-thunk": "^2.2.0"
Any advice is appreciated!
The problem is that every time render is called a new store instance is created, which causes this error.
You can solve this by instantiating your store in a place where it will happen only once, usually at the entry point of your application or in a separate file that exports it:
// store.js
export default createStore(reducers, {}, applyMiddleware(ReduxThunk));
and
// App.js
import { store } from './store'
...
render() {
<Provider store={ store }> ... </Provider>
}
...
Hope this helps!