React Native アプリケーション用の統合 UI コンポーネントライブラリとツールセット

npm install react-native-ui-lib

// FoundationConfig.js
import {Colors, Typography, Spacings} from 'react-native-ui-lib';

Colors.loadColors({
  primaryColor: '#2364AA',
  secondaryColor: '#81C3D7',
  textColor: '##221D23',
  errorColor: '#E63B2E',
  successColor: '#ADC76F',
  warnColor: '##FF963C'
});

Typography.loadTypographies({
  heading: {fontSize: 36, fontWeight: '600'},
  subheading: {fontSize: 28, fontWeight: '500'},
  body: {fontSize: 18, fontWeight: '400'}
});

Spacings.loadSpacings({
  page: 20,
  card: 12,
  gridGutter: 16
});

// ComponentsConfig.js
import {ThemeManager} from 'react-native-ui-lib';

ThemeManager.setComponentTheme('Card', {
  borderRadius: 8
});

ThemeManager.setComponentTheme('Button', (props, context) => {
  if (props.square) {
    return { borderRadius: 0 };
  }
});

// MyScreen.js
import React, {Component} from 'react';
import {View, Text, Card, Button} from 'react-native-ui-lib';

class MyScreen extends Component {
  render() {
    return (
      <View flex padding-page>
        <Text heading marginB-s4>
          My Screen
        </Text>
        <Card height={100} center padding-card marginB-s4>
          <Text body>This is an example card </Text>
        </Card>
        <Button label="Button" body bg-primaryColor square></Button>
      </View>
    );
  }
}