[enter image description here][1]

i have made a button and a input how can i take input value and show the value in alert by clicking on button [1]: https://i.stack.imgur.com/sWh4F.png

CodePudding user response：

In sort, you want to show the TextInput values on alert, right!

Here, Below is the full code I have. May be it'll help you.

import { StatusBar } from 'expo-status-bar';
import React, { Component } from 'react';
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';

export default class HomePage extends Component {
  state = {
    username: '',
    password: '',
  };

  getValues() {
    alert(this.state.username);
    console.log(this.state.password);
  }

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={styles.txtinput}
          placeholder="Enter Username"
          onChangeText={(text) => this.setState({ username: text })}
        />

        <TextInput
          style={styles.txtinput}
          placeholder="Enter Password"
          secureTextEntry={true}
          onChangeText={(text) => this.setState({ password: text })}
        />
        <Button onPress={() => this.getValues()} title="Get Values" />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  txtinput: {
    width: '75%',
    height: 50,
    borderWidth: 1,
    borderColor: 'black',
    borderRadius: 10,
    padding: '24px',
    margin: '10px',
  },
});

CodePudding user response：

It looks like you are using a functional component, a full code to do that will look like this:

import React, { useState } from "react";
import { Alert, Button, StyleSheet, TextInput, View } from "react-native";

export default function App() {
  const [userName, setUserName] = useState("");
  const [password, setPassword] = useState("");

  const getValues = ()=> {
    Alert.alert(userName);
    console.log(password);
  }

  return (
   <View style={styles.container}>
        <TextInput
          style={styles.textInput}
          placeholder="Enter Username"
          onChangeText={(userName) => setUserName(userName)}
        />

        <TextInput
          style={styles.textInput}
          placeholder="Enter Password"
          secureTextEntry={true}
          onChangeText={(password) => setPassword( password )}
        />
        <Button onPress={() => getValues()} title="Alert Values" />
      </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  textInput: {
    width: '75%',
    height: 50,
    borderWidth: 1,
    borderColor: 'black',
    borderRadius: 10,
    padding: 10,
    margin: 10,
  },
});