How to Enable the new LogBox (RN) - react-native

I'm trying to enable the new LogBox in React Native (v0.62.0-rc.2), I just have to add a line to the "index.js" file but it doesn't work.
RC2 introduces the new LogBox experience behind a feature flag. To try
it out, add the following to your index.js file:
require('react-native').unstable_enableLogBox()
index.js
require('react-native').unstable_enableLogBox();
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
Error output:
TypeError: _$$_REQUIRE(_dependencyMap[1], "react-native").unstable_enableLogBox is not a function.
I'm sure I'm doing something wrong, maybe it's not the right way.

you need to do the following:
create a file in the project root title it intro.js
add require('react-native').unstable_enableLogBox(); to intro.js
add import './intro'; at the top of index.js
This worked with me.

Here's how I did it. For some reason imports get resolved super early, which seems to cause the following error:
Error: LogBox must be enabled before AppContainer is required so that it can properly wrap the console methods.
Please enable LogBox earlier in your app.
Move the contents of your entrypoint (usually index.js) to another file (_index.js for example), then require() it from your entrypoint AFTER enabling the logbox:
if(__DEV__)
require('react-native').unstable_enableLogBox();
require('./_index');

import {name as appName} from './app.json';
require('react-native').unstable_enableLogBox();
please write in simple manner I mentioned above please check screen shot for Log box.

First of all, identify where is the main file of your entire app. For example, if you are using a file like Reactotron config file you will put this line before all imports:
require('react-native').unstable_enableLogBox();
Therefore, if you are not using something like Reactotron you will put the above line, before your App import on index.js in the root of project, like this:
require('react-native').unstable_enableLogBox();
...
import { AppRegistry } from 'react-native';
import App from './src/App';
import { name } from './app.json';
AppRegistry.registerComponent(name, () => App);
I hope i've helped! =)

According to the React Native docs this is how you would implement it:
import { LogBox } from 'react-native';
// Ignore log notification by message:
LogBox.ignoreLogs(['Warning: ...']);
// Ignore all log notifications:
LogBox.ignoreAllLogs();
I did this at the very top of App.js and it worked great.

Related

How can I run an async task before react app starts

I'm looking for a handle that would allow me to run async code in the RN runtime before my React Native app executes.
I tried something like this
// index.js
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
asyncTask.then(() => {
AppRegistry.registerComponent(appName, () => App);
});
but the code crashes with
ERROR Invariant Violation: Module AppRegistry is not a registered
callable module (calling runApplication). A frequent cause of the
error is that the application entry file path is incorrect.
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
Isn't there a provided way to run async tasks before the app starts ?
In my case I need this to do required updates on AsyncStorage

React Native Storybooks Component not Loading

I'm trying to load the default stories that come when you first install Storybook. Had some issues getting the server to start but I managed to fix it by adding port and host in the config. But even after getting it to run, clicking on any of the components doesn't update.
I'm expecting to see a Button.
And ideas? Here's the storybook index.js. I'm using Expo.
// if you use expo remove this line
// import { AppRegistry } from "react-native";
import {
getStorybookUI,
configure,
addDecorator,
} from "#storybook/react-native";
// import { withKnobs } from '#storybook/addon-knobs';
import "./rn-addons";
// enables knobs for all stories
// addDecorator(withKnobs);
// import stories
configure(() => {
require("./stories");
}, module);
const StorybookUIRoot = getStorybookUI({
host: "192.168.100.6", // replace this ip address with your local ip address
port: "7007",
asyncStorage: null,
});
// If you are using React Native vanilla and after installation you don't see your app name here, write it manually.
// If you use Expo you should remove this line.
// AppRegistry.registerComponent("%APP_NAME%", () => StorybookUIRoot);
export default StorybookUIRoot;
Also not sure if this is related but I've had to comment out addon-knobs in addons.js because it can't find it even though I have addon-knobs in my package.json:
import '#storybook/addon-actions/manager';
import '#storybook/addon-links/manager';
// import '#storybook/addon-knobs/manager';
I've tried replacing it with
register
like I've read on here but it still didn't work.
import '#storybook/addon-knobs/register';

Tab Navigator Doesn't work when importing files

