Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

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

chinomnsoawazie39MIT0.1.28

A package to select EV makes, models, years, and trims from a large collection of options

evs, ev, ev-makes, ev-models, electric-vehicle, ev-cars, electric-vehicles, vehicles

readme

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:

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


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

```typescript jsx
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.