React Native, onPress change borderColor of TextInput

Question

i have textInput and submit button, onPress submit button it checks if name.length is bigger than 2 if its not then i want to change style of TextInput for examle borderColor to be red.

let name = ''
    return(<View>
     <TextInput onChangeText={(e)=>{name = e}} style={styles.textInput} placeholder='Name and Surname'/>
          <TouchableOpacity 
            onPress={()=>{
              if(name.length <= 2){
                // What i need to write here to change the TextInput borderColor to red
              }
            }} >
              <Text style={styles.submitButton} >Submit</Text>
            </TouchableOpacity>
    </View>)

I tried to make nameError - useState variable - and it works but when nameError change it rerender the component and TextInput value is going to be empty, but i want TextInput value to be exacly the same just borderColor to change

 let name = ''
    let [nameError, setNameError] = useState(false)
        return(<View>
         <TextInput onChangeText={(e)=>{name = e}} 
        style={nameError ? {...styles.textInput, borderColor: 'red'} : {...styles.textInput, borderColor: 'green'}} 
        placeholder='Name and Surname'/>
              <TouchableOpacity 
                onPress={()=>{
                  if(name.length <= 2){
                    setNameError(true) //This work and it change borderColor, but it chage value of useState state and component rerender and TextInput is going to be empty but i want to be the same as it was before i clicked submit button not to be empty
                  }
                  else{
                     setNameError(false)
                   }
                }} >
                  <Text style={styles.submitButton} >Submit</Text>
                </TouchableOpacity>
        </View>)

Sorry about bad explaining, i dont know english very good.

Answer 1

You have to add a State for name instead of setting it as a variable modifying your code:

// DELETE THIS LINE let name = ''
const [name, setName] = useState(''); //ADD this line and please note I added value={name} to TextInput
let [nameError, setNameError] = useState(false)
    return(<View>
     <TextInput value={name} onChangeText={(e)=>{setName(e)}} 
    style={nameError ? {...styles.textInput, borderColor: 'red'} : {...styles.textInput, borderColor: 'green'}} 
    placeholder='Name and Surname'/>
          <TouchableOpacity 
            onPress={()=>{
              if(name.length <= 2){
                setNameError(true) //This work and it change borderColor, but it chage value of useState state and component rerender and TextInput is going to be empty but i want to be the same as it was before i clicked submit button not to be empty
              }
            }} >
              <Text style={styles.submitButton} >Submit</Text>
            </TouchableOpacity>
    </View>)