I have a project with Gatsby where I use React Spring. I am getting the following error:
TypeError: Failed to set an indexed property on 'CSSStyleDeclaration': Index property setter is not supported.
In some of my research I have found that browser updates have been causing this type of error in other scenarios, but I haven't found any that deal with React Spring.
I have tried upgrading all related dependancies to the latest versions.
I have narrowed it down to a part of my code that uses React Spring:
const trail = useTrail(2, {
opacity: sideNav ? 1 : 0,
x: sideNav ? 0 : 180,
height: sideNav ? 180 : 0,
from: { opacity: 0, x: 20, height: 0 },
});
<NavItem style={trail}>
<Link to="/">Home</Link>
</NavItem>
If I take out style={trail} I no longer get the error so I'm thinking it has something to do with React Spring's useTrail.
I expect it to work as it did a few days ago, where I don't get an error and my animation works as expected. I actually have not touched the code in a few weeks, and the site was loading correctly just a few days ago. Now it suddenly breaks.
The useTrail documentation says:
The return value is an array containing animated props.
Hence you can't directly apply trail to the style of one item. It should be something like:
{trail.map(style => (
<NavItem
style={style}
>
<Link to="/">Home</Link>
</NavItem>
))}
Related
I am facing problems trying to embed a hyperlink in an image. The code from the documentation (https://github.com/dolanmiu/docx/blob/master/demo/35-hyperlinks.ts) beginning at line 84 is not working for me:
new Paragraph({
children: [
new ExternalHyperlink({
children: [
new ImageRun({
data: fs.readFileSync("./demo/images/image1.jpeg"),
transformation: {
width: 100,
height: 100,
},
}),
],
link: "http://www.google.com",
}),
],
})
When I copy this very snippet into my code, the image is rendered as expected but there is no link being integrated. It seems like the ExternalHyperLink element is not working specifically with images, as it works flawlessly when trying to add the link to a TextRun element. I tested also if it was a problem related to the code being positioned within the header section but the behaviour is the same when shifting the code to the body of the document.
I am using the latest version of docx. Can anyone give me an advice what is going wrong here?
Looks like an interesting option for performance reasons. But I cant' find any guide, benchmark or motivation. Does anyone know when we should use ResourceSavingView?
If you look in the react-navigation source, ResourceSavingView is only used in a component called MaybeScreen. The purpose of this component is to use react-native-screens if it is available or fallback to a ResourceSavingView if it is not available, as you can see here:
export function MaybeScreen({ visible, children, ...rest }: Props) {
if (Screens?.screensEnabled?.()) {
return (
<Screens.Screen activityState={visible ? 2 : 0} {...rest}>
{children}
</Screens.Screen>
);
}
return (
<ResourceSavingView visible={visible} {...rest}>
{children}
</ResourceSavingView>
);
}
In other words, if you are using react-native-screens, ResourceSavingView will never be used internally by react-navigation.
The actual ResourceSavingView component is fairly simple:
<View
style={[styles.container, style]}
// box-none doesn't seem to work properly on Android
pointerEvents={visible ? 'auto' : 'none'}
>
<View
collapsable={false}
removeClippedSubviews={
// On iOS, set removeClippedSubviews to true only when not focused
// This is an workaround for a bug where the clipped view never re-appears
Platform.OS === 'ios' ? !visible : true
}
pointerEvents={visible ? 'auto' : 'none'}
style={visible ? styles.attached : styles.detached}
>
{children}
</View>
</View>
As you can see, it's basically just enabling some performance features when the component is visible.
The main purposes seem to be disabling pointerEvents and hilariously moving the contents of the view FAR_FAR_AWAY:
const FAR_FAR_AWAY = 30000; // this should be big enough to move the whole view out of its container
// ...
const styles = StyleSheet.create({
// ...
detached: {
flex: 1,
top: FAR_FAR_AWAY,
},
});
So, to answer your question, as far as I can tell it is intended to be used to improve performance when you need a View to be rendered but not always visible. This is something react-navigation needs because things like transition animations require that Screens remain mounted even when they aren't visible.
Of course, depending on your situation, you can always use pointerEvents and weird style hacks directly instead.
Personally, I would avoid using ResourceSavingView. I wouldn't be surprised if ResourceSavingView is eventually deprecated, since it is very clearly used as a fallback. (The file it's used in is actually called ScreenFallback.tsx.)
Problem
For some reason, when testing on my older Android phone (Android v 6.0.1), my Expo SDK 36 app's header always has extra padding, looking too bulky, even though the phone has no top notch.
Testing on an iOS 13.4 simulator for the iPhone 11 with a notch, it handles the notch correctly.
Some Debug Results
When I traverse the component hierarchy in react-native-debugger, I see that:
the <SafeAreaView /> in my Screen component from react-native-safe-area-view has the correct inset values from context, { top: 0, bottom: 0, left: 0, right: 0 }
However, the <Header /> component from react-navigation 4.3.7 has safeAreaInsets: { top: 'never' }, when I examine its props.scene.descriptor.options to look at its navigationOptions
And further, if I go into <Header/>'s children, when I get to <SafeView/>, its props.forceInset.top is 'always'.
I upgraded react-navigation today to 4.3.7 from 3.13.0, I'm wondering if there's bugs from earlier versions of dependencies like react-native-safe-area-context and react-native-safe-area-view, or bugs with them in general.
In package-lock.json, I notice that there's an #react-navigation/native package with a dependency of react-native-safe-area-view at version 0.14.9 exact, while I notice in package.json, I have react-native-safe-area-view at semver range ^1.0.0. I think I installed it via the expo install command for packages compatible with your Expo SDK, when first looking into the SafeAreaView instructions in the Expo docs
My render method looks like this:
render() {
return (
<SafeAreaConsumer>
{(insets) => {
console.log("render -> insets", insets)
return (
<SafeAreaView
style={{
flex: 1,
backgroundColor: Color.white,
paddingBottom: insets.bottom,
paddingLeft: insets.left,
paddingRight: insets.right,
}}
forceInset={insets}
>
<View style={MainAppViewContainers.container}>
...
</View>
</SafeAreaView>
)
}}
</SafeAreaConsumer>
);
}
Possible Explanations Coming To Mind
Could <SafeAreaView/> fail to automatically detect and set the right insets? Here it says, "By default, the device's safe area insets are automatically detected."
Could using the forceInset prop on <SafeAreaView/> fail to change the forceInset prop on <SafeView>, which is a child of the <Header/> component automatically generated by react-navigation once you set the correct header-related navigationOptions on screens/navigators?
Could there be some kind of dependency clash between the version of react-native-safe-area-view 0.14.9 used by #react-navigation/native 3.7.11 which react-navigation 4.3.7 installed, and react-native-safe-area-view 1.0.0 installed by Expo?
I'm trying to display an image with a URI location instead of a static image and it's not working. I'm getting the red screen with the message:
You are trying to render the global Image variable as a React element.
You probably forgot to require Image.
I simply took the default project (react-native init awesomeProject) and added this inside the View after the two Text elements:
<Image
style = {styles.base}
source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
/>
and I enhanced the styles with an additional property:
base: {
height: 400,
width: 400
},
I can't figure out why this wouldn't work as this is the simple example in the React Native docs. Any advice?
Make sure to actually require the Image component:
var React = require("react-native");
var Image = React.Image;
I get the error message "Error: 'start.0' is null or not an object"
while animating backgroundColor property of an element.
I included the color plugin and able to animate borderTopColor,color etc.
Html part:
<div id="divAnimation" style="">
hello
</div>
Javascript Part:
$("#divAnimation").animate({
color: "red",
backgroundColor:"#123456",
borderTopColor:"black",
borderLeftColor:"green",
borderRightColor:"silver",
borderBottomColor:"yellow"
},
"slow");
When i remove backgroundColor:"#123456", there is no problem.
Any idea?
Thanks...
I came across the same problem when trying to animate the backgroundColor of a div.
I was getting the same error:
Microsoft JScript runtime error: 'start.0' is null or not an object
But this only happened in Internet Explorer (IE8). The animation worked fine in Chrome 10 and Firefox 4.
Eventually I traced the problem to using a colour name to specify the initial background colour of the div.
style="background-color: chocolate"
I changed to using RGB values to specify the initial colour:
style="background-color: rgb(128, 0, 0)"
This solved the problem.
Additional information: Using jquery-1.5.1 and jquery-ui-1.8.11.
To do this, you'll need a plugin. I suggest: http://plugins.jquery.com/project/color