We Keep Coding

Component cannot be used as a JSX component in React

The build is normal in other environments, but the following error occurs in my environment.
src/components/popup/CellInfoPopup.tsx:61:24 - error TS2786: 'NumberFormat' cannot be used as a JSX component.
Its instance type 'NumberFormat<unknown>' is not a valid JSX element.
61 <dd><NumberFormat value={meta.price} prefix="₩" thousandSeparator={true} displayType="text"/></dd>
~~~~~~~~~~~~
src/components/popup/InvitationPopup.tsx:49:20 - error TS2786: 'CopyToClipboard' cannot be used as a JSX component.
Its instance type 'CopyToClipboard' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("/Users/ksh/node_modules/#types/react/index").ReactNode'.
49 <CopyToClipboard
~~~~~~~~~~~~~~~
My settings.
OS : (ARM)MacOS Ventura 13.1
TypeScript : 4.9.4
Node : v18.13.0
npm : 8.19.3
yarn : 1.22.19
My package.json
{
"name": "my-web-service",
"version": "2.8.2",
"scripts": {
"dev": "vite",
"build": "tsc && vite build"
},
"dependencies": {
"#emotion/react": "^11.8.2",
"#react-oauth/google": "^0.5.1",
"#types/lodash": "^4.14.178",
"#types/navermaps": "^3.0.13",
"#types/uuid": "^9.0.0",
"axios": "^0.24.0",
"dayjs": "^1.10.7",
"ga-gtag": "^1.1.1",
"lodash": "^4.17.21",
"next": "12.1.6",
"qs": "^6.10.2",
"rc-pagination": "^3.1.14",
"react": "^17.0.2",
"react-copy-to-clipboard": "^5.0.4",
"react-dom": "^17.0.2",
"react-lottie-player": "^1.4.1",
"react-naver-maps": "^0.0.11",
"react-number-format": "^4.9.1",
"react-popup-manager": "^2.1.3",
"react-query": "^3.34.0",
"usehooks-ts": "^2.9.1",
"uuid": "^9.0.0",
"vite-plugin-html": "^3.0.6",
"wouter": "^2.8.0-alpha.2",
"zustand": "^3.6.7"
},
"devDependencies": {
"#emotion/babel-plugin": "^11.7.2",
"#types/node": "^18.11.18",
"#types/qs": "^6.9.7",
"#types/react": "^17.0.33",
"#types/react-copy-to-clipboard": "^5.0.2",
"#types/react-dom": "^17.0.10",
"#types/uuid": "^9.0.0",
"#vitejs/plugin-react": "^1.0.7",
"typescript": "^4.4.4",
"vite": "^2.7.0"
}
}
Even if Node, Npm, and yarn are all reinstalled, the same error occurs.
Which part is the problem?

