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.
Run the command: npm publish
this will build the lib before publishing.
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 (
...
);
}
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>
);
}
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>
);
}