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)}
Related
how to change useState's state without render in functional component
const [imageId, setimageId] = useState(0);
const Slide = () => {
return (
slides.map((item, index) => (
<View style={styles.slide}>
<TouchableOpacity onPress={()=>setimageId(index)} >
<Image source={item.image}} />
</TouchableOpacity>
</View>
))
)
}
when I change state in onPress slide component re-renders and images load again
so how can I change the state without rendering the slide component
You would need to create a component that will be inside the slides.map(...) and will have its own state.
If you change the state of Slide it will render the component Slide, that's basically the idea of the hook useState.
You can check the useRef docs also. When you want to change a value in the component without rendering you usually want to the useRef hook, not the useState
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 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
I am using a bottom tab navigator created with createBottomTabNavigator() and passing it several screens, each of which contain their own stack navigation:
const tabNavigator = createBottomTabNavigator({
TradingStack,
LendingStack,
FinanceStack,
AccountBalancesStack,
OtherStack,
},
{
tabBarComponent: props => (
<NavigationFooter />
)
}
);
I am passing it my own custom bottom navigator component called <NavigationFooter />. When tabBarComponent is omitted, a built-in bottom tab navigator is used, however I need more functionality than this built-in solution offers. The issue is, when using my custom tab bar, I lose stack persistence in the individual screens. To clarify, let's say my TradingStack screen has several screens that stack on top of it, and I open one of those. When using the default tab bar, if I switch to the LendingStack screen and then back to TradingStack, I will still be on the stacked screen that was pushed on top of the root TradingStack screen.
However, when using my custom tab bar component, moving between these tabs/screens will always bring me to the root of each one instead of bringing me back to the stacked screen that the tab was on before switching away from it. Here's my custom Footer component:
function Footer({navigation}) {
return(
<View style={styles.tabBarStyle}>
<TouchableOpacity style={styles.tabStyle} onPress={() => navigation.navigate('Trading')} />
<TouchableOpacity style={styles.tabStyle} onPress={() => navigation.navigate('Lending')} />
<TouchableOpacity style={styles.tabStyle} onPress={() => navigation.navigate('Finance')} />
<TouchableOpacity style={styles.tabStyle} onPress={() => navigation.navigate('AccountBalances')} />
<TouchableOpacity style={styles.tabStyle} onPress={() => navigation.navigate('TabScreen')} />
</View>
);
}
const NavigationFooter = withNavigation(Footer);
As you can see, when one of the TouchableOpacity elements is pressed, I use navigation.navigate() to go to the desired screen, but, as mentioned, this brings me to the root of the screen. I understand that this is basically explicitly telling the app to navigate to a root screen of a tab, but I don't know how to make the tab "remember" the stacked screen it was on before I move away, as is the behavior of the default tab bar.
You can pass the name of the actual stack to navigation.navigate instead of the name of the starting screen on that specific tab, and the stacked screens should persist. So, instead of, for example
<TouchableOpacity style={styles.tabStyle} onPress={() => navigation.navigate('Trading')}/> //name of the screen
you should pass it
<TouchableOpacity style={styles.tabStyle} onPress={() => navigation.navigate('TradingStack')}/> //name of the stack
assuming Trading is the starting screen within the TradingStack.
<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}/>