React-native-basic-plus NPM

Installation

yarn add react-native-basic-plus

Usage

import React from 'react';
import {
  ThemeStateProvider,
  Container,
  Text
} from 'react-native-basic-plus';

const App = () => {
  return (
    <ThemeStateProvider>
      <Example />
    </ThemeStateProvider>
  );
};

const Example = () => { return (
    <Container>
      <Text largeTitle semibold customColor={{light: '#000', dark: '#fff'}}>LargeTitle 巨大的标题加粗</Text>
      <Text size={30} textColor1 bold>Title1 标题测试</Text>
      <Text size={24} textColor2 medium>Title2 标题测试</Text>
      <Text size={20} textColor3>Title3 标题测试</Text>
    </Container>
  )
}


export default App;

Components

`Container`

name	description	required	type
customColor	custom backgroundColor	false	string

`Text`

name	description	required	type
color	custom backgroundColor	false	string
size	fontSize	false	number
textColor1	font color	false	boolean
textColor2	font color	false	boolean
textColor3	font color	false	boolean
textColor4	font color	false	boolean

Hooks

`useTheme`

import React, { useMemo } from 'react';
import { useTheme } from 'react-native-basic-plus';

function Component() {
    const { textColors, bgColors, othersColor, isDarkMode, theme } = useTheme();

    // do something theme style code
    const containerStyle = useMemo(() => ({
      backgroundColor: bgColors.bgColor1[theme]
    }), [theme])

    return (
        <View style={containerStyle}>
          ...
        <View/>
    )
}

Custom Colors

import { ThemeStateProvider } from 'react-native-basic-plus';

function Component() {
    const textColors: TextColorProps = { ... }
    const bgColors: BgColorProps = { ... }
    const othersColor: OthersColorProps = { ... }

    return (
        <ThemeStateProvider
          textColors={textColors}
          bgColors={bgColors}
          othersColor={othersColor}>
          ...
        </ThemeStateProvider>
    )
}