I would like to know if anyone knows how to take snapshot of just routes in react native maps, something what ride sharing companies have when a user views previous trips. I am able to take a snapshot using the code below, though I noticed the height, width, region properties do not.
takeLocationSnapshot() {
const { location: { longitude, latitude, } } = this.state;
const snapshot = this.mapView.takeSnapshot({
width: 300, // optional, when omitted the view-width is used
height: 300, // optional, when omitted the view-height is used
region: {
latitude,
longitude,
LONGITUDEDELTA,
LATITUDEDELTA,
},
// iOS only, optional region to render
format: 'jpg', // image formats: 'png', 'jpg' (default: 'png')
quality: 0.7, // image quality: 0..1 (only relevant for jpg, default: 1)
result: 'file' // result types: 'file', 'base64' (default: 'file')
});
snapshot.then((uri) => {
this.props.locationSnapshotChange(uri);
});
}
<View style={styles.imageContentWrap}>
<Image
source={imageSource}
style={styles.imageStyle}
/>
</View>
imageContentWrap: {
flexWrap: 'wrap',
backgroundColor: 'green',
flex: 0.58,
},
imageStyle: {
flexWrap: 'wrap',
width: '100%',
height: '100%',
resizeMode: 'cover',
overflow: 'hidden',
},
Just using Wrapper with fixed height and overflow hidden, and add position absolute, top property to styles of your image
Related
I'm trying to customize the Tailwind Typography plugin, as follows:
typography (theme) {
return {
DEFAULT: {
css: {
'code::before': {
content: 'none', // don’t generate the pseudo-element
//content: '""', // this is an alternative: generate pseudo element using an empty string
},
'code::after': {
content: 'none'
},
code: {
color: theme('colors.slate.700'),
fontWeight: "400",
backgroundColor: theme('colors.stone.100/30'),
borderRadius: theme('borderRadius.DEFAULT'),
borderWidth: '1px',
paddingLeft: theme('spacing[1.5]'),
paddingRight: theme('spacing[1.5]'),
paddingTop: theme('spacing[0.5]'),
paddingBottom: theme('spacing[0.5]'),
},
}
},
invert: {
css: {
code: {
color: theme('colors.slate.100'),
backgroundColor: theme('colors.slate.800'),
borderColor: theme('colors.slate.600'),
}
}
}
}
},
How can I apply a color value to backgroundColor - based on one of the built in colors, with with opacity applied? For example colors.slate.800 / 50 (which doesn't work)
This is a tricky one. The problem is theme function will return HEX value for colors - it simply gets value from resolved configuration in dot notation. So theme('colors.red.500/300') is not valid (at least for now. I think it worth to open PR or Discussion)
All you need to solve the problem is to convert HEX to RGB. There are two Tailwind's ways I know but of course you're free to use any similar approach
First one - convert using Tailwind's withAlphaVariable function. It accepts an object with CSS property, color name and variable name.
const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable')
module.exports = {
theme: {
extend: {
typography: ({theme}) => {
// This will create CSS-like object
// you should destruct and override CSS-variable with desired opacity
const proseCodeBgColor = withAlphaVariable({
color: theme('colors.red.500'), // get color from theme config
property: 'background-color',
variable: '--tw-my-custom-bg-opacity', // could be any
})
return {
DEFAULT: {
css: {
code: {
...proseCodeBgColor,
'--tw-my-custom-bg-opacity': '.3', // opacity
},
}
},
}
}
},
},
plugins: [
require('#tailwindcss/typography')
],
}
Second one much simplier - use #apply directive. Pass desired Tailwind's utilities as a key and empty object as a value
module.exports = {
theme: {
extend: {
typography: ({theme}) => {
return {
DEFAULT: {
css: {
code: {
// you may pass as much utilities as you need eg `#apply bg-red-500/30 text-lg font-bold`: {}
'#apply bg-red-500/30': {},
},
}
},
}
}
},
},
plugins: [
require('#tailwindcss/typography')
],
}
Worth to mention you can customize code background as utility prose-code:bg-blue-500/50
<div class="prose prose-code:bg-blue-500/50">
<code>
npm install tailwindcss
</code>
</div>
DEMO
I'm trying to use react-spring to run animation X and then do animation Y. I'm using the useChain feature. It seems to run everything in parallel. What am I doing wrong? This is a super-simple scenario and I'm surprised it doesn't work AND my Googling has not turned up a lot of other people with the same problem and/or a solution. There are bugs on useChain in react-spring but they seem to cover more limited scenarios.
As an aside, I thought all React components needed to start with a capital letter so how does animated.div pass the compiler?
code sandbox simple example
This is my component. The box moves diagonally, not in the X axis and then in the Y axis.
export const Shaker = () => {
const xRef = useSpringRef();
const { x } = useSpring({
from: { x: 0 },
to: { x: 1 },
config: config.molasses,
ref: xRef
});
const yRef = useSpringRef();
const { y } = useSpring({
from: { y: 0 },
to: { y: 1 },
config: config.molasses,
ref: yRef
});
useChain([xRef, yRef]);
return (
<animated.div
style={{
width: "10rem",
height: "10rem",
backgroundColor: "green",
marginLeft: x.to((i) => i * 600 - 300),
marginTop: y.to((i) => i * 600 - 300)
}}
></animated.div>
);
};
They say this is a bug in react-spring but don't provide the number of the duplicate.
https://github.com/pmndrs/react-spring/issues/1605
I am using Cytoscape.js with dagre layout in order to visualize a tree like hierarchy. I have a couple of questions regarding the layout. You can check actual and expected snapshots and examine a runnable sample here.
Nodes in each rank/hierarchy level/ are center aligned. Can they be left-aligned according to the node with the largest width?
The separation between adjacent nodes in the same rank is the same for nodes no matter whether they are in compound nodes. Can we specify a smaller separation for nodes in a compound node ?
I have a header and footer svg specified in the compound node and can have multiple nodes from the same rank. If I set a smaller separation for all the nodes, then the compound nodes will be overlapped. I want to avoid compound nodes overlapping and at the same time have a smaller separation in the compound node.
Can we specify a order for parent nodes in the same rank? For example I want node5 and node7 along with their compound nodes to be on the top ? I am not sure whether this is supported by the dagre layout. As for klay and elk layouts they doesn't seem to have as good layout as dagre.
I am curious whether the above can be achieved with a particular layout or must be handled manually.
You can find a link to a runnable example above.
window.addEventListener("DOMContentLoaded", function() {
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
boxSelectionEnabled: false,
autounselectify: true,
layout: {
name: 'dagre',
rankDir: 'LR',
fit: false,
},
style: [
{
selector: 'node',
style: {
//'content': 'data(id)',
'label': function(arg) {
var labelRighPadding = arg.hasClass(ICON_NODE) ? '\u0020\u0020\u0020\u200b' : '';
return arg.data().id + labelRighPadding;
//return arg.data().id + '\uf022';
},
//'text-wrap': 'wrap',
//'font-family': 'FontAwesome, helvetica neue Cantarell',
'text-opacity': 0.5,
'text-valign': 'center',
'text-halign': 'center',
'background-color': 'white',
'border-width': 1,
'border-color': 'black',
//'text-margin-x': -10,
'width': 'label',
// 'width': function(e) {
// return e.boundingBox().w + 20;
// },
'height':'label',
'shape':'round-rectangle',
'padding': '5px',
}
},
{
selector: 'node.' + ICON_NODE,
css: {
'background-image': 'url(note.png)',
'background-width': '16px',
'background-height': '16px',
'background-position-x': '100%',
'background-opacity': 0,
// 'padding-relative-to': 'min'
}
},
{
selector: 'node.parent_title',
css: {
'border-color': 'red',
}
},
{
selector: ':parent',
css: {
// 'text-valign': 'center',
// 'text-halign': 'center',
//'min-height': "90px",
'background-image': ['url(host.svg)', addText(), drawLine(), addText()],
'background-width': ['16', 'auto', '100%', 'auto'],
'background-height': ['16', 'auto', '1px', 'auto'],
'background-position-y': ['10%', '10%', '70%', '90%'],
'background-position-x': ['10', '26', '0', '10'],
'label': '',
'background-color': 'white',
'border-width': 1,
'border-color': 'black',
//'padding': '10px',
'padding': '40px' //or padding 40 with no height
}
},
{
selector: 'edge',
style: {
"curve-style": "unbundled-bezier",
'width': 1,
'target-arrow-shape': 'triangle',
'target-arrow-color': 'black',
'line-color': 'black',
}
},
{
selector: 'edge.danger',
style: {
'line-color': 'red',
'target-arrow-color': 'red',
}
}
],
elements: {
nodes: [
],
edges: [
]
},
});
});
Is there a way to have multiple animations on a single Animated View, changing the same css property?
this.expandAnimation = new Animated.Value(50);
this.shrinkAnimation = new Animated.Value(200);
Animated.sequence([
Animated.timing(this.expandAnimation, {
toValue: 200,
duration: 1000
}),
Animated.timing(this.shrinkAnimation, {
toValue: 50,
duration: 1000
})
]),
<Animated.View style={[styles.box, { width: this.ExpandAnimation }]}> // What value to bind to width?
<View>
</View>
</Animated.View>
Answered by Federkun. You use a single animated value.
this.expandAndShrinkAnimation = new Animated.Value(50);
Animated.sequence([
Animated.timing(this.expandAndShrinkAnimation, {
toValue: 200,
duration: 1000
}),
Animated.timing(this.expandAndShrinkAnimation, {
toValue: 50,
duration: 1000
})
]),
<Animated.View style={[styles.box, { width: this.expandAndShrinkAnimation }]}> // What value to bind to width?
<View>
</View>
</Animated.View>
If you run the Animation on Parallel see this Demo link
I have createMaterialTopTabNavigator in my app with three tabs. These three tabs themselves belong to different createStackNavigators. I have passed drawer icon as my header right to createMaterialTopTabNavigator.
I want to edit the background color of createMaterialTopTabNavigator tabs but it is getting override with my HeaderRight icon styling.
const Daily = createStackNavigator(
{
Daily: {
screen: DailyStack,
},
Another:{
screen: Another,
}
},
{
headerMode:'none'
},
);
const Monthly = createStackNavigator({
Monthly: {
screen: MonthlyStack,
},
},
{
headerMode:'none'
});
const Range = createStackNavigator({
Range: {
screen: RangeStack,
}
},
{
headerMode:'none'
});
const DashboardTabNavigator = createMaterialTopTabNavigator(
{
Daily,
Monthly,
Range
},
{
navigationOptions: ({ navigation }) => {
return {
// tabBarOptions:{
// indicatorStyle: {
// backgroundColor: "#2E86C1",
// },
// // tabStyle:{
// // backgroundColor: '#F7F9F9'
// // },
// labelStyle :{
// color: '#2E86C1'
// },
// activeTintColor:'blue',
// inactiveTintColor: {
// color: 'green'
// },
// style: {
// backgroundColor: 'white',
// elevation: 0, // remove shadow on Android
// shadowOpacity: 0, // remove shadow on iOS,
// borderWidth:1,
// borderColor:'#ccc'
// }
// },
headerRight: (
<Icon style={{ paddingRight:20 }} onPress={() => navigation.openDrawer()} name="menu" color='#000' size={30} />
)
};
}
}
)
If I am passing the styling options inside navigationOptions then the styling does not works; only HeaderRight shows, and if I pass the styling options outside the navigationOptions, the styling works but then it hides the HeaderRight Icon from right
you must entirely study this link.
another important subject is that navigationOptions related to every screen in stack. such as this:
const App = createMaterialTopTabNavigator({
TabScreen: {
screen: TabScreen,
navigationOptions: {
headerStyle: {
backgroundColor: '#633689',
},
headerTintColor: '#FFFFFF',
title: 'TabExample',
},
},
});
so if you want to set style for top tab bar, you must use defaultNavigationOptions property such as this:
const DashboardTabNavigator = createMaterialTopTabNavigator(
{
Daily,
Monthly,
Range
},
{
defaultNavigationOptions: ({ navigation }) => {
return {
tabBarOptions:{
style: {
backgroundColor: 'white',
elevation: 0, // remove shadow on Android
shadowOpacity: 0, // remove shadow on iOS,
borderWidth:1,
borderColor:'#ccc'
}
},
};
}
}
)
Sharing common navigationOptions across screens
It is common to want to configure the header in a similar way across many screens. For example, your company brand color might be red and so you want the header background color to be red and tint color to be white. Conveniently, these are the colors we're using in our running example, and you'll notice that when you navigate to the DetailsScreen the colors go back to the defaults. Wouldn't it be awful if we had to copy the navigationOptions header style properties from HomeScreen to DetailsScreen, and for every single screen component we use in our app? Thankfully, we do not. We can instead move the configuration up to the stack navigator under the property defaultNavigationOptions.