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

[satya1395]

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

• [x] Components
• [x] Demo
• [ ] Docs
• [ ] Typings

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

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

• [ ] Android
• [x] iOS
• [ ] Web

[stale[bot]]

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.