I already tried a well-known resolution of this problem--"change every file which imports from .env". It worked first few times, but now it has no effect.
I'd appreciate it if somebody shed some lights on my questions.
Why the solution stopped functioning?
Why it worked first few times?
Is there any other way to solve this problem?
.env
REACT_APP_API_BASE_URL=http://10.0.2.2:3000/v8/api
constants.js
import {REACT_APP_API_BASE_URL} from "#env"
export const apiBaseUrl = REACT_APP_API_BASE_URL
//I added this sentence so that my app recognizes changes in .env
App.js
import React,{useEffect} from 'react';
import {
Text,
View,
Alert
} from 'react-native';
import { apiBaseUrl } from './constants.js';
const App = () => {
useEffect(()=>{
Alert.alert(apiBaseUrl)
//The above alert should display http://10.0.2.2:3000/v8/api, but it displays the previous value of REACT_APP_API_BASE_URL
},[])
return (
<View>
<Text>Hey</Text>
</View>
);
};
export default App
I tried following solutions, but it didn't work;
restart metoro
rebuild project by npx react-native run-android
wipe data in ADV
Related
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';
I already have a react-native project which I cloned and running successfully.
I added a new file to the project and tried to link that page using a button from another page with, this.props.navigation.navigate('DisplayHomeScreen');
I couldn't link the 'DisplayHomeScreen.js'.
But when I link a page which was already there, the navigate function is working fine.
Here is the simple code of DisplayHomeScreen.js
import React, { Component } from 'react';
import { View, Text } from 'react-native';
class DisplayHomeScreen extends Component {
render() {
return (
<View>
<Text>Display Home</Text>
</View>
);
}
}
export default DisplayHomeScreen;
As your code snippet is insufficient to identify the problem.can you please share your navigation stack.Well at spot I can/ recommend doing.
yarn install (if you are using yarn as a package manager)
react-native link
close metro bundle
restart app
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!
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'
We are trying to use the same React components both in mobile (react-native) and in web (create-react-app).
It's is working out pretty well so far thanks to react-native-web (configuration below).
However react-native-vector-icons, which we use extensively in the react-native project, does not compile with react-native-web. This means any component which uses a component with vector-icons will also need a specific web version. Having web specific versions of components effects maintenance.
Is there a known way, without having to eject create-react-app configuration, to deal with 3rd parties such as react-native-vector-icons in web?
import {createIconSetFromIcoMoon} from "react-native-vector-icons";
import Font from './Font.json';
export default createIconSetFromIcoMoon(UbeyaFont);
Things we've thought of so far:
we are currently looking into two ideas:
Environment based import:
# Pseudo code:
# if mobile import this, otherwise import that.
We're not sure whether this kind of dynamic importing is possible
Webpack configuration which is injected into node_modules/react-scripts. Not elegant but with a gulp watch which we have anyway we can make sure the configuration is always there.
Any ideas or thoughts are appreciated.
Configuration:
We've built a new private NPM package which holds all the React components and by using gulp watch that copies the package to both the mobile and web projects we save the trouble of constantly npm publishing and yarning during development (the only drawback Webstorm's indexing process).
We ended up using a gulp script to overwrite webpack. The stages are:
1) Build replacement packages
We built a web version for each React Native 3rd party. For react-native-vector-icons it turned out to be quite simple:
import React from 'react';
export const Icon = (props) => <div className="material-icons"
style={{color:props.color}}>
{props.name}
</div>;
export default Icon;
2) Adjust the Webpack configuration
Using gulp we overwrite the create-react-app webpack configuration with:
resolve: {
modules: ...
alias: {
"babel-runtime": path.dirname(
require.resolve("babel-runtime/package.json")
),
"react-native": "#ourcompany/react-native-web",
"react-native-vector-icons": "#ourcompany/react-native-vector-icons",
...
The gulp task script:
gulp.task("copyWebpack", function() {
return gulp
.src(["package.json", "src/_webpack/*.js"])
.pipe(
gulp.dest(
path.resolve(pathWeb + "/node_modules/react-scripts/config")
)
);
});
Note:
Ejecting create-react-app's configuration is cleaner, however it means you'll need to maintain the configuration and we preferred leaving the configuration as is and overwriting it during the build process.
You'd notice we have overwritten react-native-web itself. More on this in the next optional step.
3) Extend react-native-web (optional)
If you are using components which react-native-web does not yet support, you would want to build packages for them and extend react-native-web so your web version will work. Simply create a new package #yourcompany/react-native-web and generate an index.js in which import the components that do exist in react-native-web and reference the ones you've built. Note that when we built our project react-native-web didn't have a FlatList or a SectionList and now (October 2018) it has both (Modal is still missing :-)).
import {
StyleSheet as _StyleSheet,
View as _View,
Text as _Text,
Image as _Image,
I18nManager as _I18nManager,
AsyncStorage as _AsyncStorage,
Platform as _Platform,
Linking as _Linking,
ActivityIndicator as _ActivityIndicator,
ListView as _ListView,
Modal as _Modal,
Picker as _Picker,
RefreshControl as _RefreshControl,
TextInput as _TextInput,
Touchable as _Touchable,
TouchableHighlight as _TouchableHighlight,
TouchableNativeFeedback as _TouchableNativeFeedback,
TouchableOpacity as _TouchableOpacity,
TouchableWithoutFeedback as _TouchableWithoutFeedback,
Dimensions as _Dimensions,
Animated as _Animated,
ScrollView as _ScrollView,
SafeAreaView as _SafeAreaView,
BackHandler as _BackHandler,
Switch as _Switch,
NetInfo as _NetInfo,
AppState as _AppState,
ColorPropType as _ColorPropType,
} from 'react-native-web';
import {SectionList as _SectionList} from './SectionList';
import {FlatList as _FlatList} from './FlatList';
import {Alert as _Alert} from './Alert';
import {WebView as _WebView} from './WebView';
import {Share as _Share} from './Share';
import {PermissionsAndroid as _PermissionsAndroid} from './PermissionsAndroid';
import {ActionSheetIOS as _ActionSheetIOS} from './ActionSheetIOS';
import {ToastAndroid as _ToastAndroid} from './ToastAndroid';
export const StyleSheet = _StyleSheet;
export const View = _View;
export const Text = _Text;
export const Image = _Image;
export const I18nManager = _I18nManager;
export const AsyncStorage = _AsyncStorage;
export const Platform = _Platform;
export const Linking = _Linking;
export const ActivityIndicator = _ActivityIndicator;
export const ListView = _ListView;
export const Modal = _Modal;
export const Picker = _Picker;
export const RefreshControl = _RefreshControl;
export const TextInput = _TextInput;
export const Touchable = _Touchable;
export const TouchableHighlight = _TouchableHighlight;
export const TouchableNativeFeedback = _TouchableNativeFeedback;
export const TouchableOpacity = _TouchableOpacity;
export const TouchableWithoutFeedback = _TouchableWithoutFeedback;
export const Dimensions = _Dimensions;
export const Animated = _Animated;
export const ScrollView = _ScrollView;
export const SafeAreaView = _SafeAreaView;
export const BackHandler = _BackHandler;
export const Switch = _Switch;
export const NetInfo = _NetInfo;
export const AppState = _AppState;
export const Alert = _Alert;
export const Share = _Share;
export const WebView = _WebView;
export const PermissionsAndroid = _PermissionsAndroid;
export const ActionSheetIOS = _ActionSheetIOS;
export const ToastAndroid = _ToastAndroid;
export const SectionList = _SectionList;
export const FlatList = _FlatList;
export const ColorPropType = _ColorPropType;