CODEWITHSUNDEEP
javascriptreactjsreact-nativeecmascript-6alert
Abhigyan Gaurav
Abhigyan Gaurav

Reputation: 1904

How to call Alert onPress and pass some parameters in React Native

Here I am calling on alert function onPress on text field . On calling that function I am trying to open alert and on confirm I am calling another function. But it gets hang if I am calling "showAlert1()" . This function is getting called many times I have to call showAlert() function onPress and I have to send some value in it . And on confirmation OK button on Alert box I have to upload to server.

showAlert1(code, name, version) {
  console.log("data alaert abc", code, name, version);
  Alert.alert(
    'Confirmation',
    'Are you sure you want to migrate this tariff',
    [
      {
        text: 'Cancel',
        onPress: () => console.log('Cancel Pressed'),
        style: 'Cancel',
      },
      { text: 'Proceed', onPress: () => this.confirmTariffMigration(code, name, version) },
    ]
  );
}

confirmTariffMigration = (code, name, version) => {
  console.log("hhhhdhhdhdhdhhdd", code, name, version);
  const objData = {
    addofferingActionCode: '',
    offeringCode: '',
    offeringName: ''
  }
  this.props.updateTariffMigration(objData)
}

<View style={{ marginLeft: 5, marginRight: 5, marginTop: 10, backgroundColor: '#f1f1f1' }}>
  {
    tariffMigrationData.map((data, index) => {
      return (
        //  <TouchableOpacity key={index} onPress={this.showAlert1(data)}>
        <View style={{ marginBottom: 10, marginLeft: 5, marginRight: 5 }} key={index}>
          <Card>
            <CardItem header style={{ backgroundColor: '#fff', width: '100%', justifyContent: 'space-between', borderBottomColor: '#f1f1f1', borderBottomWidth: 1 }}>
              <View style={{ flexDirection: 'column', justifyContent: 'space-between' }}>
                <View>
                  <RegularText text={`${data.offering.name}`} style={{ fontWeight: 'bold' }} />
                  <SmallText text={` ID ${data.offering.code}`} textColor="grey" />
                </View>
              </View>
              <View style={{
                backgroundColor: 'blue',
                borderRadius: 75, height: 25, paddingRight: 10, paddingLeft: 10, paddingTop: 5
              }}>
                <SmallText text={'Proceed'} onPress={this.showAlert1(data.offering.code, data.offering.version, data.offering.name)} textColor='white' />
              </View>
            </CardItem>
          </Card>
        </View>
      )
    }
  }
</View>

Upvotes: 0

Views: 3281

Answers (3)

Lenoarod
Lenoarod

Reputation: 3610

as the Kishan Bharda answer addition. when we met the problem, we should know why not just correct.

as for how to pass the function to the component props, you can read the official blog, and get more details

when we want to pass params to props, here are two ways:

<TouchableOpacity key={index} onPress={() => this.showAlert1(data)}>
<TouchableOpacity key={index} onPress={this.showAlert1.bind(this,data)}>

when your do like your question

<TouchableOpacity key={index} onPress={this.showAlert1(data)}>

it is not pass the funtion, it is called not a reference.

Upvotes: 1

Priyanshu Singh
Priyanshu Singh

Reputation: 26

Make Sure you have Imported "Alert" from 'react-native', not some other module.

https://i.sstatic.net/oMj8s.png

First of all, try changing this: 

<SmallText text={'Proceed'}  onPress={this.showAlert1(data.offering.code,data.offering.version,data.offering.name)} textColor='white' />
to:

<SmallText text={'Proceed'}  onPress={() => this.showAlert1(data.offering.code,data.offering.version,data.offering.name)} textColor='white' />

Also try to change 

showAlert1 (code,name,version) {  
    #code
}

to 

showAlert1 = (code,name,version) => {  
    // code
}

Upvotes: 1

Kishan Bharda
Kishan Bharda

Reputation: 5690

Try to change :

<TouchableOpacity key={index} onPress={this.showAlert1(data)}>

to 

<TouchableOpacity key={index} onPress={() => this.showAlert1(data)}>

And 

showAlert1 (code,name,version) {  
    // code
}

To 

showAlert1 = (code,name,version) => {  
    // code
}

Upvotes: 2

Related Questions