# react-native-language-select

> Useful and customizable language picker

Latest version **1.1.1** (published 2023-09-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-language-select
pnpm add react-native-language-select
yarn add react-native-language-select
bun add react-native-language-select
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2023-09-03 |
| First published | 2022-08-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 267.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Sevval Eygul |
| Maintainers | sevvaleygul |
| Keywords | Sevval Eygul, Sevval Eygul, sevval, Sevval, react, react-native, javascript, ui-lib, rn, language, picker, language-select, select, language-picker |

## Links

- npm: https://www.npmjs.com/package/react-native-language-select
- Repository: https://github.com/sevvaleygul0/react-native-language-picker
- Homepage: https://github.com/sevvaleygul0/react-native-language-picker#readme
- Issues: https://github.com/sevvaleygul0/react-native-language-picker/issues
- npm.io page: https://npm.io/package/react-native-language-select

## Dependencies (1)

- [@freakycoder/react-native-bounceable](https://npm.io/package/@freakycoder/react-native-bounceable.md) ^1.0.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.1 (latest) — 2023-09-03
- 1.1.0 — 2022-10-27
- 1.0.2 — 2022-08-14
- 1.0.0 — 2022-08-10
- 0.0.8 — 2022-08-06
- 0.0.7 — 2022-08-05
- 0.0.6 — 2022-08-02
- 0.0.5 — 2022-08-01
- 0.0.4 — 2022-08-01
- 0.0.3 — 2022-08-01
- 0.0.2 — 2022-08-01
- 0.0.1 — 2022-08-01

## README

<img alt="React Native Typescript Library Starter" src="assets/logo.png" width="1050"/>

<p align="center">
  <img alt="React Native Typescript Library Starter"
        src="assets/react-native-language-select.gif" height="1050" width="600"/>
</p>

# Installation

Add the dependency:

```bash
npm i react-native-language-select
```

# Import

```jsx
import LanguagePicker, { ILanguagePicker } from "react-native-language-select";
```

# Example Data

```jsx
const data: ILanguagePicker[] = [
  {
    title: "English",
    imageSource: require("./lib/local-assets/america.png"),
    language: "en",
  },
  {
    title: "Italian",
    imageSource: require("./lib/local-assets/italy.png"),
  },
  {
    title: "German",
    imageSource: require("./lib/local-assets/germany.png"),
  },
  {
    title: "Turkish",
    imageSource: require("./lib/local-assets/turkey.png"),
    language: "tr-TR",
  },
  {
    title: "Swedish",
    imageSource: require("./lib/local-assets/sweden.png"),
  },
  {
    title: "Japanese",
    imageSource: require("./lib/local-assets/japan.png"),
  },
];
```

# Usage

```jsx
<LanguagePicker
  initialIndex={1}
  data={data}
  onSelect={(selectedItem: ILanguagePicker) => {
    onsole.log(selectedItem);
  }}
/>
```

# Configuration - Props

## Fundamentals

| Property |      Type       |  Default  | Description                                 |
| -------- | :-------------: | :-------: | ------------------------------------------- |
| data     | ILanguagePicker | undefined | Language select data                        |
| onSelect |    function     | undefined | select the language item when it is pressed |

## Customization (Optionals)

| Property          |        Type         |               Default               | Description                                             |
| ----------------- | :-----------------: | :---------------------------------: | ------------------------------------------------------- |
| flatListStyle     |        style        |               default               | set or override the style object for the main container |
| containerWidth    | windowWidth \* 0.9  |               number                | set the main container width                            |
| containerHeight   | windowHeight \* 0.7 |               number                | set the main container height                           |
| initialIndex      |       number        |              undefined              | set your selected language item                         |
| width             | windowWidth \* 0.9  |               number                | set the language item width                             |
| height            |         80          |               number                | set the language item height                            |
| backgroundColor   |      '#FFFFFF'      |               string                | set the language item background color                  |
| activeBorderColor |      '#504ED9'      |               strings               | set the language item active item border color          |
| textColor         |      '#2F3452'      |               string                | set to language text                                    |
| itemContainer     |       default       |               default               | change the language item container style                |
| imageComponent    |       default       | React.ReactNode / React.ReactNode[] | change the language image component                     |
| checkComponent    |       default       | React.ReactNode / React.ReactNode[] | change the check component                              |
| languageItemProps |       default       |         ILanguageItemProps          | change the language item props                          |

## Future Plans

- [x] ~~LICENSE~~

## Inspiration

Thank you [Oww Studio ](https://dribbble.com/shots/15254633-Translator-Mobile-App-Exploration?utm_source=Clipboard_Shot&utm_campaign=milliarta&utm_content=Translator%20Mobile%20App%20Exploration%20%F0%9F%87%AC%F0%9F%87%A7&utm_medium=Social_Share&utm_source=Clipboard_Shot&utm_campaign=milliarta&utm_content=Translator%20Mobile%20App%20Exploration%20%F0%9F%87%AC%F0%9F%87%A7&utm_medium=Social_Share))

## Author

Sevval Eygul, sevvalleygull@gmail.com

## License

React Native Language Select is available under the MIT license. See the LICENSE file for more info.

---
_Source: https://npm.io/package/react-native-language-select · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._