Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update migration guide from a RN #33

Merged
merged 11 commits into from
Dec 2, 2024
98 changes: 84 additions & 14 deletions docs/overview/migrating-react-native.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,35 +5,105 @@ sidebar_label: Migrating react-native
original_id: migrating_react_native
---



ReNative supports react-native projects pretty much out of the box in terms of your application code

Due to variety of possibilities / complexity fo react-native projects (ie plugins, custom build scripts and so on) there might be some extra work required to reconnect existing plugins

---

## Migration Guide

1. Install rnv
2. Create new project `rnv new` (pick @rnv/template-starter)
3. follow rest of the steps
4. After first `rnv run ...` check out the codebase and pay attention to:
3. Follow rest of the steps of new project installation.
4. After first `rnv run ...` check out the codebase.

### ReNative Project Folder Structure
For more information about the project structure, please visit this <a href="/docs/overview/architecture#build-process">link</a>.

The `src/` folder contains the source content for your application. The initial structure of the `src/` folder includes the following subfolders:

- `app`: This folder contains the main files for your application.
- `entry`: This folder allows you to configure the launch settings of your app. It is intended for advanced configuration and customization.
- `pages`: This folder is needed for web in case you are using Next.js engine, if you don't plan to support web or don't want to use Next.js, don't include it

:::info
You are not restricted to the three specified folders. Within the `src/` directory, you have the flexibility to create your own folders to organize styles, components, and any other necessary resources.
:::

If you also installed some react native plugins in your project make sure to move them to `./renative.json` config file under `plugins` object.

Renative uses standard react native plugins so plugin names will stay same!

ReNative does not utilize autolinking as React Native does.
Therefore, it's important to manually move and configure packages in your renative.json file.
Proper handle of dependencies:

- Transfer the necessary packages to the renative.json file.
For example:
```
"plugins": {
"react-native": "source:rnv"
}
```
- As in the above example all the necessary linking will be handled by ReNative, however some dependencies do not have existing mappings in ReNative (can be checked [here](https://github.com/flexn-io/commonwealth/blob/main/packages/plugins/pluginTemplates/renative.plugins.json)), you will need to implement them manually. For more information, please visit this <a href="/docs/concepts/plugins#custom-plugin-support">link</a>.

### Update Project Configuration Files
When transferring your project, it's essential not to overlook updating your configuration files. This includes:
RicardasN marked this conversation as resolved.
Show resolved Hide resolved
- babel.config.js
- tsconfig.json
- next.config.js
- react-native.config.js
- And any other relevant configuration files

- `./index.ios.js` file
- `./index.android.js` file
- `src/` folder
Ensuring these files are correctly configured will help avoid issues and ensure smooth operation of your project.

replace `src/` folder content with source content of your app (JS files)
You can utilize ReNative's configuration methods to add your custom configurations. Here is example for `react-native.config.js`:
```js title="react-native.config.js"
const { withRNVRNConfig } = require('@rnv/adapter');

make sure that your main app.js is initialized in both
const config = withRNVRNConfig({
//custom configurations
...
});

- `./index.ios.js` file
- `./index.android.js` file
module.exports = config;
```

By incorporating custom configurations in this manner, the basic ReNative configurations and your custom settings are merged and applied together when the app is run.

## Common Errors

#### Resolving `requestAnimationFrame` Error in `react-native-reanimated`
##### Error
```
ReferenceError: requestAnimationFrame is not defined
```
##### Solution
This error in `react-native-reanimated` has been addressed in [this pull request (PR)](https://github.com/software-mansion/react-native-reanimated/pull/4665).
##### Steps
To resolve this issue, ensure you update `react-native-reanimated` to version 3.5.0 or higher.

---
#### Resolving Module Parse Error for `react-native/Libraries/NewAppScreen`

##### Error
```
Module parse failed for react-native/Libraries/NewAppScreen
```

##### Solution
To fix this error, you need to remove or replace the `Colors` import from `react-native/Libraries/NewAppScreen` with an alternative.

##### Steps
1. **Remove the `Colors` import** from `react-native/Libraries/NewAppScreen` in your code.
2. **Replace it with an alternative** color import or define your own color scheme to use in its place.

By following these steps, you should be able to resolve the module parse error and continue with your project.

---

that's it really.

if you also installed some react native plugins in your project make sure to move them to

`./renative.json` config file under `plugins` object. renative uses standard react native plugins so plugin names will stay same!

if you have any issues you can always raise a question or a bug in https://github.com/pavjacko/renative/issues