CODEWITHSUNDEEP
react-nativelayoutreact-native-paper
scrayne
scrayne

Reputation: 718

In react-native-paper, how can I remove the space between the searchbar and the menu

I am making screen that has a react-native-paper Searchbar. Underneath it there is a Menu. The Menu is not displayed when an anchor button is pressed, but when the user types certain characters in the Searchbar. This all works very nicely, but I would like the Menu to appear right underneath the Searchbar, so that it looks like a dropdown. No matter what I do, I cannot eliminate the space between the Menu and the Searchbar. Here is the code:


  <View
    style = {{
      flexDirection: 'column'
      justifyContent: 'flex-start'      
    }}>

    <Searchbar style={{maxHeight: 50, width: '80%', marginBottom: 0}}
      placeholder="Search"
      onChangeText={onChangeSearch}
      value={searchQuery}
    />

    <Menu
      visible={visible}
      onDismiss={closeMenu}
      anchor={<Button style={{height: 1, color: "white"}}></Button>}>

      {state.items.map((row, index) => (
        <Menu.Item
          key={index}
          title={row}
          onPress={() => onPressItemHandler(row)}
        />
      ))}
    </Menu>
  </View>

This is the way the screen looks when the menu is open:

enter image description here

Thank you for any help you can provide.

Upvotes: 1

Views: 3577

Answers (2)

Hassan Hassnain
Hassan Hassnain

Reputation: 38

Provide the contentStyle props of Menu and marginTop value whatever you want

 <Menu
      visible={dropdownVisibility}
      onDismiss={closeMenu}
      contentStyle={{marginTop: 10}}
   ...

Upvotes: 0

cltsang
cltsang

Reputation: 1829

Put the Searchbar component in anchor prop of Menu component.

And add marginTop to Menu.

import React, { useState, useEffect } from 'react';
import { View, StyleSheet } from 'react-native';
import { Provider as PaperProvider, Searchbar, Menu, Text } from 'react-native-paper';
import Constants from 'expo-constants';
import { MaterialIcons } from '@expo/vector-icons';

const array = [0, 1, 2, 3, 4];

export default function App() {
  const [query, setQuery] = useState('');
  const [menuVisible, setMenuVisible] = useState(false);

  useEffect(() => {
    if (query !== '') {
      setMenuVisible(true);
    }
  }, [query]);

  return (
    <PaperProvider>
      <View style={styles.container}>
        <Menu
          style={styles.menu}
          anchor={
            <Searchbar
              style={{ backgroundColor: 'white' }}
              inputStyle={{ color: 'black' }}
              icon={({ size, color }) => (
                <MaterialIcons name="search" size={24} color />
              )}
              clearIcon={({ size, color }) => (
                <MaterialIcons name="cancel" size={24} color />
              )}
              value={query}
              onChangeText={setQuery}
            />
          }
          visible={menuVisible}
        >
          {array.map((value, index) => (
            <Menu.Item
              title={`${query}_${index}`}
              onPress={() => setMenuVisible(false)}
            />
          ))}
        </Menu>
        <Text style={styles.text}>
          {`1`}
        </Text>
        <Text style={styles.text}>
          {`2`}
        </Text>
        <Text style={styles.text}>
          {`3`}
        </Text>
        <Text style={styles.text}>
          {`4`}
        </Text>
        <Text style={styles.text}>
          {`5`}
        </Text>
        <Text style={styles.text}>
          {`6`}
        </Text>
      </View>
    </PaperProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 8,
    paddingTop: Constants.statusBarHeight + 8,
    backgroundColor: '#ecf0f1',
  },
  menu: {
    marginTop: 50,
  },
  text: {
    color: 'black',
  },
});

You may fork my snack and experiment.

Upvotes: 1

Related Questions