项目作者: Kieran-McIntyre

项目描述 :
An opinionated React Native UI component library
高级语言: TypeScript
项目地址: git://github.com/Kieran-McIntyre/react-native-uix.git
创建时间: 2020-09-08T18:01:58Z
项目社区:https://github.com/Kieran-McIntyre/react-native-uix

开源协议:MIT License

下载


react-native-uix

react-native-uix is an opinionated React Native UI component library that gets you up and running in minutes.

package_name

Features

  • Library of iOS-Style UI Components
  • Supports both iOS and Android platforms
  • Supports Dark Mode out-of-the-box
  • Full custom theme support
  • TypeScript support

📥 Installation

Using npm:

  1. npm install react-native-uix

or with yarn:

  1. yarn add react-native-uix

Requirements

This project has several project peer dependencies. A few of these include:

Refer to the project package.json file to view all required peer dependencies.

Quick Installation

To install all of these peer dependencies quickly, from the terminal in your project directory run the shell script:

  1. bash node_modules/react-native-uix/install.sh

This will install the peer dependencies after choosing your desired package manager.

🔨 Usage

The best way to see react-native-uix in-action, is to take a look at the example!

  1. import { ThemeProvider, useStyle, LayoutTopLevelScreen, GroupedTable } from "react-native-uix";
  2. function HomeScreen() {
  3. const { themeSet } = useStyle();
  4. const tableItems = [
  5. {
  6. id: 0,
  7. label: "Hotels",
  8. count: 2,
  9. iconBackgroundColor: themeSet.red,
  10. icon: faBuilding,
  11. onPress: () => {},
  12. },
  13. {
  14. id: 1,
  15. label: "Restaraunts",
  16. count: 2,
  17. iconBackgroundColor: themeSet.teal,
  18. icon: faUtensils,
  19. onPress: () => {},
  20. },
  21. {
  22. id: 2,
  23. label: "Universities",
  24. count: 3,
  25. iconBackgroundColor: themeSet.yellow,
  26. icon: faUniversity,
  27. onPress: () => {},
  28. },
  29. ];
  30. return (
  31. <LayoutTopLevelScreen title="Home" navigation={navigation}>
  32. <GroupedTable title="Places" items={tableItems} ></GroupedTable>
  33. </LayoutTopLevelScreen>
  34. );
  35. }
  36. function App() {
  37. const HomeStack = createStackNavigator();
  38. return (
  39. <ThemeProvider>
  40. <HomeStack.Navigator>
  41. <HomeStack.Screen name="Home" component={HomeScreen} ></HomeStack.Screen>
  42. </HomeStack.Navigator>
  43. </ThemeProvider>
  44. );
  45. }

🎨 Custom Styling

Customising the theme of your app can be achieved using the ThemeProvider component. You can determine the colours for both light and dark mode.

Light Dark
light theme dark theme

ThemeProvider component

Usage

  1. import { ThemeProvide } from "react-native-uix";
  2. const App: React.FC = () => {
  3. const theme = {
  4. light: {
  5. textPrimary: "#345000",
  6. tint: "#2188ff",
  7. systemBackground: "#ff0000"
  8. },
  9. dark: {
  10. textPrimary: "#345088",
  11. tint: "#388bfd",
  12. systemBackground: "#ff0055"
  13. },
  14. };
  15. return (
  16. <ThemeProvider theme={theme}>
  17. <AppNavigation ></AppNavigation>
  18. </ThemeProvider>
  19. );
  20. };

You can customise any of the colors below for your theme. If a color is not provided, the corresponding color in the DEFAULT_THEME is used.

  1. tint,
  2. textPrimary,
  3. textSecondary
  4. textTertiary,
  5. textQuarternary,
  6. systemBackground,
  7. secondarySystemBackground,
  8. tertiarySystemBackground,
  9. separator,
  10. blue,
  11. green,
  12. indigo,
  13. orange,
  14. pink,
  15. purple,
  16. red,
  17. teal,
  18. yellow,
  19. white,

useStyle hook

If you are making your own custom components and would like to make use of your custom theme, whilst supporting dark mode, this is where the useStyle hook becomes useful.

Usage

  1. import { useStyle } from "react-native-uix";
  2. const MyComponent = () => {
  3. const dynamicStyles = (theme) => {
  4. return {
  5. container: {
  6. width: 20,
  7. height: 20,
  8. backgroundColor: theme.systemBackground,
  9. }
  10. }
  11. }
  12. const { styles } = useStyle(dynamicStyles);
  13. return (
  14. <View style={styles.container} ></View>
  15. );
  16. };
  17. }

Roadmap

  • Documentation for individual components
  • JSON form component

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT