When you deploy your build files to vercel, sub-routes/sub-pages display error 404: not found errors.

It means the servers don’t know how to handle sub-pages (URLs) like example.com/another-page.

Solution

Create a vercel.json file at the root directory of your project and add redirect rules like below.

{
  "routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }]
}

That’s it!

We will be looking at the fundamentals of React Navigation and how to use it to navigate through a full-blown React Native app. We will not be using React Native Navigation (by Wix) here.

In order to install React Navigation, we will be following the installation instructions from the official documentation, because the dependencies might change over time. Feel free to use yarn, but I will use npm for the sake of this tutorial.

I will be using a bare react native app, feel free to use expo as well.

So if you haven’t initialized a react native project before, follow this guide to ensure you have the right tools to initialize a project https://reactnative.dev/docs/0.60/getting-started

npx react-native init AwesomeProject
cd AwesomeProject 

// for android
react-native run-android
// for ios
react-native run-ios

Installing react-navigation

npm install @react-navigation/native

@react-navigation/native is the core library for react-navigation. Doesn’t do much on its own, so we will need some dependencies.

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

From React Native 0.60 and higher, linking is automatic. So you don’t need to run react-native link.

To finalize the installation of react-native-gesture-handler, add the following at the top (make sure it's at the top and there's nothing else before it) of your entry file, such as index.js or App.js:

import 'react-native-gesture-handler'

Stack Navigation

We will explore Stack Navigation first. We will start out with a basic App component in our src/App.js file.

We are going to implement two screens.

These will allow us to navigate from one to another eventually. That’s where React Navigation’s most basic navigation technique Stack Navigation comes into play. We start by creating both screens in their dedicated folders.

First, we will create a folder called src in the root folder and create a folder inside the src folder called screens and create our dedicated screens inside.

Our first screen would be Home.js

We will create another screen called About.js

Now we have the screens, but we will need to create stacks from each screen.

npm install @react-navigation/stack

We will update our App.js as follows:

All navigations techniques (e.g. Stack Navigation) in React Navigation need to have the NavigationContainer component as a wrapping component (kinda like Provider from redux). Wecalled this stack RootStack, you can call it anything, because it's the first level in our navigation hierarchy. Each Stack's Screen component takes a componentand a name, in our case, these are the About and Home screens and their respective names.

component refers to the component responsible for that screen and name refers to the name being referred to the screen so that other screens can navigate to.

Once you restart your app, you should see the rendered About screen. The first screen (here AboutScreen) in the Stack Navigation gets rendered. If you swap both screens' order, you should see the Home screen rendered first. You could also set a initialRouteName="Home" prop in the RootStack's Navigator component to force one of the screens -- in this case the Home screen -- to be the initially displayed screen.

So now, we are going to set up routing between pages.

We have two pages in our React Native app, but no way to navigate from one page to another page. This is the next feature you are going to learn about here. Next, we will implement a button that enables us to navigate from the About screen to the Home screen.

RootStack.Screen injected some props to the screen components because both screen components are child components of the Stack Navigation, one of which is the navigation prop for navigating from one page to another.

To navigate, we need a clickable component, so we used a Button component from react-native. Notice that the navigate function takes the name of a screen to navigate to, which has to be the name of the screen indicated in the RootStack component.

Check your app again. You should be able to go from the initially rendered About screen to the Home screen. A bonus of the Stack Navigation is the back button on the Home screen, which allows you to navigate back from Home to About screen, without further implementations on the Home screen.

And that’s the most basic implementation of React Navigation in a react-native project. There are still more APIs to explore in the react-navigation stack, such as the Drawer and Tab Stacks. We will explore those in another writeup.

You can hit me up on twitter @onibenjo

This is a bug report on the Timbu’s webpage

https://timbu.com

THE MENU BAR

Most of us are pretty familiar with responsive Web design by now. Basically, it uses a combination of a fluid layout and media queries to alter the design and layout of a website to fit different screen sizes.

On smaller screen sizes, clicking the menubar doesn’t pop up the menu.

THE FOOTER

Social Links: The link to their facebook is not functional.

Navigation links: Apart from the countries link under the LOCATIONS section, all other links are not functional.

NEWSLETTER

Subscribing to their newsletter returns a page with a 200 text.

My bug reports on https://timbu.com

Part 1

THE GIT TASK

On the 30th, two tasks were dropped. One of which was to create a github account, make a repo, create a file using Git and make commits of at least two changes to the file.

This went quite easy for me as I have already done the task even before it was given.

The second is a design task.

THE FIGMA PROFILE DESIGN TASK

We were asked to make a profile design on figma which includes links to about, project and blog pages. With also icons that links to our Social Media platforms. Yes, it should also include our pictures as well.

I also found this task quite easy to accomplish. Even though i have never worked with Figma, I have experience with Adobe Xd and that helped a lot.

This is the design below! I hope it looks nice.

THE BLOG PAGE TASK

The last task was to make open a personal blog where i would make posts about my progress as the internship journey proceed. That I have done and that’s why this is my first post for the Internship series.

I hope you guys enjoyed.

My portfolio:

onibenjo.github.io/full-portfolio