@holper/react-native-holper-storybook

Building for npm

Change in package.json the main prop:

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

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

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 'react-native-holper-storybook'; and call the asyncLoadFont function in your app entry point.

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

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

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

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

  return (
    ...
  );
}

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, sendMessage } from 'react-native-holper-storybook';

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

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