Easier and faster developing your React native apps
If you use yarn:
yarn add react-native-fast-base
Or by npm:
npm install react-native-fast-base
If your npm version is < 5 add --save to end of npm command
It's the package help you faster developing your app. For example with added this package to your project you don't need to View anymore , you are able to use Wrapper. With features that help you easier doing developing . (Wrapper extened of View).Also it's provide ThemeProvider for handling theme mode , by the following this instrucations , you can explore more informations about it!
This package provide ThemeProvider for handling light/dark mode your app , example in functional programming:
import { ThemeProvider } from 'react-native-fast-base';
const App = ()=> {
const isDarkMode = false;
return (
<ThemeProvider darkMode={isDarkMode}>
{
//...
}
</ThemeProvider>
);
};
You are able to put isDarkMode on your state management , The default theme is:
const Theme = {
DefaultTheme: {
darkmode: false,
colors: {
background: '#ECF0F1',
secondText: '#626567',
surface: '#E5E7E9',
flat: '#F2F3F4',
text: '#000000',
},
},
DarkTheme: {
darkmode: true,
colors: {
background: '#121212',
secondText: '#B3B3B3',
surface: '#181818',
flat: '#282828',
text: '#FFFFFF',
},
},
};
Also you can define custom colors , button , text and etc and accessing that to anywhere , you only must set theme on the ThemeProvider and in another Components you are able to use that by useTheme:
//...
import {
ThemeProvider,
Theme
} from 'react-native-fast-base';
const MyCustomTheme: ThemeProps = {
DefaultTheme: {
...Theme.DefaultTheme,
colors: {
...Theme.DarkTheme.colors,
//my colors
},
button: {
//...
},
//...
},
DarkTheme: {
...Theme.DarkTheme,
colors: {
...Theme.DarkTheme.colors,
//my colors
},
button: {
//...
},
//...
}
}
const App = ()=> {
const isDarkMode = true;
return (
<ThemeProvider theme={MyCustomTheme} darkMode={isDarkMode}>
{
//...
}
</ThemeProvider>
);
};
export default App;
If you are using class Component , for accessing theme as props , first you must connect each theme and Components by withTheme. if you haven't custom theme just pass your Component to that and in the another Components you are able to access to your the by this.props.theme , also if you have use functional Components beside class Components , you must set your custom theme in the ThemeProvider:
//...
import {
ThemeProvider,
Theme,
withTheme
} from 'react-native-fast-base';
const MyCustomTheme: ThemeProps = {
DefaultTheme: {
...Theme.DefaultTheme,
colors: {
...Theme.DarkTheme.colors,
//my colors
},
button: {
//...
},
//...
},
DarkTheme: {
...Theme.DarkTheme,
colors: {
...Theme.DarkTheme.colors,
//my colors
},
button: {
//...
},
//...
}
}
class App extends React.Component {
render() {
const isDarkMode = true;
return (
<ThemeProvider darkMode={isDarkMode}>
{
//...
}
</ThemeProvider>
);
}
}
export default withTheme(App, MyCustomTheme);
By the default if the phone was be dark mode , your app theme will change to dark mode , if you don't want to this happened it, add ignorePhoneMode={true} to the ThemeProvider.
It's a flexible Component that with having common property can help you doing easeir create your Component and save your time!
Name | Type | Discription |
---|---|---|
flex | boolean | if it's be true will added flex:1 , default is false |
mode | string | it's specifies the direction , by the default is normal and you can specifies direction one of the row , row-reverse , column , column-reverse |
alignX | string | alignItems: string |
alignY | string | justifyContent: string |
spaceY | number | paddingVertical: number |
spaceX | number | paddingHorizontal: number |
spaceEnd | number | paddingEnd: number |
spaceStart | number | paddingStart: number |
spaceTop | number | paddingTop: number |
spaceBottom | number | paddingBottom: number |
And all View props.
//...
import { Wrapper } from 'react-native-fast-base';
//...
<Wrapper>
{
//children
}
</Wrapper>
//...
Container fill the screen and default background of that is colors.background
and the background of that depends on your theme mode. It's was extended of Wrapper.
//...
import { Container } from 'react-native-fast-base';
//...
<Container>
{
//children
}
</Container>
//...
Content was extneded of react-native-keyboard-aware-scroll-view , you can see the props of that on the page repo.
//...
import {
Container,
Content
} from 'react-native-fast-base';
//...
<Container>
<Content>
{
//children
}
<Content/>
</Container>
//...
Icon in react-native-fast-base it's very help to you to easier usage of the Icons , this packgae support all Icons in react-native-vector-icons. Also you don't need parent view or wrapper for that you can use of all Wrapper props for controlling that , for example:
//...
import { Icon } from 'react-native-fast-base';
//...
<Icon
alignX="center"
alignY="center"
name="user"
type="AntDesign"
size={2}/>
//...
It should be noted all Icons and Text font size are responsive by react-native-responsive-dimensions. The number is not default react native font size , you can find more information about it on the page repo.
Name | Type | Discription |
---|---|---|
font | string | fontFamily: string |
size | number | fontSize: responsiveFontSize(number) , default is 1.5 |
color | string | color of text , default is colors.text in the your theme. Depends on the theme mode will change. |
alignX | string | textAlign: string , default is auto |
lineHeight | number | lineHeight between lines |
And all react native Text props.
//...
import { Header } from 'react-native-fast-base';
//...
<Header>
{
//children
}
</Header>
//...
Name | Type | Discription |
---|---|---|
height | number | height: number |
transparent | boolean | default is false |
And all Wrapper props.
//...
import { Divider } from 'react-native-fast-base';
//...
<Divider>
{
//children
}
</Divider>
//...
Name | Type | Discription |
---|---|---|
mode | border or padding | default is border |
width | number | borderWidth: number |
spaceY | number | paddingVertical: number |
spaceTop | number | paddingTop: number |
spaceBottom | number | paddingBottom: number |
Because usually these items use together, we explain together:
//...
import {
Wrapper,
Left,
Center,
Right
} from 'react-native-fast-base';
//...
<Wrapper mode="row">
<Left>
{
//children
}
</Left>
<Center>
{
//children
}
</Center>
<Right>
{
//children
}
</Right>
</Wrapper>
//...
All Left , Center and Right have Wrapper props.
Sometimes you want to separate two elements that was seated together in the line , by this Component you are able to create space or separate them by your custom symbols (default symbol in the custom mode is .
):
//...
import {
Wrapper,
Spacer
} from 'react-native-fast-base';
//...
<Wrapper mode="row">
{
//An element
}
<Spacer/>
<Spacer mode="custom"/>
<Spacer mode="custom" customSymbol={'$'}/>
{
//Another element
}
</Wrapper>
//...
The Touchable button is TouchableNativeFeedback for android platform (version > 21) and TouchableHighlight for ios platform , you can see the props of each that from offcial react native website