How do I use other React Native libraries etc...in a ReactXP project?

[MartinOrtiz]

I'm new to a lot of stuff, I have been playing with ReactXP and like it a lot...

In general, let's say I have a "pure" React Native folder/project....

In order to use a library for RN, I would do something like this
npm i react-native-elements --save

But if I do the same for a ReactXP project, it will install the library folder inside node-modules folder.
But when I try to use it I get a whole bunch of typescript compile errors when I compile the typescript file that imports the npm-ed library.

Is there a procedure that I need to use or go throught, to be able to use "regular" React-Native libraries/kits?

[MartinOrtiz]

(this is just an example of what I'm talking about...so non-essential stuff might not be included in discussion)

Let's say I am playing around with the Hellow-World ReactXP project.
I see a library, but one designed for plain vanilla React-Native project, let's say it's this one
react-native-elements
https://github.com/react-native-training/react-native-elements

It says to use npm to install it
npm i react-native-elements --save

The folder gets installed in the node-modules folder

To use, I add the import to the tsx file, and use it...

1. import { Button } from 'react-native-elements';
2. <Button>...... </Button>

Now when this tsx file is compiled I get a ton of errors....these errors are just from the import statement alone, as I have not gone on to step #2 yet.....

Now, this issue is not just with this library, but any "regular" React-Native library that I try.
How do I proceed?

[erictraut]

What errors are you seeing? Does it say "node_modules/react-native-elements/src/index.d.ts(28,8): error TS7016:... implicitly has an 'any' type"?

Some packages (including, apparently, react-native-elements) don't specify a dependency on the type definition for react-native. You can add the missing dependency in your own package.json file. A type file isn't provided with react-native, so you need to add it separately (@types/react-native).

If you don't want to add the react-native type file, you can eliminate the error by disabling the TypeScript "noImplicitAny" setting in tsconfig.json.

[MartinOrtiz]

ilt]
[353] ./~/reactxp/dist/web/WebView.js 5.68 kB {0} [built]
[362] ./src/index.tsx 230 bytes {0} [built]
+ 348 hidden modules

ERROR in [at-loader] ./node_modules/react-native-elements/src/index.d.ts:28:8
TS7016: Could not find a declaration file for module 'react-native'. 'C:/ReactXP/NavPractice/node_modules/react-native/Libraries/react-native/react-native-implementation.js' implicitly has an 'any' type.
Try npm install @types/react-native if it exists or add a new declaration (.d.ts) file containing declare module 'react-native';

[MartinOrtiz]

I tried your second suggestion, re "noImplicitAny", which got rid of the compile error on the import statement, but when I added this line..

<Button title={Welcome to\nReact Native Elements} onPress={ this._onPressNavigate }></Button>

I got a bunch of "can't resolve" various RN elements, or "module not found" errors (a ton of them)

Can you explain more on how to do your first solution?

You can add the missing dependency in your own package.json file. A type file isn't provided with react-native, so you need to add it separately ().

[MartinOrtiz]

