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.
Related
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.
I am using react native and expo.
I'd like to change height and add some Views when I click the box.
How to add some Views seems difficult for me.
So I've tried to change height on CSS first.
const [style, setStyle] = useState(true);
I set 'style' as using useState.
Default value of style is 'true'.
<Header onPress={() => setStyle(!style)}>
And I made it so that if I click Header box, setStyle changes into reversed value of style.
And on css code of box that I wanted to apply change, I use props to be changed depending of the style's state.
height: ${(props) => (props.style ? "60px" : "260px")}
When I console.log the state value, it changes true to false and false to true correctly whenever I click the Header box.
But CSS style is not applied accordingly.
How can I make it applied?
And if you can teach me how to add some View more depending on the state, it would be really helpful.
You haven't included enough code to easily understand the structure of your app, or what exactly you're trying to do. Here's an example that should solve some of your issues... but you'll have to figure out how that fits your particular structure:
function App() {
const [active, setActive] = useState(false);
return <View>
<TouchableOpacity onPress={() => setActive(!active)}>
<Text>Press Me</Text>
</TouchableOpacity>
<View style={{height: active ? 260 : 60}}>
{active && <Text>Content</Text>}
</View>
</View>;
}
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
Is it possible to extend the tab view (image) all the way to the top of the screen and have the tab bar overlay it? Tab bars' backgroundColor is "transparent". Using createMaterialTopTabNavigator from React Navigation v3. There seems to have been something along the lines of displayUnderTabBar option in the earlier versions but I can't seem to find it in the documentation anywhere.
What you do is create a custom component for the tabs and position it absolutely over the screens.
<Tab.Navigator tabBar={props => <MyCustomComponent {...props} />}>
{...}
</Tab.Navigator>
Check out the example of a custom tabBar component here.
In the above example, make the positioned absolutely to top. Note that if you do this, however, you will need to change TouchableOpacity to TouchableWithoutFeedback because of the problem noted in this question question.
In order to do this, following styles need to be applied to the custom Tab Bar component that's passed in to the createMaterialTopTabNavigator:
style={{
...
position: "absolute",
zIndex: 1,
width: '100%'
...
}}>
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.