React Native – UI/ UX (1)

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

react-native-shadow

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