Just a quicky question, how do I resolve name clashing?
Like if a library has "Button" and your library also has "Button", what is do I do to mitigate the name clashing issue? (in C# we can use alias to deal with name clashing, or namespaces)

[erictraut]

The react-native type file is published separately from react-native itself. To add it, use npm install @types/react-native" or add "@types/react-native": "^0.18.0"``` to your package.json file.

To answer your question about name collisions... Most symbols are declared within specific namespaces, which is meant to eliminate the possibility of collisions. For example, when you use the statement import { Button } from 'react-native-elements';, "Button" is a symbol exported by the react-native-elements module (which has a namespace that's distinct from other modules). "Button" is also the local name you've given to this symbol. You can optionally give it a different local name to avoid conflicts. To do this, use the "as" keyword within the import statement: import { Button as LocalButton } from 'react-native-elements';

Sometimes type files will declare symbols within the global namespace. These collisions are more difficult to resolve. They usually require removing one of the offending type modules or updating one or both so the definitions match.

[MartinOrtiz]

Thank you for the clear explanation on resolving name collisions...I'll update you on the main issue, after I try your suggestion

[MartinOrtiz]

OK, I am a little confused,
I added the react-native type library, but what do I do next? Import it? How does that help?
Here is my package.json file
package.txt

At the beginning of the 'react-native-elements' index.d.ts file
"node_modules/react-native-elements/src/index.d.ts"

I do see that it does an import from 'react-native', so it should import the types etc...

import * as React from 'react';
import {
    ViewStyle,
    TextStyle,
    Image,
    ImageStyle,
    ImageURISource,
    TouchableWithoutFeedbackProps,
    TouchableHighlightProperties,
    TouchableOpacityProperties,
    ViewProperties,
    TextInputProperties,
    TextInput,
    StatusBarProperties,
    KeyboardType,
    KeyboardTypeIOS,
    StyleProp,
    GestureResponderEvent,
    Animated,
    TransformsStyle
} from 'react-native';

[MartinOrtiz]

To summarize...
I have the ReactXP package
I load Hello-World folder
In above folder I did npm install of 'react-native-elements';
In MainPanel.tsx I do

1. import React = require('react');
2. import ReactNative = require('react-native');
3. import { Button as LocalButton} from 'react-native-elements';
4. <LocalButton title={Welcome} onPress={ this._onPress }/><--in appropriate area of file

If I comment out #2 and #3 and #4 I get no errors or issues.
If I UNcomment #2 and #3, I get the duplicate 'require' error.

ERROR in [at-loader] ./node_modules/@types/node/index.d.ts:138:13
TS2300: Duplicate identifier 'require'.

ERROR in [at-loader] ./node_modules/@types/react-native/index.d.ts:8628:14
TS2300: Duplicate identifier 'require'.

If I uncomment #4 (so now 1,2,3 and 4 are all uncommented now)
I get a ton of "Module not found:" for a lot of "react-native' stuff.

[erictraut]

You shouldn't need to include explicit imports for React and ReactNative within the TS code. Those type definition files are auto-included by TypeScript. (By default, it includes all types in the @types subdirectory.)

The errors you're seeing are related to a global namespace collision between node and react-native type files. Doing a quick internet search, it appears that this is a known issue.

Here's a work-around:

1. If you haven't already done so, add "@types/react-native": "^0.46.0" to your package.json file in the "devDependencies" section. Add "react-native-eleemnts": "^0.18.5" to the "dependencies" section.
2. In your tsconfig.json file, add (or replace) the "types" parameter:

    "types": [
      "react",
      "react-native"
    ]

This tells TS to pay attention only to these type files rather than all of the type files in @types.
3. You will probably also need to add a "lib" section to the tsconfig.json file. This is needed for compatibility with the latest versions of react-native's type file.

    "lib": [
      "es5",
      "es2015",
      "es2017",
      "dom"
    ]

Now, within your TS code, add your import:
import { Button } from 'react-native-elements';
(Note that a local alias isn't required here unless you already have another "Button" declared locally.)
And use the button within your JSX block:
<Button title={ 'Welcome' } onPress={ () => {} }/>

[MartinOrtiz]

I tried your fix....

1. import React = require('react');
2. import ReactNative = require('react-native');
3. import { Button } from 'react-native-elements';
4. <Button title={Welcome} onPress={ this._onPress }/><--in appropriate area of file

NOW...
#1 and #2 are commented out
#3 is modified and not commented out.
#4 is also commented out.

With your fix, I don't get an duplicate error with #3, which is great!
But when I uncomment #4, I get a load of "missing modules" for (mostly) react-native stuff.
Which makes no sense at all, since the import (#3) not does not cause any issues anymore (with your supplied fix used)
(oops, let me upload version with the fix...)

Here is just the tsconfig.json file, if that alone would be enough, to figure out a fix.
(the package.json was posted earlier)
(in the download for project in links in belows post now)

[MartinOrtiz]

Here is project
https://app.box.com/s/dauh3umoneg3fox53voejjgkywovclos

[MartinOrtiz]

Here is smaller zip, but you must do "npm install" in main folder
https://app.box.com/s/wyi3holu17met9ui1978operi6xwrx8u

[MartinOrtiz]

The relevant file is "MainPanel.tsx" in the src folder

[MartinOrtiz]

The corrected "tsconfig.json" is in either of the downloads for the project folder, not the one attached to the post a few posts back.