how to creat drop down in React native?

user_11400997 0
Viewed 93

i'm building React Native with Expo, trying to make custom dropdown without using liberals so both android and iOS look the same, also the project i working on full of old dependency so i avoid installation more. i trying to build Dropdpwn component (functional component) render that component on Class component

this is the is what i want to build, drop down able the user select their birthday date. the project already has date piker component

react-native javascript
3 Answers

I have given an idea of how you can go without using a library, you can define menutypes and use them as props to populate data as required, and other things will help as stated below.

export default Menu extends Component {
    constructor(props) {
    super(props)

      this.state={
        menuItems:[] //Define your menuitems as per props
       }
    }

    renderItem({item,index}){
      return <Text>{item.title}</Title>
    }

    render() {
        var {menuItems} = this.state;
        var {x,y,width} = this.props.dimension;
        var height=120
        var left=x-(width+5)
        return (
            <View style={[styles.menuContainer,{top:positionY,left,width,height}]}>
                  <FlatList
                      data={menuItems}
                      renderItem={this.renderItem.bind(this)}
                      keyExtractor={(item, index) => index.toString()}
                    />
              </View>    
        );
    }
}

const styles=StyleSheet.create({
    menuContainer:{
      flex: 1,
      backgroundColor:'white',
      position:'absolute',
      borderRadius:5,
      shadowColor: '#000000',
      shadowOffset: { width: 0, height: 1 },
      shadowOpacity: 0.2,
      shadowRadius: 2,
      elevation: 2,
    }
});

Here is how you call the menu

<TouchableOpacity onPress={this.handleMenuOpen} ref={this.menuRef}>
    <Text>{"Open Menu"}</Text>
</TouchableOpacity>

handleMenuOpen(){
      this.menuRef.current.measure((fx, fy, width, height, px, py)=>{
           //Use width, px and py to determine dimension of the menu
           this.setState({dimension:{x:px,y:py,width}})
      });
}

{
  this.state.dimension?
     <Menu dimension={this.state.dimension} onSelection={(menuItem)=>{
         //Process your selection
     }/>
  :null
}

Cheers.

user_7908420

You can also have 1 dropdown to select all of them.

import DateTimePicker from '@react-native-community/datetimepicker';

Using class based component, it is implemented as below

class Component extends PureComponent {
    this.state = {
      mode: 'date',
      date: new Date(),
      date_show: false,
    };

    datePicker(type) {
        this.dateShow('date',type);
    }

    dateShow(mode,type) {
        this.setState({
            date_show: true,
        });
        this.setState({
            mode
        });
    }

setDate(event, date) {
        date = date || this.state.date;

        this.setState({
            date_modal: false,
            date_show: Platform.OS === 'ios',
            date
        });
    }
  render() {
    return (
                  <View>
                    <View>
                        <Text>{lang.DATE}</Text>
                        <Text
                            style={{paddingTop: 10, height: 40,}}
                            onPress={_ => {
                                this.datePicker(1);
                            }}>{Moment(this.state.date).format('DD.MM.YYYY')}</Text>
                        {
                            this.state.date_show &&
                            <DateTimePicker
                                value={this.state.date}
                                mode={this.state.mode}
                                is24Hour={true}
                                display="default"
                                locale='tr'
                                onChange={this.setDate.bind(this)}/>
                        }
                    </View>
                  </View>
    );
  }
}
user_149995990

For drop down in react native you can use react-native-dropdown-picker, I have attached the code below you can refer the demo.

import React, { useState } from 'react';
import { View } from 'react-native';
import DropDownPicker from 'react-native-dropdown-picker'
export default function App() {
const [open, setOpen] = useState(false);
const [value, setValue] = useState([]);
const [items, setItems] = useState([
{label: 'Spain', value: 'spain'},
{label: 'Madrid', value: 'madrid'},
{label: 'Barcelona', value: 'barcelona'},
{label: 'Russia', value: 'russia'},
{label: 'Italy', value: 'italy'},
{label: 'Rome', value: 'rome'},
{label: 'Finland', value: 'finland'}
 ]);
return (
<View style={{
  backgroundColor: '#171717',
  flex: 1,
  alignItems: 'center',
  justifyContent: 'center',
  paddingHorizontal: 15
}}>
  <DropDownPicker
    open={open}
    value={value}
    items={items}
    setOpen={setOpen}
    setValue={setValue}
    setItems={setItems}
    multiple={true}
   />
  </View>
 );
}
user_91064030
Related