Search code examples
react-nativematerial-uimaterial-designreact-native-papermaterial-design-icons

How to customize React Native Paper Switch components for android?


When I use this code from react native paper I expect the switch component to be exactly look likse the **Material design 3 **switch, but unfortunately it is not and looks like older version, I was curios how to customize this component to looks like the md3react native paper switch Official docs of MD3

import * as React from 'react';
import { Switch } from 'react-native-paper';

const MyComponent = () => {
  const [isSwitchOn, setIsSwitchOn] = React.useState(false);

  const onToggleSwitch = () => setIsSwitchOn(!isSwitchOn);

  return <Switch value={isSwitchOn} onValueChange={onToggleSwitch} />;
};

export default MyComponent;

if anyone can help me, much appreciated :)

I could not custmize this comonent to look like md3 design


Solution

  • Currently, React Native Paper doesn't support MD3 for the Switch component

    https://github.com/callstack/react-native-paper/issues/3689#issuecomment-1436567611

    https://github.com/callstack/react-native-paper/issues/3797