Contents
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
Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!