Problems connecting api to react-native - reactjs

i was doing a new app with react native i'm using rails/graphql but the problem is when i try to call the api url in my app with the configuration that i've made. it doesnt work at all (lauching expo cli), the error that o get is:
[Error: Network error: Network request failed]
i've already set the ip address of my pc instead of 'localhost' but i dont get any results my code is:
// React
import React from 'react';
// React-native
import { StyleSheet, Text, View } from 'react-native';
// Components
import Test from './app/components/Test/index';
import { ApolloProvider } from 'react-apollo'
import { ApolloClient } from 'apollo-client'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { setContext } from 'apollo-link-context';
// 2
const httpLink = createHttpLink({
uri: 'http://my-ip-address:3000/graphql'
})
// 3
const client = new ApolloClient({
link: httpLink,
cache: new InMemoryCache()
})
export default class App extends React.Component {
render() {
console.log('client ', client)
return (
<ApolloProvider client={client}>
<Test />
</ApolloProvider>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
the component that is calling the query is:
// React
import React, { Fragment } from 'react';
// React-native
import { StyleSheet, Text, View } from 'react-native';
// React Apollo
import { graphql } from 'react-apollo';
import {flowRight as compose} from 'lodash';
// Queries
import queries from './queries';
class Test extends React.Component {
constructor() {
super();
}
render() {
console.log('props ', this.props);
return(
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>
Se conecto! 🎉
</Text>
</View>
);
}
}
export default compose(
graphql(queries.getSpots, { name: 'getSpots' }),
)(Test);

everything with the configuration was fine, the only thing that was happening was the way to start the rails server with my current version of rails. so instead of start off rails server with "rails s" i had to use "rails -b 0.0.0.0". after that i could connect my app from android emulator to my localhost:3000/graphiql

I didn't read your code but I know problem:
go to infor.plist
add (or change key) to react native - ios allow your api url
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>Your-API-URL-ROOT-HERE</key>
<dict>
<!--Include to allow subdomains-->
<key>NSIncludesSubdomains</key>
<true />
<!--Include to allow HTTP requests-->
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true />
<!--Include to specify minimum TLS version-->
<key>NSTemporaryExceptionMinimumTLSVersion</key>
<string>TLSv1.1</string>
</dict>
</dict>
</dict>

Related

Possible unhandled promise rejection error Network Request Failed react native with flask backend

I am trying to run a react native project with a call to a flask endpoint:
app.js
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import React, {useState, useEffect} from "react"
export default function App() {
const [currentTime, setCurrentTime] = useState(0);
useEffect(() => {
fetch('/time').then(res => res.json()).then(data => {
setCurrentTime(data.time);
});
}, []);
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<Text>The current time is {currentTime}.</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
flask endpoint in api.py
import time
from flask import Flask
app = Flask(__name__)
#app.route('/time')
def get_current_time():
return {'time': time.time()}
however, the time is not displaying; just the number 0.
I am getting the following error in terminal:
Possible Unhandled Promise Rejection (id:0): TypeError: Network Request Failed
I have tried adding my IP address to the api call (https://myip:3000/time), but it did not work.
I am expecting for the time (e.g 1581527730.5866282) to be displayed.

Could not find "client" in the context or props of Mutation

After executing my React Native app I've ran into this error:
Could not find "client" in the context or props of Mutation. Wrap the root component in an <ApolloProvider>, or pass an ApolloClient instance via props.
Here's my apollo client
import { Platform } from "react-native";
import { ApolloClient, InMemoryCache } from "#apollo/client";
// To access our host machine and not the device itself we use a special ip on android
// If we are using IOS access localhost:4000 else use 10.0.0.2:4000
const host =
Platform.OS === "ios" ? "http://localhost:4000" : "http://10.0.2.2:4000";
export const client = new ApolloClient({
uri: host,
cache: new InMemoryCache(),
});
And here's index.tsx which wraps my root component:
import { ApolloProvider } from '#apollo/client';
import { client } from "./apollo";
import { Routes } from "./routes/index";
export default class App extends React.PureComponent {
render() {
return (
<ApolloProvider client={client}>
<Routes />
</ApolloProvider>
);
}
}
Before V 3.0 react-apollo and apollo-client (And other sub-packages) were on separate packages (Made a lot of issues/errors related to packages versions. Issue 2042 -or- issue 2900).
The best idea is to Migrating to Apollo Client 3.0.
The react-apollo package has been deprecated, and the functionality
offered by each of the above packages can now be accessed from
#apollo/client. Migrating to Apollo Client 3.0
Apollo V3.0 Great "get-started"/tuturial example + sandbox:
https://www.apollographql.com/docs/react/get-started/
client
In your case looks like the client is undefined. Run and test:
console.log(client); /* return object -or- not? */
Try to run this code in one file (If this code works fine - separate the files you want and use module.exports).
import React from "react";
import { render } from "react-dom";
import {
ApolloClient,
InMemoryCache,
ApolloProvider,
useQuery,
gql
} from "#apollo/client";
export const client = new ApolloClient({
uri: "https://48p1r2roz4.sse.codesandbox.io",
cache: new InMemoryCache()
});
export default class App extends React.PureComponent {
render() {
return (
<ApolloProvider client={client}>
<h2>My first Apollo app <span>🚀</span></h2>
</ApolloProvider>
);
}
}
render(<App/>, document.getElementById("root"));

The AppNavigator is not exporting the required page

My SplashScreen page is not being exported by the AppNavigator even though the variable is declared and read, on the SplashScreen page.
I have tried to use createDrawerNavigator but I get the same result. I have tried to reset the cache with:
rm -rf node_modules && npm install
npm start -- --reset-cache
I have tried to reInstall the createDrawerNavigator
The error is below:
Unable to resolve module `./navigation/AppNavigator` from
`/Users/jaseyacey/Desktop/beermeapp4/screens/Splash.Screen.js`:
The module `./navigation/AppNavigator` could not be found from
`/Users/jaseyacey/Desktop/beermeapp4/screens/Splash.Screen.js`.
Indeed, none of these files exist:
The SplashScreen code is below:
import React, {Component } from 'react';
import {Image, View } from 'react-native';
import { inject } from 'mobx-react';
import AppNavigator from './navigation/AppNavigator';
import { createDrawerNavigator } from 'react-navigation-drawer';
#inject("stores")
class SplashScreen extends Component {
constructor(props) {
super(props)
}
componentDidMount() {
const {stores, navigation } = this.props;
setTimeout(() => {
navigation.navigate("Login")
}, config.store.SplashTime )
}
render() {
const { stores } = this.props
return (
<View style={{flex: 1}}>
<image style={{flex: 1, width: null, height: null}} source= {config.store.SplashImg}/>
</View>
)
}
}
export default AppNavigator;
You should add you Splash Screen into your App Navigator and there you will create an App Container with your navigation type (drawer navigation in this case) and export the App Navigator containing your splash Screen as your first screen of navigation.
I don't have a Splash Screen on my project yet, but you can see how I configured my App Navigation here: https://github.com/pahferreira/destetik-mobile/blob/master/src/navigation/AppNavigation.js
Or you can check here on their documentation: https://reactnavigation.org/docs/en/hello-react-navigation.html

React navgiation AppRegistry is not registered

I have setup a brand new project using react-native init <proj> and it builds fine. I have added react-navigation to the project following the docs. However, I cannot get passed this error:
Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)
Even using the single file stack example from their documentation:
import React from 'react';
import { View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
}
const AppNavigator = createStackNavigator({
Home: {
screen: HomeScreen,
},
});
export default createAppContainer(AppNavigator);
It does not work. I am at a loss to what the issue could be here as I am using a base install with their working example and nothing else added. I have tried everything from restarting the bundler to clearing all caches I can think of.
Make sure you're registering the component:
const App = createAppContainer(navigator):
AppRegistry.registerComponent(appName, () => App)

Unable to resolve module from 'index.js' for custom component

I'm kinda new to react-native and I'm currently trying to add a stack-navigator to my app:
// import React from 'react';
import {Text, View, AppRegistry} from 'react-native';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
// class HomeScreen extends React.Component {
// static navigationOptions = {
// title: 'Welcome',
// };
// render() {
// return (
// <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
// <Text>Home Screen</Text>
// </View>
// );
// }
// }
const MainNavigator = createStackNavigator({
Home: {screen: HomeScreen}
}, {
initialRouteName: 'Home'
})
const NavigationApp = createAppContainer(MainNavigator);
AppRegistry.registerComponent('ReactNativeApp', () => NavigationApp)
export default NavigationApp
If I uncomment the commented code in the above example, everything works fine, now I'm trying to move the HomeScreen component to its own file so I tried this:
HomeScreen.js
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
}
index.js
import HomeScreen from './components'
import {AppRegistry} from 'react-native';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
const MainNavigator = createStackNavigator({
Home: {screen: HomeScreen}
}, {
initialRouteName: 'Home'
})
const NavigationApp = createAppContainer(MainNavigator);
AppRegistry.registerComponent('ReactNativeApp', () => NavigationApp)
export default NavigationApp
But I keep getting this error:
error: bundling failed: Error: Unable to resolve module `./components` from `index.js`:
None of these files exist:
* components(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
* components/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
at ModuleResolver.resolveDependency (/Users/myuser/git/POC/ReactNativeApp/ReactNativeApp/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:163:15)
at ResolutionRequest.resolveDependency (/Users/myuser/git/POC/ReactNativeApp/ReactNativeApp/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
at DependencyGraph.resolveDependency (/Users/myuser/git/POC/ReactNativeApp/ReactNativeApp/node_modules/metro/src/node-haste/DependencyGraph.js:282:16)
at Object.resolve (/Users/myuser/git/POC/ReactNativeApp/ReactNativeApp/node_modules/metro/src/lib/transformHelpers.js:267:42)
at /Users/myuser/git/POC/ReactNativeApp/ReactNativeApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:426:31
at Array.map (<anonymous>)
at resolveDependencies (/Users/myuser/git/POC/ReactNativeApp/ReactNativeApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:423:18)
at /Users/myuser/git/POC/ReactNativeApp/ReactNativeApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:275:33
at Generator.next (<anonymous>)
at asyncGeneratorStep (/Users/myuser/git/POC/ReactNativeApp/ReactNativeApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)
In the past I've been able to import them the same way as I did, but somehow react-navigation is giving me problems with it.
The folder structure that I have is as follows:
/
index.js
components/
HomeScreen.js
I have seen similar questions but all of them involved third-party components from react but not ones made by oneself.
I have tried to npm start --reset-cache as suggested in this answer
I'm using these versions if it matters.
react-native-cli: 2.0.1
react-native: 0.61.2
How to fix this error?
After following #Vencovsky proposed solution (with and without .js extension):
import HomeScreen from './components/HomeScreen.js'
I get this new error:
The component for route 'Home' must be a React component. For example:
import MyScreen from './MyScreen';
...
Home: MyScreen,
}
You can also use a navigator:
import MyNavigator from './MyNavigator';
...
Home: MyNavigator,
}
The way I'm calling this React app is through a Swift bridge in this way:
import Foundation
import UIKit
import React
class ButtonController: UIViewController {
#IBOutlet weak var button: UIButton!
#IBAction func buttonClicked(_ sender: Any) {
if let jsBundleLocation = URL(string: "http://X.X.X.X:8081/index.bundle?platform=ios") {
//The data is used as initialProperties to React Native App.
let data:NSDictionary = ["onNavigationStateChange": "{handleNavigationChange}",
"uriPrefix":"/app"]; //We can use this parameter to pass the data to the React native App from the Native App.
//The RCTRootView is a native view used to host React-managed views within the app. Can be used just like any ordinary UIView.
let rootView = RCTRootView(
bundleURL: jsBundleLocation,
moduleName: "ReactNativeApp",
initialProperties: data as [NSObject : AnyObject],
launchOptions: nil)
let viewController = UIViewController()
viewController.view = rootView
self.present(viewController, animated: true, completion: nil)
}
}
}
You need to import it as
import HomeScreen from './components/HomeScreen.js'
If you only import it as './components', it will try to get ./components.js or ./components/index.js (and the same but with other extensions), but you don't have any of that.
And if you take a look at the error, it says it tried to get these files but didn't find.
None of these files exist:
* components(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
* components/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
First line with * - Trying to get ./components.js and other extensions
Second line with * - Trying to get ./components/index.js and other extensions
I solved the second issue after #Vencovsky answer by changing:
export class HomeScreen extends React.Component
To:
export default class HomeScreen extends React.Component
After reading this answer / comment on GitHub.

Resources