---
title: "Use React Native Web's Pressable with Remix's Link magic" 
slug: remix-react-native-pressable-release-v1
description: You can now use remix-react-native-pressable and forget about the Link component if you're using React Native Web with Remix!
tags: [react, remix, react-native]
publishedAt: 2022-02-19
ogImage: null
---

I just released [`remix-react-native-pressable`](https://github.com/HorusGoul/remix-react-native-pressable), a small package that allows you to use React Native Web's `<Pressable>` component with all of Remix's `<Link>` properties and magic.

Essentially, it implements the same logic Remix uses in their `<Link>`, but adapted to React Native Web's `<Pressable>` props.

Here's a little example using the `to` property:

```tsx
import { View, Text } from 'react-native';
import { RemixPressable } from 'remix-react-native-pressable';

export default function MyRemixRoute() {
  return (
    <View>
      <RemixPressable to="/about">
        <Text>Link to /about</Text>
      </RemixPressable>
    </View>
  );
}
```

Just like that, you get a link rendered using `<RemixPressable>`. The main benefit of this is that you can now use this component like any other React Native Web's `<Pressable>` you have in your app.

Here's another example (extracted from my website's rewrite!), in which you can see another way of using this library. I have a design system with a Button that uses `<Pressable>` in its implementation, but the design system is platform agnostic, so it doesn't know about Remix. For cases like this, we can use the `<RemixPressableChildren>` component to get the props we need to pass to the platform-agnostic `<Button>`. 

```tsx
import { RemixPressableChildren } from 'remix-react-native-pressable';
import { Button } from 'ui/lib/Button';

...

export default function Index() {
  ...

  return (
    <>
          <RemixPressableChildren to="/blog">
            {(pressableProps) => (
              <Button {...pressableProps}>More publications</Button>
            )}
          </RemixPressableChildren>
    </>
  );
} 
```

Now that you've seen how `<RemixPressable>` works, here are both the repository and its npm page:

