NativeBase

2020-12-16 hit count image

use NativeBase library for basic component UI.

outline

let’s apply NativeBase which is material ui components to RN project.

library installation

install NativeBase library with below code

npm install native-base --save

after installing, link the library to the project with below code.

over 0.60

cd ios
pod install
cd ..

under 0.59

react-native link native-base

how to use

we only write a blog post if we have used libraries. so we will add contents to here when we use.

if you want to knwo how to use, see official site.

ActionSheet

if you want to use ActionSheet feature, you should wrap root component of the project by NativeBase’s <Root> component.

Functional Components - Root

import React from 'react';
import { Root } from 'native-base';
import { ThemeProvider } from 'styled-components';

import Theme from './Theme';

import Navigator from './Screen/Navigator';

interface Props {}
interface State {}

const App = ({}: Props) => {
  return (
    <Root>
    <ThemeProvider theme={Theme}>
        <Navigator />
    </ThemeProvider>
    </Root>
  );
};

export default App;

Class Components - Root

import * as React from 'react';
import { Root } from 'native-base';
import { ThemeProvider } from 'styled-components';

import Theme from './Theme';

import Navigator from './Screen/Navigator';

interface Props {}
interface State {}

export default class App extends React.Component<Props, State> {
  render() {
    return (
      <Root>
        <ThemeProvider theme={Theme}>
          <Navigator />
        </ThemeProvider>
      </Root>
    );
  }
}

write below code to display ActionSheet.

Functional Components - ActionSheet

...
import { ActionSheet } from 'native-base';
...
    const ActionButtons = ['English', '日本語', '한국어', 'Cancel'];

    const cancelButtonIndex = ActionButtons.length - 1;

    return (
      <Container>
          <Button
            onPress={() =>
              ActionSheet.show(
                {
                  options: ActionButtons,
                  cancelButtonIndex: cancelButtonIndex,
                  destructiveButtonIndex: cancelButtonIndex,
                },
                (buttonIndex: number) => {
                  alert(buttonIndex);
                }
              )
            }>
            Test
          </Button>
      </Container>
    );
};

Class Components - ActionSheet

...
import { ActionSheet } from 'native-base';
...

render() {
    const ActionButtons = ['English', '日本語', '한국어', 'Cancel'];

    const cancelButtonIndex = ActionButtons.length - 1;

    return (
      <Container>
          <Button
            onPress={() =>
              ActionSheet.show(
                {
                  options: ActionButtons,
                  cancelButtonIndex: cancelButtonIndex,
                  destructiveButtonIndex: cancelButtonIndex,
                },
                (buttonIndex: number) => {
                  alert(buttonIndex);
                }
              )
            }>
            Test
          </Button>
      </Container>
    );
}
  • options: this is the button list which can be string type list(string[]) or list includes icons(Array<{ text: string, icon?: string, iconColor?: string }>)
  • cancelButtonIndex: cancel button index.
  • destructiveButtonIndex: delete button index(index of red color text button)
  • title: ActionSheet’s title
  • (buttonIndex: number) => { alert(buttonIndex); }: if button is selected, selected button index is passed.

reference

Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!

Posts