Accessing component state in another class?

[olfcad]

Hello expo gurus again,

i have a HomeScreen with three buttons;

import React,{Component} from 'react';

import {
  Image,
  Platform,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  StatusBar
} from 'react-native';
import { WebBrowser } from 'expo';

import { MonoText } from '../components/StyledText';

import Header from '../components/Header';
import Banner from '../components/Banner';
import ContentContainer from '../components/ContentContainer';

export default class HomeScreen extends Component {
  static navigationOptions = {
    header: null,
  };

  componentDidMount(){
    StatusBar.setHidden(true);
  }
  

  render() {
    return (
      <View style={styles.container}>
          <Header headerText={'Saha Store'}/>
        <ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
          <Banner />
          <ContentContainer navigation={this.props.navigation}/>
        </ScrollView>
        
      </View>
    );
  }

  

  
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFF',
  },
  contentContainer: {
    
  }
});

and this the code for ContentContainer :

import React, { Component } from 'react';
import {  View, Text, StyleSheet, Image } from 'react-native';
import CustomImage from './CustomImage';
import { StackNavigator } from 'react-navigation';

export default class ContentContainer extends Component {
    state={ vegi:false, fruit:false, dairy: false}


    _handletouch = () =>{
      let header = this.state.header;
        switch(header){
          case 'Vegetables':
            this.setState({vegi: true})
            this.props.navigation.navigate('VegetablesScreen')
            break;
          case 'Fruits':
            this.setState({fruit: true})
            this.props.navigation.navigate('FruitsScreen')
            break;
          case 'Dairy':
            this.setState({dairy: true})
            this.props.navigation.navigate('DairyScreen')
          
        }

    }
  render() {
    
    return (
      <View style={styles.contentContainer}>
        <View style={styles.vegetable}>
            <CustomImage 
            imageSource ={require('../assets/images/vegetables.jpg')}
            header = 'Vegetables'
            paragraph ='Check out our Vegetables Inventory Here'
            onPress= {()=>this.props.navigation.navigate('VegetablesScreen')}
           />
    
        </View>

        <View style={styles.fruit}>
        <CustomImage 
            imageSource ={require('../assets/images/fruit.png')}
            header = 'Fruits'
            paragraph = 'Check out our Fruits Inventory Here'
            onPress ={()=>this.props.navigation.navigate('FruitsScreen')}
            />
        </View>

        <View style={styles.dairy}>
          <CustomImage 
            imageSource= {require('../assets/images/dairy.jpg')}
            header ='Dairy'
            paragraph = 'Check out our Dairies Inventory Here'
            onPress={()=> this.props.navigation.navigate('DairyScreen')}
           
          />
        </View>
      </View>
    );
  }

  

}




const styles = StyleSheet.create({
    contentContainer:{
        flex: 1,
        flexDirection: 'column',
        flexWrap: 'wrap',
        padding: 5,
    },
    fruit:{
      flex:1,
      padding: 5
    },
    vegetable :{
      flex: 2,
      padding:5
    },
    dairy:{
      flex: 3,
      padding: 5
    }
})

and this the code for vegetablesScreen:

import React, { Component } from 'react';
import {  View, Text, } from 'react-native';
import StoreList from '../components/StoreList';
import Header from '../components/Header';

export default class FruitsScreen extends Component {

  static navigationOptions = {
    header: null,
  };

  render() {
    return (
      <View>
        <Header headerText={'Vegetables'} />
        <StoreList />
      </View>
    );
  }
}

also this is the code for StoreList :

import React, { Component } from 'react';
import {  View,ScrollView } from 'react-native';
import axios from 'axios';
import ItemDetail from './ItemDetail';


class  StoreList extends Component {

    state ={items: []}

    componentWillMount(){
         axios.get('https://api.jsonbin.io/b/5acd50d54ba8d82b4ccc59b6')
     .then(response => this.setState({items: response.data}));
    }
   
    _renderAlbums(){
       return this.state.items.map(item => <ItemDetail key={item.name} item ={item} />);
        
    }

    
    
    render(){
        console.log(this.state);
    return(
        <ScrollView>
            {this._renderAlbums()}
        </ScrollView>
          );
        }
}
export default StoreList;

what i want to achieve is to pass a state for StoreList so i can render the correct JSON file,
ie: if the first button pressed will go to the vegetable screen and setState of vegi to true, so when the StoreList is rendered with params of vegi true.

any help will be much appreciated

for what is worth here is the github repo: https://github.com/oflarcade/SahaApp