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.
Related
I am using touchable opacity for my home page button, all menus are working perfectly but are not working correctly in two scenarios.
While launching the share popup and moving to another application
Open the play store for rating.
The problem I am facing
While pressing the button, the opacity and all actions work properly, but after coming back to the application, still, the touchable opacity is active.
<TouchableOpacity onPress={()=> shareApp() }>
<View>
<Image source={require('../Assets/Home_page/share.png')}/>
</View>
<View>
<Text>Share my app</Text>
</View>
</TouchableOpacity>
shareApp = () => {
var link="https://play.google.com/store/apps/details?id="+_packageid;
const result = await Share.share({
title: 'App link',
message:'Best app \n'+link,
url:link
});
}
See the above image, after returning to the application, still, the opacity is active. The same happened if the following code is executed.
Linking.openURL(link)
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.
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'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.
The idea is to create a specific Touchable component acting like a button and have a feeling of pressed and unpressed, and using this component many times on my app but only one can be pressed at a time. If one is touched and then another one is touched, the first one should be unpressed and the second one should be pressed. The idea is not to use Redux to solve this problem.
I'm already handling which component was pressed, and sending through props the actions to the component. But i don't know how to manage all buttons at the same time in a generic way, by that I mean, not creating a variable to each button.
my App:
<View>
<ActivityButton activityTitle={"B1"} submit={() => this.submitHandler("B1")} />
<ActivityButton activityTitle={"B2"} submit={() => this.submitHandler("B2")} />
</View>
my Component (ActivityButton):
this.state={active:false}
<TouchableOpacity style={this.state.active ? styles.buttonPress : styles.button} onPress={this.props.submit}>
<View>
<Text>{this.props.activityTitle}</Text>
</View>
</TouchableOpacity>
I assume what you trying to do something like a Radio button groups? If your buttons only located in single page, you can achieve by using state in MyApp to check which buttons is enabled instead of button itself.
MyApp
constructor(props) {
super(props);
this.state = {
buttonIdThatEnable: "",
};
}
submitHandler = (buttonId) => {
this.setState({
buttonIdThatEnable: buttonId,
});
}
render() {
return (
<View>
<ActivityButton
activityTitle={"B1"}
active={this.state.buttonIdThatEnable === "B1"}
submit={() => this.submitHandler("B1")}
/>
<ActivityButton
activityTitle={"B2"}
active={this.state.buttonIdThatEnable === "B2"}
submit={() => this.submitHandler("B2")}
/>
</View>
)
}
ActivityButton (Use props.active to determine style)
<TouchableOpacity style={this.props.active ? styles.buttonPress : styles.button}
onPress={this.props.submit}>
<View>
<Text>{this.props.activityTitle}</Text>
</View>
</TouchableOpacity>
If your Buttons are located in different components and you do not want to use Redux, you may consider the React Context API