> For the complete documentation index, see [llms.txt](https://bluebase.gitbook.io/core/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bluebase.gitbook.io/core/key-concepts/components/accessing-components.md).

# Accessing Components

## Through `resolve` method

In order to access a BlueBase component, just use the `resolve` method of Component Registry.

```typescript
const Logo = BB.Components.resolve('Logo');
```

This will return a component wrapped in all the HOCs, and will receive a `styles` prop that has all the [themed styles](/core/key-concepts/themes/customise-components.md).

But in order to get access this component in your code, you will need to use a BlueBaseConsumer component to access `BB` context first. This is how the final code may look like:

```typescript
import { BlueBase, BlueBaseConsumer } from '@bluebase/core';

const Header = () => (
    <BlueBaseConsumer>
    {(BB: BlueBase) => {
        const Logo = BB.Components.resolve('Logo');
        return <Logo />;
    }}
    </BlueBaseConsumer>
);
```

This adds unnecessarily long and repetitive code. Not to mention the overall ugliness and unreadability. To solve this problem, we export a helper function called `getComponent` .

## Through `getComponent` function

The `getComponent` function returns a component from BlueBase context. By using this function we can rewrite the example above as:

```typescript
import { getComponent } from '@bluebase/core';

const Logo = getComponent('Logo');

const Header = () => (<Logo />);
```

See how this makes the code much more developer friendly.

It is also possible to get a typed component by providing it props interface:&#x20;

```typescript
import { getComponent } from '@bluebase/core';

interface LogoProps {
    // ... props
}

const Logo = getComponent<LogoProps>('Logo');
```

To make it even more convenient, we export some basic components out of box. This helps developers not only write even less code, but also port react-native apps to BlueBase by just changing the import statement.

```diff
- import { Image, Text, View } from 'react-native';
+ import { Image, Text, View } from '@bluebase/components';
```

## Fallback Components

Sometimes, you may need to have fallback components. So if they desired component is not found, a back up component can be used. In BlueBase it is very easy to achieve this. Just provide multiple arguments to the resolve function.&#x20;

```typescript
const Logo = BB.Components.resolve('AnimatedLogo', 'SingleColorLogo', 'Logo');
```

The first param acts as the key of the desired, with the following ones acting at fallback components in sequence.

So in the example above, first BlueBase will try to find `AnimatedLogo` . If it doesn't exist, BlueBase will look for `SingleColorLogo` . If even that isn't found, it will try to get `Logo` component.

This works with the `getComponent` function. So the code above can be written as:

```typescript
const Logo = getComponent('AnimatedLogo', 'SingleColorLogo', 'Logo');
```

## Accessing Raw Components

As explained in the above, the resolve method returns a component wrapped in the registered HOCs, and styles. But sometimes, you may need to access the raw component that was originally registered.

For that reason, BlueRain provides a `getValue` method that lets you access the unwrapped “raw” component.

```typescript
const rawLogoComponent = await BB.Components.getValue('Logo');
```

Note that, we used the `await` keyword. This is because the getValue method will return the component wrapped in a promise. This is because some components may in different bundles (because of code splitting).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bluebase.gitbook.io/core/key-concepts/components/accessing-components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.