wix / react-native-ui-lib

UI Components Library for React Native
https://wix.github.io/react-native-ui-lib/
MIT License
6.53k stars 712 forks source link

Card component Error Invariant Violation: "opacity":"<<NaN>>"}] is not usable as a native method argument #2466

Closed satya1395 closed 1 year ago

satya1395 commented 1 year ago

Description

Getting below error message when card onclick event is triggered. I am using a small portion of code from the demo card screen https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CardsScreen.tsx

Related to

Steps to reproduce

  1. Create card component similar to the ones in example code
  2. Run Expo app with clear cache 'npx expo start -c'
  3. Click on the card component and app will throw error

Expected behavior

OnPress should trigger select or deselect animation.

Actual behavior

Throws error

More Info

Code snippet

CardScreen.js

import React, { useState } from "react";
import { ScrollView } from "react-native";
import { Card, Colors, View, Text } from "react-native-ui-lib";

const cardImage = require("../assets/kaja.jpg");

const CardScreen = () => {
  const [Selected1, setSelected1] = useState(true);
  const [Selected2, setSelected2] = useState(true);
  return (
    <ScrollView>
      <View flex padding-20>
        <View row marginV-10>
          <Card
            height={120}
            flex
            selected={Selected1}
            onPress={() => setSelected1({ Selected1: !Selected1 })}
            activeOpacity={1}
            marginR-20
          >
            <Card.Section
              imageSource={cardImage}
              imageStyle={{ height: "100%" }}
            />
          </Card>
          <Card
            height={120}
            flex
            selected={Selected2}
            onPress={() => setSelected2({ Selected2: !Selected2 })}
            activeOpacity={1}
            selectionOptions={{
              color: Colors.grey40,
              indicatorSize: 25,
              borderWidth: 3,
            }}
          >
            <Card.Section
              imageSource={cardImage}
              imageStyle={{ height: "100%" }}
            />
          </Card>
        </View>
      </View>
    </ScrollView>
  );
};

export default CardScreen;

App.js

import { Text } from "react-native";
import { Button, View } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import ListScreen from "./src/screens/ListScreen";
import PickerScreen from "./src/screens/PickerScreen";
import CardScreen from "./src/screens/CardScreen";
<MyStack />;
function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Button
        title="ListScreen"
        onPress={() => navigation.navigate("ListScreen")}
      />
      <Button
        title="PickerScreen"
        onPress={() => navigation.navigate("PickerScreen")}
      />
      <Button
        title="CardScreen"
        onPress={() => navigation.navigate("CardScreen")}
      />
    </View>
  );
}

/* 

function SettingsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
} */

const Stack = createNativeStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="UILib Demos" component={HomeScreen} />
      <Stack.Screen name="CardScreen" component={CardScreen} />
    </Stack.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyStack />
    </NavigationContainer>
  );
}

Screenshots/Video

Simulator Screen Shot - iPhone 14 Pro - 2023-02-14 at 23 38 11

Environment

Macbook 14, M1 Pro, MacOS 13.2

React Native version: 0.70.5 React Native UI Lib version: "^6.30.1" "expo": "~47.0.12", "react-native": "0.70.5",

Affected platforms

stale[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.