how can we reconfigure modals using react-native-modalfy separately?
like in App.tsx i have configured modal like this below.
I want to change position and animation style for DemoModal2.
import { createModalStack } from 'react-native-modalfy';
const { height } = Dimensions.get('screen');
export const ModalStack = createModalStack({
demo1:DemoModal1,
demo2:DemoModal2
}, {
animateInConfig: {
easing: Easing.inOut(Easing.exp),
duration: 900,
},
animateOutConfig: {
easing: Easing.inOut(Easing.exp),
duration: 900,
},
backdropOpacity: 0.6,
position: 'top',
transitionOptions: (animatedValue) => ({
transform: [
{
translateY: animatedValue.interpolate({
inputRange: [0, 1, 2],
outputRange: [height, 0, height],
}),
},
{
scale: animatedValue.interpolate({
inputRange: [0, 1, 2],
outputRange: [0, 1, 0.9],
}),
},
],
}),
});
similarly there will be more modals. So i need some examples..
Related
I don't know how to convert the unit of the cirle radius, now it's meters but I need to convert it into pixel.
I also want to know how to make the border of the circle become dashed border, like the picture (the circle with the white dashed border)
Here is the code.
const map_data = [];
const current_map_data = [];
this.current_map = this.$echarts.init(document.getElementById('map_id'));
this.$echarts.registerMap('my_map', map_data);
const typhoon_points = [
{name: 0, value: [124.36, 23, 6]},
{name: 1, value: [122, 23.8, 6]},
{name: 2, value: [120, 24.4, 6]},
{name: 3, value: [118.5, 24.8, 6]},
{name: 4, value: [117.2, 25.5, 6]}
];
const typhoon_lines = [
{"point": [0, 1], "coords": [[124.36,23], [122, 23.8]]},
{"point": [1, 2], "coords": [[122, 23.8], [120, 24.4]]},
{"point": [2, 3], "coords": [[120, 24.4], [118.5, 24.8]]},
{"point": [3, 4], "coords": [[118.5, 24.8], [117.2,25.5]]},
];
const option = {
geo: [{
map: map_name,
roam: 'move',
boundingCoords:[ [118, 26.5], [122.4,21.5] ],
center: center,
layoutCenter: ['50%', '50%'],
aspectScale: 1,
scaleLimit: { min: 1.6, max: 12.0 },
left: '0%',
zoom: zoom,
itemStyle: {
areaColor: 'none',
borderColor : '#999',
borderWidth: 1,
emphasis: {
areaColor: 'inherit',
},
},
}],
series: [{
selectedMode: false,
name: 'current_map',
type: 'map',
geoIndex: 0,
data: current_map_data,
zlevel: 3
}, {
name: "",
type: "lines",
zlevel: 6,
lineStyle: {
type: 'solid',
width: 1,
opacity: 1,
curveness: 0,
orient: 'horizontal',
color: "#000",
},
data: typhoon_lines,
}, {
name: '',
type: 'scatter',
coordinateSystem: 'geo',
color: ['#000'],
itemStyle: {
borderType: 'dashed', // it's not working
borderWidth: 50, // The unit of the symbol size is pixel, I need to convert it into pixel.
borderColor: 'green',
color: '#000',
},
data: typhoon_points,
}],
};
I created a line & circle layer into series, but I don't know how to change the border style and the unit of the symbol size (I think it's the radius of the circle)
I want to create a weekly plan and the user should be able to "select" a day which should then grow in the ui (example below).
I am using the Animated class from react-native and noticed I am not able to animate the flex-property, so I believe I have to do this using width and height.
I tried the following after reading #M.N.s awnser:
selectDay = (i: number) => {
const {selected, grow, shrink} = this.state;
this.setState({selected: i, latestSelected: selected});
grow.setValue(0.5);
shrink.setValue(1);
Animated.parallel(
[
Animated.timing(grow, {
toValue: 1,
duration: 200,
useNativeDriver: false,
easing: Easing.cubic,
}),
Animated.timing(shrink, {
toValue: 0.5,
duration: 200,
useNativeDriver: false,
easing: Easing.cubic,
}),
],
{stopTogether: false},
).start();
};
// In my render:
const growInterpolate = grow.interpolate({
inputRange: [0, 1],
outputRange: ['0%', '25%'],
});
const shrinkInterpolate = shrink.interpolate({
inputRange: [0, 1],
outputRange: ['0%', '25%'],
});
But it still behaves very laggy:
Video of the animation
In such case you need to use parallel animation:
Animated.parallel([
Animated.timing(animatedHeight, {
toValue: newHeight,
duration: 200,
}),
Animated.timing(animatedWidth, {
toValue: newWidth,
duration: 200,
})
], { stopTogether: false }).start()
More information:
https://reactnative.dev/docs/animated#parallel
Is there anywhere to make linear gradient on full date/year
https://jsfiddle.net/0712nw3g/64/
for example if i move/scroll the graph in 3 month zoom, color gradient should be the same as 1year/all
series: [{
type: 'line',
name: 'Volume',
id: 'stock',
data: volume,
yAxis: 0,
dataGrouping: {
units: groupingUnits
},
lineWidth: 10,
color: {
linearGradient: [0, 0, this.plotWidth, 0],
stops: [
[0, '#26A69A'],
[1, '#CE1510']
]
},
}
]
You can set the options xAxis.events.afterSetExtremes to modify the color gradient in the graph but the color in the navigator also changes.
https://jsfiddle.net/BlackLabel/j3ca7oyh/
Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-c.json', function(data) {
Highcharts.stockChart('container', {
xAxis: {
events: {
afterSetExtremes: function() {
const dataRange = this.dataMax - this.dataMin,
currentRange = this.max - this.min
this.series[0].update({
color: {
linearGradient: [0, 0, this.plotWidth, 0],
stops: [
[1 - currentRange / dataRange, 'blue'],
[1, 'yellow']
]
},
})
}
}
},
series: [{
name: 'AAPL',
data: data,
color: {
linearGradient: [0, 0, this.plotWidth, 0],
stops: [
[0, 'blue'],
[1, 'yellow']
]
},
}]
});
});
Another way will be adding a series inside the navigator and trying to calculate gradient color.
https://jsfiddle.net/BlackLabel/qLp61uft/
Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-c.json', function(data) {
Highcharts.stockChart('container', {
xAxis: {
events: {
afterSetExtremes: function() {
const dataRange = this.dataMax - this.dataMin,
currentRange = this.max - this.min
this.series[0].update({
color: {
linearGradient: [0, 0, this.plotWidth, 0],
stops: [
[0, 'red'],
[1, 'yellow']
]
},
})
}
}
},
navigator: {
series: {
name: 'AAPL',
data: data,
fillColor: {
linearGradient: [0, 0, this.plotWidth, 0],
stops: [
[0, 'blue'],
[1, 'yellow']
]
},
}
},
series: [{
name: 'AAPL',
data: data,
color: {
linearGradient: [0, 0, this.plotWidth, 0],
stops: [
[0, 'blue'],
[1, 'yellow']
]
},
}]
});
});
Need help with chart js
ACTUALLY, I'M USING VUE-CHARTJS BUT IT'S JUST A WRAPPER
in the line chart on the left side, the number is increasing by 5(0, 5, 10, 15, etc) I want it to increase by 10 and also decrease the height of the chart so the aspect ratio is something like 16/9
also is it possible to make the left number say 5k+, 10k+, 15k+ instead of just 5, 10, 15
here's my code for the chart
<script>
import { Line } from 'vue-chartjs'
export default {
extends: Line,
data: () => ({
chartdata: {
labels: ['January', 'February', 'March', 'April', 'May','Jun'],
datasets: [
{
data: [12, 20, 27, 22, 14, 10],
borderColor: "#135193",
pointBackgroundColor: "#135193",
pointBorderColor: "#135193",
backgroundColor: 'rgba(255, 255, 255, 0)'
},
{
data: [3, 12, 17, 20, 30, 40],
borderColor: "#FF8811",
pointBackgroundColor: "#FF8811",
pointBorderColor: "#FF8811",
backgroundColor: 'rgba(255, 255, 255, 0)'
}
]
},
options: {
responsive: true,
legend: {
display: false
}
}
}),
mounted () {
this.renderChart(this.chartdata, this.options)
}
}
</script>
Yes, you can just use CSS to set the dimensions of the canvas and set maintainAspectRatio to false in the options, for the ticks you can use the tick callback:
const labels = ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"];
const options = {
type: 'line',
data: {
labels,
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'red',
backgroundColor: 'pink'
}]
},
options: {
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
callback: (val) => (`${val}K`)
}
}]
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
canvas {
max-height: 180px;
max-width: 320px;
}
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>
Okay it turns out its as simple as wrapping the chart with a container and set height of that container as needed
I am trying to set opacity dynamically based on scrollview's Y position.
I can get opacity from 1 => 0 using ...
opacity: this.state.scrollY.interpolate({
inputRange: [0, 250],
outputRange: [1, 0],
})
and ScrollView has following attribute
onScroll={Animated.event(
[
{
nativeEvent: {
contentOffset: { y: this.state.scrollY },
},
},
],
{
useNativeDriver: true,
}
)}
But my requirement is to get opacity to 0.5, not 0.
Is there a simple way to achieve this?
Thank you.
Interpolate function works with an input and output as you know.
input is the value which you want to make an interpolate on, and output is the input range's output's range. for example:
if you are scrolling and want to make some animation on 200 to 360, your input will be [200,360] (the range between 200 and 360) and if you want to change opacity from 1 to .3 your output range will be [1,0.3]. in your case :
opacity: this.state.scrollY.interpolate({
inputRange: [-, 250],
outputRange: [1, 0.5],
})
inputRange: [0, 150],
outputRange: [1, 0.3],
extrapolate: 'clamp',
Worked for me. Where 0.3 is where you want to transition to (so in your case 0.5)