Pseduo-code Styled Components + Animated

gistfile1.txt

const CustomDiv = styled(Animated.view)`
  transform: ${props => `rotate(props.rotateDeg)`}
`;

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      rotate: new Animated.Value(0)
    }
  }
  componentDidMount() {
    setInterval(() => {
      Animated.spring(this.state.rotate, {toVal: this.state.rotate._val === 0 ? 1 : 0}).start();
    }, 1000);
  }
  render() {
  
    const rotateDeg = this.state.rotate.interpolate({
      inputRange: [0,1],
      outputRange: ["0deg", "360deg"]
    });
    
    return (
      <CustomDiv rotateDeg={rotateDeg} />
    )
  }
}

To make this work you'll unfortunately have to pass all the animated values in style :(

Maybe I could pass all the values and then extend the styled object after (if I need to add more styles after)?

Ah, now I understand. Just pass the style object the regular way, but then it pretty much bypasses styled-components.