React Native onPress function keeps getting called

Question

I'm trying to run a function in react native where a function gets called when the button is pressed but when the button is pressed once the function keeps running over and over again. How do I fix the code to make this not happen. The add_password function is the function that keeps getting called

function DetailsScreen({ navigation, route }) {
  const [text3, setText3] = useState("");
  const [text4, setText4] = useState("");
  const { param1, param2 } = route.params;

  let button_click = () => {
    add_password(text3, text4, param1, param2);
  };

  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <TextInput
        style={{ height: 40 }}
        placeholder="info"
        onChangeText={(text3) => setText3(text3)}
        defaultValue={text3}
      />
      <TextInput
        style={{ height: 40 }}
        placeholder="password"
        onChangeText={(text4) => setText4(text4)}
        defaultValue={text4}
      />
      <Button title="Add Password" onPress={button_click} />
    </View>
  );
}

Giovanni Esposito · Answer 1 · 2020-08-07T11:47:06.120

0

Ciao, I got your code from github repo and then, to test it, I used react-native-expo-gitpod. It's just an empty project that could be runned on gitpod. Then I pasted your code from github repo in App.js and runned it. I made the login in HomeScreen:

Then I filled Details info and password fields:

Then I clicked Add Password button. And the result was that button_click function is called just one time!

This is DetailsScreen code:

function DetailsScreen({ navigation, route }) {
  const [text3, setText3] = useState("");
  const [text4, setText4] = useState("");
  const { param1, param2 } = route.params;

  const button_click = () => {
      console.log("button_click");
    add_password(text3, text4, param1, param2);
  };

  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <TextInput
        style={{ height: 40 }}
        placeholder="info"
        onChangeText={(text3) => setText3(text3)}
        defaultValue={text3}
      />
      <TextInput
        style={{ height: 40 }}
        placeholder="password"
        onChangeText={(text4) => setText4(text4)}
        defaultValue={text4}
      />
      <Button
        title="Add Password"
        onPress={button_click} />
    </View>
  );
}

Exactly like yours (except the log to check how many times function is called).

The log I received is:

calling add_password is another log that I putted in add_password function.

Seems that all is working well!

Note: this is my package.json:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start -c --host tunnel",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "test": "jest --watchAll"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/samples": "~3.0.3",
    "@expo/vector-icons": "^10.0.3",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/native": "^5.7.3",
    "@react-navigation/stack": "^5.9.0",
    "@react-navigation/web": "^1.0.0-alpha.9",
    "expo": "^35.0.0",
    "expo-asset": "^7.0.0",
    "expo-constants": "^7.0.0",
    "expo-font": "^7.0.0",
    "expo-web-browser": "^7.0.0",
    "firebase": "^7.17.2",
    "react": "16.8.3",
    "react-dom": "16.8.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
    "react-native-gesture-handler": "~1.3.0",
    "react-native-safe-area-context": "^0.3.6",
    "react-native-screens": "^2.10.1",
    "react-native-web": "^0.11.7",
    "react-navigation": "^3.12.0"
  },
  "devDependencies": {
    "babel-preset-expo": "^7.0.0",
    "jest-expo": "^35.0.0"
  },
  "private": true
}

edited Aug 07 '20 at 11:47

answered Aug 04 '20 at 19:33

Giovanni Esposito

10,696
1
14
30

I changed it and that did not work it's still running continuously after 1 press. – Robert Beit Aug 04 '20 at 22:45
Ciao, what a strange... can you show me `add_password` function? – Giovanni Esposito Aug 05 '20 at 06:04
1

it won't let me put the function in a comment because it's too long but the function isn't the problem it's that it's being called continuously. The add password function just makes changes to an entry in the database. – Robert Beit Aug 05 '20 at 18:26
Sorry, seems so natural that this function must be called just one time onPress event. I tried to reproduce the error [here](https://codesandbox.io/s/fervent-feynman-vizur?file=/src/App.js) but it worked (I'm using react-native-web and could be different but I mean it's just a button click!). Can you share a github repo so I can check here? – Giovanni Esposito Aug 05 '20 at 19:27
1

here is a link to the repo https://github.com/RobertBeit/Vault I excluded the firebase config for security reasons – Robert Beit Aug 05 '20 at 21:32
Ciao @RobertBeit, I just tried your solution. Unfortunately is not exaclty identical to your code (I can't run add_password as is because I haven't firebase config, and for the same reason I can't log in from Home screen). So I have just moved `Add password` button from `DetailsScreen` to `HomeScreen` and in `button_click` I put a console.log (removing `add_password`). Function is called just one time. I saw `add_password` function and looks ok. How I can continue to help you? Maybe you could create a private github repo with firebase config if you trust. Let me know. – Giovanni Esposito Aug 06 '20 at 07:33
I made the repo private and included the config. https://github.com/RobertBeit/Vault – Robert Beit Aug 06 '20 at 09:38
Ciao, invite me on repo, I'm gioexp – Giovanni Esposito Aug 06 '20 at 09:56
Ciao @RobertBeit, I got 404 page not found when I clicked on [https://github.com/RobertBeit/Vault](https://github.com/RobertBeit/Vault) – Giovanni Esposito Aug 06 '20 at 10:26
1

I invited you. You should be able to access it now. – Robert Beit Aug 07 '20 at 04:45
Ciao @RobertBeit. I rewrited my answer. I Hope this could help you. – Giovanni Esposito Aug 07 '20 at 11:53

React Native onPress function keeps getting called

1 Answers1