React components needs to return a single root element, I have a hunch your NumberFormat & CopyToClipboard components have a malformed return statement.
Ensure your components are not mapping elements like this
function NumberFormat({ items }): JSX.Element {
return items.map(item => (
<>
<li>{item.text}</li>
</>
)
}
but rather return a single element, like so:
function NumberFormat({ items }): JSX.Element {
return <>{
items.map(item => <li>{item.text}</li>)
}</>
}

this error is usually caused by one of these 2 factors :
Your component is an array of jsx elements instead of one element
Returning a value other than a jsx element or null.
if it's not one of these two, and I believe it's not, because you said the build is normal in other environments then try to update your react typings :
npm :
npm install --save-dev #types/react#latest #types/react-dom#latest`
yarn :
yarn add #types/react#latest #types/react-dom#latest --dev
If you also want to update react and react-dom :
npm :
npm install react#latest react-dom#latest
yarn :
yarn add react#latest react-dom#latest
If the problem still occurs then try to delete node_modules and package-lock.json and run npm install

kendo-chart-tooltip generating script error Uncaught TypeError: background.isDark is not a function

enter image description hereI have created a kendo chart with a kendo-chart-tooltip.
Platform Angular 5
However the kendo-chart-tooltip is not working and generating a script error in the console.
zone.js:192 Uncaught TypeError: background.isDark is not a function
at Tooltip.show (base-tooltip.js:51)
at Tooltip.show (tooltip.js:24)
at Chart._displayTooltip (chart.js:1085)
at Chart._startHover (chart.js:1061)
at Chart._mouseover (chart.js:1231)
at Surface.trigger (observable.js:94)
at HTMLDivElement.eval (surface.js:135)
at ZoneDelegate.invokeTask (zone.js:421)
at Zone.runTask (zone.js:188)
at ZoneTask.invokeTask [as invoke] (zone.js:496)
Tried many ways to solve this but fails.
This is my claim-summary.component.html component.ts file template snippet
<div class="row" id="claim-summary-chart">
<div class="loading-image" *ngIf="loadingData"></div>
<div class="col-md-24">
<div class="report-sub-title">{{policyNoAndInsuredText}} <span class="pannable_msg">{{pannableMsg}}</span>
</div>
<kendo-chart [legend]="chartOptions.legend"
[seriesDefaults]="chartOptions.seriesDefaults"
[valueAxis]="chartOptions.valueAxis"
[categoryAxis]="chartOptions.categoryAxis"
[plotArea]="chartOptions.plotArea"
[pannable]="true">
<kendo-chart-tooltip>
<ng-template kendoChartSeriesTooltipTemplate let-value="value" let-series="series">
<span *ngIf="series.field.includes('Count')">{{series.name}} : {{value}}</span>
<span *ngIf="!series.field.includes('Count')">{{series.name}}
: {{intl.formatNumber(value, "c")}}</span>
</ng-template>
</kendo-chart-tooltip>
<kendo-chart-series>
<kendo-chart-series-item
*ngFor="let s of chartOptions.series"
[data]="chartData"
[name]="s.name"
[field]="s.field"
[type]="s.type"
[axis]="s.axis"
[categoryField]="chartOptions.categoryAxis.field"
[color]="s.color">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
</div>
If I remove the .. there is no script errror.
This Below is the component.ts file snippet
import {Component, OnInit, ViewChild, ViewEncapsulation} from '#angular/core';
import {DataStateChangeEvent, GridComponent, GridDataResult, RowClassArgs} from "#progress/kendo-angular-grid";
import {IntlService} from "#progress/kendo-angular-intl";
import {groupBy, orderBy, process, State} from "#progress/kendo-data-query";
import {AppConfig} from "../../shared/app-config";
import {CommUtils} from "../../shared/comm-utils";
import {DataSourceService} from "../../shared/data-source-service";
import {BarchartMode, Filter, FilterService, Report, reportList, ReportName} from "../../shared/filter-service";
import {reportOptions} from "../../shared/report-options";
import {PdfDataService} from "../pdf-export/pdf-data-service";
import {ReportParametersPanel} from "../report-parameters-panel";
const initState: State = {
skip: 0,
take: 10
};
const totalClaimIncurredSeriesTitle: String = "Total Claims Incurred ($)";
const avgClaimIncurredSeriesTitle: String = "Average Claims Incurred ($)";
let lastRowPeriod: string = null; // year period of last row
#Component({
selector: 'claim-summary',
templateUrl: './claim-summary.component.html',
styles: [`
.footerColumn {
color: #767676;
}
`],
encapsulation: ViewEncapsulation.None
})
export class ClaimSummaryReportComponent implements OnInit {
Snippet from package.json
"#progress/kendo-angular-charts": "3.9.1",
"#progress/kendo-angular-dateinputs": "2.0.0",
"#progress/kendo-angular-dialog": "3.1.2",
"#progress/kendo-angular-dropdowns": "2.0.0",
"#progress/kendo-angular-excel-export": "1.0.5",
"#progress/kendo-angular-grid": "2.1.0",
"#progress/kendo-angular-inputs": "2.0.0",
"#progress/kendo-angular-intl": "^1.4.0",
"#progress/kendo-angular-l10n": "^1.1.0",
"#progress/kendo-angular-layout": "2.0.0",
"#progress/kendo-angular-pdf-export": "1.0.2",
"#progress/kendo-angular-popup": "^2.1.0",
"#progress/kendo-data-query": "1.1.2",
"#progress/kendo-drawing": "1.4.1",
"#progress/kendo-theme-bootstrap": "2.11.0",
"#progress/kendo-ui": "2017.2.621",

I solved this problem by updating the package #progress/kendo-drawing to version 1.16.1. Old version has no method isDark

When vue template components are generated dynamically, "v-rating" is not recognized

I made a Vue template component that draws a "v-rating" on a card.
And, registed this component in "App.vue" and write the "CardTest" tag, the "v-rating" was displayed correctly.
card-test.vue
<template>
<v-card
tile
class="grey"
width=400
height=400
>
<v-card-text>
{{title}}
</v-card-text>
<v-rating
v-model="rating"
color="yellow darken-3"
background-color="grey darken-1"
empty-icon="$ratingFull"
half-increments
hover
large
></v-rating>
</v-card>
</template>
<script>
export default {
data: () => ({
title: 'default',
rating: 4.5,
}),
}
</script>
App.vue
<template>
<v-app>
<v-main>
<v-layout>
<CardTest/> <--
</v-layout>
</v-main>
</v-app>
</template>
<script>
import CardTest from './components/card-test';
export default {
name: 'App',
components: {
CardTest, <--
},
data: () => ({
}),
};
</script>
However, when this component is dynamically generated and appended, the card is displayed, but "v-rating" is not displayed and an error is output
App.vue
~~~~~
<script>
import Vue from 'vue'
import CardTest from './components/card-test';
export default {
name: 'App',
components: {
CardTest,
},
data: () => ({
}),
mounted() {
var CardComponent = Vue.extend( CardTest );
var instance = new CardComponent({
data: {
title: 'append test',
},
});
instance.$mount();
document.getElementById('app').appendChild(instance.$el);
},
};
</script>
error msg
vue.runtime.esm.js:619 [Vue warn]: Error in render: "TypeError: Cannot read property 't' of undefined" warn # vue.runtime.esm.js:619
found in
---> <VRating>
<VCard>
<Root>
TypeError: Cannot read property 't' of undefined vue.runtime.esm.js:1888
at VueComponent.genItem (vuetify.js:22638)
at vuetify.js:22650
at Array.map (<anonymous>)
at Proxy.render (vuetify.js:22649)
at VueComponent.Vue._render (vue.runtime.esm.js:3548)
at VueComponent.updateComponent (vue.runtime.esm.js:4066)
at Watcher.get (vue.runtime.esm.js:4479)
at new Watcher (vue.runtime.esm.js:4468)
at mountComponent (vue.runtime.esm.js:4073)
at VueComponent.push../node_modules/vue/dist/vue.runtime.esm.js.Vue.$mount
(vue.runtime.esm.js:8415)
The "v-card", "v-img", "v-btn" in "card-test.vue" are displayed correctly, so vuetify is loaded correctly.
However, as far as I can confirm, "v-rating" and "v-icon" are not recognized in dynamically generated templates.
Is there something wrong with the way my component is registered?
Or issue of vuetify?
Please give me some advice.
my environment
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"electron": "^11.0.0",
"electron-devtools-installer": "^3.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"node-sass": "^5.0.0",
"sass-loader": "^10.1.1",
"vue-cli-plugin-electron-builder": "~2.0.0-rc.6",
"vue-cli-plugin-vuetify": "~2.1.0",
"vue-template-compiler": "^2.6.11"
},

It seems $vuetify is not defined on the dynamically generated component. A workaround is to set it before mounting:
instance.$vuetify = this.$vuetify;
instance.$mount();
demo

Hooks can only be called inside of the body of a function component. useState is not working

I have a GatsbyJS project and I am trying to use a Hook, however I am getting this error.
First thing I did was delete the node_modules folder and the package.json.lock file and did npm install again, did not work.
Looking at the React documentation:-
You might have mismatching versions of React and React DOM.
As far as I know I do not have mismatching versions.
You might be breaking the Rules of Hooks. - As far as I am aware I am using a component
You might have more than one copy of React in the same app.
I tried as the React documentation suggests:-
// Add this in node_modules/react-dom/index.js
window.React1 = require('react');
// Add this in your component file
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2);
This returns false for me so I might have two React however I cannot understand how.
This is my package.json file
{
"name": "gatsby-starter-hello-world",
"private": true,
"description": "A simplified bare-bones starter for Gatsby",
"version": "0.1.0",
"license": "MIT",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"dependencies": {
"gatsby": "^2.21.0",
"gatsby-image": "^2.4.0",
"gatsby-plugin-prefetch-google-fonts": "^1.4.3",
"gatsby-plugin-react-helmet": "^3.3.1",
"gatsby-plugin-sharp": "^2.6.0",
"gatsby-plugin-sitemap": "^2.4.2",
"gatsby-source-filesystem": "^2.3.0",
"gatsby-source-strapi": "0.0.12",
"gatsby-transformer-sharp": "^2.5.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-helmet": "^6.0.0",
"react-icons": "^3.10.0",
"react-markdown": "^4.3.1"
},
"devDependencies": {
"prettier": "2.0.5"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}
My component looks like this (just want to verify that the useState works):-
import React, {useState} from "react"
import { graphql, useStaticQuery } from "gatsby"
const query = graphql`
{
allStrapiExperiences(sort: {fields: sequence, order: DESC}) {
nodes {
company
job_title
short_desc
website
address
desc {
id
name
}
job_date
sequence
snapshot {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
}
}
`
const Experiences = () => {
const data = useStaticQuery(query);
const { allStrapiExperiences: {nodes : experiences} } = data;
const [value, setValue] = useState(0)
// const { company, jobt_title, short_desc, website, address, desc, job_date, sequence, snapshot } = experiences[value]
return (
<div>Some details go here</div>
)
}
export default Experiences
And I am calling this component in the experience.js page:-
import React from "react"
import Experiences from "../components/Experiences/Experiences"
import Layout from "../components/Generic/Layout"
export default () => {
return (
<Layout>
<Experiences />
</Layout>
)
}
I have looked at some posts online, and did some troubleshooting but so far I cannot understand why I am having this problem.
Any ideas why I might be getting this error?
Thanks for your help and time
UPDATE
Just a small update on this, I could not solve the issue, so i took the unwanted route but I thing the best one at the moment to start with the basic blog starter project and start building up from that. Infact, the hooks do work in this project, so I guess I have some mess with dependencies but I cannot figure out what is wrong.

This might seem weird, but can you move your query definition into the call to useStaticQuery? Gatsby uses static analysis to extract these and historically there have been some issues defining a query and assigning it to a variable in this way. For example:
const Experiences = () => {
const data = useStaticQuery(graphql`
{
allStrapiExperiences(sort: {fields: sequence, order: DESC}) {
...
}
}
`);
}
To ensure you don't have multiple versions of React being used, you can try this:
exports.onCreateWebpackConfig = ({ stage, actions }) => {
actions.setWebpackConfig({
resolve: {
// Ensure all dependencies use the same instance of React
alias: { react: path.resolve("./node_modules/react") },
},
})
}

React-native app is being restarted on every navigation when integrated with native app

We're trying to integrate a new React Native app to an existing native Android app. Following the RN official docs we managed to get it working but with some issues regarding the navigation.
We've native and non-native (JS) screens, and we need a good way to navigate between all screens regardless if a screen is native or not.
We tried to adopt native-navigation and react-native-navigation to see if any address our issue but none of them actually worked.
Currently, we have registered all our RN screens like this:
const provide = (store, Screen) => {
return props => (
<Provider store={store}>
<Screen {...props} />
</Provider>
);
};
const store = configureStore();
AppRegistry.registerComponent('Home', () => provide(store, HomeComponent));
We also created a Native Module we call "Navigator" that has navigation method called openComponent that accepts screen name and its props. Here is how the implementation of openComponent looks:
// our native module code ...
#ReactMethod
public void openComponent(String name, String extra) {
try {
Intent intent = new Intent(this.getReactApplicationContext(), MyReactActivity.class);
intent.putExtra("moduleName", name);
intent.putExtra("extra", extra);
getCurrentActivity().startActivityForResult(intent, 0);
}
catch (Exception e) {
e.printStackTrace();
Crashlytics.logException(e.getCause());
}
}
Then whenever we want to navigate on the RN side we simply call our custom navigator with the target screen props.
The problem with the current approach is that the RN part is being restarted whenever we navigate to RN-based screens which causes the Redux store to be empty.
Here how our "onCreate" method looks like for our ReactActivity.java class:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Bundle initialProperties = new Bundle();
initialProperties.putString("loginToken", HJSession.getSession().getSessionId());
initialProperties.putString("username", HJSession.getSession().getUserName());
initialProperties.putString("userId", HJSession.getSession().getUserId().toString());
String moduleName = "topics";
Bundle bundle = getIntent().getExtras();
if (bundle != null) {
moduleName = bundle.getString("moduleName");
try {
String extra = bundle.getString("extra");
initialProperties.putString("extra", extra);
}
catch (Exception e) {
e.printStackTrace();
Crashlytics.logException(e.getCause());
}
}
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setJSMainModulePath("index")
.addPackages(Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RNFirebasePackage(),
new RNFirebaseMessagingPackage(),
new RNFirebaseNotificationsPackage(),
new RNI18nPackage(),
new VectorIconsPackage(),
new HJRNPackages(),
new NativeNavigationPackage()
))
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, moduleName, initialProperties);
setContentView(mReactRootView);
}

