@coawazie/react-native-ev-models-picker

React Native EV Models Picker

See an example usage here: 👉🏿 https://snack.expo.dev/@coawazie/ev-selector-example?platform=ios

This package provides a customizable dropdown selector component for React Native applications, allowing users to select electric vehicle (EV) makes, years, trims, and models. It's built with TypeScript for type safety and developer productivity.

Features

• Dropdown selectors for EV makes, years, trims, and models.
• Customizable UI to match your app's design.
• Type definitions for TypeScript support.
• Easy to integrate with React Native apps.

Installation

To install the React Native EV Models Picker, run:

yarn addadd @coawazie/react-native-ev-models-picker react-native-dropdown-picker  # using yarn

npm install add @coawazie/react-native-ev-models-picker react-native-dropdown-picker  # using npm

Usage

First, import the EVSelector component in your React Native app:

import {EVSelector} from 'add @coawazie/react-native-ev-models-picker';

Then, use the EVSelector component in your app. Here's a basic example:

import React, {useState} from 'react';
import {EVSelector} from 'add @coawazie/react-native-ev-models-picker';
import {View} from 'react-native';

const App = () => {
	const [selectedEV, setSelectedEV] = useState(null);
	return (
		<View>
		<EVSelector onValueChange={(value) => setSelectedEV(value)}/>
		</View>
	);
};

export default App;

Component API

Props

Prop	Type	Default	Note
listMode	String	ScrollView	Determines how the lists are shown. Allowed values are MODAL and SCROLLVIEW
optionsLevel	String	CarTrim	Determines what option selectors are shown. Allowed values are CarMake , CarModel, CarYear and CarTrim
accessibilityLabel	String		Used for accessibility purposes
carMakePlaceholder	String	"Select an item"	Placeholder string for car make
carModelPlaceholder	String	"Select an item"	Placeholder string for car model
carYearPlaceholder	String	"Select an item"	Placeholder string for car year
carTrimPlaceholder	String	"Select an item"	Placeholder string for car trim

Events/Callbacks

Event name	Returns	Notes
onValueChange	{CarMake, CarModel, CarYear, CarTrim}	Callback that is called when any value changes
onCarMakeOpen	Function	Callback that is called car make selection dropdown opens
onCarMakeClose	Function	Callback that is called car make selection dropdown closes
onCarModelOpen	Function	Callback that is called car model selection dropdown opens
onCarModelClose	Function	Callback that is called car model selection dropdown closes
onCarYearOpen	Function	Callback that is called car year selection dropdown opens
onCarYearClose	Function	Callback that is called car year selection dropdown closes
onCarTrimOpen	Function	Callback that is called car trim selection dropdown opens
onCarTrimClose	Function	Callback that is called car trim selection dropdown closes

Contributing

We welcome contributions to the React Native EV Selector! If you have suggestions for improvements or encounter any issues, please open an issue or submit a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.