Contents

1. outline
2. library installation
   • over 0.60
   • under 0.59
3. how to use
4. ActionSheet
   • Functional Components - Root
   • Class Components - Root
   • Functional Components - ActionSheet
   • Class Components - ActionSheet
5. reference

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.

• official site: NativeBase

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

• official site: NativeBase

Github Sponsor Buy me a coffee

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