Can I use react native elements UI with native base?

Question

I have a project mostly written Native Base components. But in some cases I want to use React Native Elements. I just want to know is it possible to use them seperately.

For some components I will just use React Native Elements like Avatar component. Not importing both of them together, I mean just one UI Toolkit.

Answer 1

yes you can use components from Native Base and React Native Elements at the same time as long as they are not called the same in the same component. Let me explain:

The following App is a simple example of having two components from both libraries:

import { Button, ThemeProvider } from 'react-native-elements';
import {  Header } from 'native-base';

const MyApp = () => {
  return (
    <ThemeProvider>
      <Header>                  //Is rendered from the Native Base library
      <Button title="Hey!" />   //Is rendered from the React Native Elements library
    </ThemeProvider>
  );
};

You might get an issue if you try to do the following because it will throw a "duplicate declaration error":

import { Button, ThemeProvider } from 'react-native-elements';    //Button is imported
import { Button, Header } from 'native-base';                     //Button is imported a second time

const MyApp = () => {
  return (
    <ThemeProvider>
      <Button>                   
        <Text>Click Me!</Text>
      </Button>                 
      <Button title="Hey!" />   
    </ThemeProvider>
  );
};

In this code you defined the same component twice (Button) from two different libraries. React Native will not render that component. If you take it out of one of the two import statements it gets rendered with the corresponding component from the library you import it from.

Hope that helps.