This content originally appeared on DEV Community and was authored by Hung Nguyen
Overview
Next is important since there will be the release 2.7 and I still have 2 issues to work on which are creating bottom nav-bar and homepage. For the nav-bar, I have sent a PR. Everything is almost done but I still have to find an issue that changes the Icon of Telescope while I was in the middle of rebase. This pretty sure will be done before 2.7 landed.
Home page
In terms of the home page issue or in my case named home screen, I started by taking a look at mobile responsiveness of Telescope to gain the idea of the design. Basically, there are a lot of services in the home page ^^, so I think breaking these things into smaller tasks will be much more easier. For now, I will just making a static home screen.
Home screen for now will include a component named Banner. Of course in the future, there will be more like Image service, Posts service, etc. I also created a function named navigateToContact. As it name, it is used to navigate to contact screen, I will pass this function from the parent to Banner -> BannerButtons.
Banner component will simulate the original banner of Telescope so it will have BannerButtons, and Student quotes, here I will call it BannerText.
BannerButtons has 2 buttons for navigating to Contact Screen and an option for signing in. The funny thing of React Native is that it is limited to style a Button component, so I use Pressable instead. It is something user can press on and if you style it properly, it will be come a button.
I re-used the useEffect() that we already had in the front-end of Telescope to randomly display the student quotes in the banner. And again Pressable is used as a to go to the student's blog link when user clicks on the code.
New file named student-quotes.js was copied from src/web as well.
Result
For now, I have some problem with CSS and the home page is still not styled properly so there is no PR at the moment. It will come out soon this week.
This content originally appeared on DEV Community and was authored by Hung Nguyen
Hung Nguyen | Sciencx (2022-02-14T22:44:42+00:00) Home page using React Native for Telescope. Retrieved from https://www.scien.cx/2022/02/14/home-page-using-react-native-for-telescope/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.