Catch Pressable press with styled-components in React Native

Question

Is there a way to pass the pressed property to styled-components?

What I have now:

import React from 'react';
import { Pressable, Text, View } from 'react-native';
import styled from 'styled-components/native';

const StyledPressable = styled(Pressable)``;

const App = () => {
  return (
    <View>
      <StyledPressable
        onPress={() => null}
        android_ripple={{ color: 'black', borderless: true }}>
        <Text>Log in</Text>
      </StyledPressable>
    </View>
  );
};

export default App;

What I want to achieve

import React from 'react';
import { Pressable, Text, View } from 'react-native';
import styled from 'styled-components/native';

const StyledPressable = styled(Pressable)`
  background-color: ${props => pressed ? 'black' : 'blue'}    // change color on press, eg.
`;

const App = () => {
  return (
    <View>
      <StyledPressable
        onPress={() => null}
        android_ripple={{ color: 'black', borderless: true }}>
        pressed={pressed}    // this property "pressed" does not exist.
        <Text>Log in</Text>
      </StyledPressable>
    </View>
  );
};

export default App;

This is the official docs. It uses inline style and I can't make this work with styled components.

Revivalism

Answer 1

I don't think there is a way currently. A work around would be to use a View between Pressable and Text and do all you styling in it:

import React from 'react';
import { Pressable, Text, View } from 'react-native';
import styled from 'styled-components/native';

const StyledView = styled.View`
   background-color: ${({pressed}) => pressed ? 'black' : 'blue'}    
`;

const App = () => {
    return (
        <View>
           <Pressable onPress={() => null}>
             {({pressed}) => (
               <StyledView pressed={pressed}>
                 <Text>Log in</Text>
               </StyledView>
             )}
           </Pressable>
        </View>
    );
};

export default App;

Zonda

Answer 2

Yes, there is a way to use 'pressed', use a function that returns an array.

<View style={styles.buttonView}>
    <Pressable
        onPress={() => doSomething()}
        style={({ pressed }) => {
            return [
                pressed
                    ? globalStyles.buttonSelected
                    : globalStyles.buttonUnselected,
            ];                                                                  
        }}> 
        <Text style={globalStyles.buttonUnselectedText}>
            Terminate session
        </Text>
    </Pressable>
</View>   

Lathrope