Passing values after clicking on the Button - React Native

Question

How can I pass all values inside Render() method after I click on the button Send? Inside this Render() method I return some Flatlists, Views, Signature, etc. So, is it possible to pass all of these values to another page only by a click of a button.

Please let me know if you dont have the question clear so I can add some more explanation.

See below for the code (Edited).

I appreciate any suggestion or help!

EDIT:

    renderTextandInputs = (obje) => {
    var keyvalue_to_json = JSON.parse(obje.keyValues);
    var foundTextFields = [];
    for (let i = 0; i < keyvalue_to_json.length; i++) {
      if (keyvalue_to_json[i].type === 'textfield') {
        foundTextFields.push(<TextInput style={{ borderWidth: 1, flex: 1, alignItems: 'flex-start' }}>{keyvalue_to_json[i].placeholderText}</TextInput>)
      }
    }
    return (
      <View>
        <ScrollView>
          <ListItem
            title={obje.name}
            subtitle={obje.description}
          />

        </ScrollView>
        <View >
          {foundTextFields}
        </View>
      </View>

    )
  }


  render() {

    const obj = this.props.navigation.state.params.item;
    var propsArray = [];
    const itemArray = Object.assign(obj)
    propsArray.push(itemArray)

    keyExtractor = (item, index) => {
      return index.toString();
    }

    return (
      <View>
        <View>
          <FlatList
            key={this.keyExtractor}
            data={propsArray}
            renderItem={({ item }) => this.renderTextandInputs(item)}
          />
        </View>    
        <View >
          {this.state.signature ? (
            <Image
              resizeMode={"contain"}
              source={{ uri: this.state.signature }}
            />
          ) : null}
        </View>

        <Modal isVisible={this.state.isModalVisible}
          onBackdropPress={() => this.setState({ isModalVisible: false })}
        >       
          <Signature
            width="100"
            onOK={this.handleSignature}
            descriptionText="Sign"
            clearText="Clear"
            confirmText="Save"
            webStyle={style}
          />
        </Modal>

        <View>
          <Button title="SIGN" onPress={this._toggleModal} />
        </View>

        <View>
          <Button title="Send" onPress={this._onSendDoc} />
        </View>

      </View>
    );
  }

_onSendDoc = (item) => {
    this.props.navigation.navigate('Detail', { item: item })
  }
}

Answer 1

if you check here: https://facebook.github.io/react-native/docs/flatlist you can render a button per flatlist item like this:

EDIT

_onSendAll = () => {
  const obj = this.props.navigation.state.params.item;
  var propsArray = [];
  const itemArray = Object.assign(obj)
  propsArray.push(itemArray)

  this.props.navigation.navigate("Detail", { allData: propsArray });
};


_onSendDoc = item => {
  this.props.navigation.navigate("Detail", { item: item });
};

render() {
  return (
    <FlatList
      data={[{title: 'Title Text', key: 'item1'}]}
      renderItem={({item}) => (
        <TouchableHighlight
          onPress={() => this._onSendDoc(item)}
          <View style={{backgroundColor: 'white'}}>
            <Text>{item.title}</Text>
          </View>
        </TouchableHighlight>
      )}
    />
  )

On each button clicked, the item data passed will be logged.