CODEWITHSUNDEEP
react-nativeanimationexpo
Ferin Patel
Ferin Patel

Reputation: 3998

Expo: Malformed calls from JS: field sizes are different

I'M creating draggable view in expo (react-native) app. I am using PanResponder API from react-native. As soon as i start dragging the view, it crash and show this error. I put my code in try-catch block and i got this error on console. 

[17,"RCTView",{"top":0,"left":"<<NaN>>"}] is not usable as a native method argument

Red screen on phone shows Malformed calls from JS: field sizes are different and
[[134,10],[6,0],[["ExpoErrorRecovery",0,[null],252,253]],125]

This is my code

import React, { useState } from "react";
import { My imports Here } from "react-native";
export default function App() {

  const position = useState(new Animated.ValueXY(0))[0];

  const [currentIndex, setCurrentIndex] = useState(0);

  const SCREEN_HIEGHT = Dimensions.get("window").height;
  const SCREEN_WIDTH = Dimensions.get("window").width;

  const ARTICLES = [
    {
      id: 1,
      uri: "https://placeimg.com/1000/1000/any",
    },
    {
      id: 2,
      uri: "https://placeimg.com/1000/1000/any",
    },
  ];

  const panResponder = useState(
    PanResponder.create({
      onStartShouldSetPanResponder: (e, gestureState) => true,
      onPanResponderMove: (e, gestureState) => {
        position.setValue({ y: gestureState.dy });
      },
      onPanResponderRelease: (e, gestureState) => {},
    })
  )[0];

  const RenderArticles = () => {
    return ARTICLES.map((item) => {
      return (
        <Animated.View
          key={item.id}
          {...panResponder.panHandlers}
          style={position.getLayout()}
        >
          <View
            style={{
              flex: 1,
              position: "absolute",
              height: SCREEN_HIEGHT,
              width: SCREEN_WIDTH,
              backgroundColor: "white",
            }}
          >
            <View style={{ flex: 2 }}>
              <Image
                source={{ uri: item.uri }}
                style={{
                  flex: 1,
                  height: null,
                  width: null,
                  resizeMode: "center",
                }}
              ></Image>
            </View>
            <View style={{ flex: 3, padding: 5 }}>
              <Text>
                Inventore autem recusandae est explicabo non cumque eum
                corporis. Rem qui est velit et quia accusantium perferendis
                odit. Vel velit aut iste quibusdam modi qui consequatur sit.
                Quas quae aperiam consectetur ut ut. Dignissimos et nisi sit.
                Eaque suscipit necessitatibus id odit.
              </Text>
            </View>
          </View>
        </Animated.View>
      );
    });
  };
  return <View style={{ flex: 1 }}>{RenderArticles()}</View>;
}

I am following this tutorial on youtube. I have exact same code to this tutorials but difference is he is using class component and i am using functional component.


Please help me to solve this error.
Appreciate your help

Upvotes: 1

Views: 3718

Answers (1)

Aswin C
Aswin C

Reputation: 1222

Just assign a value to x inside onPanResponderMove.

Here you don't need to translate along x. so make it 0

onPanResponderMove: (e, gestureState) => {
   position.setValue({ y: gestureState.dy, x: 0 });
},

Upvotes: 1

Related Questions