Scribd
Upload
147 views2 pages

React Native Login Page Example

The document provides an example of creating a basic login page in React Native. It includes two text inputs for username and password, a button to submit the login, and logic to redirect to YouTube on successful login. The code uses the useState hook to manage the username and password state. When the button is pressed, it checks if the fields are filled and if so, redirects to YouTube using Linking.openURL. It notes that a real application would authenticate securely with a backend server and have better error handling.

Uploaded by

vjcfuf31
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
147 views2 pages

React Native Login Page Example

The document provides an example of creating a basic login page in React Native. It includes two text inputs for username and password, a button to submit the login, and logic to redirect to YouTube on successful login. The code uses the useState hook to manage the username and password state. When the button is pressed, it checks if the fields are filled and if so, redirects to YouTube using Linking.openURL. It notes that a real application would authenticate securely with a backend server and have better error handling.

Uploaded by

vjcfuf31
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

Here's a basic example of how you can create a login page in React Native and

redirect to the YouTube site upon successful login:

javascript
Copy code
import React, { useState } from 'react';
import { View, TextInput, Button, StyleSheet, Linking } from 'react-native';

const LoginScreen = () => {


const [username, setUsername] = useState('');
const [password, setPassword] = useState('');

const handleLogin = () => {


// Perform authentication logic here
// For simplicity, just checking if username and password are not empty
if (username !== '' && password !== '') {
// Redirect to YouTube
Linking.openURL('https://www.youtube.com');
} else {
alert('Please enter valid credentials');
}
};

return (
<View style={styles.container}>
<TextInput
style={styles.input}
placeholder="Username"
onChangeText={(text) => setUsername(text)}
value={username}
/>
<TextInput
style={styles.input}
placeholder="Password"
onChangeText={(text) => setPassword(text)}
value={password}
secureTextEntry={true}
/>
<Button title="Login" onPress={handleLogin} />
</View>
);
};

const styles = StyleSheet.create({


container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 20,
},
input: {
width: '80%',
marginBottom: 10,
padding: 10,
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 5,
},
});
export default LoginScreen;
In this code:

We define a LoginScreen component that contains two TextInput components for


username and password input, and a Button component for login.
We use the useState hook to manage the state of username and password.
When the user presses the login button, the handleLogin function is called.
In the handleLogin function, you would typically perform your authentication logic.
In this example, we're just checking if both fields are not empty.
If authentication is successful, we use Linking.openURL to redirect the user to the
YouTube site.
If authentication fails, we show an alert message.
Make sure to handle authentication securely, possibly using a backend server for
authentication and authorization. Also, consider implementing more advanced error
handling and validation mechanisms.

You might also like