https://github.com/linguistika/next-rn
https://github.com/linguistika/next-rn
expo next nextjs react react-native react-navigation
Last synced: about 10 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/linguistika/next-rn
- Owner: Linguistika
- Created: 2021-06-11T14:12:17.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-12-03T17:31:34.000Z (over 4 years ago)
- Last Synced: 2025-10-24T23:53:56.245Z (9 months ago)
- Topics: expo, next, nextjs, react, react-native, react-navigation
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/next-rn
- Size: 2.48 MB
- Stars: 10
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Next.js Router + React Navigation + More 🥳
A set of hooks that wrap the `react-navigation` API that you're used to, and make it work with `next/router`.
This library helps me use the [Expo + Next.js integration](https://docs.expo.io/versions/latest/guides/using-nextjs/) without stressing about navigation.
_This is a new library, PRs are very welcome!_
## Example
👾 [Github Repo](https://github.com/raemundo/next-rn/tree/main/examples/with-next) | 💻 [Website]() | 📱 [Open expo app directly]() | ☎️ [Expo app website]()
## Install
```sh
yarn add next-rn
```
## Table of contents
- [Set up](#set-up)
- [Usage](#usage)
- Hooks
- [`useRouting`](#userouting)
- [`useFocusEffect`](#useFocusEffect)
- Components
- [`Head`](#head)
- [`Script`](#script)
- [`Image`](#image)
- [`Link`](#link)
## Set up
**Step 0. Install next with expo:**
- Init: `expo init` (or `npx create-next-app`)
- Install: `yarn add @expo/next-adapter`
- Install next: `yarn add next`
- Configure: `yarn next-expo`
- Start: `yarn next dev`
_I recommend becoming familiar `next`'s architecture with `expo`. Follow the [Expo docs](https://docs.expo.io/versions/latest/guides/using-nextjs/) or see [this article](https://dev.to/evanbacon/next-js-expo-and-react-native-for-web-3kd9) by Evan Bacon if you're curious._
**Step 1. Edit/create next.config.js**
```bash
yarn add next-compose-plugins next-fonts next-images next-transpile-modules
```
**Step 2: edit `next.config.js` to look something like this:**
```es6
/* eslint-disable @typescript-eslint/no-var-requires */
const { withExpo } = require('@expo/next-adapter')
const withFonts = require('next-fonts')
const withImages = require('next-images')
const withPlugins = require('next-compose-plugins')
const withTM = require('next-transpile-modules')([
'next-rn',
// you can add other modules that need traspiling here
])
module.exports = withPlugins(
[withTM, withFonts, withImages, [withExpo, { projectRoot: __dirname }]],
{
// ...
}
)
```
**Step 3: add this environment variable to .env file:**
```NEXT_PUBLIC_IS_NEXT="true"```
**All done! Run `yarn next dev` & open [http://localhost:3000](http://localhost:3000)** 👻
- Take a look at the [next tutorial](https://nextjs.org/learn/basics/create-dynamic-pages) for creating pages.
_You can add other packages that need transpiling to the `transpileModules` array. See [this post](https://forums.expo.io/t/next-js-expo-web-syntaxerror-unexpected-token-export-with-npm-module/31127) for details._
## Usage
Replace the following instances in your code after installation and setup:
### `useNavigation` 👉 `useRouting`
```diff
-import { useNavigation } from '@react-navigation/native'
+import useRouting from 'next-rn/router/use-routing'
```
### `useLayoutEffect`
```diff
-import { useLayoutEffect } from '@react-navigation/native'
+ import { useLayoutEffect } from 'next-rn/use-layout-effect'
```
### `` 👉 ``
```diff
-import { Pressable } from 'react-native'
+import Link from "next-rn/link";
- navigate({ routeName: 'chat' })}>
- Go
-
+
+ Go
+
```
### ``
```diff
-import Head from "next/head"
+import Head from "next-rn/head";
-
- page title
-
-
-
-
-
+