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/ponent 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 ponent and then on Favorites, have a ponentDidMount that would add each Cricle ponent 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 {
  ponentWillMount() {
    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
    }
  }
  ponentDidMount() {
    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>
    );
  }
}

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/ponent 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 ponent and then on Favorites, have a ponentDidMount that would add each Cricle ponent 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 {
  ponentWillMount() {
    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
    }
  }
  ponentDidMount() {
    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>
    );
  }
}

• javascript
• reactjs
• react-native
• layout-animation

1 Answer 1

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 ponent you want to animate. If you separate your Circle ponent and set the LayoutAnimation for that ponent you can animate the circles and nothing else in your layout.

Example

class Circle extends Component {
  ponentWillMount() {
    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
    }
  }
  ponentDidMount() {
    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 ponent as your example you need to use it like below so the child ponents can be rendered too. More detailed explanation can be found here.

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

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