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

did you test my answer? – Muhammad Numan May 18 '20 at 13:40 — Muhammad Numan, May 18 '20 at 13:40

LonelyCpp · Answer 1 · 2020-05-18T18:35:10.317

5

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

edited May 18 '20 at 18:35

answered May 12 '20 at 03:55

LonelyCpp

2,533
1
17
36

this doesn't even touches my question at the very least – Nicolas Silva May 12 '20 at 19:29
Wait, is your question about implementing the actual dropdown? It's not clear what you want – LonelyCpp May 13 '20 at 06:18
what i want, is to set item i clicked on the menu, inside the textinput in the onchangetext prop, is not as simple as it sound – Nicolas Silva May 13 '20 at 17:17
why would you want your textinput value to be updated via onChangeText? you can set the “value” explicitly using setUsername – Pulkit Sharma May 17 '20 at 19:28
@NicolasSilva I've added a full example in expo – LonelyCpp May 18 '20 at 18:35
@LonelyCpp i literally got an error with your expo example :/ -> menuVisible is not a function – Nicolas Silva May 18 '20 at 18:43

score 3 · Accepted Answer · answered May 17 '20 at 19:21

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>
);

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

2 Answers2