Create a Input Text with label in React Native with Styled Components

Hello everyone, today I will teach you how to create a componentized input so that you can reuse it using Styled Components for React Native.

The input text will be like the one below, it will be very simple but you can increase it later!

The project will use expo for the ease of starting the project, but the same tutorial applies to the React Native CLI, feel free to use whatever is most useful in your context.

What will it take to proceed with the tutorial?

1. React Native CLI / Expo
2. Terminal
3. Install the styled components lib
4. npm or yarn

Let’s go started!

1. Start your project using your terminal.

expo init ProjectName
or
npx react-native init ProjectName

2. Enter your project folder and open it in your favorite editor.

cd ProjectName
yarn add styled-components
yarn start

3. Now let’s configure the folder structure to a widely used pattern. Create a folder called src and inside it make it look like the structure below.

📦 src
 ┣ 📂 components
 ┃ ┗ 📂 Input
 ┃ ┃ ┣ 📜 index.jsx
 ┃ ┃ ┗ 📜 styles.js
 ┗ 📂 screens
 ┃ ┗ 📂 Home
 ┃ ┃ ┣ 📜 index.js
 ┃ ┃ ┗ 📜 styles.js

4. Leave the App.js file as in the code below.

App.js file code

Note: From now on the codes I will use images, after all if this is a tutorial, you must repeat the code to better fix it in your head. One of the best ways to learn programming is repetition and practice.

4. Let’s do a brief styling on the Home page just to display the Input. But later you can customize as you prefer. Let’s edit index.js.

index.js file code of home folder

Now let’s apply the basic styling. Open your styles.js file and put the following code

styles.js file code of home folder

Open your styles.js file and put the following code