react-native-basic-plus

Make it easy to write Text and View on React Native.

Usage no npm install needed!

<script type="module">
  import reactNativeBasicPlus from 'https://cdn.skypack.dev/react-native-basic-plus';
</script>

README

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

Basic Use 
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>
    )
}

To Do

  • basic use.
  • add more props and components.

Author

License

MIT