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()}
/>
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)