I have made a button component and want to add a onpress but it doesnt work. Can anyone explain me why its not working ?
Button Component.js
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Dimensions } from 'react-native';
const width = Dimensions.get('window').width;
const Button = ({ title }) => {
return (
<TouchableOpacity>
<Text>{title}</Text>
</TouchableOpacity>
)
};
export default Button;
Main.js
...
<Button onPress={handleSubmit} title="Jetzt registrieren"/>
...
you need to extract you onPress prop
const Button = ({ title,onPress }) => {
return (
<TouchableOpacity onPress={onPress}>
<Text>{title}</Text>
</TouchableOpacity>
)
};
Related
I am trying to make a back button in react native and using navigation.goBack() in the function component but if I console the navigation then it's giving me undefined
import React from 'react';
import {
Text,
StyleSheet,
Image,
View,
Dimensions,
TouchableOpacity,
} from 'react-native';
import backIcon from '../assets/back-black.png';
const {width: SCREEN_WIDTH, height: SCREEN_HEIGHT} = Dimensions.get('window');
const TitleHeader = ({navigation, title}) => {
// console.log("hello");
return (
<View style={[styles.customHeader]}>
<View style={[styles.headerLeft]}>
<TouchableOpacity onPress={() => navigation.goBack()}>
<Image source={backIcon} style={styles.headerIcon} />
</TouchableOpacity>
<Text style={[styles.font, styles.headerTitle]}>{title}</Text>
</View>
</View>
);
};
The rest of the code is working fine I am just getting an error in navigation so I add the important code only
React-navigation v5 provides hook useNavigation() returns the navigation prop of the screen it's inside.
Sample:
import * as React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '#react-navigation/native';
function MyBackButton() {
const navigation = useNavigation();
return (
<Button
title="Back"
onPress={() => {
navigation.goBack();
}}
/>
);
}
In your code you need pass prop navigation to your component
I have tried to open Modal from another component in react-native, but modal is not open. so please help me if have any solution. this is my code
modal.js
import React from './node_modules/react';
import { View, Text } from 'react-native';
const ProfileModal = () => {
return (
<View>
<Text>HELLO TEXT</Text>
</View>
);
}
export default ProfileModal;
----------------------------------------
header.js
import ProfileModal from './ProfileModal';
import { Image, View, TouchableOpacity, Text } from 'react-native';
import Modal from 'react-native-modal';
const openLoginPopup = () => {
return (
<TouchableOpacity onPress={() => this.openModal}>
<Text> Login </Text>
</TouchableOpacity>
)
}
const openModal = () => {
return (
<Modal isVisible={true}>
<ProfileModal />
</Modal>
)
}
Thanks,
In that case, react-native-modal provide callback onBackdropPress, onBackButtonPress to close.
You can use it like this:
const ProfileModal = ({ open, onClose }) => {
return (
<Modal isVisible={open} onBackButtonPress={onClose} onBackdropPress={onClose}>
<View>
<Text>HELLO TEXT</Text>{' '}
</View>
</Modal>
)
}
Then pass onClose function when using it:
<ProfileModal open={open} onClose={()=> setOpen(false)} />
It's like you write the content modal in modal file. So you can do it something like:
modal.js
import React, {useState} from 'react';
import { View, Text } from 'react-native';
const ProfileModal = () => {
return (
<View>
<Text>HELLO TEXT</Text>
</View>
);
}
export default ProfileModal;
----------------------------------------
header.js
import ProfileModal from './ProfileModal';
import { Image, View, TouchableOpacity, Text } from 'react-native';
import Modal from 'react-native-modal';
const Header = () => {
const [open, setOpen] = useState(false)
return (
<View>
{/* some content */}
{/* btn trigger */}
<TouchableOpacity onPress={() => setOpen(true)}>
<Text> Login </Text>
</TouchableOpacity>
<Modal isVisible={open}>
<ProfileModal />
</Modal>
</View>
)
}
or
modal.js
import React, {useState} from 'react';
import { View, Text } from 'react-native';
const ProfileModal = ({ open }) => {
return (
<Modal isVisible={open}>
<View>
<Text>HELLO TEXT</Text>
</View>
</Modal>
);
}
export default ProfileModal;
----------------------------------------
header.js
import ProfileModal from './ProfileModal';
import { Image, View, TouchableOpacity, Text } from 'react-native';
import Modal from 'react-native-modal';
const Header = () => {
const [open, setOpen] = useState(false)
return (
<View>
{/* some content */}
{/* btn trigger */}
<TouchableOpacity onPress={() => setOpen(true)}>
<Text> Login </Text>
</TouchableOpacity>
<ProfileModal open={open} />
</View>
)
}
First of all openModal method is not part of openLoginPopup so remove this before openModal method.
Just use directly like below,
const openLoginPopup = () => {
return (
<TouchableOpacity onPress={openModal}>
<Text> Login </Text>
</TouchableOpacity>
)
}
Second issue was that you also don't need arrow function in onPress event until you want to pass some parameters in openModal method. You can directly pass the method name and it will work.
I am trying to have a button cross out text with 'line-through'. I am not sure how to connect this to the button.
'''
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
export default function App() {
const [name, setName] = useState('shaun')
const clickHandler = () => {
setName('shaun (CROSSED OUT)');
}
return (
<View style={styles.container}>
<Text>My name is {name}</Text>
<Text></Text>
<View style={styles.buttonContainer}>
<Button title='update state' onPress={clickHandler} />
</View>
</View>
);
}
You can use a state variable to keep track of it.
quick example -
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
export default function App() {
const [name, setName] = useState('shaun')
const [crossedOut, setCrossedOut] = useState(false) // extra state variable
const clickHandler = () => {
setName('shaun (CROSSED OUT)');
setCrossedOut(true) // set it to true on click
}
return (
<View style={styles.container}>
{/* apply style only if crossedOut is true */}
<Text style={crossedOut && {textDecorationLine: 'line-through'}}>My name is {name}</Text>
<View style={styles.buttonContainer}>
<Button title='update state' onPress={clickHandler} />
</View>
</View>
);
}
I am using React Native Modal and am having difficulty passing back the props from the Modal to the class that called the Modal.
I have tried with the onRequestClose() and onPress() and setting a prop for callback data googlePlacesPassedBackLocation but no success. I am trying to retrieve pastLocations from GooglePlaces. I can see in GooglePlaces that the location is being generated correctly. I am using the useState hook in both the Modal class and the GooglePlaces class.
I have read that this is a difficult thing to do as react doesn't really support it. Is it possible at all?
import {StyleSheet, View, Modal, TouchableOpacity, Text, TouchableHighlight, Button } from 'react-native';
Parent Component:
const RegisterLocationScreen = ({navigation}) => {
var [pastLocations, setPastLocations] = useState([]);
var [pastModalVisible, setModalPastVisible] = useState(false);
const closeModal = (timeFrame) => {
setModalPastVisible(false);
};
const openGooglePastModal = () => {
setModalPastVisible(true)
};
return (
<Modal visible={pastModalVisible} animationType={'slide'} onRequestClose={() => closeModal(pastLocations)}>
<View style={styles.modalContainer}>
<SafeAreaView style = {styles.safeAreaViewStyle} forceInset={{top: 'always'}}>
<GooglePlaces timePeriod="Past" googlePlacesPassedBackLocation={googlePlacesPassedBackLocation} />
<TouchableOpacity style = {styles.buttonContainer} onPress={()=> closeModal('Past')}>
<Text style={styles.buttonText} >
Close Modal
</Text>
</TouchableOpacity>
</SafeAreaView>
</View>
</Modal>
<TouchableOpacity style = {styles.buttonModal} onPress={() => openGooglePastModal()} >
<Text style={styles.buttonModalText} >
Past Locations
</Text>
</TouchableOpacity>
Child Component:
import React, {useState} from 'react';
import {StyleSheet } from 'react-native'
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
const API_KEY = '123omittedforsecurity';
const GooglePlaces = ({timePeriod}) => {
var [pastLocations, setPastLocations] = useState([]);
const updateLocationArray = (data, details) =>{
setPastLocations([
...pastLocations,
details.geometry.location
]);
};
return (
<GooglePlacesAutocomplete
placeholder={timePeriod}
onPress={(data, details) => {
updateLocationArray(data, details);
}}
..../>
So i'm new to react native and javascript, and i want to make a reusable button with image and i found this code
import React from 'react';
import { Image, TouchableOpacity } from 'react-native';
const ImgButtons = ({ onPress, img }) => {
return (
<TouchableOpacity onPress={onPress}>
<Image
source={require(img)}
/>
</TouchableOpacity>
);
};
export { ImgButtons };
and i call the component
<View style={styles.innerContainer}>
<ImgButtons
img={require('../assets/btn-reg-1.jpg')}/>
</View>
i got an error say Error: component/ImgButtons.js:Invalid call at line 9: require(img)
can somebody help me? Thanks :)
In you custom component I edited Image source check below:
import React from 'react';
import { Image, TouchableOpacity } from 'react-native';
const ImgButtons = ({ onPress, img }) => {
return (
<TouchableOpacity onPress={onPress}>
<Image
source={img}
/>
</TouchableOpacity>
);
};
export { ImgButtons };
Then you have to pass some method onPress
<View style={styles.innerContainer}>
<ImgButtons
img={require('../assets/btn-reg-1.jpg')}
onPress={()=>console.log('Action')}
/>
</View>