Інпути в фокусі

В React Native немає псевдокласу :active, тому таким способом стилізувати інпути не вийде.

Але у TextInput є пропси onFocus і onBlur. Відповідно це колбек-функції, які виконуються при фокусі інпуті і прибиранні фокуса інпута.

Можна створити стейт стану для інпута і прописувати стилізацію інпута в залежності від значення цього стейту.

Можна прописати загальну стилізацію інпута і тернарним операторам додавати модифікуючий стиль, якщо інпут в фокусі. Можливий варіант реалізації цієї задачі наведено нижче.

Для коректного відображення наведений нижче код потрібно перевіряти саме на емуляторі iOS, Android або власному пристрої (Web не відображає коректно цей функціонал).

Резервний код

App.js

import { useState } from "react";
import {
  View,
  TextInput,
  StyleSheet,
  TouchableWithoutFeedback,
  Keyboard,
  KeyboardAvoidingView,
  Platform,
} from "react-native";

export default function App() {
  const [activeInput, setActiveInput] = useState(false);

  return (
    <View style={styles.container}>
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
         <KeyboardAvoidingView
          behavior={Platform.OS == "ios" ? "padding" : "height"}
        > 
        <View style={styles.container}>
          <TextInput
            placeholder="onFocus/onBlur"
            onFocus={() => setActiveInput(true)}
            onBlur={() => setActiveInput(false)}
            style={
              activeInput
                ? [styles.textInput, styles.textInputActive]
                : styles.textInput
            }
          ></TextInput>
        </View>
        </KeyboardAvoidingView> 
      </TouchableWithoutFeedback>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  textInput: {
    width: 250,
    padding: 15,

    borderWidth: 1,
    borderColor: "black",
    borderRadius: 10,
  },
  textInputActive: {
    borderWidth: 2,
    borderColor: "red",
    backgroundColor: "#ffc7c7",
  },
});

Якщо у нас два і більше текстових інпутів, то потрібно створити стейт стану для кожного інпута. Утім, якщо інпутів дуже багато можна використати інший підхід. Створити один стейт, а в ньому зберігати імʼя того інпута, який активний саме в цей момент часу.

Резервний код

App.js

import { useState } from "react";
import {
  View,
  TextInput,
  StyleSheet,
  TouchableWithoutFeedback,
  Keyboard,
  KeyboardAvoidingView,
  Platform,
} from "react-native";

export default function App() {
  const [activeInput, setActiveInput] = useState(null);

  return (
    <View style={styles.container}>
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
         <KeyboardAvoidingView
          behavior={Platform.OS == "ios" ? "padding" : "height"}
        > 
        <View style={styles.container}>
          <TextInput
            placeholder="name"
            onFocus={() => setActiveInput("name")}
            onBlur={() => setActiveInput(null)}
            style={
              activeInput==="name"
                ? [styles.textInput, styles.textInputActive]
                : styles.textInput
            }
          ></TextInput>
          <TextInput
            placeholder="email"
            onFocus={() => setActiveInput("email")}
            onBlur={() => setActiveInput(null)}
            style={
              activeInput==="email"
                ? [styles.textInput, styles.textInputActive]
                : styles.textInput
            }
          ></TextInput>
           <TextInput
            placeholder="profession"
            onFocus={() => setActiveInput("profession")}
            onBlur={() => setActiveInput(null)}
            style={
              activeInput==="profession"
                ? [styles.textInput, styles.textInputActive]
                : styles.textInput
            }
          ></TextInput>
        </View>
        </KeyboardAvoidingView> 
      </TouchableWithoutFeedback>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  textInput: {
    width: 250,
    padding: 15,
    marginBottom: 15,

    borderWidth: 1,
    borderColor: "black",
    borderRadius: 10,
  },
  textInputActive: {
    borderWidth: 2,
    borderColor: "red",
    backgroundColor: "#ffc7c7",
  },
});

Посилання на офіційну документацію:

TextInput