I have encountered a bug with react-native's Stylesheet component. It causes my iphone simulation to stay stuck on expo's logo after loading the js bundle. No errors to be found.
import { Text, View, StyleSheet } from "react-native"
var styles = StyleSheet.create({
innerText: {
color: 'red',
}
})
export var TestComponent = function() {
return (<View><Text style={styles.innerText}>NOW Lets get this working</Text></View>)
}
If I just put the style inline, it works and renders correctly. No freezing after bundle loading.
return (<View><Text style={{color:'red'}}>NOW Lets get this working</Text></View>
One thing to note is that this TestComponent is coming from a node_module. Stylesheet's work as expected in the app's codebase, but fail when coming from this node_module.
The module that exports the TestComponent was using react-native 0.68.0, but the app that uses the module was using react-native 0.64.3. When I downgraded the module to the same react-native version, it worked.
It also worked when updating the app's version instead of downgrading the other, but this time expo gives a warning: Warning: Invalid version react-native#0.68.1 for expo sdkVersion 44.0.0. Use react-native#0.64.3
Related
I am new to react native and I followed a basic course on react-native but the course did not speak about adding fonts to your app and I was wondering if it was possible to do so.
Hi if you are using expo for your React-Native project, u should try following steps:
Install Expo-Font Package
2.Import useFonts hook from expo fonts import { useFonts } from "expo-font";
3.Import All your local fonts:
//fontsLoaded returns boolean u can check this and render application conditionaliy
let [fontsLoaded] = useFonts({
GEO_UltLt: require("./assets/fonts/mainfont/UltLt.ttf"),
GEO_Thin: require("./assets/fonts/mainfont/Thin.ttf"),
GEO_Light: require("./assets/fonts/mainfont/Light.ttf"),
GEO_Medium: require("./assets/fonts/mainfont/Medium.ttf"),
GEO_Bold: require("./assets/fonts/mainfont/Bold.ttf"),
GEO_Heavy: require("./assets/fonts/mainfont/Heavy.ttf"),
GEO_Black: require("./assets/fonts/mainfont/Black.ttf"),
});
4.And use inside app like this
//inside app
input: {
flex: 1,
color: "#323f4b",
fontFamily:"GEO_Medium"
}
I am working on documentation tool for Typescript library. The idea is to leverage parcel's watch mode to continuously build the library, and use the same in a pre-built documentation app.
For the same I need to load a module library (built in another project) dynamically via URL.
<script type="module">
const libraryModule = "http://localhost:8080/lib.module.js";
const promise = import(libraryModule);
promise.then(library => {
// do something with library
window.ComponentLibrary = library;
});
</script>
However, parcel replaces the above import with require and the load fails. Using System.import throws System is not defined error.
I tried to use dynamic-import-polyfill and then initialize it as under and the use as below:
dynamicImportPolyfill.initialize({
modulePath: 'http://localhost:13090', // Defaults to '.'
importFunctionName: '$$import' // Defaults to '__import__'
const promise = $$import(libPath);
});
This throws the following error:
TypeError: Failed to resolve module specifier "react/jsx-dev-runtime". Relative references must start with either "/", "./", or "../"
I have also tried using script type as text/javascript but doesn't work either.
Looking for guidance on the best way here to get the component library loaded?
Figured it out: yes, we can load a component library as a module dynamically.
The issue was that React UMD module is not a pure ES/Javascript module. Also, with React 17, JSX components are picked from react/jsx-runtime. So, first I had to convert the React UMD module into an ES module - it's just a thin wrapper. Similarly, added a wrapper for jsx-runtime. To make things work had to use importmaps which are currently not supported in all browsers - see caniuse.com to check latest support.
This completes your setup and now your library compiled as ES module will work just fine. Below is what I used to get working:
<script type="importmap">
{
"imports": {
"react/jsx-runtime": "/react-jsx-runtime.js",
"react": "/react-as-es-module.js"
}
}
</script>
<script type="module" src="/component-library.js"></script>
<script type="module">
import * as MyComponentLib from "/component-library.js";
window.ComponentLibrary = { ...MyComponentLib };
</script>
Code for react-jsx-runtime.js looks as under:
import * as React from 'react';
export const jsx = React.createElement;
export const jsxs = React.createElement;
Code for react-as-es-module.js goes as:
import 'https://unpkg.com/react#17.0.2/umd/react.production.min.js';
const {
Children,
Component,
Fragment,
// and all other exports
} = React || {};
export {
Children,
Component,
Fragment,
// and all other exports
}
export default React;
I compiled component-library.js using ParcelJS using the type: "module" in package.json file. I would detail this in blog post and demo Github repo soon.
Hope this helps.
I am trying to use GSAP library in my Next.js project i downloaded the npm version of the library
from react jsap.
but when i import it like this:
import { gsap } from "gsap";
import { CSSRulePlugin } from "gsap/CSSRulePlugin";
it throws an error, the error seems to be caused by CSSRulePlugIn since when i remove it from imports everything is fine.
the error:
apparently this error occurs because GSAP tries to access the window element of the client browser but since i was using it in Next.js (SSR) so it would result in that error since there was no window to get a hold of.
so i ended up solving the problem by importing CSSRulePlugin only after making sure that the code runs in the client side, and for that i imported it inside useEffect method and it worked.
here is the code in my case:
useEffect(() => {
const GSAP = require("gsap/CSSRulePlugin");
const { CSSRulePlugin } = GSAP;
gsap.registerPlugin(CSSRulePlugin);
// do whatever you want to do with the plugin, its Working now...
// for example
let imageReveal = CSSRulePlugin.getRule(".container:after");
}, []);
By default prop-types do not run in production for a react app. I realize this is a good thing to improve performance. However, we have a Storybook that we have built and are deploying it to a static site. Storybook has an addon called Docs that detects the prop-types for components and creates a table of the prop-types for easy to read documentation.
When running the storybook locally, everything works perfectly. The prop-types are detected and this table is generated.
SpinningLoader.propTypes = {
color: PropTypes.string,
size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
};
However, since prop-types are disabled in production by default. They cannot be detected when the storybook is deployed to a static site.
Is there a way to enable prop-types in production? Or some other workaround?
It's a little difficult to know without seeing more of your setup. If you're building it with the default storybook commands without and additional configuration it should "just work"...as far as I can tell.
As mentioned in a comment, Storybook has a specific build command you can add to your package.json to export it as a static app:
"scripts": {
"build-storybook": "build-storybook -c .storybook -o .out"
}
If you're using that command and it's still not working, are you using any custom webpack/build workflow, and can you post those as well?
I've built a minimal repository for reference, which may be helpful in comparing your setup. Besides the packages in package.json it's really only 3 files; Storybook config, a React component, and a Component Story:
.storybook/main.js
module.exports = {
stories: ['../src/**/*.stories.[tj]s'],
addons: ['#storybook/addon-docs'],
};
src/components/message/message.js
import React from 'react'
import PropTypes from 'prop-types'
const Message = function Message({ text, color }) {
return (<div style={{ color }}>{text}</div>)
}
Message.propTypes = {
text: PropTypes.string.isRequired,
color: PropTypes.string.isRequired,
}
export default Message
src/components/message/message.stories.js
import React from 'react'
import Message from './message'
export default { title: 'Message', component: Message }
export const withText = () => <Message text="Hello World" color="green" />
If I run the build-storybook command, cd .out, and then npx live-server, I see the static-built storybook site, with my Message component, and the 'Docs' tab that includes the prop-types:
Full repository for reference
https://github.com/BenjaminWFox/react-storybook
A workaround would be to manually specify the information you want to display in the table for each component using ArgTypes: https://storybook.js.org/docs/react/api/argtypes. Then you can continue with the documentation with that approach.
Another option would be to complete and publish the storybook while the app is still in development. This way you will have the prop-types detected and the table generated for you, then you can later build your app for production.
This is how you would declare the argTypes in the first option
// Button.stories.js
export default {
title: 'Button',
component: Button,
argTypes: {
label: {
description: 'overwritten description',
table: {
type: {
summary: 'something short',
detail: 'something really really long'
},
defaultValue: { summary: 'default-label' }
},
control: {
type: 'text',
},
},
},
};
This is the result
In case anyone runs into this issue again, setting NODE_ENV to development, as suggested here https://github.com/storybookjs/storybook/issues/8140#issuecomment-621314565, solved our problems
The issue was ultimately caused by including the transform-react-remove-prop-types plugin in our babel.config.js production environment. Without propTypes to read, there's nothing to display.
'propTypes' is a useful feature through which we can validate typechecking of props in React but it also unnecessarily creates runtime overhead. It
downgrades the apps performance.
That is the reason it is NOT available in production.
It has been made to help developers especially in a team, to find out if there is any wrong type of props been passed to the component, while writing code during the development environment.
It does not add any extra functionality. It will also add extra lines of code unnecessarily.
By keeping it in the production flow it will defeat the whole purpose.
Whether you also use Flow/typescript for typechecking, there purpose are all same.
refer: https://reactjs.org/docs/typechecking-with-proptypes.html
Now, your issue is similar to the below known issue, kindly refer below:
https://github.com/storybookjs/storybook/issues/1661
I've been having errors after errors to the point where I've reset my Metro Bundle and performed updates, errors from required module "699" to "700" have been coming up and now this. I believe I have all the required dependencies for Drawer navigator and ionicicons but errors continue to persist. I have code written in different files but below is the one written in App.js. Feel free to ask for the other ones in order to solve the issue at hand.
import React from 'react';
import {
View,
Text,
StyleSheet
} from "react-native" ;
import DrawerNavigator from './Menu/DrawerNavigator';
import SettingScreen from './Menu/SettingScreen'
export default class App extends React.Component {
render(){
return (
<View style ={style.container}>
<SettingScreen/>
</View>
);
}
}
style = StyleSheet.create ({
container: {
flex: 1,
justifyContent: 'center',
},
});
For mac,
I have this error, I believe that you have npm install/yarn add a new package and you will require to Ctrl+C to exit the Metro Bundler and restart again. The error/issue will be solved.
For Windows,
I got the same error, what I did is
close your local-cli windows(picture attached)
uninstall the app from your device/emulator(there can be two apps with the slight change name of theirs).
run again the with react native command like 'react-native run-android'
I tried to reproduce it after these steps but I wasn't able
For Windows 10:
Restarting the Metro Bundler by pressing ctrl + c and then expo start will fix this issue.