React Native - how to re render a component every x milliseconds? "this.setState is not a function?"

Question

Alright, Im trying to update the properties and/or text of a component every x milliseconds. I dove into https://www.npmjs.com/package/react-interval-renderer and the likes, however I got errors pertaining to s.

Im now looking at simply react native (IOS). how to update value date (millisecond) however am having trouble formatting this to my file.

I have:

export default props => {
  let [fontsLoaded] = useFonts({
    'Inter-SemiBoldItalic': 'https://rsms.me/inter/font-files/Inter-SemiBoldItalic.otf?v=3.12',
  });

  this.state ={
   color: "#fff",
   colorAnimTime: 36000,
   time: 0
  }

    setInterval(() => {
      this.setState({
        time: new Date().getMilliseconds()
      });
    }, 1000);


//------------------------------------------------------------------->
  if (!fontsLoaded) {
    return <AppLoading />;
  } else {

    const styles = StyleSheet.create({
      container: { flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
    },
      textWrapper: {
        height: hp('70%'), // 70% of height device screen
        width: wp('80%'),   // 80% of width device screen
        justifyContent: 'center',
        alignItems: 'center',
      },
      myText: {
        fontSize: hp('5.5%'), // End result looks like the provided UI mockup
        fontFamily: 'SequelSans-BlackDisp'
      }
    });

      return (
        <AnimatedBackgroundColorView
        color='#00acdd'
        delay={0.5}
        duration={36000}
        initialColor={this.state.color}
        style={styles.container}>
          <View style={styles.textWrapper}>
            <Text style={styles.myText}>COLOR</Text>
          </View>
        </AnimatedBackgroundColorView>
      );
  }

The referenced answer uses componentDidMount() { to enclose the setInterval, however I get syntax errors if I put that where I currently have the setInterval

Now Im getting

this.setState is not a function

And have tried binding the setInterval to the right this but I believe Im not understanding how to set up my file.

After 1000 ms I want to change the 'color' of my <AnimatedBackgroundColorView> and just reload the component. (so it animates again - https://www.npmjs.com/package/react-native-animated-background-color-view )

How can I do this?

Did you try using hooks for `time: new Date().getMilliseconds()` ? can you do something like `const [time, setTime] = React.useState(null)` `setTime(new Date().getMilliseconds())` — BARNOWL, Jul 12 '20 at 03:24
@BARNOWL I tried, however Im not sure I understood you and I get the warning " excessive number of pending callbacks" — blue, Jul 12 '20 at 03:37
You're getting an excessive number of pending callbacks, because you've created an infinite loop. The `setTime`, sets a new state which forces a re-render, which calls `setTime` again, etc. — Yoshi, Jul 12 '20 at 03:42

score 1 · Accepted Answer · answered Jul 12 '20 at 03:40

Your component is written as a functional component, not a class. To create a stateful functional component, you need to use the hook setState. You're getting this error as there's no object property setState on the component or this. You'll also want to use the useEffect hook to set your interval.

https://reactjs.org/docs/hooks-reference.html

import React, { useState } from 'react';

export default props => {
  let [fontsLoaded] = useFonts({
    'Inter-SemiBoldItalic': 'https://rsms.me/inter/font-files/Inter-SemiBoldItalic.otf?v=3.12',
  });

  const color = "#fff";
  const colorAnimTime = 36000;
  const [time, setTime] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(new Date().getMilliseconds));
    }, 1000);
    return () => clearInterval(interval);
  }, []);


//------------------------------------------------------------------->

Thank you. My only issue now is re rendering my View component.. how would I go about that? — blue, Jul 12 '20 at 03:51

React Native - how to re render a component every x milliseconds? "this.setState is not a function?"

1 Answers1