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 add @coawazie/react-native-ev-models-picker react-native-dropdown-picker react-native-safe-area-context  # using yarn

npm install @coawazie/react-native-ev-models-picker react-native-dropdown-picker react-native-safe-area-context  # using npm

Usage

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

import {EVSelector} from '@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 '@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
language	String	"en"	Language for labels. Supported: "en", "fr"
width	Number		Width of the selector component
backgroundColor	String		Background color of the dropdowns
fontColor	String		Font color of the dropdown text
labelColor	String		Color of the labels above dropdowns
labelFontSize	Number		Font size of the labels
minHeight	Number		Minimum height of the dropdowns
borderColor	String		Border color of the dropdowns
disabled	Boolean	false	Disables all dropdowns when true

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 when car make selection dropdown opens
onCarMakeClose	Function	Callback that is called when car make selection dropdown closes
onCarModelOpen	Function	Callback that is called when car model selection dropdown opens
onCarModelClose	Function	Callback that is called when car model selection dropdown closes
onCarYearOpen	Function	Callback that is called when car year selection dropdown opens
onCarYearClose	Function	Callback that is called when car year selection dropdown closes
onCarTrimOpen	Function	Callback that is called when car trim selection dropdown opens
onCarTrimClose	Function	Callback that is called when 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.