You are on page 1of 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