nnIn this article, I will show you step by step process of building three React Native screens – Login, Register, and Dashboard using Typescript, React Native Tailwind CSS and React Native Hero Icons. Let’s jump right into it.
What we will be building
Below is the screenshot of the app we will be building today.
Bootstrapping React Native Application
I will be using expo cli in this tutorial, everything should work fine for anyone using react native cli. Let’s create the app by running the command as seen in the screenshot below, choose the blank (Typescript) template since we will be using typescript.
n
n
Installing dependencies
We need to install all the dependencies needed for this app – Tailwind CSS and Heroicons
n
ncd react-native-auth-flownyarn add tailwindcss-react-native react-native-heroicons react-native-svgnyarn add --dev tailwindcssnnn
Setup React NativeTailwind CSS
Step 1:
Create tailwind.config.js file in the root of your project and modify the content like so:
n nn
Step 2:
Add React Native Tailwind CSS Babel plugin
n
n
Step 3:
Create tailwindcss-react-native.d.ts in the root of your project and add this single import. If you are using typescript and you don’t add this you won’t be able to use classname within your app.
n nn
n
n import "tailwindcss-react-native/types.d";n n
n
Step 4
This is the last step. We need to wrap our entire app with tailwind provider. Modify your App.js to add the TailwindProvider:
Creating the Screens
Create a folder named screens at the root of the project and create the three screens namely Login, Register, and Dashboard.
nn
The project should look like this:
Custom Components
To start the development of the screens, we need to create some reusable custom components. Create a folder named Components.
Creating the container component
The first component will be the container component, this will be the app wrapper container. In the project’s components folder, create a file named MainContainer.tsx and modify.
Creating Custom KeyboardAvoiding Component
Within the Container folder, create a file named KeyboardAvoidWrapper.tsx like so:
Creating Custom TextInput
Create a folder named InputText within the component’s folder, and then create a file and name it CustomTextInput.tsx. Modify the content like this:
Notice that in line 3 of the code, we are using InputProps. This is the typescript interface for the custom input props. Let’s create the file right now. At the project’s root, create a file named auth-app.d.ts and add the code below.
nn The CustomButtonProps will be used later by our custom button component.n
Creating Custom Button Component
Create a folder within the components folder named Buttons and create a file named CustomButton.tsx
Creating the DashBoardCard Component
Add a file named Components/Card/DashBoardCard.tsx like so:
The Login Screen
Open up the Login file and modify the content like so:
The Register Screen
This screen is similar to the login screen. They both made use of text input and buttons
:
The Dashboard Screen
This is the last screen left. Modify the Dashboard file like so:
That is it! You can find the complete source code in my Github repo.
Happy coding.