You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
ReNative supports react-native projects pretty much out of the box in terms of your application code
11
9
12
10
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
13
11
14
12
---
13
+
15
14
## Migration Guide
16
15
17
16
1. Install rnv
18
17
2. Create new project `rnv new` (pick @rnv/template-starter)
19
-
3. follow rest of the steps
20
-
4. After first `rnv run ...` check out the codebase and pay attention to:
18
+
3. Follow rest of the steps of new project installation.
19
+
4. After first `rnv run ...` check out the codebase.
20
+
21
+
### ReNative Project Folder Structure
22
+
For more information about the project structure, please visit this <ahref="/docs/overview/architecture#build-process">link</a>.
23
+
24
+
The `src/` folder contains the source content for your application. The initial structure of the `src/` folder includes the following subfolders:
25
+
26
+
-`app`: This folder contains the main files for your application.
27
+
-`entry`: This folder allows you to configure the launch settings of your app. It is intended for advanced configuration and customization.
28
+
-`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
29
+
30
+
:::info
31
+
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.
32
+
:::
33
+
34
+
If you also installed some react native plugins in your project make sure to move them to `./renative.json` config file under `plugins` object.
35
+
36
+
Renative uses standard react native plugins so plugin names will stay same!
37
+
38
+
ReNative does not utilize autolinking as React Native does.
39
+
Therefore, it's important to manually move and configure packages in your renative.json file.
40
+
Proper handle of dependencies:
41
+
42
+
- Transfer the necessary packages to the renative.json file.
43
+
For example:
44
+
```
45
+
"plugins": {
46
+
"react-native": "source:rnv"
47
+
}
48
+
```
49
+
- 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>.
50
+
51
+
### Update Project Configuration Files
52
+
When transferring your project, it's essential not to overlook updating your configuration files. This includes:
53
+
- babel.config.js
54
+
- tsconfig.json
55
+
- next.config.js
56
+
- react-native.config.js
57
+
- And any other relevant configuration files
21
58
22
-
-`./index.ios.js` file
23
-
-`./index.android.js` file
24
-
-`src/` folder
59
+
Ensuring these files are correctly configured will help avoid issues and ensure smooth operation of your project.
25
60
26
-
replace `src/` folder content with source content of your app (JS files)
61
+
You can utilize ReNative's configuration methods to add your custom configurations. Here is example for `react-native.config.js`:
make sure that your main app.js is initialized in both
65
+
const config = withRNVRNConfig({
66
+
//custom configurations
67
+
...
68
+
});
29
69
30
-
-`./index.ios.js` file
31
-
-`./index.android.js` file
70
+
module.exports = config;
71
+
```
72
+
73
+
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.
74
+
75
+
## Common Errors
76
+
77
+
#### Resolving `requestAnimationFrame` Error in `react-native-reanimated`
78
+
##### Error
79
+
```
80
+
ReferenceError: requestAnimationFrame is not defined
81
+
```
82
+
##### Solution
83
+
This error in `react-native-reanimated` has been addressed in [this pull request (PR)](https://github.com/software-mansion/react-native-reanimated/pull/4665).
84
+
##### Steps
85
+
To resolve this issue, ensure you update `react-native-reanimated` to version 3.5.0 or higher.
86
+
87
+
---
88
+
#### Resolving Module Parse Error for `react-native/Libraries/NewAppScreen`
89
+
90
+
##### Error
91
+
```
92
+
Module parse failed for react-native/Libraries/NewAppScreen
93
+
```
94
+
95
+
##### Solution
96
+
To fix this error, you need to remove or replace the `Colors` import from `react-native/Libraries/NewAppScreen` with an alternative.
97
+
98
+
##### Steps
99
+
1.**Remove the `Colors` import** from `react-native/Libraries/NewAppScreen` in your code.
100
+
2.**Replace it with an alternative** color import or define your own color scheme to use in its place.
101
+
102
+
By following these steps, you should be able to resolve the module parse error and continue with your project.
103
+
104
+
---
32
105
33
-
that's it really.
34
106
35
-
if you also installed some react native plugins in your project make sure to move them to
36
107
37
-
`./renative.json` config file under `plugins` object. renative uses standard react native plugins so plugin names will stay same!
38
108
39
109
if you have any issues you can always raise a question or a bug in https://github.com/pavjacko/renative/issues
0 commit comments