I'm trying to add a hit slop to some icons and I want them to persist even if the icon is hidden under another component.
This is already working fine on iOS with the zIndex prop, but neither the zIndex or elevation prop seem to be having any effect on Android. The icon is still clickable, just without the hit slop surrounding it. This is likely not an issue with the hit slop, as it works fine on a screen alone when not inside of a component.
export const RemoveIndicator = ({ icon, onPress }) => (
<View
style={ {
elevation: 2,
zIndex: 99,
} }
>
<TouchableIcon
color={ colors.Red500 }
name={ icon || 'Circle_Remove_Solid' }
onPress={ onPress }
size={ 16 }
/>
</View>
);
The TouchableIcon component is a component that contains a glyph (given the color, name, and size), wrapped in a TouchableOpacity that takes an onPress function. The hit slop is calculated inside the TouchableIcon based on the size prop.
I expect the icon to be clickable in an area around it, but it is only clickable on the visible glyph itself.
Related
I'm trying to change the back button size in my react native app navigation header because android is giving me a warning that the touch target size is to small (30x30px, wants it to be at least 48x48px). I'm using reactnavigation.
I've worked out you can customize the back button in the header using headerLeft and the HeaderBackButton element like so.
<Stack.Navigator
screenOptions={({route, navigation}) => ({
headerLeft: () => <HeaderBackButton style={{height: 100, width: 100}} onPress={() => navigation.goBack(null)}/>
})}>
However, the height and width styles have no effect. I've also tried fontSize with no effect. Would prefer an approach where I don't have to override headerLeft and reimplement all of the back button default behaviors as well just to change the size.
You can style Stack's original headerLeftStyle with headerBackTitleStyle={{fontSize: 100}}
If you want custom Image, use option 'headerBackImageSource'.
If you still trying custom components, onPress={()=> navigation.canGoBack() ? navigation.goBack() : null} can be used.
New to react native and in a component, I have a list of views that include a checkbox (react-native-bouncy-checkbox). Each view is wrapped in a TouchableWithoutFeedback(So I can click the entire view, not just the checkbox) and I have a boolean useState to tell the checkbox whether to display the check or not.
The issue I'm at is that I chose the library for the checkbox because the animation when it's clicked looks very nice. However, the animation doesn't play if I hit the view ~ only if I hit the actual checkbox, which is rather small in my app.
Is there any way to tell another component that it needs to act like it was pressed, so it can play its animation?
Code for clarity:
const Task = ({ id, text }: Types) => {
const [checked, setChecked] = React.useState(false);
return (
<TouchableWithoutFeedback onPress={() => setChecked(!checked)}>
<View style={styles.container} >
<BouncyCheckbox
disableBuiltInState={true}
isChecked={checked}
fillColor="blue"
iconStyle={{ borderColor: 'gray' }}
/>
<Text>{text}</Text>
</View>
</TouchableWithoutFeedback>
)
};
Okay figured it out. Apparently React native allows you to create refs to other components and you can use the reference.onPress() to activate the animation.
Description
When a child of a pressable component is pressed (such as an image), the function passed to the onPress prop does not execute on android. Works as expected on iOS.
React Native version:
0.63.2
Steps To Reproduce
Open a new expo snack
Create a Pressable component that is the parent of some other component (A text or image)
Set the onPress prop to call a function that has a visual effect. (Like an alert)
Switch to the android tab, and click 'Tap to play'
Expected Results
The function is called and the effect (an Alert) is fired
Snack, code example, screenshot, or link to a repository:
https://snack.expo.io/#razorshnegax/6c7be3
Code example:
import React from 'react';
import { View, Pressable, Image, Alert } from 'react-native';
export default class Index extends React.Component {
render() {
// The onPress function fires in iOS, but not android
return (
<View>
<Pressable onPress={() => {Alert.alert("Yeep")}}>
<Image source={require('./greatknight.png')} style={{
// So that the image is more centered
top: 100,
left: 100
}}/>
</Pressable>
</View>
);
}
}
Due to the styling, the Pressable component is not place behind the Image.
You can see this by adding a color to the Pressable component.
A fix for this would be to style the Pressable component so the image components are aligned and events bubble through.
I'm not exactly sure why the event doesn't bubble through on Android as it should based on the component hierarchy.
In my case added zindex to resolved this problem. This work even touchable also
<Pressable onPress={() => alert()} style={{zIndex: 0.5, }}>
*****
</Pressable>
I have a TextInput component that is located inside a View with a style setting of position: "absolute":
const [searchTerm, setSearchTerm] = useState('Test');
return (
<View style={{position: "absolute"}}>
<TextInput
autoFocus={true}
value={searchTerm}
onChangeText={text => setSearchTerm(text)}
/>
</View>
)
When this style is set, I cannot focus or perform any interaction with the TextInput (including autoFocus={true}) even though I can see the input field and default text (Test). Once I remove the absolute positioning I am able to work with the TextInput as usual.
What is the reason for this behavior? (using Android)
you should add zIndex:400 or some high number it worked for me
I'm trying to extend a react-native library for a parallax header which is really nice, by adding a clickable ability to the parallax background.
Attempted a few ways I've found but none seemed to work.
Things tested:
TouchableOpacity within Animated.View with onPress event
TouchableOpacity wrapping the Animated.Image with onPress event
Created an AnimatedTouchable with the onPress event
Nothing is triggering the passed event, animation works, though.
This is the entire component code for the ParallaxHeader that I'm using.
As you may see, I added the TouchableOpacity into this method:
renderHeaderBackground() {
const { backgroundImage, backgroundColor, onBackgroundPress } = this.props;
const currStyles =
[
styles.header,
{
height: this.getHeaderHeight(),
backgroundColor: backgroundColor,
},
];
return (
<Animated.View style={currStyles}>
<TouchableOpacity onPress={onBackgroundPress}>
{backgroundImage && this.renderBackgroundImage()}
{!backgroundImage && this.renderPlainBackground()}
</TouchableOpacity>
</Animated.View>
);
}
As in the other ones too related to Header, but none worked. Any idea? I thought it could be due to the position: 'absolute' property of the header style, but it wasn't, I tested removing it.