Switch disappears on touchableOpacity onPress

[theo-mesnil]

React Native version: SDK 35 (with expo)

Steps To Reproduce

1. I have an Item who is a TouchableOpacity

export const More = ({ screenProps: { setThemeName, themeName } }) => {
  const setTheme = () => setThemeName(themeName === 'dark' ? '' : 'dark')

  return (
   <Item activeOpacity={0.6} isLast onPress={setTheme}>
      <Item.Content>
         <Item.Title>Use dark mode</Item.Title>
         <Item.Subtitle>Get that whiteness out of my sight</Item.Subtitle>
      </Item.Content>
      <Switch onChange={setTheme} value={themeName === 'dark'} />
   </Item>
  )
}

2. And inside a Switch component

export const Switch = props => {
  const theme = useContext(ThemeContext)

  return (
    <SwitchNative
      ios_backgroundColor={theme.colors.light500}
      thumbColor={theme.switch.thumb}
      trackColor={{ false: theme.colors.light500, true: theme.colors.primary500 }}
      {...props}
    />
  )
}

When i press on the Item (who is a TouchableOpacity) my Switch dissapears :

I don't know if i'm doing wrong or if is a bug =)

Thanks !

If you want to see my styled components for the Item :

import styled, { css } from 'styled-components/native'

import { centeredStyled } from './Centered'

export const List = styled.View(
  ({ theme }) => css`
    width: 100%;
    background-color: ${theme.background.ahead};
    padding: ${theme.space.xl} 0 ${theme.space.sm};
    margin-bottom: ${theme.space.sm};
  `
)

List.Title = styled.Text(
  ({ theme }) => css`
    ${centeredStyled}
    font-family: 'bold';
    color: ${theme.colors.primary500};
    font-size: ${theme.fontSizes.h4};
    text-transform: uppercase;
  `
)

export const Item = styled.TouchableOpacity(
  ({ isLast, theme }) => css`
    ${centeredStyled};
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: ${isLast
      ? `${theme.space.xl} ${theme.space.xl} ${theme.space.xs}`
      : `${theme.space.xl}`};
    border-bottom-width: ${isLast ? 0 : theme.borderWidths.sm};
    border-color: ${theme.colors.light700};
  `
)

Item.Content = styled.View`
  flex-direction: column;
  width: auto;
`

Item.Title = styled.Text(
  ({ theme }) => css`
    color: ${theme.colors.dark900};
    font-size: ${theme.fontSizes.body1};
  `
)

Item.Subtitle = styled.Text(
  ({ theme }) => css`
    color: ${theme.colors.light100};
    font-size: ${theme.fontSizes.body2};
    padding-top: 2;
  `
)

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.