NativeBase

2019-05-03

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.

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.

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.

...
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

Buy me a coffeeBuy me a coffee
Posts