Inputs and Forms

<SafeAreaView style={styles.safeContainer}>
  <TextInput style={styles.input} />
</SafeAreaView>
...
input: {
  height: 40,
  margin: 12,
  padding: 10,
  borderWidth: 1
}

import { Text, SafeAreaView, StyleSheet, View, StatusBar, TextInput } from "react-native";
import { useState } from "react";

export default function Index() {
  const [name, setName] = useState("");

  return (
    <SafeAreaView style={styles.safeContainer}>
      <TextInput style={styles.input} value={name} onChangeText={setName} />
      <Text>Name is {name}</Text>
    </SafeAreaView>
  );
}

<TextInput style={styles.input} value={name} 
  onChangeText={setName} 
  placeholder="Enter you name"
  secureTextEntry
  keyboardType="numeric"
/>

<TextInput style={styles.input} value={name} 
  onChangeText={setName} 
  placeholder="Enter you name"
  autoCorrect={false}
  autoCapitalize="none"
/>

<TextInput style={[styles.input, styles.multilineText]} 
  multiline
  placeholder="Message"
/>
...
multilineText: {
    minHeight: 100,
    textAlignVertical: "top"
}

<View style={styles.switchContainer}>
  <Text>Dark Mode</Text>
  <Switch />
</View>
...
switchContainer: {
  flexDirection: "row",
  alignItems: "center",
  justifyContent: "space-between",
  paddingHorizontal: 10
}

const [isDarkMode, setIsDarkMode] = useState(false);

<Switch 
  value={isDarkMode}
  onValueChange={() => setIsDarkMode((previousState) => !previousState)}
  trackColor={{false: "#767577", true: "lightblue"}}
  thumbColor="#f4f3f4"
/>

import { Text, SafeAreaView, StyleSheet, 
  StatusBar, TextInput, View, Button } from "react-native";

export default function Index() {

  return (
    <SafeAreaView style={styles.safeContainer}>
      <View style={styles.formContainer}>
      <Text style={styles.label}>Username</Text>
        <TextInput
          style={styles.input}
          placeholder="Enter your username"
        />

        <Text style={styles.label}>Password</Text>
        <TextInput
          style={styles.input}
          placeholder="Enter your password"
          secureTextEntry
        />

        <Button title="Login" onPress={() => {}} />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeContainer: {
    flex: 1,
    backgroundColor: "#f5f5f5",
    justifyContent: "center",
    paddingHorizontal: 20,
    // Will add padding only in andoird
    paddingTop: StatusBar.currentHeight 
  },

  formContainer: {
    backgroundColor: "#ffffff",
    padding: 20,
    borderRadius: 10,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
    margin: 20
  },

  label: {
    fontSize: 16,
    marginBottom: 5,
    fontWeight: "bold",
  },
  input: {
    height: 40,
    borderColor: "#ddd",
    borderWidth: 1,
    marginBottom: 15,
    padding: 10,
    borderRadius: 5,
  },
}) 

const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
...
<Text style={styles.label}>Username</Text>
<TextInput
  style={styles.input}
  placeholder="Enter your username"
  value={username}
  onChangeText={setUsername}
/>

<Text style={styles.label}>Password</Text>
<TextInput
  style={styles.input}
  placeholder="Enter your password"
  secureTextEntry
  value={password}
  onChangeText={setPassword}
/>

<KeyboardAvoidingView
    behavior="padding"
    keyboardVerticalOffset={Platform.OS === "ios" ? 100 : 0}
    style={styles.mainContainer}
>
...
</KeyboardAvoidingView>

const [errors, setErrors] = useState({username: '', password: ''});

const validateForm = () => {
  let errors = {username, password};

  if (!username) errors.username = "Username is required";
  if (!password) errors.password = "Password is required";

  setErrors(errors);

  return Object.keys(errors).length === 0;
};

<View style={styles.formContainer}>
  <Image style={styles.formLogo}
    source={require("../assets/images/epic-logo.png")}/>

  <Text style={styles.label}>Username</Text>
  <TextInput
    style={styles.input}
    placeholder="Enter your username"
    value={username}
    onChangeText={setUsername}
  />
  {
    errors.username ? (<Text style={styles.errorText}>{errors.username}</Text>) : null
  }

  <Text style={styles.label}>Password</Text>
  <TextInput
    style={styles.input}
    placeholder="Enter your password"
    secureTextEntry
    value={password}
    onChangeText={setPassword}
  />
  {
    errors.password ? (<Text style={styles.errorText}>{errors.password}</Text>) : null
  }

  <Button title="Login" onPress={() => {}} />
</View>

...
const handleSubmit = () => {
    if (validateForm()) {
      // Usually will go to the api
      console.log("Submitted", username, password);
      setUsername("");
      setPassword("");
      setErrors({username: '', password: ''});
    }
};
...
<Button title="Login" onPress={handleSubmit} />