How do i pass a selected item from React Native Paper Menu to Input/TextInput onChangeText behaviour

Question

I'm trying to figure out how to pass a param/prop to an input from react native paper, since react native paper doesn't have a proper dropdown menu, there is a "menu" that i'll love to implement on my project, but the documentation is so bad, there is no example on how to get the element from that item, neither pass that param to somewhere else.

            <TextInput
          style={{width: 300, backgroundColor: 'transparent', margin: 0, padding: 0}}
          label='Email'
          value={Username}
          onChangeText={User => setUsername(User)}
          />

and here is the menu, as you can see

          <Provider>
        <Menu
          visible={isOpen}
          onDismiss={() => setOpen(false)}
          anchor={
            <Button style={{marginTop: 25}} color="#8DB600" icon="account" dark={true} mode="contained" onPress={() => setOpen(true)}>
              Ingresar
            </Button>
          }>
            <Menu.Item onPress={() => {}} title="Item 1" />
            <Menu.Item onPress={() => {}} title="Item 2" />
            <Menu.Item onPress={() => {}} title="Item 3" />
        </Menu>
      </Provider>

my idea is to press on that button on the anchor, display the menu and select an item, and that item to be displayed on the textinput as if i typed inside this component

Answer 1

Assuming both the text input and the drop-down are part of the same component - changing the value of Username with setUsername will update the text-input

    const [Username, setUsername] = useState(''); // both components must have access to Username state

    <TextInput
        style={{width: 300, backgroundColor: 'transparent', margin: 0, padding: 0}}
        label='Email'
        value={Username}
        onChangeText={User => setUsername(User)}
      />

    <Provider>
        <Menu
          visible={isOpen}
          onDismiss={() => setOpen(false)}
          anchor={
            <Button style={{marginTop: 25}} color="#8DB600" icon="account" dark={true} mode="contained" onPress={() => setOpen(true)}>
              Ingresar
            </Button>
          }>
            <Menu.Item onPress={() => setUsername("Item 1")}} title="Item 1" /> // directly set username like this
            <Menu.Item onPress={() => setUsername("Item 2")}  title="Item 2" />
            <Menu.Item onPress={() => setUsername("Item 3")}  title="Item 3" />
        </Menu>
      </Provider>

Why this works - doc

The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided.

edit: full working example - https://snack.expo.io/4I0Xr0HBR

Answer 2

if your menu and Textinput is in one component then you can change value of username by useState otherwise you can use REDUX if both are not on same component

you have to close menu when we click on any menu item by setOpen(false);

import React from "react";
import { TextInput, StyleSheet, View } from "react-native";
import { Button, Menu, Provider } from "react-native-paper";

const App = () => {
  const [Username, setUsername] = React.useState("");
  const [isOpen, setOpen] = React.useState(false);

  const onPressItemHandler = (value) => {
    setUsername(value);
    setOpen(false);
  };

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <TextInput
        style={{
          width: 300,
          backgroundColor: "transparent",
          margin: 0,
          padding: 0,
        }}
        label="Email"
        value={Username}
        onChangeText={(User) => setUsername(User)}
      />
      <Menu
        style={{ marginTop: 70 }}
        visible={isOpen}
        onDismiss={() => setOpen(false)}
        anchor={
          <Button
            style={{ marginTop: 25 }}
            color="#8DB600"
            icon="account"
            dark={true}
            mode="contained"
            onPress={() => setOpen(true)}
          >
            Ingresar
          </Button>
        }
      >
        <Menu.Item
          onPress={() => onPressItemHandler("Item 1")}
          title="Item 1"
        />
        <Menu.Item
          onPress={() => onPressItemHandler("Item 2")}
          title="Item 2"
        />
        <Menu.Item
          onPress={() => onPressItemHandler("Item 3")}
          title="Item 3"
        />
      </Menu>
    </View>
  );
};

export default () => (
  <Provider>
    <App />
  </Provider>
);