How I can call both function from onScroll?
I trying this
onScroll={
(event) => console.log(event),
Animated.event(
[
{ nativeEvent:
{
contentOffset: { y: this.state.scrollY },
},
},
])
}
but it's not work together, only separate. For example, If I comment ether console.log or Animated.event there are working.
ops, got it
onScroll={
Animated.event(
[
{ nativeEvent:
{
contentOffset: { y: this.state.scrollY },
},
},
],
{ listener: (event) => console.log(event.nativeEvent.contentOffset.y) }
)
}
Related
Code for Animated Flatlist
const scrollY = useRef(new Animated.Value(0)).current;
const keyExtractorItem = useCallback((item) => item.id.toString(), []);
const anEvent = Animated.event(
[
{
nativeEvent: {
contentOffset: {
y: scrollY,
},
},
},
{ useNativeDriver: true }
],
);
<AnimatedFlashList
onScroll={anEvent}
contentContainerStyle={{ paddingTop: StatusBar.currentHeight || 42 }}
data={DATA}
keyExtractor={keyExtractorItem}
renderItem={renderItem}
estimatedItemSize={20}
/>
Error Occured While Scrolling
Event has less arguments than mapping
Warning Shown
ANIMATED.EVENT NOW REQUIRES A SECOND ARGUMENT FOR OPTIONS
Error Solved
const anEvent = Animated.event(
[
{
nativeEvent: {
contentOffset: {
y: scrollY,
},
},
},
],
{ useNativeDriver: true }
);
UseNativeDriver should be below the array.
I have an application with nuxt.js as a framework and it's running well in development mode. However, when I deployed to the server for production, it's show "window is not defined".
I think it's because highcharts-vue.min.js module not loaded in components so shows this error but I'm not sure about that. I attach some code and screen shoot results after deploying on the server
<template>
<highcharts class="hc" :options="chartOptions" ref="chart">
</highcharts>
</template>
<script>
import {Chart} from 'highcharts-vue'
export default {
name:"ForecastCuaca",
components: {
highcharts: Chart
},
data() {
return {
data_cuaca:[],
chartOptions: {
chart: {
type: 'spline',
backgroundColor: 'transparent',
marginTop:100
},
title: {
text: 'Prakiraan Cuaca Kota Kupang',
style:{
"color": "#ebeefd",
"fontSize": "22px"
}
},
subtitle: {
text: 'Source: openweathermap.org',
style:{
"color": "#ebeefd",
}
},
xAxis: {
categories: ['Tanggal'],
labels:{
style:{
color:"#ebeefd"
}
}
},
yAxis: {
title: {
text: 'Suhu'
},
labels: {
formatter: function () {
return this.value + '°';
},
style:{
color:"#ebeefd"
}
},
style:{
"color": "#ebeefd",
}
},
tooltip: {
formatter: function () {
return 'Suhu : ' + this.y + '° C<br /><b>' + this.x + '</b>';
}
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
}
},
series: [{
name: 'Kota Kupang',
marker: {
symbol: 'square'
},
data: [
10
],
style:{
"color": "#ebeefd",
}
}
],
credits:{
enabled:false
}
},
title: '',
}
},
methods:{
generate_data(datax){
const self = this;
self.data_cuaca = datax
self.chartOptions.xAxis.categories = []
self.chartOptions.series[0].data = []
let ganjil = 0;
for (let index = 0; index < self.data_cuaca.length; index++) {
ganjil++;
const element = self.data_cuaca[index];
self.chartOptions.xAxis.categories.push(element.waktu_indonesia)
if (ganjil % 2 == 1) {
const iconx = element.weather[0].icon+'.png';
const data_series = {
y:element.main.temp,
marker: {
symbol: "url(http://openweathermap.org/img/w/"+iconx+")"
}
}
self.chartOptions.series[0].data.push(data_series)
}else{
self.chartOptions.series[0].data.push(element.main.temp)
}
}
}
}
}
</script>
I'm trying to animate some components on scroll, using
const scrollY = useRef(new Animated.Value(0)).current; for tracking the value.
This code below works:
<Animated.ScrollView
onScroll={Animated.event(
[
{
nativeEvent: {
contentOffset: {
y: scrollY,
},
},
},
],
{
useNativeDriver: false,
}
)}
></Animated.ScrollView>;
But I want to be able to extract Animated.event function within the onScroll prop to its own independent function. This code below doesnt seem to update scrollY:
// My onScroll handler
const handleScroll = ({ nativeEvent }) => {
// Some other code here...
return Animated.event(
[
{
nativeEvent: {
contentOffset: {
y: scrollY,
},
},
},
],
{
useNativeDriver: false,
}
);
};
// Scrollview component
<Animated.ScrollView onScroll={handleScroll}></Animated.ScrollView>;
Not sure if you ever figured it out, but this will work:
const handleScroll =
scrollY && (() => {
console.log('hey');
return Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
useNativeDriver: true,
});
}
)();
I am using React Native Navigation v2 from WIX in my RN project. For Dashboard(goToDahboard) stack I need to show hamburger icon on the left on on click show side drawer. How can this be implemented?
Since upgrading from v1, side menu options has changed and the docs aren't clear enough.
export const goToDashboard = () =>
Promise.all([
Icon.getImageSource('home', 22, '#272727'),
Icon.getImageSource('th-list', 22, '#272727'),
]).then(sources => {
Navigation.setRoot({
root: {
bottomTabs: {
children: [
{
stack: {
children: [
{
component: {
name: 'Dashboard',
},
},
],
options: {
bottomTab: {
icon: sources[0],
text: 'Dashboard',
},
},
},
},
{
stack: {
children: [
{
component: {
name: 'Settings',
},
},
],
options: {
bottomTab: {
icon: sources[1],
text: 'Settings',
},
},
},
},
],
id: 'bottomTabs',
},
},
});
});
export const goToAuth = () =>
Navigation.setRoot({
root: {
stack: {
id: 'Login',
children: [
{
component: {
name: 'Login',
},
},
],
},
},
});
I'am using like this, thats my code;
Navigation.setRoot({
root:{
sideMenu:{
left:{
component:{
name:'app.Main.SideDrawer'
}
},
center:{
bottomTabs:{
id: 'MainAppBottomTab',
children:[
{
stack:{
children:[
{
component:{
name: 'app.Main.Bottom_1',
options:{
bottomTab:{
text: "Bottom 1",
icon: require('./../../assets/images/Bottom_1.png'),
}
},
}
}
],
options: {
bottomTab: {
text: 'Bottom 1',
},
bottomTabs:{
backgroundColor: ColorTable.orange,
animate:false,
},
topBar:{
title:{
text: 'Bottom 1',
},
leftButtons:[
{
id: 'btn_toggle_drawer',
name: 'BTN_TOGGLE_DRAWER',
icon: require('./../../assets/images/hamburger_icon.png'),
}
],
}
}
}
}
]
}
}
}
}
});
Now we need to use wix's life cycle.
If you want to close it in SideDrawer, you should use the following code;
Navigation.mergeOptions(this.props.componentId, {
sideMenu: {
left: {
visible: false
}
}
});
this.props.componentId equal to app.Main.SideDrawer. Because of we are in app.Main.SideDrawer component.
If you want to open with hamburger icon, Go to whatever page you want to use for bottomTab, in our example I said Bottom_1.
Don't forget to type Navigation.events().bindComponent(this) into the constructor method. This allows you to linking with native.
Only the following command will work;
navigationButtonPressed({buttonId}) {
if (buttonId === "btn_toggle_drawer") {
Navigation.mergeOptions(this.props.componentId, {
sideMenu: {
left: {
visible: true
}
}
});
}
}
The code above works but is problematic. You're going to tell me that I'm going to have to press twice to turn it off =)
The solution is to use redux. Or mobx whichever you prefer.
To solve this problem, I used redux and redux-thunk.
Wix's is life cycle, please explore it: https://wix.github.io/react-native-navigation/#/docs/Usage?id=screen-lifecycle
With redux solution
Real function is;
navigationButtonPressed({buttonId}) {
if (buttonId === "btn_toggle_drawer") {
this.props.toggleDrawer(this.props.isSideDrawerVisible);
Navigation.mergeOptions(this.props.componentId, {
sideMenu: {
left: {
visible: this.props.isSideDrawerVisible
}
}
});
}
}
toggle_drawer action
export const toggleDrawer = (visible) => {
return (dispatch) => {
(visible) ? visible = true : visible = false;
dispatch({
type: TOGGLE_DRAWER,
payload: visible
});
}
};
toggle_drawer reducer
const INITIAL_STATE = {
isSideDrawerVisible: true
};
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case TOGGLE_DRAWER:
return {...state, isSideDrawerVisible: action.payload};
default:
return state;
}
}
Sample connect function;
import {connect} from "react-redux";
// actions
import {toggleDrawer} from "../../../actions/toggle_drawer";
const mapStateToProps = state => {
return {
isSideDrawerVisible: state.toggleDrawer.isSideDrawerVisible,
}
};
export default connect(mapStateToProps, {toggleDrawer})(Bottom_1_Screen);
Don't forget to connect wix with Redux. https://wix.github.io/react-native-navigation/#/docs/third-party?id=redux
I hope I can help you, I saw it a little late.
Have a nice day..
You can use
Navigation.mergeOptions()
like this to fire and open the drawer:
navigationButtonPressed = ({ buttonId }) => {
const { componentId } = this.props;
if (buttonId === 'sideMenu') {
Navigation.mergeOptions(componentId, {
sideMenu: {
left: {
visible: true,
},
},
});
}
}
I always get this error when I update the line chart data. I know that setState is wrong, but the specific modification method cannot be found, and ask for help. Thank you.
I think it's the problem, but there's no solution.
this.setState({
data: {
...this.state.data.$set,
dataSets:[{
...this.state.data.$set.dataSets[0],
values
}]
},
xAxis: {
...this.state.xAxis.$set.valueFormatter,
valueFormatter,
axisMaximum,
axisMaximum
},
})
Chart github address：
https://github.com/wuxudong/react-native-charts-wrapper
This is the source code, just uploaded the picture, the feeling is not suitable for reading.
componentDidMount() {
this.setState(
update(this.state, {
data: {
$set: {
dataSets: [{
values: [{y: 10}, {y: 20}, {y: 30.11}, {y: 25.77}],
label: 'LineChart',
config: {
lineWidth: 0.5,
drawCircles: false,
highlightColor: processColor('red'),
color: processColor('red'),
drawFilled: true,
fillColor: processColor('red'),
fillAlpha: 60,
valueTextSize: 15,
valueFormatter: "##.000",
}
}],
}
},
xAxis: {
$set: {
fontFamily:"HelveticaNeue-Medium",
fontWeight:"bold",
fontStyle:"italic",
valueFormatter: ['2017-01-01 10:00:000','2017-02-01 10:00:000','2017-03-01 10:00:000'],
position: 'BOTTOM' ,
drawGridLines: false
}
},
yAxis: {
$set: {
left: {
drawLabels: true,
drawAxisLine: true,
drawGridLines: false,
drawValueAboveBar:false,
zeroLine: {
enabled: true,
lineWidth: 1
}
},
right: {
enabled: false
}
}
},
})
);
}
componentWillReceiveProps(nextProps) {
debugger;
if (nextProps.zxData !== this.props.zxData) {
let values=[];
let valueFormatter=[];
let axisMaximum=nextProps.zxData.length;
nextProps.zxData.map((item,key)=>{
values.push({y:item.YValue});
valueFormatter.push(item.XValue);
})
this.setState({
data: {
...this.state.data.$set,
dataSets:[{
...this.state.data.$set.dataSets[0],
values
}]
},
xAxis: {
...this.state.xAxis.$set.valueFormatter,
valueFormatter,
axisMaximum,
axisMaximum
},
})
}
}