Skip to content

Commit f98be22

Browse files
sevvaleygul0sevvaleygul0
committed
fix: read.me
1 parent 831e63a commit f98be22

File tree

9 files changed

+90
-104
lines changed

9 files changed

+90
-104
lines changed

‎README.md

Lines changed: 61 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,103 @@
11
<img alt="React Native Typescript Library Starter" src="assets/logo.png" width="1050"/>
22

3-
[![Battle Tested ✅](https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge)](https://github.com/WrathChaos/react-native-typescript-library-starter)
4-
5-
[![React Native Typescript Library Starter](https://img.shields.io/badge/-Extremely%20easy%20to%20create%20a%20React%20Native%20Component%20Library%20with%20both%20Stateful%20and%20Functional%20Component%20Examples-orange?style=for-the-badge)](https://github.com/WrathChaos/react-native-typescript-library-starter)
6-
7-
[![npm version](https://img.shields.io/npm/v/react-native-typescript-library-starter.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-typescript-library-starter)
8-
[![npm](https://img.shields.io/npm/dt/react-native-typescript-library-starter.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-typescript-library-starter)
9-
![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)
10-
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)
11-
[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier)
12-
133
<p align="center">
144
<img alt="React Native Typescript Library Starter"
15-
src="assets/Screenshots/typescript.jpg" />
5+
src="assets/react-native-language-select.gif" />
166
</p>
177

18-
## Library Usage
19-
20-
- `npm i`
21-
- `npm run husky:setup`
22-
- Delete example folder
23-
- Delete build folder
24-
- Make your own library into the `lib` folder
25-
- Change package.json
26-
- Change README for your own documentation
27-
- `npm run build`
28-
29-
```
30-
> [email protected] build /Users/kuray/Coursion/MyLibraries/ReactNative/react-native-typescript-library-starter
31-
> cd lib && tsc && cp ../package.json ../build/dist/ && Echo Build completed!
32-
33-
Build completed!
34-
```
35-
36-
- Test your build/dist into the new project
37-
- Finally, time to npm publish :)
38-
39-
### Below part is for Documentation ! Remove above Library Usage
40-
418
# Installation
429

4310
Add the dependency:
4411

4512
```bash
46-
npm i react-native-typescript-library-starter
13+
npm i react-native-language-select
4714
```
4815

49-
## Peer Dependencies
50-
51-
<h5><i>IMPORTANT! You need install them</i></h5>
16+
# Import
5217

53-
```js
54-
"react": ">= 16.x.x",
55-
"react-native": ">= 0.55.x",
18+
```jsx
19+
import LanguagePicker, { ILanguagePicker } from "react-native-language-select";
5620
```
5721

58-
# Usage
59-
60-
## Import
22+
# Example Data
6123

6224
```jsx
63-
import MyComponent from "react-native-typescript-library-starter";
25+
const data: ILanguagePicker[] = [
26+
{
27+
title: "English",
28+
imageSource: require("./lib/local-assets/america.png"),
29+
language: "en",
30+
},
31+
{
32+
title: "Italian",
33+
imageSource: require("./lib/local-assets/italy.png"),
34+
},
35+
{
36+
title: "German",
37+
imageSource: require("./lib/local-assets/germany.png"),
38+
},
39+
{
40+
title: "Turkish",
41+
imageSource: require("./lib/local-assets/turkey.png"),
42+
language: "tr",
43+
},
44+
{
45+
title: "Swedish",
46+
imageSource: require("./lib/local-assets/sweden.png"),
47+
},
48+
{
49+
title: "Japanese",
50+
imageSource: require("./lib/local-assets/japan.png"),
51+
},
52+
];
6453
```
6554

66-
## Fundamental Usage
55+
# Usage
6756

6857
```jsx
69-
<MyComponent />
58+
<LanguagePicker
59+
initialIndex={1}
60+
data={data}
61+
onSelect={(selectedItem: ILanguagePicker) => {
62+
onsole.log(selectedItem);
63+
}}
64+
/>
7065
```
7166

72-
## Example Project 😍
73-
74-
You can checkout the example project 🥰
75-
76-
Simply run
77-
78-
- `npm i`
79-
- `react-native run-ios/android`
80-
81-
should work of the example project.
82-
8367
# Configuration - Props
8468

8569
## Fundamentals
8670

87-
| Property | Type | Default | Description |
88-
| ----------- | :----: | :-------: | --------------------- |
89-
| title | string | undefined | change the title |
90-
| description | string | undefined | change the descrition |
71+
| Property | Type | Default | Description |
72+
| -------- | :-------------: | :-------: | ------------------------------------------- |
73+
| data | ILanguagePicker | undefined | Language select data |
74+
| onSelect | function | undefined | select the language item when it is pressed |
9175

9276
## Customization (Optionals)
9377

94-
| Property | Type | Default | Description |
95-
| -------------- | :-------: | :-------: | ---------------------------------------------------------------------- |
96-
| enableButton | boolean | false | let you enable the button (must use it for button) |
97-
| onPress | function | undefined | set your own logic for the button functionality when it is pressed |
98-
| buttonText | string | undefined | change the button's text |
99-
| style | ViewStyle | default | set or override the style object for the main container |
100-
| buttonStyle | ViewStyle | default | set or override the style object for the button style |
101-
| ImageComponent | Image | default | set your own component instead of default react-native Image component |
78+
| Property | Type | Default | Description |
79+
| ----------------- | :-----------------: | :---------------------------------: | ------------------------------------------------------- |
80+
| flatListStyle | style | default | set or override the style object for the main container |
81+
| containerWidth | windowWidth \* 0.9 | number | set the main container width |
82+
| containerHeight | windowHeight \* 0.7 | number | set the main container height |
83+
| initialIndex | number | undefined | set your selected language item |
84+
| width | windowWidth \* 0.9 | number | set the language item width |
85+
| height | 80 | number | set the language item height |
86+
| backgroundColor | '#FFFFFF' | string | set the language item background color |
87+
| activeBorderColor | '#504ED9' | strings | set the language item active item border color |
88+
| textColor | '#2F3452' | string | set to language text |
89+
| itemContainer | default | default | change the language item container style |
90+
| imageComponent | default | React.ReactNode / React.ReactNode[] | change the language image component |
91+
| checkComponent | default | React.ReactNode / React.ReactNode[] | change the check component |
10292

10393
## Future Plans
10494

10595
- [x] ~~LICENSE~~
106-
- [ ] Write an article about the lib on Medium
107-
108-
# Change Log
109-
110-
Change log will be here !
11196

11297
## Author
11398

11499
Sevval Eygul, [email protected]
115100

116101
## License
117102

118-
React Native Typescript Library Starter is available under the MIT license. See the LICENSE file for more info.
103+
React Native Language Select is available under the MIT license. See the LICENSE file for more info.

‎assets/Screenshots/typescript.jpg

-28.5 KB
Binary file not shown.

‎assets/logo.png

266 Bytes
Loading

‎assets/react-native-language-select.gif

570 KB
Loading

‎example/App.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ const App = () => {
6868
</Text>
6969
<LanguagePicker
7070
initialIndex={1}
71+
activeBorderColor="red"
7172
data={data}
7273
onSelect={(selectedItem: ILanguagePicker) => {
7374
console.log(selectedItem);

‎lib/LanguagePicker.style.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import {Dimensions, StyleSheet} from 'react-native';
1+
import { Dimensions, StyleSheet } from "react-native";
22

3-
const windowWidth = Dimensions.get('window').width;
4-
const windowHeight = Dimensions.get('window').height;
3+
const windowWidth = Dimensions.get("window").width;
4+
const windowHeight = Dimensions.get("window").height;
55

66
export const _container = (width: number, height: number) => ({
77
width: width,

‎lib/LanguagePicker.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import React, {useState} from 'react';
2-
import {Dimensions, FlatList, ViewStyle} from 'react-native';
1+
import React, { useState } from "react";
2+
import { Dimensions, FlatList, ViewStyle } from "react-native";
33
/**
44
* ? Local Imports
55
*/
6-
import {_container} from './LanguagePicker.style';
7-
import LanguageItem from './language-item/LanguageItem';
6+
import { _container } from "./LanguagePicker.style";
7+
import LanguageItem from "./language-item/LanguageItem";
88

9-
const windowWidth = Dimensions.get('window').width;
10-
const windowHeight = Dimensions.get('window').height;
9+
const windowWidth = Dimensions.get("window").width;
10+
const windowHeight = Dimensions.get("window").height;
1111

1212
export interface ILanguagePicker {
1313
title: string;
@@ -55,8 +55,8 @@ const LanguagePicker: React.FC<ILanguagePickerProps> = ({
5555
<FlatList
5656
data={data}
5757
style={[_container(containerWidth, containerHeight), flatListStyle]}
58-
renderItem={({item}) => renderItem(item)}
59-
keyExtractor={item => item.title}
58+
renderItem={({ item }) => renderItem(item)}
59+
keyExtractor={(item) => item.title}
6060
/>
6161
);
6262
};

‎lib/language-item/LanguageItem.style.ts

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import {StyleSheet, Dimensions, ViewStyle, TextStyle} from 'react-native';
2-
const windowWidth = Dimensions.get('window').width;
3-
const windowHeight = Dimensions.get('window').height;
1+
import { StyleSheet, Dimensions, ViewStyle, TextStyle } from "react-native";
2+
const windowWidth = Dimensions.get("window").width;
3+
const windowHeight = Dimensions.get("window").height;
44

55
export const _itemContainer = (
66
backgroundColor: string,
@@ -15,13 +15,13 @@ export const _itemContainer = (
1515
height: height,
1616
width: width,
1717
marginBottom: 12,
18-
flexDirection: 'row',
19-
alignItems: 'center',
18+
flexDirection: "row",
19+
alignItems: "center",
2020
paddingLeft: 24,
2121
});
2222

2323
export const _titleStyle = (color: string): TextStyle => ({
24-
fontWeight: '600',
24+
fontWeight: "600",
2525
color: color,
2626
fontSize: 16,
2727
});
@@ -33,7 +33,7 @@ export default StyleSheet.create({
3333
marginRight: 18,
3434
},
3535
checkImageStyle: {
36-
position: 'absolute',
36+
position: "absolute",
3737
right: 24,
3838
width: 20,
3939
height: 20,

‎lib/language-item/LanguageItem.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import RNBounceable from '@freakycoder/react-native-bounceable';
2-
import React from 'react';
3-
import {Dimensions, Image, Text, ViewStyle} from 'react-native';
4-
import {ILanguagePicker} from '../LanguagePicker';
1+
import RNBounceable from "@freakycoder/react-native-bounceable";
2+
import React from "react";
3+
import { Dimensions, Image, Text, ViewStyle } from "react-native";
4+
import { ILanguagePicker } from "../LanguagePicker";
55
/**
66
* ? Local Imports
77
*/
8-
import styles, {_itemContainer, _titleStyle} from './LanguageItem.style';
8+
import styles, { _itemContainer, _titleStyle } from "./LanguageItem.style";
99

10-
const windowWidth = Dimensions.get('window').width;
10+
const windowWidth = Dimensions.get("window").width;
1111
interface ILanguageItem {
1212
item: ILanguagePicker;
1313
width?: number;
@@ -28,11 +28,11 @@ const LanguageItem: React.FC<ILanguageItem> = ({
2828
width = windowWidth * 0.9,
2929
height = 80,
3030
isActive,
31-
backgroundColor = '#FFFFFF',
32-
textColor = '#2F3452',
31+
backgroundColor = "#FFFFFF",
32+
textColor = "#2F3452",
3333
imageComponent,
3434
checkComponent,
35-
activeBorderColor = '#504ED9',
35+
activeBorderColor = "#504ED9",
3636
onSelect,
3737
...rest
3838
}) => {
@@ -56,7 +56,7 @@ const LanguageItem: React.FC<ILanguageItem> = ({
5656
(checkComponent || (
5757
<Image
5858
{...rest}
59-
source={require('../local-assets/check.png')}
59+
source={require("../local-assets/check.png")}
6060
style={styles.checkImageStyle}
6161
/>
6262
))}

0 commit comments

Comments
 (0)