0.0.6 • Published 2 years ago
business-storybook v0.0.6
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>
);
}