aminebenkeroum / toggle-switch-react-native Goto Github PK

I found that your component takes much CPU when app in background, around 20%.
Could you please figure out the reason?

Is it possible to set disabled state for toggle switch?

<ToggleSwitch isOn={this.state.toggle} />

When I change the toggle state to true once all the components are rendered it doesn't update the toggle button to true

My code for changong the toggle state :
this.setState({ toggle: true })

Hey i'm using this in flatlist which render multiple switches, but it is not updating isOn value

The switch does not toggle.

Module parse failed: Unexpected token (52:19)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   }
| 
>   static propTypes = {
|     isOn: PropTypes.bool.isRequired,
|     label: PropTypes.string,

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      "@babel/plugin-proposal-class-properties",

      [
        "babel-plugin-inline-import",
        {
          extensions: [".svg"],
        },
      ],
    ],
  };
};

It could be nice to have disabled style prop. It's better to change the color or opacity when the switch is disabled so it doesn't look like it's active. Thanks!

The library does not seems to be supporting rtl :

the red dot is not inside the component.

This should be the setting for medium toggle button, not the current one

{ width: 60, padding: 14, circleWidth: 24, circleHeight: 24, translateX: 30 }

OS: Android

[Problem]
When I set opacity(style) at the parent of ToggleSwitch,
Circle's color is turned weird color.
I can't make circle white if the setting item is disabled.

up: opacity 0.3
down: opacity 1

is this Android OS Setting issue? auto-contrast??

When installing this lib in a TypeScript project (e.g default Expo project) the included definition does not work.

Should probably look like this (which I'm using):

/// <reference types="node" />

declare module 'toggle-switch-react-native' {
  import React from 'react';
  import {StyleProp, TextStyle, ViewStyle} from 'react-native';

  export type ToggleSwitchProps = {
    isOn: boolean;
    label?: string;
    onColor?: string;
    offColor?: string;
    size?: string;
    labelStyle?: StyleProp<TextStyle>;
    thumbOnStyle?: StyleProp<ViewStyle>;
    thumbOffStyle?: StyleProp<ViewStyle>;
    trackOnStyle?: StyleProp<ViewStyle>;
    trackOffStyle?: StyleProp<ViewStyle>;
    onToggle?: (isOn: boolean) => any;
    icon?: React.ReactNode;
    disabled?: boolean;
    animationSpeed?: number;
    useNativeDriver?: boolean;
    circleColor?: string;
  };

  class ToggleSwitch extends React.Component<ToggleSwitchProps> {}

  export default ToggleSwitch;
}

The event was not monitored when it was closed

I got the following error

Hi,
Can you help here.
Toggle-switch-react-native is working fine for android but in ios it is not working it,s not getting on please help...
Will it work for ios or only for android.

Sometimes the hit area is too small to tap on, it will be good if we can have a prop to control the hitSlop.

in IOS everything is ok but Android error in react native 0.56
<ToggleSwitch

                        label="Hello"
                        isOn={true}
                        onColor={colors.colorDarkGreen}
                        offColor={colors.colorGray_v9}
                        size='small'

                        onToggle={(text) => this.onChangeGlobalSwitch(text)}


                    />;]

You can also add the following features
1.Label text need to change dynamically for on and off like "available" "not-available"
2.Label text position left or right options
3.Icon size with custom height and width instead of small,medium, and large

Hi, I noticed there was no way to pass in any Accessibility props so users with their screen readers enabled cannot know what this plugin can do.

At minimum:

• accessibilityLabel
• accessibilityHint
• accessibilityRole (could default this to either switch or checkbox but not required).

I was planning on making a PR to add in these props but wanted to submit this "issue/enhancement" first.

Please see this gif, you can know about this issue all.

I started working to fix it, will make a PR soon.

hi, guys how can I make a statement when it's off ??

Typing this:

npm i --save-dev @types/toggle-switch-react-native

Will result:

'@types/toggle-switch-react-native@*' is not in this registry.
You should bug the author to publish it (or use the name yourself!)

Can't wait to see it fix :)

Thank you,
Take care

Is it possible to add "Label" style to left and "Toggle" to right in the same usage? The label will be on left of Toggle for now but it seems can't add more space style between it. May be I just don't know how to do it. Can't you guys (someone) guide me? Thanks