M3 styled switch

[yuameshi]

Is your feature request related to a problem? Please describe.

get a m3 styled switch component

Describe the solution you'd like

just edit stylesheet

Additional context

Official document

[yuameshi]

any updates?

[lukewalczak]

Hey @yuameshi, nothing has changed from my last comment related to that topic

[crystalarcus]

----------------------Edit------------------------------------------------------------
I have commented updated component to match better with Material you in comments bellow this.
This one had some bugs

If in case anyone is looking, I have created a "Material You"-like Swtich Component, behaves smoothly, it's touch behaves like Material you Switch. I have followed Material 3 guidelines for making it.
Here's a video of tapping and draggin actions :

20231217-160756.mp4

If anyone likes it, here's the code for component file:

-------Removing Code as there is updated one at snack here.

Also install libraries which are imported before using

npm install react-native-gesture-handler react-native-paper react-native-reanimated

If you don't have reanimated installed, see guide to install reanimated because it needs a couple of extra steps to setup properly.

It works completely fine with( and only with) React Native paper and changes color and theme too according to paperprovider, tested on Android on Web, though on web, if you are on Desktop, it works fine on tap, but if you try to drag it, it dosent change value. If you wanna run only on mobile, I think this would work great.
Also there is attribute for icon : <MaterialSwitch icon={"icon_name"}/>, just pass one of MaterialCommunityIcons name as string and it will render a icon when switch is on.

Hope this heps !

[crystalarcus]

@lukewalczak I worked a bit off and created a Material you styled switch with reanimated and gesture handler and it can be used with react native paper,
here I am using it in my app :

myapp.mp4

and here is Files by Google app switch :

myfiles.mp4

What do you think, pretty much same ?
I mean the material you styled switch just hits different, it changes whole look of the ui,
Should implement this keeping the current switch, users can use anyone which they want.

[rollingmoai]

@crystalarcus Can you share the updated component file code? Thanks!

[crystalarcus]

@crystalarcus Can you send the updated component file code? Thanks!

@rollingmoai sure!, actually there are 2 components I have made for personal use : MaterialSwitch and MaterialSwitchList
as you see in above video, the switch components is many times used with listitem component,
like you click listitem and it switches the switch. The list item i used above is actualy react-native-paper's List.Item component.
Sadly it's not quite possible to use List item and gesture handler togther, it causes bugs, so in MaterialSwitchList component, you can't control the switch by holding it and moving your fingers, but even the Switch from Files by Google app, as shown in video above can't do that. You can't control it by holding and moving ur finger to change switch, you just simply need to press it, and whole List.Item is pressed. So it behaves like single component.
So I had to make 2 separate components to integrate it with List.Item.
The other component MaterialSwitch, behaves normally like a swtich, you can hold it with fingers, or simply tap it.
I will share the code for both components in few hours, just need some finishing touch to make it useful for others, cause I just designed it for my personal use.

[crystalarcus]

@rollingmoai @lukewalczak So here's it finally completed and read to use, here's a video:

Android ( Expo Go ) :

20240119-233030.mp4

Web (Chrome, Windows , the mouse appears laggy because I was capturing with xbox gamebar) :

MaterialSwitchReactNativeWeb.mp4

here's full code :-

-------Removing Code as there is updated one at snack here.

Alright, now one thing, I am just a high school student, don't know about all components and attributes, I just used the knowledge I had. Just making this much was a tough job for me, so if you can optimize it, it would be great. Also it works well in my apps that I made for practicing, still if you find any bug, you can try fixing it. I know one bug and its, sometimes rarely if you touch on exact border of switch item, the handle circle will get bigger as if you are holding it and it will only get normal if you tap again on switch. It just happens rarely.
I gave you a basic foundation that works pretty well, see if you can make it better, if not you can still directly use it !
Hope it helps someone !

( also can someone tell me how to make a snack of a project I currently have in my pc ? I want to put this on snack, would be better to try it yourself before implementing in your app )

[crystalarcus]

And here's how to use it :
Material Switch
example:

<MaterialSwitch
                selected={value}
                onPress={() => setValue(!value)} 
                switchOnIcon={'check'}
                switchOffIcon={'close'}
                fluid={false}
                />

Material Switch have 5 attributes, ( you can edit code and add more like colors, etc):

selected : boolean // value weather switch will be on or off, true : On, false : Off
onPress : function // function triggered after switch is pressed. ( NOTE: onPress is triggered after the switch changing animation is completed, that is, its passed as a callback to reanimated animation)
switchOnIcon : string or function which returns a icon component // Icon when switch is on, default is null
switchOffIcon : string or function which returns a icon component // Icon when switch is off, default is null
fluid : boolean // fluid like animation when switching, default is false

Material Switch List Item
example:

  <MaterialSwitchListItem
              title={"Fluid animation "}
              listStyle={styles.listItem}
              fluid={true}
              selected={value}
              onPress={() => setValue(!value)} />

This one have 11 props, namely :
title, description, titleStyle, listStyle, selected, onPress, leftIcon, switchOnIcon, switchOffIcon, rippleColor, fluid
Out of these, five props : selected, onPress, fluid, switchOnIcon, switchOffIcon, are same from material switch mentioned above.
the rest six :

title : "string" for List.Item title (from react-native-paper)
description : "string" for List.Item description (from react-native-paper)
listStyle: style for List.Item (from react-native-paper)
titleStyle: style for Title of List ( you can edit code to change description style, I didnt add it cause it looked fine.)
leftIcon :  string or function which returns a icon component // Icon to left side of List.Item, default is null
rippleColor: ripple color of List.Item (from react-native-paper) // default is the one used by List.Item 

[rollingmoai]

Thanks! Will test this out on iOS when I have time