How to call a class from another class in React-Native

Question

Oo .. sorry if my script is confusing because there are actually two options that I have deleted to make it look simpler but it makes the question direction unclear. And this is the complete script

import { Button, Text,  View, TouchableOpacity, StatusBar} from 'react-native';

import ScanQR from './ScanQR';
import SalesTrans from './SalesTrans';
import Inventory from './Inventory';

export default class Home extends Component{
    constructor(props){
        super(props)
      } 
  render() {
    return (
      <View style={styles.container}>
            <StatusBar barStyle = "dark-content" hidden = {false} backgroundColor = "yellow" translucent = {true}/>
            <TouchableOpacity 
                onPress={this.props.navigation.navigate('ScanQR')}>
                <Text style={styles.heading}>Scanning QR</Text>
            </TouchableOpacity>
            <TouchableOpacity 
                onPress={this.props.navigation.navigate('SalesTrans')}>
                <Text style={styles.heading}>Sales Transaction</Text>
            </TouchableOpacity>
            <TouchableOpacity 
                onPress={this.props.navigation.navigate('Inventory')}>
                <Text style={styles.heading}>Inventory Status</Text>
            </TouchableOpacity>
      </View>
    );
  }
}

And this is an android screen display

What I want is if Scanning QR is selected then the ScanQR page opens, likewise if the Invetory Status is selected, the Inventory page will open. Thank you

Answer 1

If you want to render the ScanQR class in this class , you can do like

import { Text,  View, TouchableOpacity, StatusBar} from 'react-native';

import ScanQR from './ScanQR';

export default class Home extends Component{
    constructor(props){
        super(props)
      } 
  render() {
    return (
      <View style={styles.container}>
            <StatusBar barStyle = "dark-content" hidden = {false} backgroundColor = "yellow" translucent = {true}/>

    <ScanQR />

      </View>
    );
  }
}

else if you want to navigate to ScanQR class from this class, then first add the ScanQR class inside the app navigation stack , and if its screen name is ScanQR , you can achieve something like, you did before,

import { Text,  View, TouchableOpacity, StatusBar} from 'react-native';


export default class Home extends Component{
    constructor(props){
        super(props)
      } 
  render() {
    return (
      <View style={styles.container}>
            <StatusBar barStyle = "dark-content" hidden = {false} backgroundColor = "yellow" translucent = {true}/>

            <TouchableOpacity onPress={this.props.navigation.navigate('ScanQR')}><Text style={styles.heading}>Scanning QR</Text></TouchableOpacity>

      </View>
    );
  }
}

feel free to ask any doubts

Answer 2

if you want to access child class then you need to use props and if you want to access parent class from child then refs.

you can find full answer here