React Native Basic Plus

Make it easy to use Text and View on React Native, and support Dark Mode.

Installation

yarn add react-native-basic-plus

Usage

1import React from 'react';
2import {
3  ThemeStateProvider,
4  Container,
5  Text
6} from 'react-native-basic-plus';
7
8const App = () => {
9  return (
10    <ThemeStateProvider>
11      <Example />
12    </ThemeStateProvider>
13  );
14};
15
16const Example = () => { return (
17    <Container>
18      <Text largeTitle semibold customColor={{light: '#000', dark: '#fff'}}>LargeTitle 巨大的标题加粗</Text>
19      <Text size={30} textColor1 bold>Title1 标题测试</Text>
20      <Text size={24} textColor2 medium>Title2 标题测试</Text>
21      <Text size={20} textColor3>Title3 标题测试</Text>
22    </Container>
23  )
24}
25
26
27export default App;
28

Components

Container

Text

Hooks

useTheme

1import React, { useMemo } from 'react';
2import { useTheme } from 'react-native-basic-plus';
3
4function Component() {
5    const { textColors, bgColors, othersColor, isDarkMode, theme } = useTheme();
6
7    // do something theme style code
8    const containerStyle = useMemo(() => ({
9      backgroundColor: bgColors.bgColor1[theme]
10    }), [theme])
11
12    return (
13        <View style={containerStyle}>
14          ...
15        <View/>
16    )
17}

Custom Colors

1
2import { ThemeStateProvider } from 'react-native-basic-plus';
3
4function Component() {
5    const textColors: TextColorProps = { ... }
6    const bgColors: BgColorProps = { ... }
7    const othersColor: OthersColorProps = { ... }
8
9    return (
10        <ThemeStateProvider
11          textColors={textColors}
12          bgColors={bgColors}
13          othersColor={othersColor}>
14          ...
15        </ThemeStateProvider>
16    )
17}

To Do

• basic use.
• add more props and components.

Author

• alone

License

MIT