Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Native - LayoutAnimation: how to make it just animate object inside component, not whole component/view?

I'm trying to follow this example (code here) and employ LayoutAnimation inside my RN project (the difference from that example being that I just want to render my circles with no button that'll be pressed).

But when I've added LayoutAnimation, it's the whole view/screen/component that does the animation of 'springing in', not just the circles as I desire. Where do I have to move LayoutAnimation to in order to achieve just the circle objects being animated?

UPDATED AGAIN: Heeded bennygenel's advice to make a separate Circles component and then on Favorites, have a componentDidMount that would add each Cricle component one by one, resulting in individual animation as the state gets updated with a time delay. But I'm still not getting the desired effect of the circles rendering/animating one by one...

class Circle extends Component {
  componentWillMount() {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
  }

  render() {
    return (
        <View>
          { this.props.children }
        </View>
    );
  }
}

class Favorites extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      circleCount: 0
    }
  }
  componentDidMount() {
    for(let i = 0; i <= this.props.screenProps.appstate.length; i++) {
      setTimeout(() => {
        this.addCircle();
      }, (i*500));
    }
  }
  addCircle = () => {
    this.setState((prevState) => ({circleCount: prevState.circleCount + 1}));
  }

render() {
    var favoritesList = this.props.screenProps.appstate;

    circles = favoritesList.map((item) => {
        return (
            <Circle key={item.url} style={styles.testcontainer}>
              <TouchableOpacity onPress={() => {
                  Alert.alert( "Add to cart and checkout?",
                              item.item_name + "? Yum!",
                              [
                                {text: 'Yes', onPress: () => console.log(item.cust_id)},
                                {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}
                              ]
                              )}}>
                <Image source={{uri: item.url}} />
               </TouchableOpacity>
            </Circle>
        )});

    return (
        <ScrollView}>
          <View>
            <View>
              {circles}
            </View>
          </View>
        </ScrollView>
    );
  }
}
like image 486
SpicyClubSauce Avatar asked Feb 28 '18 03:02

SpicyClubSauce


People also ask

How do you handle animation in RN?

Working with animations​Animations are started by calling start() on your animation. start() takes a completion callback that will be called when the animation is done.

Is layout animation enabled in React Native?

​ In React Native every component appears instantly whenever you add it to the component hierarchy. It's not something we are used to in the real world. Layout Animations are here to address the problem and help you animate the appearance of any view.

How do I stop loop animation in React Native?

If an animation is in process of being animated and, for any particular reason, you need to stop it, you can call stopAnimation . The stopAnimation call also takes a callback with the value that the animation was stopped on.


Video Answer


1 Answers

From configureNext() docs;

static configureNext(config, onAnimationDidEnd?)

Schedules an animation to happen on the next layout.

This means you need to configure LayoutAnimation just before the render of the component you want to animate. If you separate your Circle component and set the LayoutAnimation for that component you can animate the circles and nothing else in your layout.

Example

class Circle extends Component {
  componentWillMount() {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
  }

  render() {
    return (<View style={{width: 50, height: 50, backgroundColor: 'red', margin: 10, borderRadius: 25}}/>);
  }
}

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      circleCount: 0
    }
  }
  componentDidMount() {
    for(let i = 0; i < 4; i++) {
      setTimeout(() => {
        this.addCircle();
      }, (i*200));
    }
  }
  addCircle = () => {
    this.setState((prevState) => ({circleCount: prevState.circleCount + 1}));    
  }
  render() {
    var circles = [];
    for (var i = 0; i < this.state.circleCount; i++) {
      circles.push(<Circle />);
    }
    return (
    <View>
      <View style={{flexDirection:'row', justifyContent:'center', alignItems: 'center', marginTop: 100}}>
        { circles }
      </View>
      <Button color="blue" title="Add Circle" onPress={this.addCircle} />
    </View>
    );
  }
}

Update

If you want to use Circle component as your example you need to use it like below so the child components can be rendered too. More detailed explanation can be found here.

class Circle extends Component {
  componentWillMount() {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
  }

  render() {
    return (
        <View>
          { this.props.children }
        </View>
    );
  }
}
like image 173
bennygenel Avatar answered Oct 19 '22 22:10

bennygenel