how can I set background to react native animated view-CodePudding

Issue Description

I want to change background color right after rendering component but interpolate but actual output is Error: Style property 'backgroundColor' is not supported by native animated module

Codes

import React, {useEffect, useRef} from 'react';
import {Animated} from 'react-native';

export default function Welcome(props) {
  const translation = useRef(new Animated.Value(0)).current;
  useEffect(() => {
    Animated.timing(translation, {
      toValue: 0,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  }, []);
  const styles = {
    flex: 1,
    backgroundColor: translation.interpolate({
      inputRange: [0, 100],
      outputRange: ['orange', 'blue'],
    }),
    opacity: translation.interpolate({
      inputRange: [25, 50, 100],
      outputRange: [0, 1, 0],
      extrapolate: 'clamp',
    }),
    transform: [
      {translateX: translation},
      {
        rotate: translation.interpolate({
          inputRange: [0, 100],
          outputRange: ['0deg', '360deg'],
        }),
      },
    ],
  };
  return (
    <Animated.View style={styles}>
      <Animated.Text style={{color:'tomato'}}>Credex</Animated.Text>
    </Animated.View>
  );
}

CodePudding user response：

React native 0.68-rc added support for interpolating colors but you can also use reanimated to do these things and it's much easier. For this case, please set useNativeDriver to false.

CodePudding user response：

Solution

Firstly, I set useNativeDriver: false
Secondly, within use effect

 Animated.timing(translation, {
     toValue: 100,
     duration: 1000,
     useNativeDriver: false,
   }).start()

Finally I set height and width to the view

  const styles = {
    width: 300,
    height: 300,
    backgroundColor: translation.interpolate({
      inputRange: [0, 100],
      outputRange: ['orange', 'blue'],
    }),
    opacity: translation.interpolate({
      inputRange: [25, 50, 100],
      outputRange: [0, 1, 1],
      extrapolate: 'clamp',
    }),
    transform: [
      {translateY: translation},
      {
        rotate: translation.interpolate({
          inputRange: [0, 100],
          outputRange: ['0deg', '360deg'],
        }),
      },
    ],
  };

for more you can refer to this post Here's or watch it at YouTube