React-native-animated-dropdown NPM

react-native-searchable-animated-dropdown

This library will take array as input and create a dropdown based on it. More details and properties below:

Properties:

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
searchIcon	imported image/Image Path	'search.png'	To change the icon of the search Icon
searchImageStyle	Image Style	defaultStyle	To change the style of search Icon
searchContainer	TextInput Style	defaultStyle	To change the style of search container
showSearch	Boolean	true	Show/Hide search bar
searchPlaceholder	String	Search	Search Placeholder
duration	number	800	To change duration of animation
bottomContainerHeight	number	200	To change the height of bottom container
showOverlay	boolean	true	Hide/Show Overlay

setSelectedValue (*Required)

code:

function App() {
  const [selectedValue, setSelectedValue] = useState('');
  return (
      <Dropdown
        // Property Code //
        setSelectedValue={setSelectedValue} />
        );

}
export default App;

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;

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

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

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

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

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

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

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

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

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

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

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;

react-native animated animated-search search-bar react-native-dropdown react-native-animated-searchbar react-native-animated-search-dropdown searchable-dropdown

@everything-registry/sub-chunk-2570

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago