react-native-gin-boilerplate v0.1.69
react-native-gin-boilerplate
Boilerplate for React Native
Installation
Step 1: Install RN Device Info, FastImage libs
These libs use native lib so that you have to install it.
yarn add react-native-svg
yarn add react-native-modal
yarn add react-native-fast-image
yarn add react-native-device info
yarn add @react-navigation/native
yarn add react-native-toast-message
yarn add react-native-safe-area-context
yarn add react-native-date-picker
Step 2: Install Boilerplate
yarn add react-native-gin-boilerplate
Usage
I. Modal Component
If you want to use openLoading, closeLoading functions. You must add these lines to root file.
import { Loading, loadingRef } from 'react-native-gin-boilerplate';
<Loading ref={loadingRef} />
Like Loading, you alse import and add AlertModal and GlobalModal to use openAlert, closeAlert, openGlobalModal, closeGlobalModal.
import { AlertModal, alertModalRef, globalModalRef, GlobalModal } from 'react-native-gin-boilerplate';
<AlertModal ref={alertModalRef}/>
<GlobalModal ref={globalModalRef}/>
II. Themes
To apply theme for the whole component, you must create new file and name it is: colors.ts Its format is:
const colors = {
light: {
mainBackground: '#ffffff',
headerBorder: '#B2B2B2',
headerBackground: '#FFFFFF',
headerTintColor: '#f8f8f8',
headerTitleColor: '#000000',
backgroundColor: '#f8f8f8',
borderColor: '#D6DEDF',
defaultText: '#231f20',
activeColor: '#1abfd1',
disabledButton: '#B3B3B3',
primaryColor: '#1fc7d4',
infoColor: '#1d74f5',
dangerColor: '#B43236',
warningColor: '#ffbb00',
successColor: '#0F6A4B',
buttonText: '#ffffff',
separatorBackground: '#DFDFDF',
menuText: '#4D4849',
inputActiveBorder: '#21929E',
inputInactiveBorder: '#D2D1D1',
inputHasValue: '#181414',
noDataText: '#697479',
},
dark: {
inputHasValue: '#181414',
inputActiveBorder: '#21929E',
inputInactiveBorder: '#D2D1D1',
menuText: '#4D4849',
mainBackground: '#ffffff',
separatorBackground: '#DFDFDF',
headerBorder: '#B2B2B2',
headerBackground: '#FFFFFF',
headerTintColor: '#f8f8f8',
headerTitleColor: '#000000',
backgroundColor: '#f8f8f8',
borderColor: '#D6DEDF',
defaultText: '#231f20',
activeColor: '#1abfd1',
disabledButton: '#B3B3B3',
primaryColor: '#1fc7d4',
infoColor: '#1d74f5',
dangerColor: '#f5455c',
warningColor: '#ffbb00',
successColor: '#0F6A4B',
buttonText: '#ffffff',
noDataText: '#697479',
},
};
After that, you need add these lines to the root file:
// import your colors file that you defined before.
import {TSupportedThemes, IThemeContextProps, ThemeContext} from 'react-native-gin-boilerplate';
const [theme, setTheme] = useState<TSupportedThemes>('light');
const value: IThemeContextProps = {
colors: colors[theme],
theme: theme
}
<ThemeContext.Provider value={value}>
// Your components
</ThemeContext.Provider>
III. Hooks
useBackHardware
useChangeStatusBar
useCountdown
useCountNumberDown
useGetList
useNavBeforeRemove
IV. HOC
withKeyboardAvoidingView
withPopup
V. Components
atoms: Button, Picker, Text, AutoImage, EmptyComponent, NoData, RefreshControl, Separator, StatusBar
molecules: Loading, Modal
organims: FlexView, RowContainer, ViewCondition
VI. Utils
General Utils such as: UDevice, UDimension, UMessage, UNavigation, UTextStyle, UTheme
General methods such as: Logger, mAnimated, mDate
VII. Config
NavConfig
StackAnimation
StackConfig
Storage
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
Made with create-react-native-library
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
12 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago