React Native touchableOpacity onPress change to a input field

Question

how can I change a touchableOpacity onclick to an input field? And again to the touchable opacity?

<TouchableOpacity
                   onPress={() => {
                     showGradeField();
                   }}
                   style={styles.roundButton}
                 >
                   <Text>TEST</Text>
 </TouchableOpacity>

Answer 1

Create a state variable isEditable to store the whether text input is active or the TouchableOpacity.When the TouchableOpacity is active, toggle isEditable on presses.

Its a bit harder for the TextInput, because if you toggle on presses, then when the user presses the TextInput to edit the text, you'd switch back to the Text component, making it uneditable. So instead, you toggle on events when it appears that user is done editing, such as onBlur , onPressOut , onSubmitEditing ( demo ):

import { useState, useCallback, useRef, useEffect } from 'react';
import {
  Text,
  TextInput,
  View,
  StyleSheet,
  TouchableOpacity,
} from 'react-native';

const showToggleValue = false;

export default function EditableText({
  initialIsEditable,
  initialText,
  containerStyle,
  inputStyle,
  textStyle,
  contentContainerStyle,
}) {
  const [isEditable, setIsEditable] = useState(initialIsEditable);
  const [text, setText] = useState(initialText || 'Typing...');
  const toggle = useCallback(()=>setIsEditable(prev=>!prev),[])
  // when switching to TextInput focus it
  const textInputRef = useRef(null);
  useEffect(()=>{
    // focuses the textinput after TouchableOpacity is pressed
    if(isEditable)
      textInputRef.current?.focus()
  },[isEditable])
  return (
    <View style={[styles.container, containerStyle, inputStyle]}>
      <Text>Current using: {isEditable ? 'TextInput' : 'Text'} component</Text>
      {isEditable ? (
        <View style={[styles.pressableContainer, contentContainerStyle]}>
          <TextInput
            ref={textInputRef}
            onChangeText={setText}
            value={text}
            onBlur={toggle}
            onPressOut={toggle}
            onSubmitEditing={toggle}
            style={[styles.inputStyle, inputStyle]}
          />
        </View>
      ) : (
        <TouchableOpacity
          style={[styles.pressableContainer, contentContainerStyle]}
          onPress={toggle}>
          <Text style={textStyle}>{text}</Text>
        </TouchableOpacity>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    margin: 5,
    padding: 5,
  },
  pressableContainer: {
    width: '100%',
    borderBottomWidth: 1,
    margin: 5,
    padding: 5,
    backgroundColor: 'pink',
  },
  inputStyle: {
    padding: 5,
    borderWidth: 0,
  },
});