How to use pressed prop in pressable?

[Intellectus-Jiwon]

styles.js

import styled from '@emotion/native';

export const MainContainer = styled.Pressable(({pressed}) => ({
  width: 56,
  height: 56,
  borderRadius: 24,
  backgroundColor: pressed ? '#000' : '#DFDFE1',
  alignItems: 'center',
  justifyContent: 'center',
}));

index.js

import * as S from './styles'

const ConfirmationButton = ({label, onPress}) => {
  return (
    <S.MainContainer onPress={onPress} />
  );
};

export default ConfirmationButton;

This is my code.
I thought it works well but it doesn't.

background color is always #DFDFE1
help please thank you

[srmagura]

If you look at the docs for Pressable, you will see that there is no prop called pressed.

That same page has an example of changing the styles when the component is pressed.

[Intellectus-Jiwon]

Sorry I mean pressed that Pressable component throws to style.
I want to change backgroundColor when I pressed Pressable component using @emotion/native

[srmagura]

I don't use @emotion/native personally, but anyway — in this case, I think you will be better off if you just use the style prop as shown in the example I linked. In other words, use the traditional React Native approach to styling rather than Emotion in this one case.