React Native Buttons onPress nothing happens, also onChangeText not working

Question

I am new to React Native. I have a single login form with two fields. I want to authenticate the user before sending him to Dashboard.js. No matter what I try the button is not doing anything(absolutely nothing happens,no error). I have kept the code in Login.js to show all the things I have tried to do namely

routing to dashboard.js
trying to do something with invoking the handleSubmitPress function on button press.
pop an alert.

I have used two buttons. One from react-native-paper and one from react-native. I am giving the code of my app.js and login.js below. Please can someone help?

CODE

  App.js
    import React from "react";
    import { NavigationContainer } from "@react-navigation/native";
    import { createStackNavigator } from "@react-navigation/stack";
    import DashBoard from "./mainmenu/DashBoard";
    import Login from "./mainmenu/Login";
    
    const Stack = createStackNavigator();
    
    export default function App() {
      return (
        <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen name="Login" component={Login} />
            <Stack.Screen name="DashBoard" component={DashBoard} />
          </Stack.Navigator>
        </NavigationContainer>
      );
    }
    
    
    Login.js
    import React, { useState } from "react";
    import { Title, TextInput} from "react-native-paper";
    import { View, Alert,Button } from "react-native";
    export default function Login() {
      const [mobile, setMobile] = useState("123456789");
      const [password, setPassword] = useState("123");
    
      function handleSubmitPress() {
        console.log({ mobile, password });
      }
    
      return (
        <View
          style={{
            backgroundColor: "skyblue",
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          <TextInput
            label="Your mobile number "
            value={mobile}
            onChangeText={(text) => setMobile(text)}
          />
          <TextInput
            label="Type Password  "
            value={password}
            onChangeText={(text) => setPassword(text)}
          />
    
          <Button
            icon="camera"
            type="submit"
            mode="contained"
            //onPress={() => props.navigation.navigate("DashBoard")}
            onPress={()=>Alert.alert('Navigate pressed')}
          >
            Navigate
          </Button>
    
          <Button
              title="Print"
              onPress={() => Alert.alert('Simple Button pressed')}
              // onPress={handleSubmitPress()}
            />
        </View>
      );
    }

5eb · Answer 1 · 2020-07-04T13:32:38.597

Change your Login component to this.

...
const Login = ({navigation}) => {
  const [mobile, setMobile] = useState('123456789');
  const [password, setPassword] = useState('123');

  function handleSubmitPress() {
    console.log({mobile, password});
  }

  return (
    <View
      style={{
        backgroundColor: 'skyblue',
        alignItems: 'center',
        justifyContent: 'center',
      }}>
      <TextInput
        label="Your mobile number "
        value={mobile}
        onChangeText={text => setMobile(text)}
      />
      <TextInput
        label="Type Password  "
        value={password}
        onChangeText={text => setPassword(text)}
      />

      <Button
        title="title"
        icon="camera"
        type="submit"
        mode="contained"
        onPress={() => navigation.navigate('DashBoard')}>
        Navigate
      </Button>

      <Button title="Print" onPress={() => handleSubmitPress()} />
    </View>
  );
};

export default App;

There were a couple problems.

I've used the default React Native buttons. So I added a title prop to one of the buttons, because that's required. I gave it the value "title", but change this to what you want or use the React Native Paper buttons.

The main problem was how you called handleSubmitPress in your button onPress.

Your onChangeText was fine, you just couldn't see the result, because the handleSubmitPress wasn't being called.

I've also used destructuring so you're able to access the navigation prop directly. You can also do const Long = (props) => {...} and use props.navigation, but either way you need to pass in something otherwise navigation will not work.

React Native Buttons onPress nothing happens, also onChangeText not working

1 Answers1