Building for npm

Change in package.json the main prop:

From: "main": "node_modules/expo/AppEntry.js",

To: "main": "lib/index.tsx",

And revert the change after publish.

Publish the library for npm

Run the command: npm publish this will build the lib before publishing.

How to set up

import { asyncLoadFont } from from 'business-storybook'; and call the asyncLoadFont function in your app entry point.

import React, { useEffect, useState } from 'react';
import { asyncLoadFont } from 'business-storybook';

export default function App() {
  const [fontsLoaded, setFontsLoaded] = useState(false);

  useEffect(() => {
    (async function() {
      await asyncLoadFont;
      setFontsLoaded(true);
    })();
  }, []);

  if (!fontsLoaded) {
    return <View/>;
  }

  return (
    ...
  );
}

Setting up a theme

import {StatusBar} from 'expo-status-bar';
import {ThemeProvider} from 'styled-components';
import {themes, useDarkMode} from 'business-storybook';

const {light, dark} = themes;

export default function App() {
  const [theme, themeToggler, mountedComponent] = useDarkMode();
  const themeMode = theme === 'light' ? light : dark;

if (!mountedComponent) {
    return <View/>;
  }

  return (
    <ThemeProvider theme={themeMode}>
      <StatusBar style={theme === 'light' ? 'dark' : 'light'} animated />
      <TouchableOpacity onPress={themeToggler}>
        <Text>Theme Toggle</Text>
      </TouchableOpacity>
      ...
    </ThemeProvider>
  );
}

Using FlashMessage

This library uses https://www.npmjs.com/package/react-native-flash-message, in order to use it, include <FlashMessage/> in you root component.

import React from 'react';
import { View } from 'react-native';
import { FlashMessage } from 'react-native-holper-storybook';

export default function App() {
  return (
    <View>
        ...
        <FlashMessage />
    </View>
  );
}

Sending a messages

import React from 'react';
import { View } from 'react-native';
import { Text, Button, showFlashMessage } from 'react-native-holper-storybook';

export default MyComponent = () => {
  return (
    <View style={styles.container}>
      <Button onPress={() => showFlashMessage({variant: 'success', title: 'The title', description: 'The description'})}>
        <Text color='white'>Shows success message</Text>
      </Button>

      <Button variant='error' onPress={() => showFlashMessage({variant: 'danger', title: 'The title', description: 'The description'})}>
        <Text color='white'>Shows error message</Text>
      </Button>
    </View>
  );
}