|
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.
- 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.
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
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;
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 |
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 |
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.
This project is licensed under the MIT License - see the LICENSE file for details.