I wish to navigate to a different screen using a component. I know that I can simply pass a prop for onPress in TouchableOpacity and add props.navigation.navigate("") every time I use that component. But since I'm using this component multiple times and the destination screen is the same all the times, I wish to find a way to do this: (this always gives me this error)
<TouchableHighlight
underlayColor="#F0F3F4"
style={style.option}
onPress={() =>
this.props.navigation.navigate("Change Password")
}
>
<Text style={style.optionText}>Other Links</Text>
</TouchableHighlight>
This is a part of my code from the Header.js component.
The best way to design a functional component is to use hooks.
In this case you need to use the hook useNavigation: https://reactnavigation.org/docs/use-navigation/
const navigation = useNavigation();
<TouchableHighlight
underlayColor="#F0F3F4"
style={style.option}
onPress={() =>
navigation.navigate("Change Password")
}
>
<Text style={style.optionText}>Other Links</Text>
</TouchableHighlight>
you need to implement a router in your react app to navigate to different routes and links
a basic example here:
https://reactrouter.com/web/example/basic
Related
I work with Expo.
I'm building a modal on the right of the screen, to display components.
It should appear on a button click, and close on swipe.
I made a lot of researches but I can't find what I need to use.
I'm a React developper but I am new to react native. I'm looking for "gestures" but I'm not sure I can use it to achieve what I want.
Any idea about what I should dig into ?
you can use this package to have that nice feature: react-native-swipe-gestures
you just need to wrap your modal with this package :
import GestureRecognizer from 'react-native-swipe-gestures';
<GestureRecognizer
style={{flex: 1}}
onSwipeUp={ () => this.setModalVisible(true) }
onSwipeDown={ () => this.setModalVisible(false) }
>
<Modal
animationType="slide"
presentationStyle="formSheet"
visible={ modalVisible }
>
<Text>Swipe Down Please</Text>
</Modal>
<Text>Swipe Up Please</Text>
</GestureRecognizer>
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 new to react native. What I want to achieve is that I want to navigate between screen while using pressable. What i have done is I have already created pressable button components inside buttons.js file what I want right now is that when I call that component inside of a file I want to pass screen name as a prop to that button component and navigate between screen using that main component. In short what i mean is whenever a screen name is passed from different file it act according to that and instead I don`t have to create multiple navigation inside each file.
E.g
Inside Home file
<ButtonXsPrimary
title='Login'
/>
Inside Buttons.js file
const ButtonXsPrimary = (prop) => {
const navigation = useNavigation();
return (
<>
<Pressable style={[style.buttonXs, Color.bgSecondry]} onPress={() => navigation.navigate(prop)} >
<Text style={[Color.White, style.buttonsTextSm]}>{prop.title}</Text>
</Pressable>
</>
);
};
The same title prop is used for navigation
As I understand you can do this way,
You need to pass navigation and route name as a prop inside your ButtonXsPrimary like
<ButtonXsPrimary
title="Login"
navigation={navigation}
routeName={'YourRouteName'}
/>
Access the props
onPress={() => prop.navigation.navigate(prop.routeName)}
<TouchableWithoutFeedback onPress={()=>this.props.navigation.navigate('Home')} >
{
this.props.type!=='1' ? <Icon2 name="chevron-with-circle-left" size={28}/>
: <Icon name='chevron-left' style={{ color: "#16527e" }} size={35}/>
}
</TouchableWithoutFeedback>
This code is showing an error that this.props.navigation.navigate is not an object . Is that necessary to use button for navigation for using this.props.navigation.navigate? can anyone help ?
No, it's not necessary. You can use whatever function for your onPress. I think that the problem is your navigation object.. is it undefined?
Try with this code and read what it's logged:
<TouchableWithoutFeedback
onPress={()=> console.log("Navigation is :", this.props.navigation}>
{ this.props.type!=='1'?
<Icon2 name="chevron-with-circle-left" size={28}/>
: <Icon name='chevron-left' style={{ color: "#16527e" }}
size={35}/>
}
</TouchableWithoutFeedback>
Ensure that navigation contains the "navigate" function and, if it's necessary, log even "this.props.navigation.navigate".
At the end ensure that react-navigation is configured properly.
Something more: if you are trying to use navigation inside a presentational component make sure that navigation is an object inside the container component and pass navigation down as a prop. If react-navigation opens the page XYZ ensure that navigation.navigate works in XYZ and pass it to other components as a prop.
If XYZ opens from react-navigation routing it should have this.props.navigation. XYZ renders ABC. XYZ should pass this.props.navigation to ABC as a prop:
<ABC navigation = {this.props.navigation}/>
I have a file called SplashScreen.js with a StackNavigator. Sample code:
Inside my SplashScreen.js I have a component called "Login" and INSIDE Login I have a component called "TouchbleOpacity"
What I need is to change the "onPress" event of my TouchbleOpacity component. So I'll be able to navigate in my Navigator (that are inside my SplashScreen.js). The onPress event should look similar to this: onPress={() => navigation.navigate('TelaCadastrar01')
If there is a better way to change the onPress event of my TouchbleOpacity, please tell me, thanks!
I don't know if this is what you are looking for, but i'll give it a try:
In your Login Component you do:
//first button
<TouchableOpacity onPress={this.props.onPress} >
<Text> ... </Text>
</TouchableOpacity>
//second button
<TouchableOpacity onPress={this.props.onPressButton2} >
<Text> ... </Text>
</TouchableOpacity>
Now you are able to pass any onPress function to your Login Component. e.g.
<Login onPress={() => navigation.navigate('TelaCadastrar01')} onPressButton2={() => console.log('second scene')}/>