1- <img alt =" React Native Typescript Library Starter " src =" assets/logo.png " width =" 1050 " />
1+ <img alt =" React Native Switch Button " 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 )
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-switch-button )
44
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 )
5+ [ ![ React Native Switch Button ] ( https://img.shields.io/badge/-Animated%20switch%20button%20with%20fully%20customizable% 20React%20Native%20Component-orange?style=for-the-badge )] ( https://github.com/WrathChaos/react-native-switch-button )
66
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 )
7+ [ ![ npm version] ( https://img.shields.io/npm/v/@freakycoder/ react-native-switch-button .svg?style=for-the-badge )] ( https://www.npmjs.com/package/@freakycoder/ react-native-switch-button )
8+ [ ![ npm] ( https://img.shields.io/npm/dt/@freakycoder/ react-native-switch-button .svg?style=for-the-badge )] ( https://www.npmjs.com/package/@freakycoder/ react-native-switch-button )
99![ Platform - Android and iOS] ( https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge )
1010[ ![ License: MIT] ( https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge )] ( https://opensource.org/licenses/MIT )
1111[ ![ styled with prettier] ( https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge )] ( https://github.com/prettier/prettier )
1212
1313<p align =" center " >
14- <img alt="React Native Typescript Library Starter "
14+ <img alt="React Native Switch Button "
1515 src="assets/Screenshots/typescript.jpg" />
1616</p >
1717
18- ## Library Usage
19-
20- - ` npm i `
21- - Delete example folder
22- - Delete build folder
23- - Make your own library into the ` lib ` folder
24- - Change package.json
25- - Change README for your own documentation
26- - ` npm run build `
27-
28- ```
29- > [email protected] build /Users/kuray/Coursion/MyLibraries/ReactNative/react-native-typescript-library-starter 30- > cd lib && tsc && cp ../package.json ../build/dist/ && Echo Build completed!
31-
32- Build completed!
33- ```
34-
35- - Test your build/dist into the new project
36- - Finally, time to npm publish :)
37-
38- ### Below part is for Documentation ! Remove above Library Usage
39-
4018# Installation
4119
4220Add the dependency:
4321
4422``` bash
45- npm i react-native-typescript-library-starter
23+ npm i @freakycoder/ react-native-switch-button
4624```
4725
4826## Peer Dependencies
4927
5028<h5 ><i >IMPORTANT! You need install them</i ></h5 >
5129
5230``` js
53- " react" : " >= 16.x.x" ,
54- " react-native" : " >= 0.55.x" ,
31+ " @freakycoder/react-native-bounceable" : " >= 0.2.5"
5532```
5633
5734# Usage
5835
5936## Import
6037
6138``` jsx
62- import MyComponent from " react-native-typescript-library-starter " ;
39+ import SwitchButton from " @freakycoder/ react-native-switch-button " ;
6340```
6441
6542## Fundamental Usage
6643
6744``` jsx
68- < MyComponent / >
45+ < SwitchButton
46+ text= " Notification"
47+ inactiveImageSource= {require (" ./assets/notification.png" )}
48+ activeImageSource= {require (" ./assets/notification-3.png" )}
49+ onPress= {(isActive : boolean ) => console .log (isActive)}
50+ / >
6951```
7052
7153## Example Project 😍
@@ -81,37 +63,30 @@ should work of the example project.
8163
8264# Configuration - Props
8365
84- ## Fundamentals
85-
86- | Property | Type | Default | Description |
87- | ----------- | :----: | :-------: | --------------------- |
88- | title | string | undefined | change the title |
89- | description | string | undefined | change the descrition |
90-
91- ## Customization (Optionals)
92-
93- | Property | Type | Default | Description |
94- | -------------- | :-------: | :-------: | ---------------------------------------------------------------------- |
95- | enableButton | boolean | false | let you enable the button (must use it for button) |
96- | onPress | function | undefined | set your own logic for the button functionality when it is pressed |
97- | buttonText | string | undefined | change the button's text |
98- | style | ViewStyle | default | set or override the style object for the main container |
99- | buttonStyle | ViewStyle | default | set or override the style object for the button style |
100- | ImageComponent | Image | default | set your own component instead of default react-native Image component |
66+ | Property | Type | Default | Description |
67+ | ------------------- | :----------: | :-------: | ------------------------------------------------------------------ |
68+ | text | string | undefined | set the text of the button |
69+ | activeImageSource | Image Source | undefined | set the active image source |
70+ | inactiveImageSource | Image Source | undefined | set the inactive image source |
71+ | onPress | function | default | set your own logic for onPress functionality |
72+ | mainColor | string | #f1bb7b | change the main animated color |
73+ | originalColor | string | #fff | change the original/default animated color |
74+ | tintColor | string | #f1bb7b | change the tint color for the image |
75+ | disableText | boolean | false | disable the text part if you only want to use switch button itself |
76+ | style | ViewStyle | default | set or override the style object for the main container |
77+ | textStyle | TextStyle | default | set or override the style object for the text |
78+ | imageStyle | ImageStyle | default | set or override the style object for the image |
79+ | textContainerStyle | ViewStyle | default | set or override the style object for text container |
10180
10281## Future Plans
10382
10483- [x] ~~ LICENSE~~
10584- [ ] Write an article about the lib on Medium
10685
107- # Change Log
108-
109- Change log will be here !
110-
11186## Author
11287
1138811489
11590## License
11691
117- React Native Typescript Library Starter is available under the MIT license. See the LICENSE file for more info.
92+ React Native Switch Button is available under the MIT license. See the LICENSE file for more info.
0 commit comments