React Native Widgets
Widgets Collection
Installation
You can install the entire set with
yarn add @sharingapples/widgets
import { StatusBar, BottomNavigation } from '@sharingapples/widgets';
Or you can install specific widget as required
yarn add @sharingapples/status-bar
yarn add @sharingapples/bottom-navigation
import StatusBar from '@sharingapples/status-bar';
import BottomNavigation from '@sharingapples/bottom-navigation';
The theme library is not included in the main collection and has to
be installed separately in the app. Also note that the theme
library
should be used as peerDependency in any library it is used.
IMPORTANT
When setting the theme, make sure you do it in the main entry point
index.js
file, and also make sure you load the app after the theme
has been set with require
and not import
. The import
s are hoisted
on to the top by babel and hence, the theme would not have been set.
Using the standard theme library
- Setting the theme in application
import { setTheme, getTheme } from '@sharingapples/theme';
const theme = getTheme();
// Set the theme as per your application
setTheme(Object.assign(theme, { primary: '#ff00ff' }));
// Finally require your main app. It is important that you
// setTheme before the app is required, and Use **require**,
// the **import** will be hoisted to the top by babel and
// all the libraries will get the Theme before it is set.
require('./app');
- Using the colors provided by the theme
import { getTheme } from '@sharingapples/theme';
const theme = getTheme();
const backgroundColor = theme.surface;
const textColor = theme.onSurface;
StatusBar
Display a StatusBar with title, incorporating the native status bar. Support iPhoneX notch.
Usage
import StatusBar from '@sharingapples/status-bar'
// import { StatusBar } from '@sharingapples/widgets'
const Profile = () => (
<View>
<StatusBar title="Profile" backgroundColor="red" light />
<....>
</View>
);
BottomNavigation
Display a bottom navigation bar with specific screen types.
Usage
import BottomNavigation from '@sharingapples/bottom-navigation'
// import { BottomNavigation } from '@sharingapples/widgets';
const App = () => (
<BottomNavigation home={Inbox}>
<BottomNavigation.Item title="Inbox" icon={inbox} screen={Inbox} />
<BottomNavigation.Item title="Profile" icon={profile} screen={Profile} />
</BottomNavigation>
);
Calendar
Display a calendar component with select and multiSelect features, Details
Usage
import React, { useState } from 'react';
import BottomNavigation from '@sharingapples/calendar';
function App() {
const [value, setValue] = useState(new Date());
return (
<Calendar value={value} setValue={setValue} />
)
}
Form
A react hook based form with subscription model. Details.