import { useEffect, useState } from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; export default function App() { const [currentdate, setCurrentdate] = useState('') useEffect(() => { var date = new Date().getDate() //current date var month = new Date().getMonth() + 1 //current month var year = new Date().getFullYear() //current year var hours = new Date().getHours() //current hours var min = new Date().getMinutes() //current minutes var sec = new Date().getSeconds() //current seconds setCurrentdate( date + '/' + month + '/' + year + ' ' + hours + ':' + min + ':' + sec ) }, ) return ( <View style={styles.container}> <Text>Showing current date and time</Text> {/* <Text style={styles.date}>{currentdate}</Text> */} <Button title='hit me' onPress={() => {<Text style={styles.date}>{currentdate}</Text>} }/> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, date: { fontSize: 35, marginTop: 30, paddingHorizontal: 30, borderWidth: 2, borderColor: 'black', color: 'blue' } });Elimine el useEffect y maneje el cambio de estado en la función onPress del Button . El cambio de estado activará una nueva representación de todo el componente y la nueva fecha será visible.
function getCurrentDateString() { const date = new Date().getDate() //current date const month = new Date().getMonth() + 1 //current month const year = new Date().getFullYear() //current year const hours = new Date().getHours() //current hours const min = new Date().getMinutes() //current minutes const sec = new Date().getSeconds() //current seconds return date + '/' + month + '/' + year + ' ' + hours + ':' + min + ':' + sec } export default function App() { // set the date initially on mount const [currentdate, setCurrentdate] = useState(getCurrentDateString()) return ( <View style={styles.container}> <Text>Showing current date and time</Text> <Text style={styles.date}>{currentdate}</Text> <Button title='hit me' onPress={() => setCurrentdate(getCurrentDateString()} }/> </View> );Instalar momentjs
npm install --save momentImportar momentos
import moment from "moment";Botón
<Button title='hit me' onPress={() => setCurrentDate(new Date())} />Texto
<Text style={styles.date}>{currentDate ? moment(currentDate).format("YYYY-MM-DD HH:mm:ss") : ''}</Text>NOTA: Eliminar también useEffect por favor
Otras lecturas
Aquí tienes una solución con Intl
import { useCallback, useState } from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; export default function App() { const [currentdate, setCurrentdate] = useState(null) const handleGenerateDateTime = useCallback(() => { setCurrentdate(new Intl.DateTimeFormat('en-GB', {day: "numeric", month:"numeric", year:"numeric",hour: "numeric", minute:"numeric", second:"numeric"}).format()); }, []) return ( <View style={styles.container}> {currentdate && <> <Text>Showing current date and time</Text> <Text style={styles.date}>{currentdate}</Text> </> } <Button title='hit me' onClick={handleGenerateDateTime} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, date: { fontSize: 35, marginTop: 30, paddingHorizontal: 30, borderWidth: 2, borderColor: 'black', color: 'blue' } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>Documentación: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat