akveo / react-native-ui-kitten

:boom: React Native UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode
https://akveo.github.io/react-native-ui-kitten/
MIT License
10.19k stars 952 forks source link

Toggle component incorrect work on the web. #1396

Open sergeushenecz opened 3 years ago

sergeushenecz commented 3 years ago

Hello everyone. Great library. Thanks for it.

🐛 Bug Report

When click on the toggle component on ui incorrect display state of component true/false. On the mobile works as need. In your documentation work as need(https://akveo.github.io/react-native-ui-kitten/docs/assets/playground-build/#/ToggleSimpleUsage)

To Reproduce

Code from example.

import React from 'react';
import { Toggle } from '@ui-kitten/components';

export const ToggleSimpleUsageShowcase = () => {

  const [checked, setChecked] = React.useState(false);

  const onCheckedChange = (isChecked) => {
    setChecked(isChecked);
  };

  return (
    <Toggle checked={checked} onChange={onCheckedChange}>
      {`Checked: ${checked}`}
    </Toggle>
  );
};

image image If set "checked" property from code then display correct. If click then incorrect. image image

Expected behavior

When click toggle then switcher to need correct.

Link to runnable example or repository (highly encouraged)

UI Kitten and Eva version

Package Version
@eva-design/eva 2.0.0
@ui-kitten/components 5.0.0
thespacemanatee commented 3 years ago

I also face this issue!

siarheipashkevich commented 3 years ago

I've the same issue.

north8side commented 3 years ago

Incorrect a link connecting me and her with a software will written up as well

Powered by Cricket Wireless Get Outlook for Androidhttps://aka.ms/AAb9ysg


From: sergeu90 @.> Sent: Tuesday, April 6, 2021 12:19:14 AM To: akveo/react-native-ui-kitten @.> Cc: Subscribed @.***> Subject: [akveo/react-native-ui-kitten] Toggle component incorrect work on the web. (#1396)

Hello everyone. Great library. Thanks for it.

🐛 Bug Report

When click on the toggle component on ui incorrect display state of component true/false. On the mobile works as need. In your documentation work as need.

To Reproduce

Code from example.

` import React from 'react'; import { Toggle } from @.***/components';

export const ToggleSimpleUsageShowcase = () => {

const [checked, setChecked] = React.useState(false);

const onCheckedChange = (isChecked) => { setChecked(isChecked); };

return (

{Checked: ${checked}}

); }; ` [image]https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F7217517%2F113662247-66521d00-96b0-11eb-8969-736ab5eb0a28.png&data=04%7C01%7C%7C338816c5fcb94f55232f08d8f8bb851e%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637532831553475140%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=1neH2FhwzxjXPyQz4RG17N2hLimpvoyCRLRBj%2Fnzjvo%3D&reserved=0 [image]https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F7217517%2F113662275-736f0c00-96b0-11eb-8995-207b13138b74.png&data=04%7C01%7C%7C338816c5fcb94f55232f08d8f8bb851e%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637532831553475140%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=rsbHWw0QajfQVxYtiCXcLzM2b5dR8AfVIGEna8LUcEI%3D&reserved=0 If set "checked" property from code then display correct. If click then incorrect. [image]https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F7217517%2F113662381-a74a3180-96b0-11eb-9b38-67657d359c27.png&data=04%7C01%7C%7C338816c5fcb94f55232f08d8f8bb851e%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637532831553485088%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=g1uVWflhexPqkk11V1C2BW6LXnUDE5t9heey84mBXEc%3D&reserved=0 [image]https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F7217517%2F113662395-b03b0300-96b0-11eb-9c21-ffbab5c2367a.png&data=04%7C01%7C%7C338816c5fcb94f55232f08d8f8bb851e%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637532831553485088%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=4eOVZ2HhWvLGEfu4L0FMoK8OXlBHp4MZoKsJ90xg8sA%3D&reserved=0

Expected behavior

When click toggle then switcher to need correct.

Link to runnable example or repository (highly encouraged) UI Kitten and Eva version Package Version @eva-design/eva 2.0.0 @ui-kitten/components 5.0.0

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHubhttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fakveo%2Freact-native-ui-kitten%2Fissues%2F1396&data=04%7C01%7C%7C338816c5fcb94f55232f08d8f8bb851e%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637532831553485088%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=t2PW3QJ%2Bc%2Brv%2BR%2FWQcvics%2B1GohRr%2BaSlh85xd%2FboeU%3D&reserved=0, or unsubscribehttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FASXJQ5QO3F6XOA5RUPVNLX3THKKVFANCNFSM42N73J7Q&data=04%7C01%7C%7C338816c5fcb94f55232f08d8f8bb851e%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637532831553495049%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=CHA7ZiLgmtAJcYWmms418jBuN%2Binnhym0LduI7kRr98%3D&reserved=0.

north8side commented 3 years ago

The writing of the original link the were made into software are not being shown or shared to put on file the number is illustrated false #1396

Powered by Cricket Wireless Get Outlook for Androidhttps://aka.ms/AAb9ysg


From: sergeu90 @.> Sent: Tuesday, April 6, 2021 12:19:14 AM To: akveo/react-native-ui-kitten @.> Cc: Subscribed @.***> Subject: [akveo/react-native-ui-kitten] Toggle component incorrect work on the web. (#1396)

Hello everyone. Great library. Thanks for it.

🐛 Bug Report

When click on the toggle component on ui incorrect display state of component true/false. On the mobile works as need. In your documentation work as need.

To Reproduce

Code from example.

` import React from 'react'; import { Toggle } from @.***/components';

export const ToggleSimpleUsageShowcase = () => {

const [checked, setChecked] = React.useState(false);

const onCheckedChange = (isChecked) => { setChecked(isChecked); };

return (

{Checked: ${checked}}

); }; ` [image]https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F7217517%2F113662247-66521d00-96b0-11eb-8969-736ab5eb0a28.png&data=04%7C01%7C%7C338816c5fcb94f55232f08d8f8bb851e%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637532831553475140%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=1neH2FhwzxjXPyQz4RG17N2hLimpvoyCRLRBj%2Fnzjvo%3D&reserved=0 [image]https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F7217517%2F113662275-736f0c00-96b0-11eb-8995-207b13138b74.png&data=04%7C01%7C%7C338816c5fcb94f55232f08d8f8bb851e%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637532831553475140%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=rsbHWw0QajfQVxYtiCXcLzM2b5dR8AfVIGEna8LUcEI%3D&reserved=0 If set "checked" property from code then display correct. If click then incorrect. [image]https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F7217517%2F113662381-a74a3180-96b0-11eb-9b38-67657d359c27.png&data=04%7C01%7C%7C338816c5fcb94f55232f08d8f8bb851e%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637532831553485088%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=g1uVWflhexPqkk11V1C2BW6LXnUDE5t9heey84mBXEc%3D&reserved=0 [image]https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F7217517%2F113662395-b03b0300-96b0-11eb-9c21-ffbab5c2367a.png&data=04%7C01%7C%7C338816c5fcb94f55232f08d8f8bb851e%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637532831553485088%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=4eOVZ2HhWvLGEfu4L0FMoK8OXlBHp4MZoKsJ90xg8sA%3D&reserved=0

Expected behavior

When click toggle then switcher to need correct.

Link to runnable example or repository (highly encouraged) UI Kitten and Eva version Package Version @eva-design/eva 2.0.0 @ui-kitten/components 5.0.0

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHubhttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fakveo%2Freact-native-ui-kitten%2Fissues%2F1396&data=04%7C01%7C%7C338816c5fcb94f55232f08d8f8bb851e%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637532831553485088%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=t2PW3QJ%2Bc%2Brv%2BR%2FWQcvics%2B1GohRr%2BaSlh85xd%2FboeU%3D&reserved=0, or unsubscribehttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FASXJQ5QO3F6XOA5RUPVNLX3THKKVFANCNFSM42N73J7Q&data=04%7C01%7C%7C338816c5fcb94f55232f08d8f8bb851e%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637532831553495049%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=CHA7ZiLgmtAJcYWmms418jBuN%2Binnhym0LduI7kRr98%3D&reserved=0.

roman-veryovkin commented 3 years ago

Yep, also reproduced from my side!

thespacemanatee commented 3 years ago

It looks like updating a certain dependency fixed this issue on my end, so it appears that this wasn't a ui-kitten issue afterall.

sergeushenecz commented 3 years ago

@thespacemanatee Could you pls to say which dependency?

sergeushenecz commented 3 years ago

Yes. I updated expo to 41 and fixed my iisue. maybe problem was in react-native-reanimated