Ui: Invalid props.style key 'heroAnimation' supplied to AnimatedComponent

[tafelito]

Hi, I get this warning using a Tile component within a GridRow.

I know its just a warning but is there anything to be done to get rid of it?

I'm using the commit which removes the use of NavigationExperimental

Thanks

[Definitely-Not-Vlad]

I tried to replicate what you described and didn't get the same warning. Could you please include as much relevant code as possible?

Also, this Stack Overflow Answer may be relevant for you.

[tafelito]

@Vladimir-Vdovic here is the code of how I'm building my component.

class VideoPlaylist extends Component {
  renderItem = ({ item }) => {
    const cellViews = item.map(video => (
      <TouchableOpacity onPress={() => this.onPressVideo(video.id)}>
        <Tile key={video.id}>
          <Image styleName="medium-wide" source={{ uri: video.thumbnail }}>
            <Overlay styleName="rounded-small">
              <Icon name="play" />
            </Overlay>
          </Image>
          <View styleName="content">
            <Title>{video.title}</Title>
            <View styleName="horizontal space-between">
              <Caption>{video.author}</Caption>
              <Caption>20 hours ago</Caption>
            </View>
          </View>
        </Tile>
      </TouchableOpacity>
    ));

    return (
      <GridRow columns={2}>
        {cellViews}
      </GridRow>
    );

  render() {
    const groupedData = GridRow.groupByRows(this.state.videos, 2);
    return (
      <FlatList
          data={groupedData}
          renderItem={this.renderItem}
          keyExtractor={({ item }) =>
            (item.length > 1 ? `${item[0].id}${item[1].id}` : item[0].id)}
      />
    )
  }
}

BTW, I'm not trying to get rid of the warnings in general, I just wanna know how to get rid of this particular warning in case is something I'm doing wrong

[Definitely-Not-Vlad]

Just quickly replying to let you know that the Stack Overflow Answer (the specific one I linked to), actually handles exactly that, how to ignore a specific warning, not all warnings.

I'll check on your code in a bit, just wanted to let you know that about the link I gave you.

[tafelito]

thanks @Vladimir-Vdovic, I meant that I don't mind the yellow box, it does help sometimes. I know you meant that, just wanted to check if the warning is because something I was doing wrong.

But thanks anyway!

[Definitely-Not-Vlad]

Can you also include your imports?

This is a really weird occurrence since it doesn't seem like you're trying to implement an animation from the shoutem/animation part of the toolkit.

[tafelito]

import React, { Component } from 'react';
import {
  FlatList,
  ActivityIndicator,
  TouchableOpacity,
} from 'react-native';
import {
  View,
  Text,
  Button,
  Icon,
  GridRow,
  Image,
  Tile,
  Title,
  Subtitle,
  Divider,
  Caption,
  Card,
  Overlay,
} from '@shoutem/ui';

I'm using react-native-navigator if that helps too

[tafelito]

and these are my dependencies

"dependencies": {
        "@shoutem/ui": "shoutem/ui#242/head",
        "react": "16.0.0-alpha.6",
        "react-native": "0.44.2",
        "react-native-animatable": "^1.2.0",
        "react-native-cookies": "^3.1.0",
        "react-native-elements": "^0.12.2",
        "react-native-navigation": "^1.1.86",
        "react-native-vector-icons": "^4.2.0",
        "react-redux": "^5.0.5",
        "redux": "^3.6.0",
        "redux-persist": "^4.8.0",
        "redux-thunk": "^2.2.0",
        "xmldom": "^0.1.27"
    },
    "devDependencies": {
        "babel-eslint": "^7.2.3",
        "babel-jest": "20.0.3",
        "babel-preset-react-native": "1.9.2",
        "eslint": "3.19.0",
        "eslint-config-airbnb": "^15.0.1",
        "eslint-plugin-import": "2.2.0",
        "eslint-plugin-jsx-a11y": "5.0.1",
        "eslint-plugin-react": "7.0.1",
        "jest": "20.0.4",
        "react-test-renderer": "16.0.0-alpha.6",
        "redux-immutable-state-invariant": "^2.0.0",
        "redux-logger": "^3.0.6"
    },

[asterikx]

Experiencing the same error on branch shoutem/ui#242/head with RN 0.45.1. My rendering is like

<Image source={{uri: image.url}}>
  <Tile styleName='clear'>
    <Title>{image.description}</Title>
  </Tile>
</Image>

[DiederikvandenB]

I've got the same problem, same versions as @mulles3008

[gen4sp]

So any moves here?
I've got the same problem with Tile

[Definitely-Not-Vlad]

This seems related to this issue. As stated there, this doesn't seem to be an issue any longer as of the newest version of the Shoutem UI toolkit. Going to close this issue. If this is still an issue in some way, don't hesitate to prompt for a reopen.