1.0.35 • Published 2 years ago
@nimbusforwork/nimbus-ui v1.0.35
Nimbus Kiosk
UI components for React Native and React Native Web, built with Typescript Documentation: https://nimbus-ui.netlify.com/
Expo App
Import theme and custom Font
import * as Font from 'expo-font'
import { ThemeProvider } from 'styled-components/native'
import { theme, FontFamily } from '@nimbusforwork/nimbus-ui'
...
const initFont = async () => {
await Font.loadAsync({
body_bold: FontFamily.FontInterBold,
body_base: FontFamily.FontInterRegular,
body_medium: FontFamily.FontInterMedium
})
}
render() {
return (
<ThemeProvider theme={theme}>
{!loading && <AppContainer />}
</ThemeProvider>
)
}
...
Web App with NextJS
.babelrc
{
"presets": ["next/babel"],
"plugins": [["react-native-web", { "commonjs": true }]]
}
app.json
{
"name": "with-react-native-web",
"displayName": "with-react-native-web"
}
next.config.js
const path = require('path')
const withTM = require('next-transpile-modules')
const withFonts = require('next-fonts')
const withCSS = require('@zeit/next-css')
const nextConf = {
env: {
API_PATH: process.env.API_PATH,
API_KEY: process.env.API_KEY
},
transpileModules: ['react-native', 'styled-components', 'styled-components/native', '@nimbusforwork/nimbus-ui'],
webpack: config => {
config.module.rules.push({
test: /\.ttf$/,
loader: 'url-loader',
include: path.resolve(__dirname, 'node_modules/react-native-vector-icons')
})
config.module.rules.push({
test: /\.svg$/,
use: ['@svgr/webpack']
})
return {
...config,
resolve: {
...config.resolve,
extensions: [
'.web.ts',
'.web.tsx',
'.ts',
'.tsx',
'.web.js',
'.web.jsx',
'.js',
'.jsx',
...config.resolve.extensions
],
alias: {
...config.resolve.alias,
'react-native$': 'react-native-web'
}
}
}
},
cssModules: true
}
module.exports = withTM(withFonts(withCSS(nextConf)))
Default fontFamily in nimbus-ui theme
theme.fontFamily = 'body'
fonts type
body_base: Inter-Regular
body_bold: Inter-Bold
body_medium: Inter-Medium
Custom fonts
@font-face {
font-family: 'body_base';
src: url('./fonts/Inter-Regular.ttf');
}
@font-face {
font-family: 'body_bold';
src: url('./fonts/Inter-Bold.ttf');
}
@font-face {
font-family: 'body_medium';
src: url('./fonts/Inter-Medium.ttf');
}
1.0.35
2 years ago
1.0.34
4 years ago
1.0.33
4 years ago
1.0.32
4 years ago
1.0.31
4 years ago
1.0.30
4 years ago
1.0.29
4 years ago
1.0.28
4 years ago
1.0.27
4 years ago
1.0.26
4 years ago
1.0.25
4 years ago
1.0.24
4 years ago
1.0.22
4 years ago
1.0.23
4 years ago
1.0.21
4 years ago
1.0.20
4 years ago
1.0.19
4 years ago
1.0.18
4 years ago
1.0.17
4 years ago
1.0.16
4 years ago
1.0.14
4 years ago
1.0.13
4 years ago
1.0.12
4 years ago
1.0.11
4 years ago
1.0.10
4 years ago
1.0.9
4 years ago
1.0.8
4 years ago
1.0.7
4 years ago
1.0.6
4 years ago
1.0.5
4 years ago
1.0.4
4 years ago
1.0.3
4 years ago
1.0.2
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago