React native styled component conditional Props

I am using React-native typescript for my app. I am trying to make one custom setting screen. Custom Settings takes a data prop; an object that describes the content of settings. In the setting screen few items are click able, it navigate to other screen or do some actions and others are un-clickable. I want to make styled components conditional render. If I use onPress props to the data then it will be clickable(touchable opacity) or un-clickable(View).

Currently I am using React native's StyleSheet and pass the onPress in ContentContainer element. If in data props onPress exist then it will will be TouchableOpacity, If not then View. It works fine and as expected. For learning purpose I want make this condition in Styled-components. But i don't how to do that.

Here is code

import * as React from 'react';import {StyleSheet, View, TouchableOpacity, TextStyle} from 'react-native';import styled from 'styled-components/native';import {Icon} from './Chevron';export interface RowData {  onPress?: () => void;  showDisclosureIndicator: boolean;}export const Row = ({  onPress,  showDisclosureIndicator}: RowData) => {  let ContentContainer = onPress ? TouchableOpacity : View; // This condtion I made  return (<Container><ContentContainer style={styles.contentContainer} onPress={onPress}> // In here i pass the onPress        {showDisclosureIndicator ? <Icon /> : <View />}</ContentContainer></Container>  );};const styles = StyleSheet.create({  contentContainer: {    flexDirection: 'row',    paddingLeft: 15,    flex: 1,    alignItems: 'center',    backgroundColor: 'white',  },});const ContentContainer = styled.TouchableOpacity` // I was trying to use Styled compoent. Don't know how  flex: 1;  flex-direction: row;  padding-left: 15px;  align-items: center;  background-color: white;`;