Soy nuevo en React y me he enfrentado a este problema:

Tengo el archivo Main.js con un botón:

 import * as React from 'react'; import { StyleSheet, Text, View, SafeAreaView, Pressable, Alert } from 'react-native'; import { MaterialIcons, MaterialCommunityIcons} from '@expo/vector-icons'; import { DrawerActions } from '@react-navigation/native'; import Scanner from './Scanner' export default function Main({ navigation }) { return ( .... <View style={styles.container}> <Pressable style={styles.button} onPress={ <Scanner() function call> }> <Text style={styles.buttonText}>Take charger</Text> </Pressable> </View> ); }

Y tengo otro archivo Scanner.js:

 import React, { useState, useEffect } from 'react'; import { Text, View, StyleSheet, Button } from 'react-native'; import { BarCodeScanner } from 'expo-barcode-scanner'; export default function Scanner() { const [hasPermission, setHasPermission] = useState(null); const [scanned, setScanned] = useState(false); useEffect(() => { (async () => { const { status } = await BarCodeScanner.requestPermissionsAsync(); setHasPermission(status === 'granted'); })(); }, []); const handleBarCodeScanned = ({ type, data }) => { setScanned(true); alert(`Bar code with type ${type} and data ${data} has been scanned!`); }; if (hasPermission === null) { return <Text>Requesting for camera permission</Text>; } if (hasPermission === false) { return <Text>No access to camera</Text>; } return ( <View style={styles.container}> <BarCodeScanner onBarCodeScanned={scanned ? undefined : handleBarCodeScanned} style={StyleSheet.absoluteFillObject} /> {scanned && <Button title={'Tap to Scan Again'} onPress={() => setScanned(false)} />} </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', } });

¿Cómo puedo llamar a una función Scanner() desde Scanner.js al hacer clic en el botón en la función Main() en Main.js? Probé onPress={() => Scanner} pero no funcionó para mí debido al uso incorrecto de ganchos.