Skip to content

DipeshMajithia/react-native-array-dropdown

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 

Repository files navigation

react-native-customizable-array-dropdown

This library will take array as input and create a dropdown based on it.

Property Type Default Description
setSelectedValue (Required) Function null Returns the selected value
data (Required) array ["Demo1", "Demo2", "Demo3"] Array of values you want in your dropdown.
initialTitle String --Select-- Placeholder
mainView ViewStyle defaultStyle To change the view of main container
titleStyle ViewStyle defaultStyle To change the style of title(Option Selected)
dropdownContainer ViewStyle defaultStyle To change the style of dropdown container
dropdownItemContainer ViewStyle defaultStyle To change the style of individual dropdown item container
dropdownItemText ViewStyle defaultStyle To change the style of dropdown text (i.e. Options)
dropdownSelectedItemContainer ViewStyle defaultStyle To change the style of option container which is selected.
dropdownSelectedItemText ViewStyle defaultStyle To change the style of text which is currently selected
imagePath imported image 'down-arrow.png' To change the icon of the dropdown
imageStyle ViewStyle defaultStyle To change the style of image
touchOpacity integer 0.7 To change touch opacity of component

More details and properties below:

Properties:

  1. setSelectedValue (*Required)

code:

function App() {
  const [selectedValue, setSelectedValue] = useState('');
  return (
      <Dropdown
        // Property Code //
        setSelectedValue={setSelectedValue} />
        );
        
}
export default App;
  1. data (*Required)

code:

function App() {
  const [selectedValue, setSelectedValue] = useState('');
  return (
      <Dropdown
        setSelectedValue={setSelectedValue} 
       
        // Property Code //
        data={['Item1', 'Item2', 'Item3', 'Item4', 'Item5', 'Item6', 'Item7']}/>
        );
        
}
export default App;
  1. initialTitle (Optional)

code:

function App() {
  const [selectedValue, setSelectedValue] = useState('');
  return (
      <Dropdown
        setSelectedValue={setSelectedValue} 
        data={['Item1', 'Item2', 'Item3', 'Item4', 'Item5', 'Item6', 'Item7']}
        
        // Property Code //
        initialTitle="Select Option"
      />
        );
        
}
export default App;

Output For initialTitle

  1. mainView (Optional)

code:

function App() {
  const [selectedValue, setSelectedValue] = useState('');
  return (
      <Dropdown
        setSelectedValue={setSelectedValue} 
        data={['Item1', 'Item2', 'Item3', 'Item4', 'Item5', 'Item6', 'Item7']}
        initialTitle="Select Option"
       
        // Property Code //
        mainView={{backgroundColor: 'skyblue', width: 300}}

      />
        );
        
}
export default App;

Output For mainView

  1. titleStyle (Optional)

code:

function App() {
  const [selectedValue, setSelectedValue] = useState('');
  return (
      <Dropdown
        setSelectedValue={setSelectedValue} 
        data={['Item1', 'Item2', 'Item3', 'Item4', 'Item5', 'Item6', 'Item7']}
        initialTitle="Select Option"
        mainView={{backgroundColor: 'skyblue', width: 300}}
       
        // Property Code //
        titleStyle={{fontSize: 20, color: 'yellow'}}


      />
        );
        
}
export default App;

Output For titleStyle

  1. dropdownContainer (Optional)

code:

function App() {
  const [selectedValue, setSelectedValue] = useState('');
  return (
      <Dropdown
        setSelectedValue={setSelectedValue} 
        data={['Item1', 'Item2', 'Item3', 'Item4', 'Item5', 'Item6', 'Item7']}
        initialTitle="Select Option"
        mainView={{backgroundColor: 'skyblue', width: 300}}
        titleStyle={{fontSize: 20, color: 'yellow'}}
        
        // Property Code //
        dropdownContainer={{
          backgroundColor: 'orange',
          alignSelf: 'center',
          width: 200,
        }}

      />
        );
        
}
export default App;

Output For dropdownContainer

  1. dropdownItemContainer (Optional)

code:

function App() {
  const [selectedValue, setSelectedValue] = useState('');
  return (
      <Dropdown
        setSelectedValue={setSelectedValue} 
        data={['Item1', 'Item2', 'Item3', 'Item4', 'Item5', 'Item6', 'Item7']}
        initialTitle="Select Option"
        mainView={{backgroundColor: 'skyblue', width: 300}}
        titleStyle={{fontSize: 20, color: 'yellow'}}
        dropdownContainer={{
          backgroundColor: 'orange',
          alignSelf: 'center',
          width: 200,
        }}
        
        // Property Code //
        dropdownItemContainer={{
          backgroundColor: 'magenta',
          borderRadius: 30,
        }}
      />
        );
        
}
export default App;

Output For dropdownItemContainer

  1. dropdownItemText (Optional)

code:

function App() {
  const [selectedValue, setSelectedValue] = useState('');
  return (
      <Dropdown
        setSelectedValue={setSelectedValue} 
        data={['Item1', 'Item2', 'Item3', 'Item4', 'Item5', 'Item6', 'Item7']}
        initialTitle="Select Option"
        mainView={{backgroundColor: 'skyblue', width: 300}}
        titleStyle={{fontSize: 20, color: 'yellow'}}
        dropdownContainer={{
          backgroundColor: 'orange',
          alignSelf: 'center',
          width: 200,
        }}
        dropdownItemContainer={{
          backgroundColor: 'magenta',
          borderRadius: 30,
        }}
        
        // Property Code //
        dropdownItemText={{color: 'white', fontSize: 20}}

      />
        );
        
}
export default App;

