React with Native

Bringing together React and React Native


react-with-native exposes:

  • the most popular html elements but wraps them to add the most suitable react-native counterpart.
  • the most popular react-native components with their most suitable html counterpart
  • some useful utility functions and components


HTML elements with React Native capabilities.

react-with-native is integrated into sensible stack by default, but you can install it into any project.

Tip for new projects! Maybe it's better to use [Sensible](! Sensible is a boilerplate that gets you up to speed quickly for full stack apps and it uses react-with-native out of the box! This will save you a lot of time.
yarn add react-with-native

Tailwind must be installed on both the web and on your react-native project.

After installation, make sure you add all react-with-native-* to the content of your tailwind.config.js files, like this:


const { getTailwindModules } = require("react-with-native");

const tailwindModules = getTailwindModules({
  //if you are using a sensible monorepo, put the packages with tailwind-based ui here
  packages: ["rwn-ui"],

  //if you are using any tailwind-based modules, put them here.
  modules: [
  //if you have a yarn workspace, put true here
  isWorkspace: false,

module.exports = {
  content: ["./src/**/*.{ts,tsx}", ...tailwindModules],
  ...your other config

In react project it's also possible to generate the css using the tailwind cli and import it into your code. With react-native this is not possible as far as I know.

For Next.js

Add the following to your webpack config in next.config.js:

  test: /\.svg$/,
  use: ["@svgr/webpack"],
yarn add -D @svgr/webpack

To add the SVG Transformer, follow these instructions.

  • <A>
  • <Aside>
  • <Button>
  • <Div>
  • <Form>
  • <H2>
  • <I>
  • <Img>
  • <Input>
  • <Label>
  • <Li>
  • <Ol>
  • <Ul>
  • <Nav>
  • <P>
  • <Select>
  • <Span>
  • <Strong>
  • <Svg> (experimental)
  • <TextArea>
  • <ActivityIndicator>
  • <Pressable>
  • <Text>
  • <TouchableOpacity>
  • <View>
  • <ScrollableDiv scroll={boolean}>
  • <Toggle {...HTMLInputProps} native={...SwitchProps} onChange={(value: boolean) => void} />
  • trimClassName removes classNames that aren't supported by react-native
  • joinClassNames merges an array of className strings
  • wrapInTextIfNeeded wraps a Text coponent around a string if you're react-native so the app can render.
  • getTailwindModules provides the needed node_modules paths to include in your tailwind.config.js
Differences from react-native and react
  • you need to apply your text-related classNames to the text itself directly or if your children are a string you can add textClassName as a prop.