yarn add @roll-network/design-system
npx install-peerdeps @roll-network/design-system
The web version of the package works out of the box.
The package is ready for react-native
with a minimum amount of changes. You have to add an alias to your react-native application & it'll work smoothly.
// babel.config.js
module.exports = {
plugins: [
[
"module-resolver",
{
alias: {
"@roll-network/design-system": "@roll-network/design-system/dist/native/esm"
}
}
]
]
}
Wrap the root of your application with the theme provider.
import { TryrollProvider } from '@roll-network/design-system'
const App = ({ children }) => {
return (
<TryrollProvider>
{children}
</TryrollProvider>
)
}
Enjoy using the well-typed package available for ESM & CJS. 🥳
import { Text, useTheme } from '@roll-network/design-system'
const MyComponent = () => {
const theme = useTheme();
return (
<Text style={{ color: theme.text.primary }}>
@roll-network/design-system is awesome!
</Text>
)
}
Use Storybook to test your changes locally.
yarn start
You can use React Native Storybook to test changes locally. You'll need to add your story to
- Add your story to storybook.requires.js.
- Run
yarn start:native
- Run
yarn ios
for iOS development. - Run
yarn android
for Android development.
If you face an issue (specifically on Web) when rendering a Modal, ensure that your application doesn't run in StrictMode. Otherwise, native-base
(the lib backing our design system up) will break. (https://github.com/adobe/react-spectrum/issues/3515#issuecomment-1246872872)