I am trying to navigate to a route using onPress, but get the error: Please attach a method to this component I need the whole component clickable, button and text - is that possible?
<TouchableOpacity
style={styles.widgetCont}
onPress={() => navigate(AppRoutes.Settings.Name)}
>
<Text style={styles.widgetText}>{setupRemindersDescription}</Text>
<Button
title={setupRemindersLabel}
buttonStyle={[buttons.primarySpace, styles.widgetBTN]}
titleStyle={buttons.smallTitle}
/>
</TouchableOpacity>
This doesnt give me the error and navigates fine:
<TouchableOpacity
style={VehicleStyles.widgetCont}
onPress={async () => {
const success = await tryBiometrics();
if (success) {
Linking.openURL(BookRepairUrl);
}
}}
>
<Button
title={myVehicles.booknow}
buttonStyle={[buttons.primarySpace, VehicleStyles.widgetBTN]}
titleStyle={buttons.smallTitle}
/>
</TouchableOpacity>
I need the whole component clickable, button and text - is that possible?
for that you can use Pressable from react-native.
Related
I am unsure how to trigger an event in my TouchableOpacity component that will target the TextInput component. I'd just like to be able to allow the user to type in a multiline area and click a button when they are finished, so that they are able to save their text (similar to how the iOS Notes app functions).
<View>
<View>
<Text>Notes</Text>
{typing &&
<TouchableOpacity
onPress={() => {
//blur() the textinput here
}}
>
<Text>Done</Text>
</TouchableOpacity>
}
</View>
<View>
<TextInput
multiline={true}
textAlignVertical='top'
value={text}
onChangeText={(text) => {
}}
onFocus={setTyping(true)}
/>
</View>
</View>
If you only need to access the text inside the same file, store your text in state in your component.
const [text, setText] = useState('');
...
<TouchableOpacity
// not sure what you want to do with the text here, but it'll be available in the `text` variable
onPress={() => saveNote(text)}
...
<TextInput
onChangeText={newText => setText(newText)
// or more simply
onChangeText={setText}
...
/>
The text input will automatically blur when you touch the Touchable.
If you need the text available in other files, have a look into React Context or look up state management libraries for React Native.
The question is simple, <TextInput /> inside <Animated.View /> is being trigered on every onChangeText event. I want it to exit the animation only if Submit button is pressed. Code is below:
const InputBox = () => { return(
<Animated.View style={styles.inputContainer}
entering={SlideInRight}
exiting={
SlideOutRight
}
>
<TextInput
style={styles.textInput}
onChangeText = {(text) => setTypedText(text)}
/>
<Pressable
onPress={onSubmit}>
<Text>Submit</Text>
</Pressable>
</Animated.View>
)
Any ideas?
Edit: I realized that, when I directly use this <Animated.View/> inside render seems not any problem, but when I create the component dynamically with const InputBox=()=>{} the problem occurs. So the question is why? And how can I use this component which is created by using const InputBox=()=>....
I have already done firebase with user authentication. Each result is displayed in a flatlist. Upon clicking the heart icon I want to move the selected item to the favorite screen.
Home Screen
<FlatList
contentContainerStyle={ { alignSelf:"center",}}
data={Results}
keyExtractor={(Result) => Result.id.toString()}
renderItem={({ item }) => {
// console.log(item.id);
return (
<TouchableOpacity
onPress={() => {
navigation.navigate("ResultsShowScreen", {
id: item.id,
image: item.image,
});
}}
>
<ResultsDetail Result={item} />
</TouchableOpacity>
);
}}
/>
</View>
Favorites Screen
<View>
<Text> Screen</Text>
</View>
You can achieve this by reading the properties of the route.params object of your Favorite Screen. Like so:
function Favorites ({route}) {
const {id, image} = route.params;
return (
...
);
}
Keep in mind that this will only show the id and image you are passing when the TouchableOpacity is pressed. If you want a list of all the favorites, you need to store them on a data structure like an array (and modify the array when an item is faved/unfaved), and pass that array to the Favorite Screen
For the complete reference of this feature, you can read the Passing parameters to routes page of React Navigation docs.
I am developing an app on react native. I want to call a date picker when i press on a Text-Input and after selecting a date it should show on the Text-Input
Wrap TextInput into a view and set pointerEvents as none.
Now you can use Pressable component from react-native to listen to the onpress event.
<Pressable onPress={() => alert('Hi!')}>
<View pointerEvents="none">
<TextInput />
</View>
</Pressable>
You cannot explicitly call onPress for TextInput. You could only use. onFocus which will be called when you press the input box to get cursor over there. No need to focus on onBlur as your use case doesn't required.. Handle close within onFocus if possible.
onFocus = () => {
// do something
}
render() {
<TextInput onFocus={onFocus} />
}
What you have to do is use onFocus and onBlur of TextInput.
<TextInput
onFocus={this.onFocus}
onBlur={this.onBlur}
/>
onFocus = () => {
// Open date picker
}
onBlur = () => {
// Close date picker and add value to textinput
}
You can make text input field read only by providing
editable={false}
pointerEvents="none"
prop to TextInput.
Wrap TextInput inside View and set pointerEvents="none", wrap that view with TouchableOpacity or any other Touchable Component. Please see below example!
<TouchableOpacity
onPress={() => {
alert('hello');
}}>
<View pointerEvents="none">
<TextInput
onChange={() => {}}
value={''}
placeholder={waterMark}
editable={!isDisabled}
selectTextOnFocus={!isDisabled}
/>
</View>
</TouchableOpacity>
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')}/>