react native TextInput border when press

Lior98 0
Viewed 17

i need to create border green on TextInput when it get selected/pressed it mean the TextInput should be with black border / none border for default and when its pressed (the input) it will set border with green color the issuse is : i create state and change it by "onFocus" when the input will press it will change to green but i have a 4 inputs and when i press on each of them it will set the border to green but i want only one of them each time will set the border so i add "onBlur" that will disable the border and its look like the wrong way (its worked but still look like the wrong way) please show me the right way


import { StyleSheet, TextInput } from "react-native";
import React, { useState } from "react";

const Input = ({ placeholder, keyPad, onChangeText, stylesProps }) => {
  const [isFocus, setIsFocus] = useState(null);
  const focusHandler = () => {
    setIsFocus("green");
  };
  const blurHandler = () => {
    setIsFocus(null);
  };
  return (
    <TextInput
      style={[{ borderWidth: isFocus ? 2 : 0, borderColor: isFocus }, stylesProps ? stylesProps : styles.sign_up_inp]}
      placeholder={placeholder}
      onFocus={focusHandler}
      onBlur={blurHandler}
      keyboardType={keyPad}
      onChangeText={onChangeText}
    />
  );
};

export default Input;
border styles native reactjs javascript
1 Answers

If you have multiple versions of the same component being rendered, it may be helpful to use a FlatList, which has a renderItem prop that can help you sort this out.

Here's the render item, where you can see the selected property add the style:

const renderItem = ({item}) => {
const selected =
  buttonArray.includes(item.label);
return (
  <Button
    onPress={() => handleSelection(item.label)}
    buttonText={item.label}
    containerStyle={selected ? {backgroundColor: 'blue'} : {}}
  />
)};

Here's the FlatList implementation using renderItem:

  const renderButtons = () => {
return (
  <FlatList
    data={areasArray}
    renderItem={renderItem}
    keyExtractor={item => item.id}
  />
)};
Sara Inés Calderón0
Related