switch-react-native-custom-dropdown v1.0.7

switch-react-native-custom-dropdown

A custom dropdown component for React Native made by Switcher.faiz.

Installation

npm install switch-react-native-custom-dropdown

Usage

import React, { useRef } from 'react';
import { View, StyleSheet,Pressable,Text } from 'react-native';
import CustomDropdown from 'switch-react-native-custom-dropdown';
import { SafeAreaView } from 'react-native-safe-area-context'

const mydrop_data=[
    {'id':'12','value':'Select equipment'},
    {'id':'32','value':'First Equipment'},
    {'id':'34','value':'Second equipment'},
    {'id':'11','value':'Third'},
];

export default function App(){
    const dropRefference=useRef();
    const sendValues=()=>{
      console.log(dropRefference.current.getvalue());
      console.log(dropRefference.current.getkey());
    }

return(
        
<SafeAreaView style={{flex:1}}>

<CustomDropdown ref={dropRefference} parent_scroll_enabled={false} drop_scrollbar_hidden={false} drop_styles={styles.drop_styles} drop_items={mydrop_data} drop_selected={1} onChange={()=>{
  console.log('changed')
}}>Update</CustomDropdown>

<Pressable onPress={sendValues}><Text>Get value</Text></Pressable>


</SafeAreaView>
)
}


const styles=StyleSheet.create({
    drop_styles:{
        color:'white',
        width:200,
        fontFamily:'Inter-Regular',
        fontSize:3.5,
        height:45,
        ItemContStyle:{
            maxHeight:200,
            marginTop:5,
            gap:5,
            backgroundColor:'#292929',
            borderRadius:10
        },
        ItemSelectedStyle:{
            alignItems:'center',
            justifyContent:'space-between',
            color:'white',
            backgroundColor:'black',
            paddingHorizontal:5,
            borderColor:'white',
            borderWidth:1,
            borderRadius:10,
        },
        ItemStyle:{
            paddingVertical:10,
            paddingHorizontal:5,
            borderRadius:10
        },
    },
})

Props

Styling the Items container

ItemContStyle:{
            maxHeight:200,
            marginTop:5,
            gap:5,
            backgroundColor:'#292929',
            borderRadius:10
        },

Styling the selected item or seen item

ItemSelectedStyle:{
            alignItems:'center',
            justifyContent:'space-between',
            color:'white',
            backgroundColor:'black',
            paddingHorizontal:5,
            borderColor:'white',
            borderWidth:1,
            borderRadius:10,
        },

Styling the actual item

ItemStyle:{
            paddingVertical:10,
            paddingHorizontal:5,
            paddingHorizontal:4,
            borderRadius:10
        },

Get dropdown selected key and value use reference variable declared by useRef prop for your Custom dropdown

const dropRefference=useRef();
    const sendValues=()=>{
      console.log(dropRefference.current.getvalue());
      console.log(dropRefference.current.getkey());
    }

<CustomDropdown ref={dropRefference} parent_scroll_enabled={false} drop_scrollbar_hidden={false} drop_styles={styles.drop_styles} drop_items={mydrop_data} drop_selected={1} onChange={()=>{
  console.log('changed')
}}>Update</CustomDropdown>

<Pressable onPress={sendValues}><Text>Get value</Text></Pressable>

Get dropdown value when onChange fired ,using key and value parameters respectively or ref also

<CustomDropdown ref={dropRefference} parent_scroll_enabled={false} drop_scrollbar_hidden={false} drop_styles={styles.drop_styles} drop_items={mydrop_data} drop_selected={1} onChange={(key,value)=>{
  console.log(key,value);
  console.log(dropRefference.current.getvalue());
  console.log(dropRefference.current.getkey());
}}>Update</CustomDropdown>