- [github.com/HorusGoul/remix-react-native-pressable](https://github.com/HorusGoul/remix-react-native-pressable)
- [npmjs.com/package/remix-react-native-pressable](https://www.npmjs.com/package/remix-react-native-pressable)

Also, I recently published an article about [How to Setup React Native Web in a Remix project](https://horus.dev/blog/react-native-web-remix-setup). If you're interested in using React Native with Remix, that's probably the best resource to get started!

---

I hope you liked this article! Don't forget to follow me on Twitter if you want to know when I publish something new about web development: [@HorusGoul](https://twitter.com/HorusGoul)



You can now use remix-react-native-pressable and forget about the Link component if you're using React Native Web with Remix!

Use React Native Web's Pressable with Remix's Link magic

---
title: How to Setup React Native Web in a Remix project 
slug: react-native-web-remix-setup
description: Easy way to use React Native components in your Remix projects and reuse code
tags: [react, remix, react-native]
publishedAt: 2022-02-07
ogImage: https://horus-dev-media.s3.amazonaws.com/1bc3b4fc-9626-44e2-a7b6-b7541f77daa1
---

I assume you're here because you want to know how to set up React Native Web in your Remix project. Well, you're lucky, I had to do this a few days ago, and I haven't run into trouble with it yet, so here's a tutorial about it:

**Let's get started!**

_The result of this tutorial is also available as a GitHub repository that you can just clone to get started with your project: [https://github.com/HorusGoul/remix-react-native-web-starter](https://github.com/HorusGoul/remix-react-native-web-starter)_

## 1. Installing the react-native-web package

The first thing you have to do is install the `react-native-web` package. However, since we can't customize our build process because Remix doesn't allow it yet, we'll need to use a package manager that will enable you to install a package with an alias. In this case, I decided to use `pnpm`.

```bash
$ pnpm add react-native@npm:react-native-web
```

Then, the types if you're using TypeScript. Note that not all types will be correct for a React Native Web project, but that's out of the scope of this tutorial.

```bash
$ pnpm add --save-dev @types/react-native
```

## 2. React Native Web Styles

React Native Web has its own way of handling styles, and for SSR and hydration, they give you a stylesheet element that you have to place in the `<head>` of your page.

We'll pass that stylesheet element to our Root using the Context API. Let's do that by creating a `rn-styles.tsx` file inside the `app` folder. Here's the content for that file:

```tsx
import { createContext, useContext } from "react";

export const ReactNativeStylesContext =
  createContext<React.ReactElement<unknown> | null>(null);

export function useReactNativeStyles() {
  return useContext(ReactNativeStylesContext) ?? ReplaceWithStylesSSRTag;
}

export const ReplaceWithStylesSSRTag = <meta name="REPLACE_WITH_STYLES" />;
```

Now, let's move to the `app/root.tsx` file. We'll now use the `useReactNativeStyles()` hook and put the `stylesElement` inside the `<head>`. Also, we'll wrap the `<Outlet />` component with a View with a few properties to match the React Native Web behavior. 

```tsx
...

import { useReactNativeStyles } from "./rn-styles";
import { View, StyleSheet } from "react-native";

...

export default function App() {
  const stylesElement = useReactNativeStyles();

  return (
    <html lang="en">
      <head>
        ...

        {stylesElement}
      </head>
      <body>
        ...

        <View pointerEvents="box-none" style={styles.appContainer}>
          <Outlet />
        </View>

        ...
      </body>
    </html>
  );
}

const styles = StyleSheet.create({
  appContainer: {
    flex: 1,
  },
});
```

We also need to add a global stylesheet to Remix that contains the following. 

```css
html, body {
  height: 100%;
}

body {
  display: flex;
}
```

_Take a look at the [Remix Docs about Stylesheets](https://remix.run/docs/en/v1/guides/styling#regular-stylesheets) if you don't know how to add CSS in a Remix project._

## 3. SSR and Hydration

Assuming you haven't modified the `app/entry.client.tsx` file, just replace its contents with the following:

```tsx
import { RemixBrowser } from "@remix-run/react"";
import { hydrateRoot } from "react-dom/client";
import { AppRegistry } from "react-native";
import { ReactNativeStylesContext } from "./rn-styles";

const App = () => <RemixBrowser />;

AppRegistry.registerComponent("App", () => App);

// @ts-ignore
const { getStyleElement } = AppRegistry.getApplication("App");

hydrateRoot(
  document,
  <ReactNativeStylesContext.Provider value={getStyleElement()}>
    <App />
  </ReactNativeStylesContext.Provider>
);
```

What's going on with that code? We're using React Native Web `AppRegistry` to get the initial styles for the app and avoid hydration from failing.

Now, let's move to the `app/entry.server.tsx` file, where we'll do a similar thing. Take a look at the code:

```tsx
import { renderToString, renderToStaticMarkup } from "react-dom/server";
import { RemixServer } from "@remix-run/react"";
import type { EntryContext } from "@remix-run/node";
import { AppRegistry } from "react-native";
import { ReplaceWithStylesSSRTag } from "./rn-styles";

export default function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  const App = () => <RemixServer context={remixContext} url={request.url} />;

  AppRegistry.registerComponent("App", () => App);

  let markup = renderToString(<App />);

  // @ts-ignore
  const { getStyleElement } = AppRegistry.getApplication("App", {});
  const stylesMarkup = renderToStaticMarkup(getStyleElement());

  markup = markup.replace(
    renderToStaticMarkup(ReplaceWithStylesSSRTag),
    stylesMarkup
  );

  responseHeaders.set("Content-Type", "text/html");

  return new Response("<!DOCTYPE html>" + markup, {
    status: responseStatusCode,
    headers: responseHeaders,
  });
}
```

This time, we're not passing the app styles using the ReactNativeStylesContext, but injecting them inside the markup by replacing a custom meta tag.

## 4. Using React Native Web components

One last thing you could do if you're doing this in a new project is to go ahead and replace your `app/routes/index.tsx` with the following:

```tsx
import { Text, View } from "react-native";

export default function Index() {
  return (
    <View>
      <Text>Hello, world!</Text>
    </View>
  );
}
```

Then do `pnpm dev` and open your project in the browser to see your first Remix route rendered with React Native Web components!

---

I hope you liked this article! Don't forget to follow me on Twitter if you want to know when I publish something new about web development: [@HorusGoul](https://twitter.com/HorusGoul)



Easy way to use React Native components in your Remix projects and reuse code

How to Setup React Native Web in a Remix project

---
title: 7 Resources to Improve Your HTML and Accessibility Skills
slug: 7-resources-to-become-better-html-accessibility
description: Learning these resources will make you a better developer by teaching you how to build inclusive websites and web apps.
tags: [webdev, HTML, a11y, codenewbie]
publishedAt: 2022-02-01
ogImage: https://horus-dev-media.s3.amazonaws.com/f7d79b0e-fadd-4a73-a8b7-d9fa0b41bcd4
---

Some devs say HTML is easy, but it's not. HTML is complex, and the lack of time put into it makes the web harder to use for many people.

Do your users a favor and learn HTML.

Here is a list with 7 resources about HTML and Accessibility 👇

## 1. HTMHell

The [htmhell.dev](https://htmhell.dev) website has a "Hell" category with many bad practices with details and tips on how to fix them. These are all taken from real websites. 

It also has a "Heaven" section with tips.

Follow them on Twitter! [@htm_hell](https://twitter.com/htm_hell)

## 2. [inclusive-components.design](https://inclusive-components.design)

Quoting their website: "A blog trying to be a pattern library, with a focus on inclusive design. Each post explores a common interface component and comes up with a better, more robust, and accessible version of it."

## 3. Learn Forms! by [@ChromiumDev](https://twitter.com/ChromiumDev)

This is an entire course dedicated to HTML form fields. It covers the basics, testing, design, accessibility, localization, security, and more advanced stuff.

It also has mini quizzes at the end of each section!

[https://web.dev/learn/forms/](https://web.dev/learn/forms/)

## 4. Accessible Tables Tutorial

The [@w3cdev](https://twitter.com/w3cdev) has multiple tutorials about Web Accessibility, I went through this one the other day, and I learned a lot 🤯 

Check it out: [https://www.w3.org/WAI/tutorials/tables/](https://www.w3.org/WAI/tutorials/tables/)

They also have Page Structure, Menus, Images, Forms, and Carousels tutorials.

## 5. The Best Accessibility Practices To Use Emojis on the Web

This article talks about how to use emojis on your websites and apps. The best part is that you can also apply the same practices for SVG and Font Icons.

P.S. I wrote this one 😛 

[https://horus.dev/blog/happy-emoji-day-the-best-accessibility-practices-to-use-emojis-on-the-web](https://horus.dev/blog/happy-emoji-day-the-best-accessibility-practices-to-use-emojis-on-the-web)

## 6. Responsive Images

This article by [@MozDevNet](https://twitter.com/mozdevnet) teaches about the concept of responsive images. If you go through it, you'll learn to use features like `srcset` and the `<picture>` element to implement responsive images on your websites and apps.

[https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)

## 7. axe by [@dequesystems](https://twitter.com/dequesystems)

axe is tool to run accessibility checks against your website and components. 

You can use it as a browser extension or include `jest-axe` or `axe-core` in your automated testing pipeline.

[https://www.deque.com/axe/](https://www.deque.com/axe/)

---

And that's it! HTML is a vital part of the web, and if you don't do it correctly, your websites may be a nightmare to use for some users.

If you learn HTML, you'll make better websites, and your users will be happier 🎉

---

This post was initially published as a Twitter thread, so make sure to follow me on Twitter if you don't want to miss any of the resources I share daily.

- 👨‍💻 My Twitter account: [@HorusGoul](https://twitter.com/HorusGoul)
- 🧵 Thread: [https://twitter.com/HorusGoul/status/1484556412655005698](https://twitter.com/HorusGoul/status/1484556412655005698)

Learning these resources will make you a better developer by teaching you how to build inclusive websites and web apps.

Horus Lugo

Where to find me

Latest articles

Use React Native Web's Pressable with Remix's Link magic

How to Setup React Native Web in a Remix project

7 Resources to Improve Your HTML and Accessibility Skills

Showcase

Atom - Periodic Table & Tests

Kiddle