I have had a problem for several days, I have a list of items (a list of heads) and I want to be able to take action on these items (update/ delete).
I created an item component, with an update and delete button.
The Button component is a component of react native elements, I use it everywhere in my app and I have not had any problems so far.
ThemeItem.tsx
<Container>
<List onPress={() => onSelectTheme(theme.id)}>
<ListItem.Content>
<View
style={{display: 'flex', flexDirection: 'row', marginBottom: 5}}>
<ListItem.Title style={{fontSize: 18, fontWeight: 'bold'}}>
{theme.name}
</ListItem.Title>
{isActive && (
<Icon
name={'check-circle'}
color={'green'}
style={{marginLeft: 5}}
size={20}
/>
)}
</View>
</ListItem.Content>
</List>
<ThemeItemIconsStyle>
<>
{theme.id > 1 && !isActive && (
<Button
onPress={() => onDelete(theme.id)}
icon={{
name: 'trash',
type: 'font-awesome-5',
size: 25,
color: 'white',
}}
/>
)}
<Button
onPress={() => onUpdate(theme)}
icon={{
name: 'pen',
type: 'font-awesome-5',
size: 25,
color: 'white',
}}
/>
</>
</ThemeItemIconsStyle>
</Container>
ThemeItemIconStyle
const ThemeItemIconsStyle = styled.View`
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
padding: 15px 20px;
background-color: white;
width: 40%;
height: 100%;
`;
Container
const Container = styled.View`
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
background-color: white;
`;
On emulator the behavior is the one expected but when I install the apk on my phone it does not happen absolutely.
I absolutely do not understand why my code works on emulator and not on a real phone. I assume that if on emulator there is no problem, the problem does not come from the code.
Thanks in advance for help
But what is the type of button? Button, TouchableOpacity, TouchableOpacityWithoutFeedback...
Also, I'd recommend to change your buttons to RectButton from react-native-gesture-handler, just to use native buttons in your application ;)