rgommezz / react-native-offline Goto Github PK
View Code? Open in Web Editor NEWHandy toolbelt to deal nicely with offline/online connectivity in a React Native app. Smooth redux integration ✈️
License: MIT License
Handy toolbelt to deal nicely with offline/online connectivity in a React Native app. Smooth redux integration ✈️
License: MIT License
I've noticed the event listener on NetInfo.isConnected isn't getting removed properly. It seems this was introduced in Added ability to check connectivity regularly (#32).
See:
componentDidMount() {
NetInfo.isConnected.addEventListener(
'connectionChange',
withExtraHeadRequest ? this.checkInternet : this.handleNetInfoChange,
);
}
and
componentWillUnmount() {
NetInfo.isConnected.removeEventListener(
'connectionChange',
withExtraHeadRequest
? this.handleNetInfoChange
: this.handleConnectivityChange,
);
}
I'm assuming, based on the change, that the addEventListener should be using this.handleNetInfoChange and this.handleConnectivityChange, though I'm not familiar enough with the project to say that with full confidence.
It seems there is a problem with the way you export your module or the way I use it ..
when I try to import the reducer, i've got this error
import { reducer as network } from 'react-native-offline-utils';
-> ExceptionsManager.js:71 No reducer provided for key "network"
Is there any way of delaying all redux actions to be dispatched until offlineActionTypes.CONNECTION_CHANGE action is fired?
Reason being that right now the initial state of the network.isConnected is true and this is an issue when users open apps with no internet connection
Thanks
There is full test coverage for networkReducer
and createNetworkMiddleware
, which are the backbone of the library.
However, It would be great to have unit tests for withNetworkConnectivity
as well, since its logic has grown over the last months with new ideas of customisation coming from the community.
I don't have enough time in the near future to tackle it, but would take it eventually if nobody else's offers volunteer :)
It will cause an inconsistent state if we start up the app in offline mode
NetInfo
is not capable of detecting internet access at all, but rather only connectivity. Cases like an airport, where you automatically connect to WiFi networks but don't get access unless you login would cause false positives. A better approach would be to verify internet access in one of the following ways:
When I disable wifi it works fine, the isConnected
property is updated and everything, when I enable it back the app freezes and shows this error on Xcode:
This doesn't happen every time, sometimes it works enabling it back but then crashes when I disable and enable again.
I'm not sure if this a react-native-offline-related issue, it seems to happen with react-native's NetInfo
as well, everything works fine if I simulate updating isConnected
property on the store with a setInterval
function.
import { reducer as network } from 'react-native-offline';
// ...
export default combineReducers({
// ...
network,
});
import { withNetworkConnectivity } from 'react-native-offline';
class Main extends Component {
// ...
}
export default withNetworkConnectivity({
withRedux: true,
})(connect(mapStateToProps, mapDispatchToProps)(Main));
class MyComponent extends Component {
render() {
if (this.props.network.isConnected) {
return (
<View>
<Text>Not connected</Text>
</View>
);
}
return (
<View>
<Text>My awesome view</Text>
</View>
);
}
}
const mapStateToProps = ({ network }) => ({
network,
});
export default connect(mapStateToProps)(MyComponent);
10.12.6
10.3.3
0.47.2
3.1.0
if you use a server that does not support HEAD (i tried with https://spaces.archilogic.com), it always reports offline.
These servers report a 405 error on the HEAD command.
you can test that with curl -i --head https://spaces.archilogic.com
Hi, It would be nice add to queue or retry after refreshing the key 401 failed results. maybe some other options. Can you suggest the best way to do so.
I am using this library for displaying no connection screen on mobile. On iOS , I am getting red screen error when my keyboard is displaying on screen and I disconnect internet.
My configurations
"react-native": "^0.42.3",
"react-native-offline": "^3.4.1",
I think that because componentWillUnmount is not called when this library calls no connection screen, this error comes. Can anyone help me to have workaround for same.
Can anyone please suggest me or help me how to resolve this issue
Thanks for the great offline library. When i run it in a real android. the following issues are found:
If i run the thunk actioncreator function in componentDidMount when there is no network (turn off wifi and 4G in the mobile phone), thunk return function will not be called when the network is resumed.
There are occasions when the library cannot detect the network condition correctly.
a) when i enter into a lift of a high-rise building, network-off condition is detected correctly. However, when the real network is back after i come out from the lift, network-on condition is not detected.
b) bringing the app back from the background to the foreground, network-on condition is always not detected.
May i seek for your help?
Thank you very much.
I am checking whether my phone is online or not using below code.
const { isConnected } = this.props;
But it first returns true but instantly it returns false.
Please let me know what I am doing wrong.
I am trying to understand something that is perhaps more related to redux code patterns but is highly relevant to my usage of this library. Consider the situation where I am trying to fetch a users Id. I would dispatch a function such
const fetchUserID = (userID) => {
function thunk(dispatch) {
const USER = { userID: userID };
const USER_POST_URI =
"https://someURL.com/users/create-user";
fetch(USER_POST_URI, {
headers: new Headers({
Accept: "application/json",
"Content-Type": "application/json"
}),
method: "POST",
body: JSON.stringify(USER)
})
.then(res => {
if (res.status == 200) {
const XAUTH_TOKEN = res.headers.map["x-auth"][0];
dispatch(actions.setUserToken(XAUTH_TOKEN));
return res.json();
} else {
throw new Error("Something wrong with the server!");
}
})
.then(data => {
dispatch(actions.setUserID(data._id));
})
.catch(error => {
console.error(error);
});
}
thunk.interceptInOffline = true;
return thunk;
};
Upon dispatching this action, if I was offline react-native-offline would place this action into an action queue to be retried later, and the following code (as taken from the docs in this repo) could be implemented to specify that the 'FETCH_USER_ID' action criteria for re-dispatching.
const fetchAction = {
type: 'FETCH_USER_ID',
payload: {
id: 2
},
meta: {
retry: true,
dismiss: ['NAVIGATE_BACK']
}
};
What I don't understand is how to link this 'FETCH_USER_ID' action type with my fetchUserID function. If the 'fetchAction' above is dispatched, it specifies with type 'FETCH_USER_ID' in my reducers which piece of state to change, however, it is not recommended to dispatch an async action such as 'fetchUserID' from within the reducer, so how do I state that 'fetchUserID' is represented by the 'FETCH_USER_ID' action type to be dispatched.
Sorry if this is a bit confusing or verbose. I sense that there is something pretty simple or fundamental that I'm missing here, though having a difficult time explaining it. Any insight would be appreciated, and if there is any progress of a full example, this would be really useful. Thanks!
Thank you so much for this great library. It gives me (a newbie to react-native) a great help in developing an app that works in offline mode using react-native. May i ask if i can add Redux-persist on top of your library by doing something like the following? Thank you so much for your advice.
const store = createStore(
rootReducer,
compose(
applyMiddleware([networkMiddleware, thunk]),
autoRehydrate()
)
);
persistStore(store, { storage: AsyncStorage });
https://facebook.github.io/react-native/docs/netinfo.html#effectiveconnectiontype-enum
The network reducer state will have the next shape:
type NetworkState = {
isConnected: boolean,
connectionType: '2g' | '3g' | '4g' | 'unknown',
actionQueue: Array<*>
}
That will allow the user to dynamically set different timeouts for API calls, depending on the connection quality.
As per a brief exchange with @rauliyohmc on #49, I would like to open an issue to discuss modifying how react-native-offline
writes to the meta
namespace. In my use case, I have had to rename a metadata key in my production code from dismiss
to something else because the meta
namespace is hardcoded in the project. This was found after a fair bit of debugging thinking there was a bug with react-native-offline
when in fact it was just a namespace collision.
What would be great is to be able to programatically change the namespace (for example, action.meta.foo.bar
instead of action.meta
) so that projects can avoid namespace collisions.
Hi,
There is (in my opinion) a big problem by fetching an url to check connectivity as requests are never aborted so if you have an interval of 10s and your timeout is 3s, the code in checkInternetAccess will resolve false but the request is still maintained in stack and waiting for response as in node-fetch you cannot specify a real timeout.
So the problem is when there is a real timeout, fetch requests still waiting in stack got a reject asynchroniously and resolve => isConnected to false but actually you've the connection back.
Anyway it causes a non stable comportement in application, or sometimes you've got a hundred of request responses at once.
Another problem is that it causes a memory leak in app due to hundreds of requests loaded in memory waiting response.
Maybe you should change fetch with something else which is able to properly handle real timeouts ?
For now because of this problem I'm unable to use this in production with checkConnectionInterval parameter and I cannot use it without this parameter as on both platforms (Android and iOs) sometimes I don't have isConnected set back to true when I loose connection and I won it back...
One possible solution would be to abort waiting request when timeout occurs but it's not possible neither with node-fetch :/
Version: 3.7.0
I've just tried to upgrade to 3.7.0, I received the:
Unable to resolve module
redux-saga/effects
from<app path>/node_modules/react-native-offline/src/saga.js
: Module does not exist.
Given the standard 3 options to fix: clear watchman, remove and reinstall node modules, reset metro bundler cache.
None of the above worked. When looking at the redux-saga source code, under the effects directory, there is no module, it's just a package.json. I'm not sure if the issue is redux-saga or this library.
Thoughts?
hello,
when i use this module with redux-persist, if i have a actionQueue when i kill app, on resume i have always an error because it restore the actionQueue with an Array of null value.
Anyone else have this error?
thanks
This is an issue I'm struggling with on my current project. What would be very very useful is an example project to show typical usage.
So sort of something like this repository: https://github.com/spencercarli/offline-redux-actions, for this article: https://medium.com/differential/handling-offline-actions-in-react-native-74949cbfabf2
Hello,
It would be really apreciated if you could show us an exemple on how to use your usefull library with Redux Thunk and Redux Persist.
I tried to do it without success. How do we have to initialise the middleware ?
I have anything like this :
import {persistStore, autoRehydrate} from "redux-persist";
import {applyMiddleware, createStore, compose} from "redux";
import {AsyncStorage} from "react-native";
import thunk from "redux-thunk";
import reducers from './reducers';
import {createNetworkMiddleware} from 'react-native-offline';
const middlewares = [thunk,createNetworkMiddleware];
store = createStore(reducers, undefined, compose(
applyMiddleware(...middlewares),
autoRehydrate()
));
persistStore(store, {storage: AsyncStorage});
export default store;
Thanks in advance, and good job for the library.
I see that the pinging keeps running even if the app is backgrounded.
What do you think about adding an option for configuring this behaviour? It might not always be good that the pinging continues endlessly when the app is background.
PS. Great job on making this library, @rauliyohmc! Thanks a lot.
Packages in use:
I'm trying to set up offline use.
I set up the reducer:
import { combineReducers } from 'redux';
import { reducer as networkReducer } from 'react-native-offline';
import configActions, { reducer as configReducer } from './configStore';
import initActions, { reducer as initReducer } from './initStore';
import loginActions, { reducer as loginReducer } from './loginStore';
import navigationActions, { reducer as navigationReducer } from './navigationStore';
import uiActions, { reducer as uiReducer } from './uiStore';
import userActions, { reducer as userReducer } from './userStore';
export default combineReducers({
config: configReducer,
init: initReducer,
login: loginReducer,
navigation: navigationReducer,
network: networkReducer,
ui: uiReducer,
user: userReducer
});
export {
configActions,
initActions,
loginActions,
navigationActions,
uiActions,
userActions
};
And I added the middleware:
import { applyMiddleware, createStore, compose } from 'redux';
import { persistStore, autoRehydrate } from 'redux-persist';
import { createNetworkMiddleware } from 'react-native-offline';
import createSagaMiddleware from 'redux-saga';
import { createLogger } from 'redux-logger';
import rootReducer, { initActions } from './index';
import { reduxPersist } from '../config';
import rootSaga from '../sagas';
// onComplete remove loading
export default (onComplete) => {
const middlewares = [];
const enhancers = [];
const networkMiddleware = createNetworkMiddleware({ regexActionType: /.*_REQUEST/ });
const sagaMiddleware = createSagaMiddleware();
middlewares.push(networkMiddleware);
middlewares.push(sagaMiddleware);
if (__DEV__) {
const loggerMiddleware = createLogger();
middlewares.push(loggerMiddleware);
}
enhancers.push(applyMiddleware(...middlewares));
enhancers.push(autoRehydrate());
const store = createStore(rootReducer, undefined, compose(...enhancers));
sagaMiddleware.run(rootSaga);
if (reduxPersist.active) {
// REHYDRATE dispatches READY action
persistStore(store, reduxPersist.config, onComplete);
} else {
// Manual dispatch READY action
store.dispatch(initActions.initialize());
onComplete();
}
return store;
};
My startup Saga:
import { put } from 'redux-saga/effects';
import {
configActions,
initActions
} from '../redux';
export function* initialize() {
yield put(configActions.configRequest({ message: 'Loading...' }, { retry: true }));
yield put(initActions.ready());
}
My config redux store config:
import { createActions, createReducer } from 'reduxsauce';
/* ------------- Types and Action Creators ------------- */
const { Types, Creators } = createActions({
configRequest: ['payload', 'meta'],
configSuccess: ['payload']
});
// Initial state and reducers...
But I do not see the action @@ network-connectivity/FETCH_OFFLINE_MODE
being dispatched.
I also can not see an action that has triggered on the app startup, being intercepted, added to the offline queue and then re-dispatched when the connection returns.
What can I do to resolve this?
Below my resumed log from redux-logger:
action persist/REHYDRATE @ 19:35:46.381
action CONFIG_REQUEST @ 19:35:46.394 // <-- this is the action that I want to intercept
action Object {
type: "CONFIG_REQUEST",
payload: {message: "Loading..."},
meta: {retry: true},
@@redux-saga/SAGA_ACTION: true
}
action READY @ 19:35:46.401 // <-- action thats enable aplication interface
action @@network-connectivity/CONNECTION_CHANGE @ 19:35:46.794
action Object {type: "@@network-connectivity/CONNECTION_CHANGE", payload: false}
action @@network-connectivity/CONNECTION_CHANGE @ 19:35:52.098
action Object {type: "@@network-connectivity/CONNECTION_CHANGE", payload: true}
My suspicion is because that the offline action is dispatched after the CONFIG_REQUEST action, the middleware can not intercept and action is not added to offline queue.
According to the React docs:
componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render.
https://reactjs.org/docs/react-component.html#componentdidupdate
However, when I use export default withNetworkConnectivity()(YourComponent)
, the componentDidUpdate()
event is called even though I'm not changing state nor am I changing my network connectivity status. If I remove withNetworkConnectivity
then componentDidUpdate
is no longer called.
Is this expected behaviour?
This discussion may be relevant:
withNetworkConnectivity HoC subscribes to connectivity change events after the component that it wraps mounts. Being that component the top most component, there is an implicit delay since React & RN have to render the whole app for the 1st time.
Code:
export const getQuizs = (data) => {
let obj={
userId : data.userId,
};
let thunk = (dispatch)=>{
dispatch(loading_start({ type: LOADING_START }));
RestClient.get('quizzes/getMyQuiz',obj).then((response) => {
dispatch(loading_stop({ type: LOADING_STOP }));
}).catch(error => {
dispatch(loading_stop({ type: LOADING_STOP }));
});
}
thunk.interceptInOffline = true; // This is the important part
thunk.meta = {
retry: true, // By passing true, your thunk will be enqueued on offline mode
dismiss: ['NAVIGATE_BACK']
}
return thunk; // Return it afterwards
After hitting this action in offline mode Null values are coming in actionView array
Hey!
First off, I want to say that I'm really digging what you're doing with this library! I ran into an issue with the README example here: https://github.com/rauliyohmc/react-native-offline#thunks-config.
For the thunk example, you have
export const fetchUser = (url) => {
return function thunk(dispatch) {
fetch(url)
.then((response) => response.json())
.then((responseJson) => {
dispatch({type: FETCH_USER_SUCCESS, payload: responseJson});
})
.catch((error) => {
console.error(error);
});
};
thunk.interceptInOffline = true; // This is the important part
};
But that didn't work for me. I had to do this:
export const fetchUser = (url) => {
// I also prefer arrow functions :)
const thunk = (dispatch) => { // <-- DON'T RETURN HERE
fetch(url)
.then((response) => response.json())
.then((responseJson) => {
dispatch({type: FETCH_USER_SUCCESS, payload: responseJson});
})
.catch((error) => {
console.error(error);
});
};
thunk.interceptInOffline = true; // This is the important part
return thunk; // <-- RETURN HERE
};
Beyond that, having a great experience with the library!
hi,
your event listener NetInfo.isConnected.addEventListener('change', this.checkInternet)
is deprecated will you update the module for fix this?
thanks
Hello,
I didn't found a way to manually trigger a connectivityCheck in the code, is there a way to do this ?
Thanks.
When using this react-native-navigation there is no root component, so I needed to wrap each screen. Or is there another way of doing this?
export const registerScreens = () => {
Navigation.registerComponent('Login', () => connect(mapStateToProps, mapDispatchToProps)(withNetworkConnectivity()(Login)), store, Provider)
Navigation.registerComponent('Home', () => connect(mapStateToProps, mapDispatchToProps)(withNetworkConnectivity()(Home)), store, Provider)
}
There is an issue with the screen options that are not working anymore. I think statics are not passed within withNetworkConnectivity
. Example:
export default class Home extends Component {
static navigatorStyle = {
tabBarHidden: true,
navBarHidden: true
}
...
}
While internet is connected, when i get the success response from the server i am navigating to different screen.
But how to dismiss the navigation action when i am in offline mode. As soon as internet connected it action is dispatched and goes to another screen from the current screen.
mood.interceptInOffline = true; mood.meta = { retry: true, dismiss: ["SUBMITTING"] }; return thunk;
this is the sample code i am using .HELP WANTED
Thank u.
Here is my code for just getting isconnected in redux state
import { reducer as network } from 'react-native-offline';
const AppReducer = combineReducers({
nav,
maindata,
network,
});
const sagaMiddleware = createSagaMiddleware();
const store = createStore(AppReducer,applyMiddleware(sagaMiddleware));
sagaMiddleware.run(rootSaga)
export default store;
I have tried with middleware nothing seems to work for me ..
Can you provide some working example ? with redux or with middleware like redux-saga.
Follow up the thread on: facebook/react-native#8615
A couple of potential workarounds have been proposed.
Works fine on real devices
Hi,
I'm using react-native-offline with redux, i followed all steps in the readme. I am using thunks like
export const deleteMail = (mailIds) => {
function doDeleteMail(dispatch) {
dispatch(deleteMailRequest)
const params = {
path: 'emails/moveToTrash/',
method: 'PUT',
body: {
"messageIds": mailIds
},
}
fetch(apiRequest(params))
.then(response => {
errorHandler(response, true)
.then(() => dispatch(deleteMailSuccess))
.catch(error => console.log(error))
})
.catch(error => dispatch(deleteMailFailure(error)))
}
doDeleteMail.meta = {
retry: true
}
doDeleteMail.interceptInOffline = true;
return doDeleteMail;
}
but even if i turn on the airplane mode, network.isConnected stay at true. I tried to change checkConnectionInterval in withNetworkConnectivity config but nothing change.
Do you see an error in my code? There is someone with same issue?
RN : 0.47.2
react-native-offline : 3.5.0
Testing on android device
Hi,
To use your lib, i had to use babel-plugin-syntax-export-extensions
and add it to my .babelrc
file.
{
"presets": [
"react-native"
],
"plugins": [
"syntax-export-extensions"
]
}
I just started a new app and have been testing out react-native-offline
. I followed the instructions on the readme to get redux
, redux-saga
, and react-native-offline
working together and everything seems to be working correctly except that the actionQueue
does not dispatch the actions when coming back online.
When I switch to airplane mode on my phone I can see the actions going into the actionQueue
. When I switch out of airplane mode I can see that the phone is connecting again but the actionQueue
doesn't dispatch the actions in the queue.
My app is using the following packages:
I tracked the issue down to the handleConnectivityChange
function in src/sagas.js
.
function* handleConnectivityChange(
hasInternetAccess: boolean,
): Generator<*, *, *> {
yield put(connectionChange(hasInternetAccess));
const actionQueue = select(
(state: { network: NetworkState }) => state.network.actionQueue,
);
if (hasInternetAccess && actionQueue.length > 0) {
// eslint-disable-next-line
for (const action of actionQueue) {
yield put(action);
}
}
}
More specifically the const actionQueue = select(...)
line. I believe this line should be:
const actionQueue = yield select(...)
Without the yield
keyword it returns something that looks like a function instead of an array. This is the output in the Xcode console:
SELECT: { selector: [Function], args: [] } }
When I add yield
in front of the call to select
everything works as expected.
I can create a pull request for this but the readme mentioned creating an issue first. If you'd like a PR just let me know.
Thanks!
I am getting error
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
Check the render method of `ConnectivityRenderer`.
This error is located at:
in ConnectivityRenderer (at Racelist.js:620)
in RCTView (at View.js:113)
here is my simple code ..
import { ConnectivityRenderer } from 'react-native-offline';
render(){
return(
<View>
<ConnectivityRenderer>
{isConnected => (
<SnackBar
message="You are currently offline"
showIf={!isConnected}
duration={3000}
/>
)}
</ConnectivityRenderer>
</View>
);
}
As per #23 (comment)
I've been using this with a Redux-connected component as described in https://github.com/rauliyohmc/react-native-offline#integration-with-redux and it's been great so far, however, one thing I'd like to do is be able to test the "offline behavior" while not actually in airplane mode.
Is it possible to introduce a boolean flag, for use in Dev only, that will allow me to do this? In other words: where would I be able to hook into this library, preferably in a single place, that will allow me to override isConnected
to be true
/false
using an env var?
In the readme, we have
import { createStore, applyMiddleware } from 'redux';
import { createNetworkMiddleware } from 'react-native-offline';
import createSagaMiddleware from 'redux-saga';
const sagaMiddleware = createSagaMiddleware();
const networkMiddleware = createNetworkMiddleware();
const store = createStore(
rootReducer,
applyMiddleware([networkMiddleware, sagaMiddleware])
);
I do not know if it is the same for sagaMiddleware but for redux-thunk, we need to use applyMiddleware
without an array like:
const store = createStore(
rootReducer,
applyMiddleware(networkMiddleware, thunk)
);
So, question, is it the readme which is not up to date or it is just redux-thunk working differently ?(or it is only just for me ^^)
Hi there,
First of all : great lib, came at the right moment and is really straightforward and great !
I want to discuss the possibility to be able, from the createNetworkMiddleware
function, to configure the thunk-actions to be retry
I wanted to discuss that because actually my implementation looks like this :
export const loadAllOtopsFromMyCommunity = () => {
function loadAllOtopsFromMyCommunityThunk(dispatch, getState) {
dispatch({ type: types.FETCH_REQUEST });
const options = { /* ...*/ };
fetch(`${URL}/api/otops/getfriendsotops`, options)
.then(res => res.json())
.then(otops => dispatch({
type: types.FETCH_REQUEST_SUCCESS,
payload: otops
})).catch(err => dispatch({
type: types.FETCH_REQUEST_FAILURE,
error: err
}));
}
return loadAllOtopsFromMyCommunityThunk;
};
And then I created a middleware : interceptInOfflineEveryThunkAction which looks like this :
const interceptInOfflineEveryThunkAction = store => next => action => {
if (action == null) {
return null;
}
if (typeof action === 'function') {
const thunkActionsToRetry = [
'loadSomethingThunk',
'fetchUserDataThunk',
];
thunkActionsToRetry.forEach(thunkName => {
if (thunkName === action.name) {
action.meta = { retry: true };
}
});
action.interceptInOffline = true;
return next(action);
}
return next(action);
};
And so that saved me the pain of having to put the .meta = { retry: true }, and so I was wondering if you find useful to add a : 'thunkNameToRetry' property to the config object that will accept function names in order to do this during the createNetworkMiddleware() call
Really I don't know if this might be helpful, the implementation is newbie (so am I) so if it is out of context then fine haha
Thanks for the great work
When retry=true
, user may navigate away from the view, so that the re-trigger is not relevant any longer and action can be removed from the queue.
meta
property one level up in the action creator parameters (sibling of payload and type) => Breaking changediscard
property (sibling of retry
) in order to pass an action or array of actions to listen to that would cause the removal from the queueAn typical example while using react-navigation
:
{
type: FETCH_USER_ID_REQUEST
payload: {
id: '3',
},
meta: {
retry: true,
discard: ['Navigation/NAVIGATE', 'Navigation/BACK']
},
}
When i compile for developpement everything is workign fine, i am on airplane mode, start a fetch request and middleware catch it, perfect.
As soon as i switch to preprod or release config on Android and IOS, i do the exactly same test with same code, but unfortunately the middleware doesn't catch anything and i end up with this on Android Studio and XCode console :
E/ReactNativeJS: [TypeError: Network request failed]
E/unknown:React: Network request failed, stack:
onerror@134:13650
value@124:1505
etc etc...
Hi guys
This might be a stupid question, but I can't seem to figure it out from the docs.
I am trying to call a different onPress() function from my component, depending on whether an internet connection exists or not.
So for example:
foo() => {
//if connected
return "Connected!"
//else
return "Not connected"
}
<Button onPress={ this.foo() } />
I can't seem to get this right. I have applied it via the ConnectivityRenderer component currently, but that requires me to duplicate the entire component, whereas I just want to change the onPress method.
I feel like there is something obvious I'm missing, and I was hoping one of you could help me out.
Is RN 0.49 supported with all features?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.