3.0 Alpha #2: Core feature for mobile app
Tags: opensource, reactnative, javascript, mobile
Published: 2022-04-09 21:37:13

Finally, thank you @DukeManh for helping me out to pull this feature off for 3.0 alpha.

## Fetching posts

This is my first time, I have a wonderful practice fetching data from an api or a services. I guess the only reason I want to take lead on our `mobile` app to also learn how to do thing from the ground up as well. Working on our web has been a different thing where you will learn and integrate things into an already existed system. Whereas with our mobile app I got a chance to learn thing from scratch. Lucky for me I did not have to do researching by myself. For this issue, I spend a lot of time around @dukemanh and be able to witness how he implement things and he did give me a really good suggestion on my working flow and how I can tackle the problem and things I can improve on base on his knowledge. We take a look at our `Post.tsx` and `Timeline.tsx` where ppls who had worked on this in previous semesters have well implemented displaing posts for our web. I learn how to use `swr` and `SWRInfinite` for pagination as well as config the `fetcher` at the top level to show how would `swr` behave with the data.

## Using FlatList instead of ScrollView
While we was working on displaying the posts. We having a hard time for our ScollView to scroll properly even though we were doing what the `react native` doc suggest and changing many styles using `flex` and `flexGrow` to indentify the height of the screen for the `ScrollView` to scroll. When I read the doc, they also mention about `FlatList` which have lazy loading which help to improve performance of the app. It will only load the component when you scroll down more and delete the items above for efficient use of memory space and the usage is just simple.Our fetched object from the `post` service return a nested object which ask us to use `map` method twice on it. With Flatlist we only need to `map` it once
```js
<FlatList
        data={pages}
        renderItem={renderPost}
        keyExtractor={(item, index) => index.toString()}
      />
```

### Styling the component

Then we having a hard time after the post display. They just look ugly and plain. Since `react native` don't have normal `html` element so we can not do what our `telescope-post-content.css` did. Luckily Duke spot our that the `react-native-render-html` have let us pass a prop to styles these element using `tagsStyles`. Right now I still working on changing the css to work perfectly for the mobile version but I'm glad that we pull it off and be able to learn how he work on the issues have been a good learning opportunity for me.

Duke has mentioned what we should have did differently and what our prof did try to tell us from the beggining that it would be perfect for us to move our workflow from working up from the easiest thing to working from the core functionality of the app first so everything we work from there will be centralize around the core functionality. Like what I experience is that our `Banner` make it hard for us to do the scrolling and also to run the application where we should have implement loading the posts before implement the Banner

My [PR](https://github.com/Seneca-CDOT/telescope/pull/3420/files)