Состояние доступа из компонента в другой вкладке в React native

Question

В моем приложении у меня есть два компонента на разных вкладках, BookShelf и AddBook. BookShelf содержит плоский список книг, добавленных пользователем, и моя идея с AddBook - найти книги и нажать кнопку, чтобы добавить их в список в компоненте BookShelf.

Моя идея состоит в том, чтобы хранить книги в виде объектов в массиве в состоянии BookShelfs. Можно ли получить доступ к состоянию BookShelf из AddBook и как мне это сделать? Я попытался создать функцию в BookShelf, которая обновляет состояние и передает его как реквизиты в мой компонент AddBook, но безуспешно, так как мне приходится визуализировать компонент AddBook в BookShelf для прохождения реквизитов.

Прямо сейчас я использую TabNavigator для вкладок, где отдельные вкладки StackNavigator вкладываются во вкладки.

Древовидная структура:

START: App.js -> TabsNavigator -> TABS: Книжная полка и AddBook

TAB 1: BookShelf -> STACK: BookShelfStack -> КОМПОНЕНТЫ: BookShelf & BookInfo

TAB 2: AddBook -> STACK: AddBookStack -> КОМПОНЕНТЫ: AddBook

Router.js, обрабатывающий навигацию:

export const BookShelfStack = createStackNavigator({
BookShelf: {
    screen: BookShelf,
    navigationOptions: {
        title: 'Book Shelf',
    }

},

BookInfo: {
    screen: BookInfo,
    navigationOptions: {
        title: 'Book Info'
    }
},   
})

export const AddBookStack = createStackNavigator({
AddBook: {
    screen: AddBook,
    navigationOptions: {
        title: 'Add Book',
    }
}

})

export const TabsNavigator = createMaterialTopTabNavigator({

'BookShelf': {
    screen: BookShelfStack,
    navigationOptions: {
        tabBarLabel: 'Book Shelf',
        tabBarIcon: ({tintColor}) => <Icon name="ios-book" type="ionicon" size={28} color={tintColor}/>
    }
},

'AddBook': {
    screen: AddBookStack,
    navigationOptions: {
        tabBarLabel: 'Add Book',
        tabBarIcon: ({tintColor}) => <Icon name="ios-add-circle-outline" type="ionicon" size={28} color={tintColor}/>
    }
},
});

Компонент BookShelf с данными-заполнителями прямо сейчас:

export default class BookShelf extends Component {

constructor(props) {
super(props);
this.addBook = this.addBook.bind(this);

this.state = {

    books: [
        {
            id: 1,
            title: 'Harry Potter and the Goblet of Fire',
            author:'J.K. Rowling',
            thumbnail:'https://covers.openlibrary.org/w/id/7984916-M.jpg',
        },

        {
            id: 2,
            title: 'The Hobbit',
            author: 'J.R.R. Tolkien',
            thumbnail:'https://covers.openlibrary.org/w/id/6979861-M.jpg'
        },

        {
            id: 3,
            title: '1984',
            author: 'George Orwell',
            thumbnail:'https://covers.openlibrary.org/w/id/7222246-M.jpg'
        }

    ]
}
}

renderBook = ({item}) => (

    <BookShelfItem
    navigation={this.props.navigation}
    id={item.id}
    title={item.title}
    author={item.author}
    thumbnail={item.thumbnail}
    />
);

addBook(book) {

    let updatedBookList = this.state.books.slice();
    updatedBookList.push(book);

    this.setState({
        books: updatedBookList    
    });
}

render() {
    const {container} = styles;
    <AddBook addBook={this.addBook}/>
    return (
        <View style={container}>
        <StatusBar barStyle="light-content"/>
         <FlatList
        data={this.state.books}
        keyExtractor={(item, index) => item.id.toString()}
        renderItem={this.renderBook}
        extraData={this.state.books}
        /> 
        </View>

    );
}
}

Компонент AddBook, где я пытаюсь получить функцию addBook в качестве реквизита из BookShelf:

export default class AddBook extends Component {

constructor(props) {
super(props)
}

render() {
    const {container, title, textInputStyle} = styles;
    const { addBook } = this.props;
    return (
        <View style={container}>
        <Text style={title}>
        Add Book
        </Text>
        <TextInput style={textInputStyle}
        placeholder = {'Search books..'}
        />
        <Button 
        title = "Add book"
        onPress={() => addBook}

        />
        </View>
    );
}
}