I am using NativeBase with my ReactNative App.
It is running ok.
However there is a warning that is bugging me a little bit.
How do I fix the warning below?
When server rendering, you must wrap your application in an
to ensure consistent ids are generated between the
client and server.
FormControl#http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.wenyang.DanceConnectyCube:162364:111
RCTView View
First install this package
npm i #react-aria/ssr or yarn add #react-aria/ssr
Then import it into your App.js
import {SSRProvider} from '#react-aria/ssr';
Then do this
const App = () => {
return (
<SSRProvider>
<NativeBaseProvider>
<App />
</NativeBaseProvider>
</SSRProvider>
);
};
Related
Im working with React Native and using Expo. When I open the console from the browser I see that the app is using ReactDOM.render instead of createRoot to display the app. I wonder how can I change it from index.js or what can I do?
Thanks in advance.
Screenshot
You need to make some changes in you index.js (if you have not changed the name) search for the latest syntax of react and there you will find what is wrong.
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
if you have like this,
make it like this
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
I am attempting to integrate Stripe into a React Native project that was built from this ignite template. Everything has been great up to this point. I am following the stripe SDK docs. When I import and wrap my navigator with <StripeProvider /> in app.tsx an error gets thrown:
error: Error: Unable to resolve module ../../package.json from /Users/matthew/Desktop/less/less-app/node_modules/#stripe/stripe-react-native/lib/commonjs/components/StripeProvider.js:
None of these files exist:
* node_modules/#stripe/stripe-react-native/lib/package.json(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.cjs|.native.cjs|.cjs)
* node_modules/#stripe/stripe-react-native/lib/package.json/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.cjs|.native.cjs|.cjs)
> 1 | var _interopRequireDefault=require("#babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.StripeProvider=StripeProvider;exports.initStripe=void 0;var _regenerator=_interopRequireDefault(require("#babel/runtime/regenerator"));var _extends2=_interopRequireDefault(require("#babel/runtime/helpers/extends"));var _react=_interopRequireWildcard(require("react"));var _NativeStripeSdk=_interopRequireDefault(require("../NativeStripeSdk"));var _helpers=require("../helpers");var _package=_interopRequireDefault(require("../../package.json"));function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var EXPO_PARTNER_ID='pp_partner_JBN7LkABco2yUu';var repository=_package.default.repository;var appInfo={name:(0,_helpers.shouldAttributeExpo)()?_package.default.name+"/expo":_package.default.name,url:repository.url||repository,version:_package.default.version,partnerId:(0,_helpers.shouldAttributeExpo)()?EXPO_PARTNER_ID:undefined};var initStripe=function _callee(params){var extendedParams;return _regenerator.default.async(function _callee$(_context){while(1){switch(_context.prev=_context.next){case 0:extendedParams=(0,_extends2.default)({},params,{appInfo:appInfo});_NativeStripeSdk.default.initialise(extendedParams);case 2:case"end":return _context.stop();}}},null,null,null,Promise);};exports.initStripe=initStripe;function StripeProvider(_ref){var children=_ref.children,publishableKey=_ref.publishableKey,merchantIdentifier=_ref.merchantIdentifier,threeDSecureParams=_ref.threeDSecureParams,stripeAccountId=_ref.stripeAccountId,urlScheme=_ref.urlScheme,setUrlSchemeOnAndroid=_ref.setUrlSchemeOnAndroid;(0,_react.useEffect)(function(){if(!publishableKey){return;}if(_helpers.isAndroid){_NativeStripeSdk.default.initialise({publishableKey:publishableKey,appInfo:appInfo,stripeAccountId:stripeAccountId,threeDSecureParams:threeDSecureParams,urlScheme:urlScheme,setUrlSchemeOnAndroid:setUrlSchemeOnAndroid});}else{_NativeStripeSdk.default.initialise({publishableKey:publishableKey,appInfo:appInfo,stripeAccountId:stripeAccountId,threeDSecureParams:threeDSecureParams,merchantIdentifier:merchantIdentifier,urlScheme:urlScheme});}},[publishableKey,merchantIdentifier,stripeAccountId,threeDSecureParams,urlScheme,setUrlSchemeOnAndroid]);return _react.default.createElement(_react.default.Fragment,null,children);}
My import statement in app.tsx
import { initStripe, StripeProvider } from "#stripe/stripe-react-native"
<ToggleStorybook>
<ApolloProvider client={client}>
<RootStoreProvider value={rootStore}>
<SafeAreaProvider initialMetrics={initialWindowMetrics}>
<ErrorBoundary catchErrors={"always"}>
<StripeProvider publishableKey="pk_test_testID">
<AppNavigator
initialState={initialNavigationState}
onStateChange={onNavigationStateChange}
/>
</StripeProvider>
</ErrorBoundary>
</SafeAreaProvider>
</RootStoreProvider>
</ApolloProvider>
</ToggleStorybook>
I found this thread but the suggested fix did not work, when I try and start the app with yarn start --reset-cache I get an err error Cannot read property 'getDefaultValues' of undefined. I have also tried the initStripe method to the same end. Here is my metro.config.js file:
const { getDefaultConfig } = require("metro-config")
const { resolver: defaultResolver } = getDefaultConfig.getDefaultValues()
exports.resolver = {
...defaultResolver,
sourceExts: [...defaultResolver.sourceExts, "cjs"],
}
There isn't much more out there that I could find on the issue. Any suggestions would be greatly appreciated.
Go to the file:
/node_modules/#stripe/stripe-react-native/lib/commonjs/components/StripeProvider.js
and modify the import from '../../package.json' to '../../../package.json'.
It's not a solution but a workaround.
Just a reminder that every time you re/install your npms the error will be back .
I have a Expo project to which I added victory-native library. When building for the web, Webpack complains about missing loader. The errors are of this pattern below and appear for all the files from this particular library
./node_modules/victory-native/src/components/victory-clip-container.js 10:22
Module parse failed: Unexpected token (10:22)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| export default class extends VictoryClipContainer {
> static defaultProps = Object.assign({}, VictoryClipContainer.defaultProps, {
| groupComponent: <G />,
| rectComponent: <Rect />,
How do I add the correct loader? Do I add something to the babel config? Or should I override the webpack configuration?
Babel is currently using only babel-preset-expo
As stated by Michael, native and web code can be differentiated using the naming in the files.
A simple complete solution is:
victory.js:
import * as Victory from 'victory';
export default Victory;
victory.native.js:
import * as Victory from 'victory-native';
export default Victory;
And when you want to use the victory:
import Victory from "./victory"; // this will default to victory.js or victory.native.js
// depending on the compilation target platform.
const VictoryBar = Victory.VictoryBar;
const VictoryChart = Victory.VictoryChart;
const VictoryTheme = Victory.VictoryTheme;
...
{
...
return <View style={styles.container}>
<VictoryChart width={350} theme={VictoryTheme.material}>
<VictoryBar data={data} x="quarter" y="earnings" />
</VictoryChart>
</View>
}
Whilst using victory-native in Expo apps that target iOS & Android is fully supported, we do not support building for the web with victory-native.
However, as both victory-native and victory share the same public API, it's possible to configure your Expo project to automatically use victory-native when building your native apps for iOS & Android, and victory when building your web app.
yarn add -D #expo/webpack-config
Then, create a webpack.config.js file at the root of your Expo project
const createExpoWebpackConfigAsync = require('#expo/webpack-config');
module.exports = async function(env, argv) {
const config = await createExpoWebpackConfigAsync(env, argv);
// resolve victory-native as victory for the Web app
config.resolve.alias['victory-native'] = 'victory';
return config;
};
Refered from the official documentation .
You cannot use victory-native imports for web and you cannot use victory import for react native.
I solved the issue by creating an file named victory.native.ts and victory.ts which containing all necessary imports.
victory.native.ts:
import * as Victory from 'victory-native'
victory.ts:
import * as Victory from 'victory'
Now you can import victory.ts in web and app.
I am using the package react-native-coreml and running into this error at startup.
My intention is to use this package to use a CoreML package in my react native app. I am running this within EXPO if that makes any difference.
I can't even run the app. These two errors are together.
Unable to start your application. Please refer to https://expo.fyi/no-registered-application for more information.
and
TypeError: null is not an object (evaluating 'RNCoreML.mainBundlePath')
- node_modules/react-native/Libraries/LogBox/LogBox.js:148:8 in registerError
Obviously the first error isn't useful, just including for thoroughness.
My implementation is as follows:
import React, { useState } from 'react'
import { StyleSheet, Text, View } from 'react-native'
import FaceScanner from './FaceScanner';
import { classifyImage } from "react-native-coreml";
const Onboarding = () => {
const [imageURL, setImageURL] = useState('');
const [tested, setTested] = useState(false);
console.log(imageURL)
if (imageURL !== '' && !tested) {
async () => {
// const { label, confidence } = await classifyImage(imageURL, './model.mlmodelc')
setTested(true);
console.log("The image is a " + label + ". I think. ")
}
}
...
edit I have ejected from expo as per a comment's suggestion. I am now encountering these errors.
BUNDLE ./index.js
ERROR TypeError: null is not an object (evaluating 'RNCoreML.mainBundlePath')
LOG Running "main" with {"rootTag":1,"initialProps":{}}
ERROR Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.
react-native-coreml is a library with native extensions that do not work in the expo managed workflow currently. you can read about the managed workflow limitations in the expo docs.
if you'd like to use it, run expo eject and build the project in xcode
I'm trying to test my app using jest but encountered an error "You attempted to use a firebase module that's not installed on your Android project by calling firebase.app()". Below is my code
import firebase from '#react-native-firebase/app';
test('renders correctly', () => {
Platform.OS = 'android';
firebase.initializeApp({//credentials hidden
});
const _firestore = firebase.firestore();
const personStore = new PersonStore(_firestore);
const app = renderer
.create(
<Provider {...personStore}>
<PersonInfo />
</Provider>,
)
.getInstance();
});
What am I missing?
I've tried this solution https://rnfirebase.io/install-android but to no avail
And #react-native-firebase/app is working if I'm not in test mode
Try the getting started steps: Getting Started
The solution you tried is a secondary step.
Also firebase is segmented in modules, so you should install the required modules separated. if you are going to use the firestore you have to install the module.
Firestore Module
for me the problem was with mismatch in the package name of the app throughout the project (I started out with a MyApp project and then changed the name but not in all the necessary places).
I then followed these steps to rename everything and it started working