I want to create a bottom tab navigator and am importing 3 classes. But it doesn't work. The app doesn't throw any errors, but fails to open. It works fine if all classes are in the same file. But I really need to import as the classes are massive. Each individual class is working perfectly.
My code:
import React, {Component} from 'react'
import {createBottomTabNavigator,createAppContainer} from 'react-navigation'
import FriendScreen from './screens/FriendScreen'
import InstructionsScreen from './screens/InstructionsScreen'
import ItemsScreen from './screens/ItemsScreen'
const TabNavigator=createBottomTabNavigator({Game:FriendScreen,Instructions:InstructionsScreen,Items:ItemsScreen},{initialRouteName:"Game"})
export default createAppContainer(TabNavigator)
I've read a number of code segments on the internet, but can't locate the error
The error is that you didn't follow the normal structure defined by react-navigation.
When defining a screen it should be like:
RouteName:{
screen:Component.
}
You TabNavigator should be:
const TabNavigator=createBottomTabNavigator({
Game: {
screen : FriendScreen
},
Instructions: {
screen : InstructionsScreen
},
Items:{
screen : ItemsScreen
}
},
{
initialRouteName:"Game"
})

How to configure App.js in react-native to use React-native-ui-kitten?

I am a newbie in react-native and I'm trying to use the react-native-ui-kitten library. The problem is that the documentation is not really helpful.
I have I have installed ui-kitten and the theme as indicated with the command: npm i react-native-ui-kitten #eva-design/eva
The documentation asks to configure the application root which I consider to be the App.js file unless I'm wrong.
So i changed the App.js generated code to this:
import React from 'react';
import {
mapping,
theme,
} from '#eva-design/eva';
import { ApplicationProvider } from 'react-native-ui-kitten';
import { Application } from './path-to/root.component';
export default class App extends React.Component {
public render(): React.ReactNode {
return (
<ApplicationProvider
mapping={mapping}
theme={theme}>
<Application/>
</ApplicationProvider>
);
}
}
Unfortunetely it's not working.
Has anyone recently used ui-kitten library ?
What does the documentation mean by Application Root and how to set up a simple react-native project to use react-native-ui-kitten?
And yes I actually checked the documentation but maybe there is something I am not doing right.
I ran into the same problem.
I discovered that the creators of this UI kit use in fact in their code examples Typescript.
So you need to recreate your Reactnative project using a Typescript template, then rename accordingly the App.js into App.tsx
Any other components need to be renamed with the extension .tsx.
Make sure you read about Typescript:
https://www.typescriptlang.org
Here it is how you can recreate your project with Typescript:
https://facebook.github.io/react-native/blog/2018/05/07/using-typescript-with-react-native
All the best,
I am also a beginner in react-native and it seems we kinda differ in implementing the code. I am not sure if this would help but this is the way I implement your code:
import * as React from 'react';
import { mapping, light as lightTheme } from '#eva-design/eva';
import { ApplicationProvider } from 'react-native-ui-kitten';
import { Application } from './path-to/root.component';
const App = () => (
<ApplicationProvider
mapping={mapping}
theme={lightTheme}>
<Application/>
</ApplicationProvider>
);
export default App;
You could try it and let me know if this suits you. Good luck!

Why is importing not working in react native?

I am trying to import my second file into App.js for my project. I am getting the error "The development server returned response error code: 500". Basically saying "Unable to resolve "MainFile" from "App.js".
Why is this happening? I believe it is correct but for some reason this bugfest saying that the file doesn't exist. First code is my App.js file and the second one is the code i am trying to import.
https://gyazo.com/6911c477f9c9e8149370571ca49a0b9f
https://gyazo.com/73f0079bc6a2640877bcc30fa1e609ec
import React from 'react';
import MainFile from './components/MainFile';
export default class App extends React.Component{
render() {
return(
<MainFile />
);
}
}
import React from 'react';
import {StyleSheet, Text, View, TextInput, ScrollView, TouchableOpacity} from 'react-native';
export default class MainFile extends React.Component{
render(){
return(
<View style={styles.container}>
<Text>Testing</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
},
});
Double check if file exist at given path or not
If file is not javascript(.js), then mention the extension
Try using double quote when referring to file ( e.g. "./src/..")
If file to import is not .js, then make sure appropriate react library is imported in first import
E.g.( import {..., Image } from 'react-native' )
delete node_modules folder
edit package json : react-native version to "55.4" or "55.2" and
babel-preset-react-native to "4.0.0" ( if your version is different
try to use the latest one or downgrade it).
run npm install or yarn install command
you're done
Source : Github
In my situation i changed ./MainFile to ./MainFile.js and it start worked. this should work without specifying extension. But something went wrong and he needed it
You need to add an index.js or ts page in the folder from which you are importing components and then write an export statement for component in that index.js page.
add export just like follows then import should work -
export { default as Home } from './Home'