loop.js

var arr = [
    {
      "name": "Baked Mac and Chees",
      "ingredient": ["1 cup cheese", "1 lb macaroni", "1 cup milk"]
    },
    {
      "name": "Chicken Parm",
      "ingredient": ["2 lbs chicken", "1 cup breadcrumbs", "3 cups marinara", "1 cup mozarella", "1 tsp salt / pepper"]
    },
  ...
];

loop: function(){
  var i = 0;

  var loopThrough = setInterval(function() {
    if (i < arr.length - 1) {
      i++;
      this.setState({
        name: arr[i].name,
        ingredients: arr[i].ingredient,
      });
      console.log(i);
      if (i == arr.length - 1) {
        console.log("done");
        clearInterval(loopThrough);
      }
    }
  }.bind(this), 50);
},

render: function() {
  var ingredients = null;
  if (this.state.ingredients) {
    ingredients = this.state.ingredients.map(function (ingredient, i) {
      return <Text key={i}>{ingredient}</Text>;
    }, this);
  }

  return (
    <View style={{flex: 1}}>
      <View>
        <Text>{this.state.name}</Text>
      </View>
      <View ref="ingredients">
        {ingredients}
      </View>
      <View>
        <TouchableHighlight onPress={this.loop}>
          <View style={styles.button}></View>
        </TouchableHighlight>
      </View>
    </View>
  );
}