Import react-native libraries in Ionic-React Project - reactjs

I just trying to work with react-native-svg in my ionic react project and I was able to make it successful with react-native-web. But then if I do import like
import {StyleSheet, View} from 'react-native';
it says
cannot find module react-native.
how can i solve this?

Related

Expo cannot auto import React-native on Visual studio code in Typescript

I just start to learn the react-native with Expo SDK.
I follow the official tutorial to init managed Typescript template.
And I found that I can only import unique React-native component.
Not the React-native component which has same name across Dom, React.
I saw the node-modules already have the Types but not know why the auto-import not work.
This is what vscode try to find but not go through the React-native type definition.
But React-native types has the type definition.
If I import the Text manually from the React-native, it can get the correct definition.
import { Image, StyleSheet, Text, View } from 'react-native';
Any help is appreciated.

How can I use Wavesurfer.js plugins in a React Typescript App?

I am trying to use the Wavesurfer.js plugins in my React Typescript application. When I try to import the plugins, I keep getting "module not found: can't resolve" error. I'm guessing this has something to do with defining the types for the plugins. Does anyone know how I could use these plugins in React Typescript?
import React from "react";
import WaveSurfer from "wavesurfer.js";
import CursorPlugin from "wavesurfer.cursor.js";
Try
import CursorPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.cursor.min.js';

Problem implementing shufflejs with React

Im trying to implement the library Shufflejs together with ReactJS. Im trying to implement the samplecode for react but when I after installed Shufflejs with npm install shufflejs and paisted the code into index.js in my React application my page renders blank.
I'm a bit lost why that is. Any help would be appreciated!
the code is here on shufflejs: https://vestride.github.io/Shuffle/js/demos/react.js
The way you load Shuffle is not correct here. Replace the import statements with
import React, { Component } from 'react'
import ReactDOM from "react-dom";
import Shuffle from 'shufflejs'

Include react-native component in vanilla React app

It sounds like a weird question. It is. But is it possible to do something like this in a react app that I instantiated with create-react-app?
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
...
i.e. even if I can't actually build the mobile view, I want to include it in my code to do something else with it
I only ask because I can't get around a
"Module not found: Can't resolve 'react-native' in '/Users/...' error, even with react-native in my package.json
well... the thing is that react-native will only work for native apps, if you need to use those components, you will have to use an alternative such as react-native-web.
https://github.com/necolas/react-native-web
This might be what you are looking for.
What you are looking for is react-primitives.
This library attempts to propose an ideal set of primitives around
building React applications, regardless of Platform. In the future,
this could be used as a shared interface among React and React Native
components that don't use platform-specific APIs.
Then, you import certain primitives from this package. They will render in native and/or DOM.
import React, { Component } from 'react';
import { Text, StyleSheet } from 'react-primitives';
export function CrossplatformComponent() {
return <Text>Hello world</Text>
}

React Native import external stylesheet

For some reason I can import the style if it's within the project director:
import styles from '../../../styles/style
But once I try to import from an external stylesheet, using the following line of code:
import styles from 'https://.....js';
I receive the error "Requiring unknown module https://.....js. If you are sure the module is there, try restarting the packager."
Is there a different method to importing externally? Thanks!

Resources