React-Native Animated.interpolate doesn't work with Styled-Components

Question

Does anybody know why the Animated.interpolate function doesn't work with Styled-Components.. or what I am doing wrong?

Environment

• Node: 12.13.0
• npm: 6.12.0
• react-native: 0.62
• styled-components: ^5.1.1 => 5.1.1
• @types/styled-components: ^5.1.0 => 5.1.0

Steps to Reproduce

1. Create a new TypeScript react-native project with npx react-native init MyApp --template react-native-template-typescript

2. Install styled-components and @types/styled-components

3. Replace the code of the App.tsx with

import React, {useRef} from 'react';
import {
  View,
  Animated,
  Button,
} from 'react-native';
import styled, {ThemeProvider} from 'styled-components/native';


const App = () => {

// Animation
  const boxAnimation = useRef(new Animated.Value(0)).current;
  const moveIn = () => {
    Animated.timing(boxAnimation, {
      toValue: 1,
      duration: 2000,
      useNativeDriver: false,
    }).start();
  };
  const moveOut = () => {
    Animated.timing(boxAnimation, {
      toValue: 0,
      duration: 2000,
      useNativeDriver: false,
    }).start();
  };
  const fadeAnim = boxAnimation.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 1],
  });
  const moveAnim = boxAnimation.interpolate({
    inputRange: [0, 1],
    outputRange: [0, -50],
  });

  return (
    <ThemeProvider theme={{}}>
      <AnimatedBox opacity={fadeAnim} pos={moveAnim}/>
      <Animated.View style={{
        position: 'absolute',
        top: 0,
        left: moveAnim,
        width: 50,
        height: 50,
        opacity: fadeAnim,
        backgroundColor: 'green',
      }}/>
      <View style={{marginTop: 100}}>
        <Button title={'MoveIn'} onPress={() => moveIn()}/>
        <Button title={'MoveOut'} onPress={() => moveOut()}/>
      </View>
    </ThemeProvider>
  );
};

const Box = styled.View`
  position: absolute;
  top: 0;
  left: ${props => props.pos}px;
  width: 50px;
  height: 50px;
  opacity: ${props => props.opacity};
  background-color: red;
`;
const AnimatedBox = Animated.createAnimatedComponent(Box);

export default App;

Expected Behavior

The red Box (colored View) should fade in and move into the screen if you click the MoveIn Button and should fade out and move out if you click the MoveOut Button. (See expected behavior green box with normal inline styles)

Actual Behavior

The red Box will always stay at the position -50 and fades out by clicking the MoveOut Button and fade in if you click the MoveIn Button (See if you set the pos of the red box to 0)

-> The interpolate function only works with the output range of 0, 1 and 1, 0 which shouldn't be so.. As I said if you are using the normal react-native StyleSheet the interpolate function works as expected..

GitHub Issue: https://github.com/styled-components/styled-components/issues/3185

Thank you ^^

Answer 1

I am not familiar with "styled" but without it you can try to set left with constant number and then swap

pos={moveAnim}

with

style={{ transform: [{ translateX: moveAnim }] }}