diff --git a/docs/overview/migrating-react-native.md b/docs/overview/migrating-react-native.md index dc749a6..eb6e32f 100644 --- a/docs/overview/migrating-react-native.md +++ b/docs/overview/migrating-react-native.md @@ -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 link. + +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 link. + +### Update Project Configuration Files +When transferring your project, it's essential not to overlook updating your configuration files. This includes: +- 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 diff --git a/docs/platforms/androidwear.md b/docs/platforms/androidwear.md index 8a75284..32f4edc 100644 --- a/docs/platforms/androidwear.md +++ b/docs/platforms/androidwear.md @@ -132,3 +132,9 @@ or `renative.json:platforms.android.buildSchemes.[SCHEME].reactNativeEngine` ## App Config [see: Android based config](../api/schemas/rnv.project.md#android-props) + +--- +## Connect WearOS with Mobile Device via Bluetooth + +Follow the instructions at [react-native-wear-connectivity](https://github.com/fabOnReact/react-native-wear-connectivity?tab=readme-ov-file). + diff --git a/docs/templates/overview.md b/docs/templates/overview.md index ded8057..33689fc 100644 --- a/docs/templates/overview.md +++ b/docs/templates/overview.md @@ -7,7 +7,7 @@ sidebar_label: Templates ## @rnv/template-starter -Version: `1.6.0` +Version: `1.7.0` diff --git a/docusaurus.config.js b/docusaurus.config.js index 1f852a6..9d06e83 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -160,8 +160,8 @@ const config = { }, { position: 'left', - label: 'v1.6', - href: 'https://github.com/flexn-io/renative/releases/tag/1.6.0', + label: 'v1.7', + href: 'https://github.com/flexn-io/renative/releases/tag/1.7.0', }, { type: 'doc', diff --git a/package.json b/package.json index 9483b61..9c28bc9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "renative-docs", - "version": "1.6.0", + "version": "1.7.0", "private": true, "scripts": { "docusaurus": "docusaurus", @@ -43,19 +43,19 @@ "@docusaurus/tsconfig": "^3.1.1", "@docusaurus/types": "^3.1.1", "@flexn/prettier-config": "^1.0.0", - "@rnv/core": "1.6.0", - "@rnv/engine-lightning": "1.6.0", - "@rnv/engine-rn": "1.6.0", - "@rnv/engine-rn-electron": "1.6.0", - "@rnv/engine-rn-macos": "1.6.0", - "@rnv/engine-rn-next": "1.6.0", - "@rnv/engine-rn-tvos": "1.6.0", - "@rnv/engine-rn-web": "1.6.0", - "@rnv/engine-rn-windows": "1.6.0", - "@rnv/renative": "1.6.0", + "@rnv/core": "1.7.0", + "@rnv/engine-lightning": "1.7.0", + "@rnv/engine-rn": "1.7.0", + "@rnv/engine-rn-electron": "1.7.0", + "@rnv/engine-rn-macos": "1.7.0", + "@rnv/engine-rn-next": "1.7.0", + "@rnv/engine-rn-tvos": "1.7.0", + "@rnv/engine-rn-web": "1.7.0", + "@rnv/engine-rn-windows": "1.7.0", + "@rnv/renative": "1.7.0", "@types/mocha": "^10.0.6", "docusaurus-plugin-typedoc": "^0.22.0", - "rnv": "1.6.0", + "rnv": "1.7.0", "typedoc": "^0.25.8", "typedoc-plugin-markdown": "^3.17.1", "typedoc-plugin-zod": "1.1.2", diff --git a/src/components/HomepageFeatures.js b/src/components/HomepageFeatures.js index 4db10ea..2c513c8 100644 --- a/src/components/HomepageFeatures.js +++ b/src/components/HomepageFeatures.js @@ -137,7 +137,7 @@ const FeatureList = [ ? What's your project Name? (folder will be created) hello-renative ? What workspace to use? rnv ? What template to use? @rnv/template-starter -? What @rnv/template-starter version to use? 1.6.0 (@latest) +? What @rnv/template-starter version to use? 1.7.0 (@latest) ? How to create config renative.json? Extend template (cleaner, overridable) ? What's your project Title? My Renative App ? What's your App ID? com.mycompany.hellorenative diff --git a/src/pages/index.js b/src/pages/index.js index e4f1b86..aeee5c2 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -13,8 +13,8 @@ function HomepageHeader() {

Currently{' '} - - v1.6 + + v1.7