aminebenkeroum / Toggle Switch React Native
Licence: mit
Toggle Switch React Native Component works on both iOS and Android
Stars: ✭ 131
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Toggle Switch React Native
Vue Calendar Heatmap
A lightweight calendar heatmap Vuejs component built on SVG, inspired by github's contribution calendar graph
Stars: ✭ 120 (-8.4%)
Mutual labels: component
React Native Gifted Chat
💬 The most complete chat UI for React Native
Stars: ✭ 11,339 (+8555.73%)
Mutual labels: component
React Splitters
React splitter component, written in TypeScript.
Stars: ✭ 127 (-3.05%)
Mutual labels: component
Container Query
A PostCSS plugin and Javascript runtime combination, which allows you to write container queries in your CSS the same way you would write media queries.
Stars: ✭ 119 (-9.16%)
Mutual labels: component
Thorui Uniapp
ThorUI组件库，轻量、简洁的移动端组件库。组件文档地址：https://thorui.cn/doc/ 。 最近更新时间：2021-10-01
Stars: ✭ 1,842 (+1306.11%)
Mutual labels: component
React Modal Box
React Modal Box, is a simple dependency free and customizable React Component to display Modals on your application. Its simple event system allows you to place the modal in the root component of your application, and calling it with the simple mixins, allows you to be flexible. It also includes event handling mixins, so you can detect when the modal is being called or being hidden.
Stars: ✭ 126 (-3.82%)
Mutual labels: component
Vue Datatables Net
Vue jQuery DataTables.net wrapper component
Stars: ✭ 119 (-9.16%)
Mutual labels: component
React Native Circular Menu
A Ripple menu effect for your react native application
Stars: ✭ 129 (-1.53%)
Mutual labels: component
Ngx Lite
📦 A collection of lightweight Angular libraries in a single mono repo
Stars: ✭ 125 (-4.58%)
Mutual labels: component
Cypress React Selector
⚡️ cypress plugin to locate react elements by component, props and state
Stars: ✭ 121 (-7.63%)
Mutual labels: component
Property Info
PropertyInfo extracts information about PHP class' properties using metadata of popular sources.
Stars: ✭ 1,747 (+1233.59%)
Mutual labels: component
Verte
🎨 A Color picker component. Built from the bottom to work with Vue.js.
Stars: ✭ 117 (-10.69%)
Mutual labels: component
Polyfill Iconv
This component provides a native PHP implementation of the php.net/iconv functions.
Stars: ✭ 1,621 (+1137.4%)
Mutual labels: component
Vue Prism Component
highlight code using prism.js and vue component
Stars: ✭ 126 (-3.82%)
Mutual labels: component
Vue Blu
UI Component Library Base on Vue.js(2.x) and Bulma
Stars: ✭ 1,593 (+1116.03%)
Mutual labels: component
Toggle Switch Component for react native, it works on Android, iOS and Web (react-native-web).
Content
Installation
-
- Run
npm i toggle-switch-react-native --save
- Run
-
import ToggleSwitch from 'toggle-switch-react-native'
Demo
Getting started
To Get Started, Import toggle-switch-react-native to your js file.
import ToggleSwitch from 'toggle-switch-react-native'
Inside your component's render method, or any other method returning views, use ToggleSwitch:
<ToggleSwitch
isOn={false}
onColor="green"
offColor="red"
label="Example label"
labelStyle={{ color: "black", fontWeight: "900" }}
size="large"
onToggle={isOn => console.log("changed to : ", isOn)}
/>
API
| Props | Type | Optional | Default | Description |
|---|---|---|---|---|
| isOn | Boolean | true | 'false' | Default state, true for On, false for off |
| onColor | String | true | '#634fc9' | On Color |
| offColor | String | true | '#ecf0f1' | Off Color |
| label | String | true | Custom Label Text on the Left of the toggle Button | |
| labelStyle | Object, StyleSheet | true | {marginHorizontal: 10} | Custom Styling for the Label Text View |
| thumbOnStyle | Object, StyleSheet | true | null | Custom Styling for the On Thumb |
| thumbOffStyle | Object, StyleSheet | true | null | Custom Styling for the Off Thumb |
| trackOnStyle | Object, StyleSheet | true | null | Custom Styling for the On Track |
| trackOffStyle | Object, StyleSheet | true | null | Custom Styling for the Off Track |
| size | String | true | 'medium' | Size of the toggle switch button ( 'large', 'medium', 'small') |
| icon | React Component | true | null | Icon for the toggle. Can be any React Component considerate of size |
| onToggle | Function Callback | false | none | Callback when the toggle switch component changes the state, params: isOn |
| disabled | Boolean | true | 'false' | Disable toggling the component |
| animationSpeed | Number | true | 300 | Speed of the toggle animation |
Contribution
If you encountered an Issue, please add a screenshot of the bug or a code snippet.
Quickest way to solve issue is to reproduce it on the example project
Pull requests are welcome. If you want to change the API or imporove something, feel free to create an issue and discuss it first.
MIT Licensed
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].