Changing text output dynamically - React native

Question

How do I update my text/images every time my server updates.

What I would like to have happen

1. Server adds text to DB
2. Server messages RN app using Web sockets
3. RN app requests data from server
4. Server requests data from DB
5. Server Sends data to RN app
6. RN app updates the <ScrollView> with the new data

What does happen

1. Server adds text to DB
2. Server messages RN app using Web sockets
3. RN app requests data from server
4. Server requests data from DB
5. Server Sends data to RN app

NOTE: I know that the server sends the correct data to the RN app and that the app receives the data. I have console.loged it.

Data

Here is an example of the data that is sent from the server to the RN app:

[ { _id: 592f7a5c74376a749e2db211,
    name: 'world',
    allowedUsers: [ '114135152003891444692', '114135152003891444692' ],
    firstUser: '114135152003891444692',
    imageSrcList:
     [ 'hello world',
       'hello moon',
       '',
       'images/WedMay31201720:38:57GMT-0700(PDT)MILI1496288337083myUserName.jpg' ] },

  { _id: 592f8bf462d68f777dd47cfb,
    name: 'hello',
    allowedUsers: [ '114135152003891444692', '114135152003891444692' ],
    firstUser: '114135152003891444692',
    imageSrcList:
     [ 'foo',
       'bar',
       '',
       'images/WedMay31201720:39:01GMT-0700(PDT)MILI1496288341061myUserName.jpg' ] } ]

It consists of an array of objects.

Each object consists of:

• _id an identifier that is unique
• name an individual name, it can be duplicated
• allowedUsers and array of the allowed users
• firstUser the first user - and the user that started the "pool"
• imageSrcList this consists of the URLs for the images and the chat messages, this is where I need help.

How I would like the app to interpret the data.

Each "pool" is an object inside of the above array. I would like to have the app display all of the "chat" text, and the images from the imageSrcList when the user clicks on the "pool".

How it should go about this

(in my opinion - if you know of a better way by all means share!)

1. Sorts through the array to find the right "pool"
2. Sorts through each element of the imageSrcList to find which are photos and which are chat messages.
3. Adds the necessary JSX code (eg. <Text> or <Image/>)
4. Pushes to an output array
5. Displays the output array in a <ScrollView>

Current solution

This solution does not work, but it should help you understand what I am trying to do.

loadData(cb) {
    fetch('http://localhost:8000/home/' + this.state.user.id)
    .then((response) => response.json())
    .then((responseText) => {
      console.log('done laoding inicial data: ');
      console.log(responseText.pools);
      console.log(this.props.navigation.state.params._id);
      cb(responseText.pools)
    })
    .catch((error) => {
      this.setState({ myValues: error, loaded: true, });
    });
  }

... and

ws.onmessage = (e) => {
      console.log('MESSAGE');
      this.loadData(function(listObj){
        for (var i = 0; i < list.length; i++) {
          if (listObj[i]._id === params._id){
            params.list = listObj[i].imageSrcList;
            console.log(listObj[i].imageSrcList);
          }
        }
        list = params.list;
        output = [];

        for (var i = 0; i < list.length; i++) {
          if ( (typeof list[i] === 'string') && (list[i].includes('.jpg')) ){
            output.push(<Image
              style={styles.preview}
              source=
            />);
          }else if( typeof list[i] === null ){
            output.push();
          }else if ( list[i] === ''){
            output.push()
          }else{
            output.push(<Text>{list[i]}</Text>);
          }
        }
      });
    };

... and

<ScrollView
            ref={ref => this.scrollView = ref}
            onContentSizeChange={(contentWidth, contentHeight)=>{
                this.scrollView.scrollToEnd({animated: true});
            }}>{output}</ScrollView>

More info

• I am using React Native
• I am using IOS
• I am using NodeJS/Express for the server

via pudility