Output For dropdownItemText

  1. dropdownSelectedItemContainer (Optional)

code:

function App() {
  const [selectedValue, setSelectedValue] = useState('');
  return (
      <Dropdown
        setSelectedValue={setSelectedValue} 
        data={['Item1', 'Item2', 'Item3', 'Item4', 'Item5', 'Item6', 'Item7']}
        initialTitle="Select Option"
        mainView={{backgroundColor: 'skyblue', width: 300}}
        titleStyle={{fontSize: 20, color: 'yellow'}}
        dropdownContainer={{
          backgroundColor: 'orange',
          alignSelf: 'center',
          width: 200,
        }}
        dropdownItemContainer={{
          backgroundColor: 'magenta',
          borderRadius: 30,
        }}
        dropdownItemText={{color: 'white', fontSize: 20}}
        
        // Property Code //
        dropdownSelectedItemContainer={styles.fromStylesheet}

      />
        );
        
}
export default App;


const styles = StyleSheet.create({
  fromStylesheet: {backgroundColor: 'purple', justifyContent: 'center'},
});

Output For dropdownSelectedItemContainer

  1. dropdownSelectedItemText (Optional)

code:

function App() {
  const [selectedValue, setSelectedValue] = useState('');
  return (
      <Dropdown
        setSelectedValue={setSelectedValue} 
        data={['Item1', 'Item2', 'Item3', 'Item4', 'Item5', 'Item6', 'Item7']}
        initialTitle="Select Option"
        mainView={{backgroundColor: 'skyblue', width: 300}}
        titleStyle={{fontSize: 20, color: 'yellow'}}
        dropdownContainer={{
          backgroundColor: 'orange',
          alignSelf: 'center',
          width: 200,
        }}
        dropdownItemContainer={{
          backgroundColor: 'magenta',
          borderRadius: 30,
        }}
        dropdownItemText={{color: 'white', fontSize: 20}}
        dropdownSelectedItemContainer={styles.fromStylesheet}
        
        // Property Code //
        dropdownSelectedItemText={{color: 'white', fontSize: 20}}

      />
        );
        
}
export default App;

Output For dropdownSelectedItemText

  1. imagePath (Optional)

code:


import Icon from './caret-down.png';

function App() {
  const [selectedValue, setSelectedValue] = useState('');
  return (
      <Dropdown
        setSelectedValue={setSelectedValue} 
        data={['Item1', 'Item2', 'Item3', 'Item4', 'Item5', 'Item6', 'Item7']}
        initialTitle="Select Option"
        mainView={{backgroundColor: 'skyblue', width: 300}}
        titleStyle={{fontSize: 20, color: 'yellow'}}
        dropdownContainer={{
          backgroundColor: 'orange',
          alignSelf: 'center',
          width: 200,
        }}
        dropdownItemContainer={{
          backgroundColor: 'magenta',
          borderRadius: 30,
        }}
        dropdownItemText={{color: 'white', fontSize: 20}}
        dropdownSelectedItemContainer={styles.fromStylesheet}
        dropdownSelectedItemText={{color: 'white', fontSize: 20}}
        
        // Property Code //
        imagePath={Icon}

      />
        );
        
}
export default App;

Output For imagePath

  1. imageStyle (Optional)

code:


import Icon from './caret-down.png';

function App() {
  const [selectedValue, setSelectedValue] = useState('');
  return (
      <Dropdown
        setSelectedValue={setSelectedValue} 
        data={['Item1', 'Item2', 'Item3', 'Item4', 'Item5', 'Item6', 'Item7']}
        initialTitle="Select Option"
        mainView={{backgroundColor: 'skyblue', width: 300}}
        titleStyle={{fontSize: 20, color: 'yellow'}}
        dropdownContainer={{
          backgroundColor: 'orange',
          alignSelf: 'center',
          width: 200,
        }}
        dropdownItemContainer={{
          backgroundColor: 'magenta',
          borderRadius: 30,
        }}
        dropdownItemText={{color: 'white', fontSize: 20}}
        dropdownSelectedItemContainer={styles.fromStylesheet}
        dropdownSelectedItemText={{color: 'white', fontSize: 20}}
        imagePath={Icon}
        
        // Property Code //
        imageStyle={{backgroundColor: 'pink', borderRadius: 20}}
        

      />
        );
        
}
export default App;

Output For imageStyle

  1. touchOpacity (Optional)

code:


import Icon from './caret-down.png';

function App() {
  const [selectedValue, setSelectedValue] = useState('');
  return (
      <Dropdown
        setSelectedValue={setSelectedValue} 
        data={['Item1', 'Item2', 'Item3', 'Item4', 'Item5', 'Item6', 'Item7']}
        initialTitle="Select Option"
        mainView={{backgroundColor: 'skyblue', width: 300}}
        titleStyle={{fontSize: 20, color: 'yellow'}}
        dropdownContainer={{
          backgroundColor: 'orange',
          alignSelf: 'center',
          width: 200,
        }}
        dropdownItemContainer={{
          backgroundColor: 'magenta',
          borderRadius: 30,
        }}
        dropdownItemText={{color: 'white', fontSize: 20}}
        dropdownSelectedItemContainer={styles.fromStylesheet}
        dropdownSelectedItemText={{color: 'white', fontSize: 20}}
        imagePath={Icon}
        imageStyle={{backgroundColor: 'pink', borderRadius: 20}}
        
        // Property code //
        touchOpacity={0.8}
        

      />
        );
        
}
export default App;

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published