Actually, for your question case, you should upload a little tiny scale of your project that has this issue on Gitlab or Github and put its link here, Hence we could help better.
Indeed, I'm a JavaScript, React, React Native developer and I cannot help anybody in the native side, But definitely, I believe you and your colleagues choose the wrong way for your application.
React Native is an unstable JavaScript project that has unstable native codes that are changing in time, so you should write all of your features just by using JavaScript. Just like Sophie Albert said in this article, They wanna make a big break change to React Native, So, It is better all of the codes to be written in JavaScript not native (Java, Objective C).
At first, I believe your choosing on react-native-navigation was wrong. Why you do not use react-navigation?
Because 99.7% of react-navigation based on JavaScript and changing native sides by Facebook teams, do not affect your project and development and debugging is very easy. absolutely, you can use every trend library like Redux, because of your project based on JavaScript.
My colleagues and I are developing a large scale React Native application for Sheypoor, except the splash screen all of the app based on JavaScript and in our inputs tests we didn't get even one crash or error or unwanted restart.
If it is possible for you, roll back your navigation to a full JavaScript navigation library like react-navigation which we chose. If you uploaded a reproduction repository I could help you better than this situation. but I put some of our code structure to help you for roll back to react-navigation:
The index.js of our project:
import { AppRegistry } from 'react-native';
import App from './app/App';
import { name as appName } from './app.json';
AppRegistry.registerComponent(appName, () => App);
The root file of our app, the App.js file:
import React from 'react';
import { Provider } from 'react-redux';
import RootNavigation from './RootNavigation';
import { onNavigationStateChange } from './utils/routes';
import configureStore from './redux/configureStore';
const store = configureStore();
const App = () => (
<Provider store={store}>
<RootNavigation onNavigationStateChange={onNavigationStateChange} />
</Provider>
);
export default App;
The RootNavigation.js file, but it is for our earlier commits not now. I don't put the newer version because of its complexities:
import { createSwitchNavigator } from 'react-navigation';
import { Loading, Dashboard, SignInStack, ListingManagement } from './screens';
const RootNavigation = createSwitchNavigator(
{
Loading,
SignInStack,
Dashboard,
ListingManagement
},
{
initialRouteName: 'SignInStack'
}
);
export default RootNavigation;
And at last, the earlier version of package.json:
{
"name": "sheypoor",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"android": "npx react-native run-android",
"ios": "npx react-native run-ios",
"physical-android": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res",
"test": "jest",
"eslint": "eslint .",
"clean": "react-native-clean-project",
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.js": [
"eslint --fix ."
]
},
"dependencies": {
"formik": "^1.3.0",
"lint-staged": "^7.3.0",
"prop-types": "^15.6.2",
"react": "16.5.0",
"react-native": "0.57.1",
"react-native-confirmation-code-field": "^1.2.2",
"react-native-vector-icons": "^5.0.0",
"react-navigation": "^2.16.0",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"yup": "^0.26.6"
},
"devDependencies": {
"babel-eslint": "^9.0.0",
"babel-jest": "23.6.0",
"babel-plugin-module-resolver": "^3.1.1",
"babel-plugin-root-import": "^6.1.0",
"eslint": "^5.5.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-prettier": "^3.0.1",
"eslint-import-resolver-babel-plugin-root-import": "^1.1.1",
"eslint-plugin-flowtype": "^2.50.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.1",
"eslint-plugin-prettier": "^2.6.2",
"eslint-plugin-react": "^7.11.1",
"eslint-plugin-react-native": "^3.3.0",
"eslint-plugin-sort-imports-es6-autofix": "^0.3.0",
"flow-bin": "^0.78.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.45.6",
"prettier": "^1.14.3",
"react-native-clean-project": "^3.0.0",
"react-native-config": "^0.11.5",
"react-test-renderer": "16.5.0",
"redux-devtools-extension": "^2.13.5"
},
"jest": {
"preset": "react-native"
},
"rnpm": {
"assets": [
"./app/assets/fonts"
]
}
}
With these codes and configurations, we didn't give even one error.

In the ReactActivity.java one can check for Bundle savedInstanceState
... in order to control when the React application is being instanced:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
/* it's always NULL on first run */
if (savedInstanceState == null) {
Bundle initialProperties = new Bundle();
initialProperties.putString("loginToken", HJSession.getSession().getSessionId());
initialProperties.putString("username", HJSession.getSession().getUserName());
initialProperties.putString("userId", HJSession.getSession().getUserId().toString());
String moduleName = "topics";
Bundle bundle = getIntent().getExtras();
if (bundle != null) {
moduleName = bundle.getString("moduleName");
try {
String extra = bundle.getString("extra");
initialProperties.putString("extra", extra);
} catch (Exception e) {
Crashlytics.logException(e.getMessage());
Log.e("ReactActivity", e.getMessage());
}
}
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setJSMainModulePath("index")
.addPackages(Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RNFirebasePackage(),
new RNFirebaseMessagingPackage(),
new RNFirebaseNotificationsPackage(),
new RNI18nPackage(),
new VectorIconsPackage(),
new HJRNPackages(),
new NativeNavigationPackage()
))
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, moduleName, initialProperties);
setContentView(mReactRootView);
}
}