Question: Using Animated with styled-components (react-native)


Using Animated with styled-components (react-native)

Answers 1
Added at 2017-01-02 11:01

I'm experiencing an error stating following (tested via iOS):

Cannot read property 'getScrollableNode' of null

While trying to use react-native's Animated along side styled-components styling tool for react and react-native.

Here is example of a <Logo /> component I created:

import React from 'react';
import { Image, Dimensions } from 'react-native';
import styled from 'styled-components/native';

const { width } = Dimensions.get('window');
const logoWidth = width - (width * 0.2);
const logoHeight = logoWidth * 0.4516;

const SLogoImage = styled(Image)`
  width: ${logoWidth};
  height: ${logoHeight};

const Logo = ({ }) => (

export default Logo;

I am then importing this component into one of my scenes where I want to apply animation to it:

import React from 'react';
import { View, Animated } from 'react-native';
import Logo from '../components/Logo';

const ALogo = Animated.createAnimatedComponent(Logo);

class HomeScene extends Component {
  state = {
    fadeAnim: new Animated.Value(0)

  componentDidMount() {
      { toValue: 1 }

  render() {
      <ALogo style={{ opacity: this.state.fadeAnim }} />


export default HomeScene;

And this results in error mentioned above, tried Googling it and wasn't able to find any sort of explanation to what it is. feel free to request further details if necessary.

Related GitHub issue:

Answers to

Using Animated with styled-components (react-native)

nr: #1 dodano: 2017-01-05 14:01

This issue is actually not related to styled-components. Rather, it's a react-native one

The workaround for this is to use class instead of a stateless component.

class Logo extends React.Component {
  render () {
    return (

Here is a github repo where it is working. If anyone wants to reproduce it, Just uncomment 14-21 lines to see the error.

I think the issue comes from Animated trying to attach ref to a stateless component. And stateless components cannot have refs.

Source Show
◀ Wstecz