Easier & Faster Develop Your React Native (Expo) App (Android, iOS & Web)
All styles of fast base are responsive and it uses react-natvie-full-responsive to achieve responsive UI.
As mentioned before fast base supports both dark and light mode and you are able to extend your theme for both or one of them. In this section you capable of to see how you can extend the theme.
Default theme colors were picked as you can see in the following but as mentioned above you are able to overwrite them:
const Theme: ThemeProps = {
DefaultTheme: {
colors: {
text: '#000000',
flat: '#ECF0F1',
border: '#DDDDDD',
surface: '#FFFFFE',
disabled: '#E0E0DB',
background: '#F7F9F9',
secondText: '#626567',
},
},
DarkTheme: {
colors: {
text: '#ffffff',
flat: '#282828',
border: '#565656',
surface: '#181818',
disabled: '#3E3E3E',
secondText: '#B3B3B3',
background: '#121212',
},
},
};Also, it offers you a collection of colors so you can easily use that like this (inspired Tailwindcss colors):
If you want to see all available colors click here
At first should Wrap your app in the provider in the root of your application (App.tsx or App.jsx) to access the theme config in other components of all of your app, like:
...
export default function App() {
return (
<FastBaseProvider>
{
//Children
}
</FastBaseProvider>
);
}Type: "light" | "dark"
Default: Based on your device mode will be set.
Description: To set the current application theme mode.
Type: "ltr" | "rtl"
Default: ltr
Description: To set the current application layout direction globally.
Type: boolean
Default: true
At default, if your phone's dark mode is enabled, the theme will change to dark mode. You are able to set this property as false to avoid enabling system mode and the theme will be handled manually.
Type: ThemeProps<T>
Default: extendTheme()
You are able to extend your theme or override default theme colors etc:
import * as React from 'react';
import {
Button,
useTheme,
Container,
extendTheme,
FastBaseProvider,
} from '@fast-base/native';
const theme = 'light';
type MyThemeProps = {
button: {
style: object;
};
colors: {
royal: string;
};
//...
};
const MyTheme = extendTheme<MyThemeProps>({
DefaultTheme: {
button: {
style: {
backgroundColor: 'green',
},
},
colors: {
//override default color
background: '#f9f9f9',
//or extend
royal: 'white',
///...
},
},
DarkTheme: {
button: {
style: {
backgroundColor: 'orange',
},
},
colors: {
//override default color
background: '#222222',
//or extend
royal: 'black',
///...
},
},
});
const MyComponent: React.FC = () => {
const {colors, button} = useTheme<MyThemeProps>();
return (
<Container background={colors.background} p={10}>
<Button
title="Press Me!"
style={button.style}
titleColor={colors.royal}
/>
</Container>
);
};
export default function App() {
return (
<FastBaseProvider theme={MyTheme} mode={theme}>
<MyComponent />
</FastBaseProvider>
);
}As you see in the example you are able to easily access your theme config by useTheme hooks (if you are using class components check out withTheme section)
...
const {colors, changeMode, mode, defaultColors} = useTheme<MyThemeProps>();
...MyThemeProps is just an example of the custom theme type that you use in extendTheme, if you didn't extend the theme the type is not needed anymore.
Also, you can change theme mode manually by changeMode method that needs two arguments, the first is required to specify the theme mode and the second argument is the callback function after the theme is changed which is optional (You are able to execute your callback function after the theme mode is changed, such as changing the Android navigation bar color, status bar color, etc.)
changeMode('dark' | 'light', newTheme => {
//do something...
});
//or
changeMode('dark' | 'light', async newTheme => {
//await do something...
});Flexible and customizable components to implement your layouts as default will not add unnecessary style to the styles and unused styles will be removed. The component was extended from React Native View component so you are able to use all of the View component properties too.
Type: "ltr" | "rtl"
Default: ltr
To set the current component layout direction locally, it has a higher priority against the global direction. Additionally, when using dir locally in the Wrapper, its children will inherit the direction and won't need to specify dir themselves.
Type: 'normal' | 'column' | 'column-reverse' | 'row' | 'row-reverse'
Default: normal
To specify component flex direction
Type: number
The responsive width size using passed width percentage.
Type: number
The responsive height size using passed height percentage.
Type: boolean | number
You are able to set a boolean or number value for this property, if the value of the flex property is 'true', flex will consider '1', and if you pass a number, a numeric value will be considered for the flex value.
Type: AllColorsType | string
To specify the component background color
Type: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'
To specify the component align items
Type: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'
To specify the component justify content
Type: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'
To specify the component align self
Type: number
Default: 0
To add padding to the component, the properties are used as an abbreviation, like (padding: p, paddingTop: pt,....)
Type: number
Default: 0
To add margin to the component, the properties are used as an abbreviation, like (margin: m, marginTop: mt,....)
Would you like to learn more about Wrapper usage, see the example
The Container component was implemented by SafeAreaView in react-native-safe-area-context to create a full-screen layout to put other components on a screen inside it, so you are able to use all properties of the component. In additional:
Type: "ltr" | "rtl"
Default: ltr
To set the current component layout direction locally, it has a higher priority against the global direction. Additionally, when using dir locally in the Container, its children will inherit the direction and won't need to specify dir themselves.
Type: AllColorsType | string
To specify the component background color
Type: number
Default: 0
To add padding to the component, the properties are used as an abbreviation, like (padding: p, paddingTop: pt,....)
Type: number
Default: 0
To add margin to the component, the properties are used as an abbreviation, like (margin: m, marginTop: mt,....)
Would you like to learn more about Container usage, see the example
Text component extended from React Native Text so you capable of to use all the component props in the Text component, in additional:
Type: "ltr" | "rtl"
Default: ltr
To set the current component layout direction locally, it has a higher priority against the global direction.
Type: number | xs | sm | md | lg | xl | 2xl | 3xl | 4xl | 5xl | 6xl | 7xl | 8xl | 9xl | 10xl
Default: md
To specify the component font size
Type: AllColorsType | string
Default: colors.text
Text component extended from React Native Text, you are capable of using all the component props in the Text component. In additional:
Type: 'auto' | 'left' | 'right' | 'center' | 'justify'
To specify the component text align
Type: number
To specify the component line height
Type: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
To specify the component font weight
Type: T | string
To specify the component font family, you are capable of using your type as generic in the text component. In typescript, the Text component allows you to use custom fonts that you added to your project, only need to wrap your type inside it like the below example you can create a custom component on top of the text component and easier use font property:
...
<Text<'MyFont1' | 'MyFont2'> {...props}>
Awesome Text!
</Text>
...Would you like to learn more about Text usage, see the example
The Button component was extended from React Native Pressable component so you are able to use all of the component properties and also it helps you create attractive customizable opacity and pressable buttons with title or custom children.
Type: "ltr" | "rtl"
Default: ltr
To set the current component layout direction locally, it has a higher priority against the global direction. Additionally, when using dir locally in the Button and it has children, the children will inherit the direction and won't need to specify dir themselves.
Type: string | ReactNode
Type: boolean
Default: false
To specify does the button component is pressable or not
Type: boolean | number
Default: false
To specify does the button component is an opacity or not, if the property is true, the default opacity value will be 0.5.
Type: 'primary' | 'secondary' | 'success' | 'warning' | 'error'
To specify the component type. As default, if the button has title or string children the property will be primary.
Type: 'solid' | 'outline' | 'transparent'
To specify the button style mode.
Type: xs | sm | md | lg | xl
To specify the button size. if the button has title or string children the property will be md.
Type: boolean
To enable activity indicator.
Type: AllColorsType | string
Type: ActivityIndicatorProps
All available properties in the ActivityIndicator component
Type: string
Type: AllColorsType | string
To specify the button color
Type: TextStyle
Type: AllColorsType | string
To specify the button title color
Type: TextProps
All available properties in the Text component
Type: number | xs | sm | md | lg | xl
Default: xs
To specify the component border radius
Type: boolean | 'low' | 'medium' | 'high'
To specify the component shadow, Please consider shadow only works on the solid mode. Also if the shadow property is true the low shadow will assign.
Type: AllColorsType | string
Type: AllColorsType | string
Type: TextStyle
Type: AllColorsType | string
To specify the button border color
Type: UseAnimationConfig
To specify the button pressable pressIn and pressOut custom animation config.
Type: Pick<UseAnimationConfig, 'pressIn'>
To specify the button opacity pressIn custom animation config.
Would you like to learn more about Button usage, see the example
Another component that is commonly used in applications is text input. The Input component is designed to create customizable text input. The Input component has two separate sub-components: Outline and Underline. Both of these sub-components have almost the same properties, which we will become familiar with.
Type: "ltr" | "rtl"
Default: ltr
To set the current component layout direction locally, it has a higher priority against the global direction.
Type: boolean
Default: false
To disable text input completely and change style to disabled mode
Type: boolean
Default: false
With the property, text input is no longer editable and is just readable
Type: boolean
Default: false
With the property, the text input style will change to invalid mode
Type: boolean
Default: false
To specify that the component content is a password
Type: xs | sm | md | lg | xl
Default: md
To specify the component size
Type: AllColorsType | string
Default: md
To specify the component background color
Type: boolean
Default: true
To specify the component animations use native driver or JS bridge
Type: TextStyle
To specify custom styles for the text input
Type: string | ReactNode
Type: TextStyle
Type: string | ReactNode
Only works when the invalid property is enabled
Type: TextStyle
Type: string | ReactNode
To specify in particular hints to the user such as about what the text input content should be
Type: TextStyle
Type: ReactNode
To specify the custom left element on the text input
Type: ReactNode
To specify the custom right element on the text input
Type: WrapperProps
To specify the custom right element on the text input
Type: WrapperProps
To specify the custom right element on the text input
Type: ViewStyle
Only works when the invalid property is enabled and the text input is unfocused
Type: number
Default: 1.5
Type: AllColorsType | string
Default: colors.border
Type: AllColorsType | string
Default: primary
Type: ViewStyle
Parent container of the text input, recommend using for custom styles like padding or margin.
Type: number | xs | sm | md | lg | xl | full
Default: xs
To specify the component border radius
Type: boolean
Default: true
In order to show/hide the border animatedly when focused and on blurred.
Type: number
Default: 250ms
The border scale animation duration when input focused, only works when the animatable property is enabled.
Type: number
Default: 200ms
The border scale animation duration when input is blurred, only works when the animatable property is enabled.
All availibe methods in React Native TextInput when you define ref, in additional:
Default: 600ms
To shake animate text input (e.g. when invalid data in input is submitted)
Default: 600ms
To bounce animate text input (e.g. when invalid data in input is submitted)
Would you like to learn more about Input usage, see the example
One of the other components used in almost all applications is Image, This component is extended from React Native Image component so you are able to use all of the component properties. In additional:
Type: "ltr" | "rtl"
Default: ltr
To set the current component layout direction locally, it has a higher priority against the global direction.
Type: xs | sm | md | lg | xl | 2xl
Default: md
Should use only one of the size property or width and height properties
Type: number
With using width or height, the size property will useless
Type: number
With using width or height, the size property will useless
Type: number | xs | sm | md | lg | xl | 2xl | full
To specify the component border radius
Type: number | xs | sm | md | lg | xl | 2xl | full
To disable default React Native image caching, it works only when you use URI to specify the image source
Type: string | number | 16/9 | 4/3 | 1/1 | 2/3 | 9/16 | 3/2 | 5/3
Type: boolean
Default: false
To specify showing skeletion loading when image is loading
Type: AllColorsType | string
Would you like to learn more about Image usage, see the example
This component will help you make vertical or horizontal space between your elements as padding or border.
Type: "ltr" | "rtl"
Default: ltr
To set the current component layout direction locally, it has a higher priority against the global direction.
Type: vertical | horizontal
Default: vertical
Type: padding | border
Default: border
Type: padding | border
Default: border
The border width of the divider, in the padding, will be considered as space.
Type: AllColorsType | string
Default: colors.border
To specify border color in the border mode
Type: ViewStyle
This component will help you to make vertical or horizontal space between all elements put on it as children
Type: H | V
Default: V
The direction of applying space gap, "H" means horizontal, and "V" means vertical
Type: number | xs | sm | md | lg | xl
Default: xs
The space value between each items
Type: boolean
Default: false
To reverse children's items priority
Type: style | divider
Default: divider
The behavior could be style or element:
- Style: will add margin style to your element based on the current mode (Please consider style only add to element if the children elements could accept style, such as View, Text, Image, etc.)
- Divider: will add a divider component between your children's elements based on the current mode
Type: DividerProps
Only works when the behavior is "divider"
Would you like to learn more about Gap usage, see the example
This component will help when you want to show a progress bar such as download/upload or loading indicator with progress or whatever you want.
Type: "ltr" | "rtl"
Default: ltr
To set the current component layout direction locally, it has a higher priority against the global direction.
Type: number
The progress bar value, should be between 0 to 100
Type: number
Type: number | xs | sm | md | lg | xl
Default: md
Type: AllColorsType | string
Default: colors.flat
Type: AllColorsType | string
Default: primary
Type: ViewStyle
To specify the component container style
Type: boolean
Default: true
To specify the component animations use native driver or JS bridge
Would you like to learn more about ProgressBar usage, see the example
As you see above you can easily access the theme config like color etc. by useTheme hooks, but if you are using a class-based component for implementation, only need to wrap your component in withTheme HOC and will access the config as props in the component.
...
class MyComponent extends React.Component {
//component content
}
export default withTheme(MyComponent);
...Sometimes you need to use multiple ref for a single component since you probably know React doesn't support multiple ref, you can merge them and then use it
...
const allRefs = mergeRefs([ref1, ref2, ...])
...In V2, some unnecessary components were removed. Additionally, the Icon component from version V1 was removed because it was being used from react-native-vector-icons, which does not support Expo by default. One of the most important goals of Fast Base is to be completely compatible with both bare React Native and Expo.
Icons have been developed as an independent project. If you need modern and customizable icons, please see here.