The documentation provided an example for StyleSheet.absoluteFillObject() whose behavior is also same while using with StyleSheet.absoluteFill():
const styles = StyleSheet.create({
wrapper: {
...StyleSheet.absoluteFillObject,
top: 10,
backgroundColor: 'transparent',
},
});
What is the difference between StyleSheet.absoluteFill() and StyleSheet.absoluteFillObject()? A little example will be more appreciated. Thanks !!!
absoluteFill is an easy way to set a view to be full screen and absolute positioned. It’s a short cut for:
{
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0
}
Use it to extend your other styles like this:
const styles = StyleSheet.create({
container: {
backgroundColor: 'red'
}
});
<View style={[StyleSheet.absoluteFill, styles.container]} />
absoluteFillObject
Say you want to absolute position your view, but bump it down 20px to offset for the status bar (for example).
You can spread StyleSheet.absoluteFillObject into your style and then override one of it’s values.
const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
top: 20,
backgroundColor: 'red'
}
});
<View style={styles.container} />
There is no difference between those two. You can see this in StyleSheet.js:
/**
* A very common pattern is to create overlays with position absolute and zero positioning,
* so `absoluteFill` can be used for convenience and to reduce duplication of these repeated
* styles.
*/
absoluteFill: (absoluteFill: any), // TODO: This should be updated after we fix downstream Flow sites.
/**
* Sometimes you may want `absoluteFill` but with a couple tweaks - `absoluteFillObject` can be
* used to create a customized entry in a `StyleSheet`, e.g.:
*
* const styles = StyleSheet.create({
* wrapper: {
* ...StyleSheet.absoluteFillObject,
* top: 10,
* backgroundColor: 'transparent',
* },
* });
*/
absoluteFillObject: absoluteFill,
I may be late for the party. But there is some difference between absoluteFill and absoluteFillObject in typescript.
Mainly in typescript, the type of:
absoluteFill is RegisteredStyle<StyleSheet.AbsoluteFillStyle>
absoluteFillObject is StyleSheet.AbsoluteFillStyle
const styles = StyleSheet.create({
container: {
// must use "absoluteFillObject" in typescript
...StyleSheet.absoluteFillObject,
}
})
For JavaScript, there is no difference.
As of version 0.62, no difference at all according to the official document
In case you are using EXPO Snack like I do, the absoluteFill preview on web seems buggy at this time. On a real device, it should be fine.
Currently, there is no difference between using absoluteFill vs. absoluteFillObject.
I've tried to print the value of absoluteFill and absoluteFillObject.
They're no difference. They're the same value.
[LOG] absoluteFill: {"bottom": 0, "left": 0, "position": "absolute", "right": 0, "top": 0}
[LOG] absoluteFillObject: {"bottom": 0, "left": 0, "position": "absolute", "right": 0, "top": 0}
Currently (React Native 0.66), the documentation states:
there is no difference between using absoluteFill vs. absoluteFillObject.
Related
I have inherited some react-native code where some styling that apparently used to work is no longer working. This is the line of code in question:
<View style={componentStyles.rightButtonContainer}>
The styling assigned looks like this:
rightButtonContainer: {
backgroundColor: config.defaultStyles.greenGradient,
justifyContent: 'center',
alignItems: 'center',
borderBottomRightRadius: 25,
borderTopRightRadius: 25,
width: "45%",
height: 50,
marginLeft: 2,
}
What's not working is the backgroundColor. Notice it is using config.defaultStyles.greenGradient. Now, the config referred to here looks like this:
import colors from '../../styles/Colors';
export default {
defaultStyles: {
greenGradient: colors.greenGradient,
}
};
The above in turn imports colors, which looks like this:
export default {
primary: 'rgb(61, 77, 138)',
secondary: 'rgb(20,169,53)',
greenGradient: ['rgba(20,169,53,1)', 'rgba(20,169,53,1)', 'rgba(20,169,53,1)', 'rgba(20,159,53,1)', 'rgba(20,159,53,1)'],
yellowGradient: ['rgba(229,169,42,1)', 'rgba(229,169,42,1)', 'rgba(229,169,42,1)', 'rgba(219,159,42,1)', 'rgba(219,159,42,1)'],
background: '#fff',
indicator: 'rgb(220, 160, 42)',
text: '#333',
textInverse: '#fff',
textPlaceholder: '#9ab',
textPlaceholderLight: '#ccc',
border:'',
borderLight: '#ccc',
};
So, it should be ultimately assigning the greenGradient color from colors, but as I say it's not working. In other words, the green colored button does not render to the screen.
NOTE: this likely stopped working after updating some libraries and the underlying Expo package. Did something change in terms of how styling is handled?
What is the issue here?
React-native doesn't support gradient. You need to use a third-party module like react-native-linear-gradient.
https://www.npmjs.com/package/react-native-linear-gradient
I have the this jsfiddle, it has the ability to draw a polygon on a map which works perfectly. What I can't figure out is how to style the .Draw interaction.
Currently I have a dashed line for the sections of the polygon that the users has already draw and another dashed line connecting the first drawn point to the last drawn point.
When I write styles it seems to effect both lines.
What I need to have is a dashed black line joining points the user has already drawn, and no line (fully transparent) for the line connecting the last drawn point back to the first drawn point.
This is my current style object:
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 0, 0.5)',
lineDash: [10, 10],
width: 3
}),
image: new ol.style.Circle({
fill: new ol.style.Fill({ color: [0, 0, 0, 0.2] }),
stroke: new ol.style.Stroke({
color: [0, 0, 0, 0.5],
width: 1
}),
radius: 4
})
})
I have tried adding arrays of colours and styles but can't seem to get it working.
Has anyone come across this and found a fix?
Ok I have cracked this one, I had to take a dive into the library's source to figure it out, so I'm gonna post the answer here in the hope it helps somebody else in the future, so here goes:
What I could see looking as the source code was that when you are using ol.interaction.Draw to draw a polygon there are multiple pieces of geometry being used. There is the underlying Polygon, this is the bit that has a stroke and fill and shows the connecting line (based on it's stroke style). There is a LineString which shows a line for the points the user has drawn only (no fill and no connecting line). And there is a point, which is attached to the mouse pointer. I have left a `console.log()' in the jsfiddle to show all this.
I have created this working jsfiddle. What I have done is, rather than set the styles directly inside ol.interaction.Draw I have used a styleFunction (see code below). I detect each geometry by type and set a specific style for it.
const styleFunction = feature => {
var geometry = feature.getGeometry();
console.log('geometry', geometry.getType());
if (geometry.getType() === 'LineString') {
var styles = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(255, 102, 0, 1)',
width: 3
})
})
];
return styles;
}
if (geometry.getType() === 'Polygon') {
var styles = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(255, 102, 0, 0)',
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(255, 102, 0, 0.3)'
})
})
];
return styles;
}
return false;
};
Hope this helps 🤓
Trying to write a parallax scroll view in react native. First off, this is what I have so far:
The only problem, as you can see in the GIF above, is that, children in scroll view disappear at the red line, which is the ScrollView's original top border position. I've tried to change the top border position but it doesn't work, continue to read. The height of the parallax header is 170px, after 100px scrolled, the image stops going up, therefore, the sticky header height is 70px
Here is the code for the GIF above:
const parallaxHeaderHeight = 170;
const headerHeight = 70;
const headerDiff = parallaxHeaderHeight - headerHeight; // 100px
class ParallaxScrollView extends Component {
constructor(props) {
super(props);
this.scrollY = new Animated.Value(0); // How many pixels scrolled
}
<View style={{ flex: 1 }}>
<Animated.Image
source={{ uri: '...' }}
style={{
width: ..., height: ...,
transform: [
{
translateY: this.scrollY.interpolate({
inputRange: [-1, 0, headerDiff, headerDiff + 1],
outputRange: [0, 0, -headerDiff, -headerDiff]
})
},
{
scale: this.scrollY.interpolate({
inputRange: [-1, 0, 1],
outputRange: [1.005, 1, 1]
})
}
]
}}
/>
<Animated.ScrollView
scrollEventThrottle={1}
onScroll={Animated.event(
[{ nativeEvent: { contentOffset: { y: this.scrollY } } }],
{ useNativeDriver: true }
)}
>
// Then, render children here
</Animated.ScrollView>
</View>
}
Then, I've tried to transform the top border of scroll view, but this happens:
Look at the first child of the scroll view, 0, it disappears when I've scrolled 100px, but what I want is for it to stay viewable when scrolling the first 100px. I know why this is happening, but I can't find a solution. How should I modify my code?
Answering my own question: This problem can be solved with a 'hacky' solution, but is not recommended, for reasons listed below.
First of all, the solution is - Add an initial padding to the scroll view's children (Looking at the code snippet in the question and adding this part to it):
...
<Animated.Image
...
style={{
...
position: 'absolute', zIndex: 1,
top: 0, left: 0, right: 0,
height: parallaxHeaderHeight // which is 170px in my case
...
}}
...
/>
<Animated.ScrollView
...
contentContainerStyle={{ paddingTop: parallaxHeaderHeight }}
...
>
...
</Animated.ScrollView>
...
This gives me:
The flaw is that, part of the scroll bar is hidden behind the image header due to the fact that the header has position = absolute and zIndex = 1. But if the scroll bar is not important, then never mind, this 'hacky' solution is just fine and doesn't cause any performance issue
I am learning Animated. In the document, I saw translateY and translateX and I learned them. I read the whole document but didn't find any other translation. I was expecting things like translateColor and such stuff.
For instance:
style={{
opacity: this.state.fadeAnim, // Binds directly
transform: [{
translateBackgroundcolor: this.state.fadeAnim.interpolate({
inputRange: [0, 1],
outputRange: ['rgba(255, 0, 0, 1)', 'rgba(0, 255, 0, 1)']
}),
}],
}}
Buy the I already know that I need to do this to get the background changed:
var interpolatedColorAnimation = this._animatedValue.interpolate({
inputRange: [0, 100],
outputRange: ['rgba(255,255,255, 1)', 'rgba(51,156,177, 1)']
});
return (
<View style={styles.container}>
<Animated.View
style={[styles.box, {backgroundColor: interpolatedColorAnimation}]}
/>
</View>
);
But I don't know what should be changed inside that transform and what should be passed as the style property.
Where can I find a list of them? Why aren't they in the react native doc?
Is this what you are looking for?
https://facebook.github.io/react-native/docs/transforms.html
Looks as though animating colour is not supported by transform
I would like to use React Native ART to create some animated SVG graphs. My graph needs an linear gradient, I see that React Native ART seems to have it implemented, but I have no idea on how to use it.
Does anyone know or can figure it out by looking at the javascript here https://github.com/facebook/react-native/blob/master/Libraries/ART/ReactNativeART.js
I am not that good with Javascript yet unfortunately.
Here is the doc of react-native ART module LinearGradient method usage.
AFAIK,it has some touble with Android platform,here is the problem and you can track it with productpains.
I figured it out thanks to this post
You can declare the LinearGradient as such:
let colors = [ "red", "green", "blue", ];
let linearGradient = new LinearGradient(colors, 0, 20, 0, 280);
Then use it in your Shape for example:
<Shape d={path} fill={linearGradient} />
Unfortunately there doesn't seem to be support for offset % such as in d3js.
Like Hylle pointed out, I wasn't able to get percentage offset to work in Android like iOS. All the colors are just evenly spaced. But here's a trick that worked for me:
let iosColors = { '.33': '#000', '.66': '#FFF' };
let androidColors = [ '#000', '#000', '#FFF', '#FFF' ];
or a more complex example:
let iosColors = { '.2': '#000', '.8': '#FFF' };
let androidColors = [ '#000', '#000', '#555', '#AAA', '#FFF', '#FFF' ];
Basically, if you have simple enough, fixed gradient values, you can 'precalculate' the evenly-spaced values you need to get the same percentage offset effect on Android.