react-native: InputText activity firing TouchableHighlight onPress() events

Question

I have the following react-native code where I am trying to build a custom form to gather user input. The form renders correctly with 3 input boxes and a Save button.

In the code below, the issue is that as soon as I start typing on the first TextInput field, the this.saveFormData() which is called only inside the TouchableHighlight button gets fired!

Why are the TextInput events conflicting with the TouchableHighlight ones? How do I fix the issue?

class NewScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = { songTitle: null, chord: null, strumPattern: null };
  }

  saveFormData = () => {
    console.log(this.state.songTitle);
    () => navigate("Home");
  };

  render() {
    const { navigate } = this.props.navigation;
    return (
          <View style={styles.row_cell_chord_songTitle}>
            <Text style={styles.new_input_label}> Song Title </Text>
            <TextInput
              style={styles.new_input_field}
              onChangeText={text => this.setState({ songTitle: text })}
              value={this.state.songTitle}
            />
            <Text style={styles.new_input_label}> Chords </Text>
            <TextInput
              style={styles.new_input_field}
              onChangeText={text => this.setState({ chord: text })}
              value={this.state.chord}
            />

            <Text style={styles.new_input_label}> Strumming Pattern </Text>
            <TextInput
              style={styles.new_input_field}
              onChangeText={text => this.setState({ strumPattern: text })}
              value={this.state.strumPattern}
            />
          </View>


            <TouchableHighlight
              style={styles.saveButton}
              onPress={this.saveFormData()} // <-- typing on above Inputbox fires this function.
            >
              <Text style={styles.buttonText}>
                <FontAwesome>{Icons.heart}</FontAwesome> Save
              </Text>
            </TouchableHighlight> */
          </View>
        </View>
      </View>
    );
  }
}

Answer 1

You need to pass a function to onPress, currently you're invoking the function and passing whatever it returns. You just need to change it to:

onPress={this.saveFormData}