I have installed Expo XDE, and created a new project funproject. I understand that the XDE is meant for devices and I could connect my virtual devices.
However, I would also like to reuse the same code base for a web application.
I have broused to the location on my localhost where the app should be.
http://localhost:19001/
This looks right, I can see the index.html page. It's actual file path is.
funproject\node_modules\react-native\local-cli\server\middleware\index.html
Here are the contents of the index.html
<!DOCTYPE html>
<html>
<head>
<title>React Native</title>
</head>
<body>
<p>React Native packager is running.</p>
<p>Visit documentation</p>
</body>
</html>
So I added a div for the content and the script, app.js
<!DOCTYPE html>
<html>
<head>
<title>React Native</title>
</head>
<div id="content"></div>
<body>
<p>React Native packager is running.</p>
<p>Visit documentation</p>
</body>
</html>
<script type="text/javascript" src="../app.js"></script>
I am new to react, but the idea that I can target web, and mobile all in one, is very enticing. Unfortunately this does not work! When I use chrome developer tools, I am getting this error for line 1 of app.js
Uncaught SyntaxError: Unexpected token import app.js:1
Here is the default generated app.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
You had it mostly wrong, actually -- all wrong.
Let's start with;
However, I would also like to reuse the same code base for a web application.
So this is wrong, the project you are working on is a native project, which uses the component based rendering logic of react, and produces real legit native ui elements for android or iOS.
Even though you are still using "react" this does not mean you can reuse the app in your browser.
The local server that started in a development interface, or a package delivery and update system (packager) for your phone or simulator (in order to access it via wifi network).
That server and the context of it is just a development tool for you.
You should first understand the logic behind tech you are using; https://facebook.github.io/react-native/docs/getting-started.html
Related
I'm having trouble getting the apple-touch-icon to work in my NextJS app. I have an image called apple-touch-icon.png at the root of my project and I am using next/Head in my application's app component (React app, but not CRA) using the following:
function App({ Component, pageProps }) {
return (
...
<Head>
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
</Head>
...
)
When I inspect my application I can see the tag in the , but dragging from the url bar to my desktop from localhost still shows:
I also see the <link> in the <head> in a deployed instance of my application as well, but the touch icon image is not downloaded to the desktop.
Thoughts?
Development Environment
Macbook M1 Pro (With Apple Silicon Chip)
Unity 2021.3.10f1 (Be compatible with Apple Silicon Chip)
Test with Chrome Browser
Current Progress
I just create a new project with AR template
The project's hierarchy is like below picture.
That building Setting is like below picture.
After building, I get 4 files named build.data, build.framework.js, build.loader.js, build.wasm
With a create-react-app command, I created a new react project. (npx create-react-app ar_tutorial_4 --template typescript)
I located those 4 build files under the react's build directory. Like below image.
I edited index.html file like this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React Unity webGL</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
And, I edited App.tsx file and index.tsx file like this.
// App.tsx
import { useRef } from "react";
import { Unity, useUnityContext } from "react-unity-webgl";
function UnityTest() {
const {
unityProvider,
isLoaded,
loadingProgression,
} = useUnityContext({
codeUrl: '/build/build.wasm',
dataUrl: '/build/build.data',
frameworkUrl: '/build/build.framework.js',
loaderUrl: '/build/build.loader.js',
webglContextAttributes: {
preserveDrawingBuffer: true,
},
});
const loadingPercentage = Math.round(loadingProgression * 100);
const canvasRef = useRef<HTMLCanvasElement>(null);
return (
<div className="container">
{isLoaded === false && (
<div className="loading-overlay">
<p>Loading... ({loadingPercentage}%)</p>
</div>
)}
<Unity
className="unity"
unityProvider={unityProvider}
style={{ border: "1px solid red", height: 400, width: 500 }}
devicePixelRatio={window.devicePixelRatio}
ref={canvasRef}
/>
</div>
);
}
export { UnityTest };
// index.tsx
import React, { createElement } from 'react';
import ReactDOM from 'react-dom/client';
import { UnityTest } from './App';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(createElement(UnityTest));
Problem
The screen was normally disappeared but the unity container did not played well.
And, this console error message was displayed.
build.framework.js:1771 A scripted object (script unknown or not yet loaded) has a different serialization layout when loading. (Read 52 bytes but expected 76 bytes)
Did you #ifdef UNITY_EDITOR a section of your serialized properties in any of your scripts?
Question
What should I do to resolve this problem??
I'm learning React. I'm trying to add a react FORM component from https://github.com/rjsf-team/react-jsonschema-form?fbclid=IwAR0HdGosg659-F0hdFp-milh29G_6UX5_qbti6lZBmo7OYKIxgThD5f1Ff8 to my dummy application. I used react json schema form documentation https://react-jsonschema-form.readthedocs.io/en/latest/#installation .
I have red Using React component from js source maps and react-jsonschema-form How to use it via cdn? which might be addressing similar problem. However, I am still struggling a lot.
I did:
npx create-react-app my-app
cd my-app, npm install
My react version is
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
npm install #rjsf/core --save
My dummy App.js component:
import React from 'react';
import Form from "#rjsf/core";
function App() {
const Form = JSONSchemaForm.default;
const schema = {
type: "string"
};
return (
<div className="App">
<Form schema={schema} />
</div>
);
}
export default App;
I hit npm start and get error:
./src/App.js
Line 6:16: 'JSONSchemaForm' is not defined no-undef
From what I understand, webpack can't find JSONSchemaForm module (?)
I tried adding cdn file from the documentation to index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<script src="https://unpkg.com/#rjsf/core/dist/react-jsonschema-form.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
It didn't help. Documentation says I should add a source map. However, I am not familiar with source maps. I red definition on mozilla MDN, but I don't know how to implement it. I am also not familiar with manually setting webpack configurations, nor require.js mentioned in this solution react-jsonschema-form How to use it via cdn? .
Question is - how likely is it that adding source map would solve the problem? Do in need to learn webpack? Do you see other reasons why I can't display Form component?
If adding source map would likely solve the problem, what webpack properties are essential to know in this case?
I'm a bit new to React as well, but here are my two cents on this -- when you already have imported Form using import Form from "#rjsf/core";, I don't think you need const Form = JSONSchemaForm.default; again. Just remove the const Form = JSONSchemaForm.default; line and try again.
I can't get the baseUrl parameter to work in react-native-webview. My project structure is as follows:
root
---> _tests _
---> android
-------> web
---> ios
---> node_modules
---> src
-------> components
------------> web
------------> MyComponent.js
---> web
I have inserted the web folder 3 times as shown (actually only need to once, this is just for testing). Each 'web' folder contains ponies.jpg. However, nothing is picked up by React Native. I just get 4 broken images with the alt (i.e. 'Ponies') showing. I have also tried using baseUrl: 'web/' to no avail. Here is the code in MyComponent.js:
import React from 'react';
import {View, Text, StyleSheet, Image} from "react-native";
import {WebView} from "react-native-webview";
var html = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="ponies.jpg" alt="Ponies" height="42" width="42">
<img src="ponies.jpeg" alt="Ponies" height="42" width="42">
<img src="./ponies.jpg" alt="Ponies" height="42" width="42">
<img src="./ponies.jpeg" alt="Ponies" height="42" width="42">
</body>
</html>
`;
export default class MyComponent extends React.Component {
render() {
return (
<View style = {styles.container}>
<WebView
style = {styles.webview}
source = {{html: html, baseUrl: 'web/'}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
height: 350,
width: 350
},
webview: {
height: 350,
}
})
Thankyou!
OK so I found a solution/workaround for android :D Have actually seen this in another answer but am going to expand a little:
baseUrl needs to be 'file:///android_asset/'.
You then create a directory in the android folder i.e. 'root/android/app/src/main/assets' (see this answer for details how to reference an asset in a library project).
These two folders are now the same. anything you put in assets should be seen by the webview.
IMPORTANT - I then had to rerun 'react-native run-android' to get the image to show up.
Currently, your web folder is inside the android folder
Add a folder web and used this structure:
app/web/ponies.jpg
Use web/ as base URL.
The final piece of the puzzle is to add the web folder to the XCode project (do this in XCode). Otherwise, the files in the web folder are not included in the bundle built for the ios device.
Note: where app is the root of the application.
I am new to react.js. I downloaded a theme which have external JavaScript libraries i.e bootstrap.min.js , jquery.min.js, slider.js, jquery-flexslider.min.js.
I created a React app using create-react-app and I copied all the external JavaScript libraries and CSS files in index.html of the public folder of my react app and copied all the html of index.html of my theme in app.js which I downloaded. All the CSS are working fine but the JavaScript libraries are not working on the page.
Following is the demo of how I included the css files and javascript libraries in index.html of the public folder.
<script src="/assets/javascript/jquery.min.js"></script>
<script src="/assets/javascript/bootstrap.min.js"></script>
<script src="/assets/javascript/jquery.easing.js"></script>
<script src="/assets/javascript/jquery-waypoints.js"></script>
<link rel="stylesheet" type="text/css"href="/assets/stylesheets/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/style.css"/>
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/responsive.css"/>`
Now my question is, how should I include the JavaScript libraries so that it start working. I tried to put all the files in the src folder of my react app but it still not working.
You should consider using react-bootstrap instead of jquery and a minified bootstrap file. By using react-bootstrap you get bootstrap 3 (4 is in the works) as nicely designed react components that you can selectively import and use. So then you can
import React from 'react'
import{ string } from 'prop-types'
import { Col, Row, Label } from 'react-bootstrap'
const PrettyThing = ({ thing }) => (
<Row>
<Col xs={9} xsOffset={1}>
<Label bsStyle="success">{thing}</Label>
</Col>
</Row>
)
PrettyThing.propTypes = { thing: string.isRequired }
export default PrettyThing
and webpack will handle how that's all sliced and diced so only the css you need gets built.
see https://react-bootstrap.github.io/getting-started/introduction/ for more info.