react native paper : i want to change button's color when i press react native paper's button

Question

While my react-native-paper button is pressed, the background color turns violet. I want to change this 'violet color' to anything to suit the situation.

I change button's text color easily and rejoicingly with docs. However, I read the docs of React Native Paper button, but i can't find anything about changing the background color.

Answer 1

According to the documentation in react native, the MD3LightTheme theme comes by default, so using the documentation we can modify each of the colors of the theme that we are using, in addition to using the provider. For the background of the button when it is selected, an example would be like this:

import * as React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import { SegmentedButtons } from 'react-native-paper';
import { MD3LightTheme as DefaultTheme, Provider as PaperProvider } from 'react-native-paper';
const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    secondaryContainer: 'yellow',
  },
};

const MyComponent = () => {
  const [value, setValue] = React.useState('');

  return (
    <PaperProvider theme={theme}>
    <SafeAreaView style={styles.container}>
      <SegmentedButtons
        value={value}
        onValueChange={setValue}
        buttons={[
          {
            value: 'walk',
            label: 'Walking',
          },
          {
            value: 'train',
            label: 'Transit',
          },
          { value: 'drive', label: 'Driving' },
        ]}
      />
    </SafeAreaView>
    </PaperProvider>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
  },
});

export default MyComponent;

Answer 2

I think you can't change color chaning after pressed without changing the color of whole button. What you can do is wrap the button in independent clickable function like TouchableOpacity, TouchableWithoutFeedback or another custom from web.

There is a little example what I mean to do:

<TouchableOpacity>
   <Button icon="camera" mode="contained">
      Press me
   </Button>
</TouchableOpacity>

Answer 3

According to the documentation the buttons prop of the segmented buttons component has a styles prop.

Buttons (required)

Type: { value: string; icon?: IconSource; disabled?: boolean; accessibilityLabel?: string; onPress?: (event: GestureResponderEvent) => void; label?: string; showSelectedCheck?: boolean; style?: StyleProp<ViewStyle>; testID?: string; }[]

Here I switch the background color of the buttons. Giving the active button my theme's primary color, otherwise it gets the background color.

<SegmentedButtons
  value={value}
  style={{width: "100%", marginTop: 10}}
  onValueChange={handleValueChange}
  buttons={[
    { value: 'one', label: '1', style: {backgroundColor: value === 'one' ? theme.colors.primary : theme.colors.background} },
    { value: 'two', label: '2', style: {backgroundColor: value === 'two' ? theme.colors.primary : theme.colors.background} },
    { value: 'three', label: '3', style: {backgroundColor: value === 'three' ? theme.colors.primary : theme.colors.background} },
  ]}
/>

Result:

Unstyled button with original color

Active button with theme.primary

Answer 4

You can achieve this using React Native Paper button's onPressIn and style props. Additionally, you may wish to use onPressOut, if you want the background color to change back when the press is released. (Otherwise, if the user comes back to the page, the button's background will still be the new color.)

const ColorChangingButton = (props: Props) => {
  const [isPressed, setPressed] = useState(false);

  return (
    <Button
      buttonColor={!isPressed ? 'white' : 'green'} // this prop changes the background
      textColor={!isPressed ? 'green' : 'white'}
      onPress={props.onPress} // button press action
      onPressIn={() => setPressed(true)} // applies color change *before* `onPress` action is called.
      onPressOut={() => setPressed(false)} // revert color change when press is released, *before* `onPress` action.
      uppercase={false}>
      Click here!
    </Button>
  );
};