In this series, you'll learn how to use React Native to create page layouts commonly used in mobile apps. The layouts you'll be creating won't be functional—instead, the main focus of this series is to get your hands dirty in laying out content in your React Native apps.
If you're new to laying out React Native apps or styling in general, check out our tutorial on layouts in React Native:
To follow this series, I challenge you to try recreating each screen by yourself first before reading my step-by-step instructions in the tutorial. You won't really benefit much from this React Native login form tutorial just by reading it! Try first before looking up the answers here. If you succeed in making it look like the original screen, compare your implementation to mine. Then decide for yourself which one is better!
In this first part of the series, you'll create the following login page:
Getting Started
In this React Native login screen tutorial, we'll use the Expo CLI. Expo is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript or TypeScript codebase.
Expo is the easiest and fastest way to build React Native apps. The official Expo get started guide contains detailed instructions on how to download and configure Expo CLI for the major operating systems.
Create a new project:
expo init LoginLayout
You'll be prompted to choose the type of project to initialize. Choose Managed workflow and blank. Wait a few seconds for Expo to install the project files and change the directory into the new project.
cd LoginLayout
The project structure should look like this.
Open App.js to start working on your application. The starting code App.js should look like this:
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
On the second line of code, we import React to use JSX. Then we import the StyleSheet, Text, and View components from React Native.
Next is the App function, which returns a view component and a text component as a child of that. <View> is an essential component in React Native and can serve many purposes, such as styling different elements, wrapping elements, or nesting elements. The <View> element is equivalent to <div> in HTML web development. As you can see, the View component has a property, style = {styles.container}, which is used to apply styles to the view.
The <Text> component allows us to render text.
Layouts With Flexbox
Flexbox is a critical technique in React Native. It's designed to provide a consistent layout on different screen sizes. Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. (You can learn about CSS Flexbox here.) The defaults are different, though, with the flex direction defaulting to column instead of row and the flex parameter only supporting a single number.
Flex defines how items fill over the available space along the main axis. The available space is divided according to each element's flex property.
We define the flexbox layout at the bottom of the file in the styles constant. The container has the following styles:
flex: 1: This defines how elements will fill over space. Space is usually divided according to each element's flex property.justifyContent: "center": This aligns children of a container in the center of the container's main axis.alignItems: "center": This aligns children of a container in the center of the container's cross axis.
User Interface and Common Components
A typical React Native will use the following components.
View |
a container for other components |
Text |
displays text |
Image |
displays images |
Stylesheet |
provides a way of styling elements |
TextInput |
an input field |
Button |
a clickable button |
Adding an Image
Images in React Native are placed in the assets folder and referenced like this:
<Image source={require('.assets//image.png')} />
Let's add an image in the assets folder. This will be used as the logo image. Start by removing the text component, and replace it with the logo image. Don't forget to import the Image component at the top.
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
export default class App extends React.Component {
render(){
return (
<View style={styles.container}>
<Image source = {require("./assets/logo.png")}/>
</View>
);
}
}
Styling in React Native
Elements in react Native are styled using JavaScript. All the React Native elements accept a prop named style, which accepts an object with style names and values. These style names and values are similar to those used in CSS, except the names are written using camel casing. For example, React Native uses backgroundColor for the CSS property background-color.
Add the following styles to the image.
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
image :{
marginBottom: 40
}
});
Here we add a marginBottom: 40 style to make some space between the image and the text inputs.
Next, add text input fields for the email and password. First, add state properties to hold the email and password. State in React Native is used on components that change over time. For example, the information in the TextInput keeps changing as users input their information. The initial state of the email and password will be empty.
Start by importing useState, as shown below. The useState function will allow our functional components to be stateful.
import React, { useState } from 'react';
Then initialize the state by adding the following code in the App function.
export default function App() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
return (
// rest of the code
);
}
We use a View to wrap each text input for easy styling. Add this code below the image.
<View style={styles.inputView}>
<TextInput
style={styles.TextInput}
placeholder="Email."
placeholderTextColor="#003f5c"
onChangeText={(email) => setEmail(email)}
/>
</View>
<View style={styles.inputView}>
<TextInput
style={styles.TextInput}
placeholder="Password."
placeholderTextColor="#003f5c"
secureTextEntry={true}
onChangeText={(password) => setPassword(password)}
/>
</View>
The setState method will update the state object with whatever information the user has entered. secureTextEntry is set to true to hide the text entered in the email text input for security purposes.
Add the following styles to the inputView and textInput props.
inputView: {
backgroundColor: "#FFC0CB",
borderRadius: 30,
width: "70%",
height: 45,
marginBottom: 20,
alignItems: "center",
},
TextInput: {
height: 50,
flex: 1,
padding: 10,
marginLeft: 20,
}
Add the Forgot Password? button below the text input fields. We'll use a TouchableOpacity button, which changes opacity when pressed.
<TouchableOpacity>
<Text style={styles.forgot_button}>Forgot Password?</Text>
</TouchableOpacity>
Next, add the following styles for the forgot password button.
forgot_button: {
height: 30,
marginBottom: 30,
}
Finally, add the Login button. Add the following code below the forgot password button.
<TouchableOpacity style={styles.loginBtn}>
<Text style={styles.loginText}>LOGIN</Text>
</TouchableOpacity>
Add the styles for the login button.
loginBtn:
{
width:"80%",
borderRadius:25,
height:50,
alignItems:"center",
justifyContent:"center",
marginTop:40,
backgroundColor:"#FF1493",
}
Here we add a border radius style to make the button circular and a marginTop: 40 property to make a space between the two buttons. We also set a custom height and width.
The Final Login Screen Code
The final React Native code for the login page, App.js, should look like this:
import { StatusBar } from "expo-status-bar";
import React, { useState } from "react";
import {
StyleSheet,
Text,
View,
Image,
TextInput,
Button,
TouchableOpacity,
} from "react-native";
export default function App() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
return (
<View style={styles.container}>
<Image style={styles.image} source={require("./assets/log2.png")} />
<StatusBar style="auto" />
<View style={styles.inputView}>
<TextInput
style={styles.TextInput}
placeholder="Email."
placeholderTextColor="#003f5c"
onChangeText={(email) => setEmail(email)}
/>
</View>
<View style={styles.inputView}>
<TextInput
style={styles.TextInput}
placeholder="Password."
placeholderTextColor="#003f5c"
secureTextEntry={true}
onChangeText={(password) => setPassword(password)}
/>
</View>
<TouchableOpacity>
<Text style={styles.forgot_button}>Forgot Password?</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.loginBtn}>
<Text style={styles.loginText}>LOGIN</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
image: {
marginBottom: 40,
},
inputView: {
backgroundColor: "#FFC0CB",
borderRadius: 30,
width: "70%",
height: 45,
marginBottom: 20,
alignItems: "center",
},
TextInput: {
height: 50,
flex: 1,
padding: 10,
marginLeft: 20,
},
forgot_button: {
height: 30,
marginBottom: 30,
},
loginBtn: {
width: "80%",
borderRadius: 25,
height: 50,
alignItems: "center",
justifyContent: "center",
marginTop: 40,
backgroundColor: "#FF1493",
},
});
And here is the final look of the app:
Popular React Native App Layout Templates From CodeCanyon
Building a great app takes more than just a React Native login screen. If you need more components to complete your project, check out these templates from CodeCanyon. They're easy-to-use and can help you reach your goals.
1. MStore Pro—Complete React Native Template for eCommerce
MStore Pro is one of the most popular React Native templates available on CodeCanyon. It's designed with eCommerce in mind. It has a useful React Native login screen template that works with SMS signup. It also has multiple home screens and layouts to choose from.
2. Antiqueruby React Native Material Design UI Components
Material design still dominates the app landscape, which makes Antiqueruby an excellent choice in 2021. This download includes over 260 screens, including React Native logins, navigation drawers, and more.
3. React App Builder—SaaS
React App Builder does exactly what the name says. Make awesome creative projects with the components included in this template download. It includes everything needed to make a full app in any industry.
4. BeoNews Pro—React Native Mobile App for WordPress
If you have a WordPress site that you want to be mobile, try out BeoNews Pro. It's one of the top templates on CodeCanyon, and it's filled with great features. In addition to its React Native login screen templates, BeoNews Pro includes:
- multiple side menu styles
- stylish UI layouts
- Facebook, Google, and Firebase analytics integration
5. Oreo Fashion—Full React Native App for WooCommerce
Show off your style sense with Oreo Fashion. It's a full template that lets you create apps for iOS and Android devices. The React Native login forms included offer simple social sign-up for account creation. You can also take advantage of the layout app builder. Try it if you have a WooCommerce WordPress site you want to build an app around.
Conclusion
In this tutorial, you've successfully created a beautiful login page using your Flexbox knowledge. You've also learned how to use the Expo CLI, an easy way to build and test React Native Apps.
In the next tutorial in this series, you'll learn how to create a calendar screen. In the meantime, check out some of our other tutorials on React Native and Flexbox.
-
Get Started With React Native Layouts
-
Build a Social App With React Native
-
Animate Your React Native App
-
21+ Best React Native App Templates of 2021 (Including 5 Free)
-
Understanding React Native Components, Templates, and Tools
-
Common React Native App Layouts: Gallery Page
-
Common React Native App Layouts: News Feed
-
Common React Native App Layouts: Calendar Page
No comments:
Post a Comment