I have a react-native project and I'm using expo.
In my project structure I have the sources folder that contain all my sources expect the App.js file.
I would like to have this file in the sources folder as well.
For this I created a app.json file as follow:
{
"expo": {
"entryPoint": "./sources/App.js",
}
}
The issue is that when I do so after running the app with:
expo start --web
The server is launched the app is open in my browser but I have a blank screen.
There is no log, no error.
I can also add that the render method of the App.js isn't called because I put a console.log("Hello") that doesn't appear.
I don't undertstand the behaviour.
Isn't modifying the entryPoint property the way to do it ?
The expo docs state 'Support for custom entry points is in progress and is coming soon.' and suggest doing the following:
Create an index.js/index.ts file in your root folder with this content:
import { registerRootComponent } from 'expo';
import App from './src/App';
registerRootComponent(App);
where from './src/App' represents the entry location. Also delete the line
"main": "node_modules/expo/AppEntry.js",
from your package.json and any entryPoint keys in app.json or app.config.js/app.config.ts
This worked for me.
Related
I'm making a react native app that makes a request to my server hosted on heroku.
Should I be hiding the URL of my server and if so how can I add an environment variable to a react native project?
I have made a .env file and then have done this:
console.log(process.env.URL)
Which is returning undefined - I am also using expo if that makes a difference.
If you use Expo, there is an easy way to create environment variables.
In your app.json file
{
"expo": {
"extra": {
"URL": "https://..."
}
}
}
After that, you will need to install the expo-constant package.
expo install expo-constants
And, to get the info in your app:
import Constants from "expo-constants";
console.log(Constants.manifest.extra.URL);
One library that I like to use that works for bare react native and expo is react-native-dotenv
Install it npm i react-native-dotenv
Add a .env file with your variables
MY_ENV_VARIABLE=SECRET_PASSWORD
Add the babel plugin to .babelrc file.
{
"plugins": [
["module:react-native-dotenv"]
]
}
Import and use it
import { MY_ENV_VARIABLE } from "react-native-dotenv";
function doSomething() {
console.log(MY_ENV_VARIABLE);
}
I've been trying to fix this error from a couple weeks ago with no success. The problem is I cannot publish my app because of this.
When I build my expo app for any of both, iOS or Android, the Expo CLI signing process goes well, no errors and generates final bundles but when I install the spa or apk file into a real device it shows the splash screen 4 or 5 times in a row (some kind of loop) and finally shows the following error messages:
Checked out with no results:
https://forums.expo.io/t/application-main-has-not-been-registered/14395
Application main has not been registered
https://forums.expo.io/t/application-main-has-not-been-registered/11753
My package.json looks like this:
{
"name": "Sxunco",
"homepage": "https://www.sxunco.com",
"version": "1.0.3",
"private": true,
"main": "node_modules/expo/AppEntry.js",
"jest": {
"preset": "jest-expo",
"transformIgnorePatterns": [
"node_modules/(?!((jest-)?react-native|react-clone-referenced-element|expo(nent)?|#expo(nent)?/.*|react-navigation|redux-persist|native-base(-shoutem-theme)|native-base|react-native-router-flux))"
]
},....
My App.js:
import React from 'react';
import Root from './src/native/index';
import configureStore from './src/store/index';
const { persistor, store } = configureStore();
export default function App() {
return <Root store={store} persistor={persistor} />;
}
Ive tried with same results:
Adding "appKey": "main" into app.json
Adding AppRegistry.registerComponent(‘main’, () => App); into App.js and also expo registerRootComponent(App) (separated and both together, none of that works)
Changing "main" path in
package.json directly to App.js and register app with above methods
manually
When I run build I also run:
exp start --no-dev --minify
So I wait for the server to finish loading and then run expo build:android
Please I don't know what to do, I cannot publish my app because of this.
1) check index.js and make sure yourAppName is registered, not main:
app.json file from root folder:
{
"name": "TestSvgJoy",
"displayName": "TestSvgJoy"
}
index.js (from root folder, if you don't have it there you need to update build scripts in Xcode as below)
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
This is how app would look in Xcode:
2)
AppDelegate.m should have 2 lines like this
#if DEBUG
return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:#"index" fallbackResource:nil];
#else
return [[NSBundle mainBundle] URLForResource:#"main" withExtension:#"jsbundle"];
#endif
Note: if you are using Expo and app was not detached you can ignore this step.
3) Make sure your root folder contains the index.js or index.ios.js.
Note:
If you need custom path of entryFile (index.js or index.ios.js) go to Xcode, project target, Build Phases, Bundle ReactNative code and imagesand provide an extra parameter like ./src/index.ios.js
To test things quickly and get more info about the errors go to Xcode, Product, Scheme, Edit Scheme, Run, Build Configuration and set it to Release and run it on the simulator.
Turns out my App is a function, and I was just passing the function itself to both registration methods (react native & expo):
registerRootComponent(App())
AppRegistry.registerComponent(appName, () => App());
But in registerRootComponent I was missing an arrow function :S
registerRootComponent(()=>App())
:)
I am new in React Native. Right now, I am studying Props and State. I wanted to try the FlatList Component in this doc https://facebook.github.io/react-native/docs/flatlist. However, I am getting this error.
You're using typed JavaScript known as Type script.
If you want to use TypeScript (I highly encourage it, then you can do so by following below tutorial):
Migrating to TypeScript:
https://facebook.github.io/react-native/blog/2018/05/07/using-typescript-with-react-native
To just get rid of the error!
state = {selected : (new Map())};
TypeScript Migration Continued...
Adding TypeScript
The next step is to add TypeScript to your project. The following commands will:
add TypeScript to your project
add React Native TypeScript Transformer to your project
initialize an empty TypeScript config file, which we'll configure next
add an empty React Native TypeScript Transformer config file, which we'll - configure next
adds typings for React and React Native
Okay, let's go ahead and run these.
yarn add --dev typescript
yarn add --dev react-native-typescript-transformer
yarn tsc --init --pretty --jsx react
touch rn-cli.config.js
yarn add --dev #types/react #types/react-native
The tsconfig.json file contains all the settings for the TypeScript compiler. The defaults created by the command above are mostly fine, but open the file and uncomment the following line:
{
/* Search the config file for the following line and uncomment it. */
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
}
The rn-cli.config.js contains the settings for the React Native TypeScript Transformer. Open it and add the following:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
},
getSourceExts() {
return ['ts', 'tsx'];
},
};
Migrating to TypeScript
Rename the generated App.js and __tests_/App.js files to App.tsx. index.js needs to use the .js extension. All new files should use the .tsx extension (or .ts if the file doesn't contain any JSX).
If you tried to run the app now, you'd get an error like object prototype may only be an object or null. This is caused by a failure to import the default export from React as well as a named export on the same line. Open App.tsx and modify the import at the top of the file:
-import React, { Component } from 'react';
+import React from 'react'
+import { Component } from 'react';
Some of this has to do with differences in how Babel and TypeScript interoperate with CommonJS modules. In the future, the two will stabilize on the same behaviour.
At this point, you should be able to run the React Native app.
I'm just getting started with react native and have created a base app with create-react-native-app.
I did some restructuring and made a few new folders and renamed the App.js to Home.js. I modified the app.json to contain an entry point that references the new Home.js file. When I load the app, nothing happens. There's no error, it just stays on the expo screen.
.
-components
-screens
-Home
Home.js
-config
-node_modules
-tests
app.json
app.json file:
{
"expo": {
"sdkVersion" : "23.0.0",
"entryPoint" : "./screens/Home/Home.js"
}
}
How do you define the entry point of the app?
if you are using Expo, you have to specify the entrypoint in your app.json file like this:
{
"expo": {
"entryPoint": "./src/app/index.js"
}
}
then, inside that file you need to register the app with Expo.registerRootComponent(YOUR_MAIN_APP_COMPONENT)
import Expo from 'expo'
...
class App extends Component {
...
}
export default Expo.registerRootComponent(App);
this way you can add your entry file wherever you want.
You need to update the app.json so that the entryPoint is the new path to the App.js.
{
"expo": {
"entryPoint": "./src/App.js",
...
}
}
However using Expo.registerRootComponent(App) causes the following error in SDK 32:
undefined is not an object (evaluating '_expo.default.registerRootComponent')
It can be fixed by importing registerRootComponent explicitly, rather than trying to access it via Expo.registerRootComponent.
Here is a sample App.js.
import { registerRootComponent } from 'expo';
class App extends React.Component {
...
}
export default registerRootComponent(App);
For Expo Projects
According to the current Expo documentation, if you want a different entry point than the App.js file, you can update the package.json - add a main field with the path to the desired entry point. Then inside the entry point file you'll have to also have to register the root component of the app. Expo was doing this automatically, when the entry point wasn't specified and was the App.js file
package.json
{
"main": "my/customEntry.js"
}
entryPointFile.js
import { registerRootComponent } from 'expo';
import MyRootComponent from './MyRoot';
registerRootComponent(MyRootComponent);
What if I want to name my main app file something other than App.js? - https://docs.expo.io/versions/latest/sdk/register-root-component/#what-if-i-want-to-name-my
If your project is in managed workflow setup (the default one), as stated in the doc, you must import the registerRootComponent and call it with your root component as argument, in the file you wish to be the main one:
import { registerRootComponent } from 'expo';
const AnyName() { ... } // Your root component
registerRootComponent(AnyName)
And then, in your package.json file, change the "main" to this file relative path, like
{
"main": "src/main.js"
}
I created project by react-native-script. In default entrypoint of app (App.js), you export App which import from your entry.
- node_modules
- App.js
- build
- main.js
File App.js:
import App from './build/main'
export default App
I also prefer to put all sources in a separated folder, for instance src/, and I found a different solution:
in my package.json, generated by expo cli, I see that main attribute is node_modules/expo/AppEntry.js.
I copied node_modules/expo/AppEntry.js to src/expoAppEntry.js and just changed the App import to import App from './App'; so it points to my *src/App.tsx`
then of course I changed the package.json main attribute to src/expoAppEntry.js.
See a working example here https://github.com/fibo/tris3d-app/blob/master/src/expoAppEntry.js
For those who are using Expo with typescript, you dont have to add .tsx at the end of the entrypoint in app.json. For example your entrypoint can be:
{
"expo": {
"entryPoint": "./app/components/AppEntryPoint/App.component",
"name": "Sample App",
...
}
...
}
In this example the name of entrypoint component is App.Component.tsx. But not mentioning the extension will also work. Apart from this, in the root component, writing export default registerRootComponent(AppComponent) or registerRootComponent(AppComponent) both should work as exporting a component from a file only means that other files can use it as well. Not writing it should not be an issue here because we have mentioned in app.json that this is the root component. App.json will look up and start building the structure of the app from there itself.
The entry point can be found in node_modules/expo/AppEntry.js..
This is in Expo Typescript...
import registerRootComponent from 'expo/build/launch/registerRootComponent';
import App from '../../src/App';
registerRootComponent(App);
In this you can change your entry point. Initially it is set to App, Look the import statement where that component is coming from.
When I load my react-native app in Expo I get the error: "Cannot find entry file index.js in any of the roots."
I am adding onto an existing React Web App, and have index.ios.js at the root level. Everything works fine locally, in simulator and through Xcode on my phone hardwired. I've converted my app with exp convert and integrated all info into exp.json.
All info for the ios app is contained in a folder called "ios".
Has anyone run into this or have any thoughts on how to get unstuck?
check you package.json and rename index.js to your entry file.
//...
},
"main": "index.js"
}
If you are using Expo, you need to go to your project folder and find the below file:
\node_modules\expo\AppEntry.js
import { KeepAwake, registerRootComponent } from 'expo';
import App from '../../App';
if (__DEV__) {
KeepAwake.activate();
}
registerRootComponent(App);
and here just replace the App to Custom_Component_Name in the second line of import.
You can find the entry file by looking in the package.json file. In package.json you will find
{
"main": "node_modules/expo/AppEntry.js"
}
AppEntry.json is the entry file by default in expo projects.