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'm currently developing an app using react native and I'm using react-navigation to navigate between screens, using buttons in my header (back arrow for example).
It's working well, however even if my icon is the right size it seems like the click area is really narrow and I struggle with it.
Do you know how I could define a click zone on my button for it to be clicked easier? I've tried the hitslop prop but it's not working for me (maybe it's been deprecated?).
Here is my button:
var backArrow =
<TouchableOpacity onPress={() => this.props.navigation.goBack()}>
<Ionicons name="ios-arrow-back" size={22} color="#ff8c00" />
</TouchableOpacity>
I'm using Expo and testing on an iPhone 6s Plus.
Wrapping the Ionicons in a TouchableOpacity will only provide a clickable area as large as the Ionicons component. You can increase the size of the clickable area with the following structure:
<TouchableOpacity>
<View>
<Ionicons />
</View>
</TouchableOpacity>
by styling the View to be as large as you require it.
i want to generate a button click dynamically for a TouchableOpacity in react-native,
i didn't find anything about that,
all i want is to call the TouchableOpacity onPress from a fuction (or see its effect on the button)
in titanium we were doing $.button.click
i tried using Animated but no luck
https://facebook.github.io/react-native/docs/animations.html
so can anybody help? thanks in advance
It's really inadvisable but something like this should work:
simulatePress() {
this.touchable.props.onPress();
}
render() {
return (
<TouchableOpacity ref={component => this.touchable = component} onPress={() => console.log('onPress')}>
<Text>Tap me</Text>
</TouchableOpacity
);
}
Really though, what you are trying to achieve? There is likely a better way to do it.
How to hide status bar in Android w/ React Native?
https://facebook.github.io/react-native/docs/statusbarios.html#content
You no longer need to install a dependency to hide the status bar in react-native. The following should work for both Android and iOS.
To hide the StatusBar you can use the component straight from react-native. It is listed in the documentation here.
You can use it in two different ways. One as a component, and the other imperatively. For both you import it from react-native.
import { StatusBar } from 'react-native';
Component
In side your render:
render() {
return (
<View style={styles.container}>
<StatusBar hidden={true} /> // <- you could set this from a value in state
...
</View>
);
}
Imperatively
This allows you to hide it via a function call.
componentDidMount () {
// doesn't have to be in the componentDidMount it could be in some other function call.
StatusBar.isHidden(true);
}
<StatusBar backgroundColor={'transparent'} translucent={true} />
:D
You can try react-native-android-statusbar
.
var StatusBarAndroid = require('react-native-android-statusbar');
StatusBarAndroid.hideStatusBar()
I'm new to React Native, so am probably asking something very obvious, but please help.
I have a view wrapped in a touchable, so that the whole area responds to tapping. Then have a ScrollView nested inside the view. The overall structure is something like this:
<TouchableWithoutFeedback onPress={this.handlePress.bind(this)}>
<View>
<ScrollView>
<Text>Hello, here is a very long text that needs scrolling.</Text>
<ScrollView>
</View>
</TouchableWithoutFeedback>
When this compiles and runs, the tapping is detected, but the scroll view doesn't scroll at all. I made the above code short and simple, but each component has the proper styling and I can see everything rendering fine and the long text is cutoff at the bottom of the ScrollView. Please help.
Thank you!
This is what worked for me:
<TouchableWithoutFeedback onPress={...}>
<View>
<ScrollView>
<View onStartShouldSetResponder={() => true}>
// Scrollable content
</View>
</ScrollView>
</View>
</TouchableWithoutFeedback>
The onStartShouldSetResponder prop stops the touch event propagation towards the TouchableWithoutFeedback element.
I'm using this structure it's working for me:
<TouchableWithoutFeedback onPress={() => {}}>
{other content}
<View onStartShouldSetResponder={() => true}>
<ScrollView>
{scrollable content}
</ScrollView>
</View>
</TouchableWithoutFeedback>
You can have a scrollView or FlatList inside a TouchableWithoutFeedback. Tho you shouldn't but some times you have no other choice to go. Taking a good look at this questions and answer validates that.
close react native modal by clicking on overlay,
how to dismiss modal by tapping screen in react native.
For the Question, The only way you can make it work (atleast that i know of), or the simplest way is to add a TouchableOpacity around Text in your code like this,
<TouchableWithoutFeedback onPress={this.handlePress.bind(this)}>
<View>
<ScrollView>
<TouchableOpacity>
<Text>Hello, here is a very long text that needs scrolling.</Text>
</TouchableOpacity>
<ScrollView>
</View>
</TouchableWithoutFeedback>
Note: TouchableOpacity is a wrapper for making Views respond properly to touches so automatically you can style it the way you would have styled your View Component then set some of its special props to whatever you want e.g activeOpacity etc. Moreso you can use TouchableHighlight it works, but it receives one child element i.e you enclose all your component inside a parent one.
I'm using this structure it's working for me:
<TouchableOpacity>
{other content}
<ScrollView>
<TouchableOpacity activeOpacity={1}>
{scrollable content}
</TouchableOpacity>
</ScrollView>
I found that for my situation the other examples did not work as they disabled the ability to click or disabled the ability to scroll. I instead used:
<FlatList
data={[{key: text1 }, { key: text2 } ...]}
renderItem={({ item }) => (
<TouchableWithoutFeedback onPress={this.onPressContent}>
<Text style={styles.text}>{item.key}</Text>
</TouchableWithoutFeedback>
)}
/>
I happend to need to multiple chunks but you could use single element in the data array for one piece of text.
This let the press event to fire as well as let the text scroll.
Trying to use a ScrollView component inside a TouchableWithoutFeedback component can cause some unexpected behavior because the TouchableWithoutFeedback component is designed to capture user gestures and trigger an action, but the ScrollView component is designed to allow users to scroll through content.Here is what the official docs say
Do not use unless you have a very good reason. All elements that
respond to press should have a visual feedback when touched.
TouchableWithoutFeedback supports only one child. If you wish to have
several child components, wrap them in a View. Importantly,
TouchableWithoutFeedback works by cloning its child and applying
responder props to it. It is therefore required that any intermediary
components pass through those props to the underlying React Native
component.
Thats write , you cannot have a scroll view inside the TouchableWithoutFeedback, it the property of react native that it will disable it, you can instead have your scroll view outside the TouchableWithoutFeedback tab and add the other contents that you want upon the click inside a view tag.
You can also use the Touchable Highlights instead, if the TouchableWithoutFeedback does not works.