React Native library

ui-shared on mobile application #

After creating our ui-shared library and using it on our SPA application as explained here, we want to reusw it on our mobile application, as well.

We just need to install @mr/ui-shared and switch @mr/ui-mobile by @mr/ui-shared:

yarn lerna add @mr/ui-shared --scope=@mr/mobile

Now, we update our packages/mobile/App.tsx:

import React from 'react';
import {SafeAreaView, ScrollView, StatusBar} from 'react-native';

import {allBooks} from '@mr/utils';
import {IBook} from '@mr/types';
import {BookCard} from '@mr/ui-shared';

const App = () => {
  const books = allBooks();
  
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView contentInsetAdjustmentBehavior="automatic">
          {allBooks().map(function renderBook(book: IBook): JSX.Element {
            return <BookCard key={book.id} book={book} />;
          })}
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

export default App;

I am using WML to link this library:

wml add packages/ui-shared packages/mobile/node_modules/@mr/ui-shared
wml start

We should now be able to start our application, executing yarn ios on packages/mobile. It should be working well, and we are now reusing presentational components on our web and mobile application.

We can now remove the @mr/ui-mobile dependency.

Published