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

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

I got the following error

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!

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;
}

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

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??

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)}


                    />;]

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

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

The library does not seems to be supporting rtl :

the red dot is not inside the component.

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

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.

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"],
        },
      ],
    ],
  };
};

The switch does not toggle.

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

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

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

The event was not monitored when it was closed

<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 })

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.

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

Is it possible to set disabled state for toggle switch?

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

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