How to create a React native theme?
Create theme.js file
export default { color: { yellow: '#F2BC00', orange: '#F2622E', white: '#FFFFFF', black: '#000000' }, buttonSize: 44, spacing: { container: 16, content: 12 }, headerHeight: 50, font: { main: 'Roboto', alternative: 'Circular Std', bodyWeight: 300, size: 14 }, };
Wrap theme content by styled-components
import theme from 'src/config/theme'; ... <ThemeProvider theme={theme}> {children} </ThemeProvider>
Usage
import { Container } from 'native-base'; ... const StyledContainer = styled(Container)` padding: 40px ${(props) => props.theme.spacing.container}px; `; const LoginScreen = () => { const onLogin = () => {}; return ( <StyledContainer> <Input placeholder="username" leftIcon={{ type: 'ionicon', name: 'md-person' }} /> <Input placeholder="password" secureTextEntry={true} leftIcon={{ type: 'ionicon', name: 'lock-open' }} /> <Button title="Login" onPress={() => onLogin()} /> </StyledContainer> ); }; export default LoginScreen;
A global Toast with callback Button
native-base
How to use Toast?
Wrap <Root> component
import {Root} from 'native-base'; ... return ( <Root> <NavigationContainer> ... </NavigationContainer> </Root> )
Then, you can use it anywhere in your project
Toast.show({ text: 'Wrong password!', buttonText: 'OK', buttonTextStyle: {color: '#000'}, buttonStyle: {backgroundColor: '#fff'}, duration: 0, onClose: () => {}, });
Issue with Toast: When Toast is displayed, tap on an Input field > Keyboard is shown up with Toast > Button can’t be tapped until you edit Input field and tap the button again
How to use Toast with button & callback?
No solution
How to use icon vector?
react-native-elements
import { Icon } from 'react-native-elements'; ... <Icon name="chevron-down" type="ionicon" size={25} color={'gray'} />
native-base
import {Button, Icon} from 'native-base'; ... <Icon style={{ fontSize: 15, color: 'red', marginLeft: -25, marginTop: -18, }} type="FontAwesome" name="circle" />
A dropdown menu displayed from a float icon
react-native-paper
How to create drop down menu?
How to customize menu item?
No solution
A button with shadow
CSS
box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.06); &:hover { background-color: #dadada; border-color: #d8d8d8; }
React Native
// iOS shadowColor: 'rgba(0, 0, 0, 0.4)', shadowOffset: { width: 3, height: 3 }, shadowRadius: 1, shadowOpacity: 0.4 // Android elevation: 4
style-components
// iOS, react-native-web shadow-color: rgba(0, 0, 0, 0.4); shadow-opacity: 0.4; shadow-radius: 1; shadow-offset: 3px 3px; // Android elevation: 4
Shadow in Android
Border
React Native
borderBottomLeftRadius: number borderBottomRightRadius: number borderTopLeftRadius: number borderTopRightRadius: number
style-components
border-bottom-left-radius: number border-bottom-right-radius: number border-top-left-radius: number border-top-right-radius: number
Position: “absolute” or “fixed”
css
- absolute: Element is fixed in a position inside parent element
- fixed: Element is fixed in a position inside the screen
Ref: css-to-react-native
Text decoration
- fontSize, fontWeight
- lineHeight
- textAlign
Leave a Reply