DEV Community

Amazing
Amazing

Posted on

3.0 Alpha #2: Core feature for mobile app

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

<FlatList
        data={pages}
        renderItem={renderPost}
        keyExtractor={(item, index) => index.toString()}
      />
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)