https://github.com/rauchy/react-native-offline-mode

Swap your app with an offline version while there's no connectivity
https://github.com/rauchy/react-native-offline-mode

Last synced: 7 days ago
JSON representation

Swap your app with an offline version while there's no connectivity

• Host: GitHub
• URL: https://github.com/rauchy/react-native-offline-mode
• Owner: rauchy
• License: mit
• Created: 2016-04-07T06:46:15.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-10-11T09:44:56.000Z (about 6 years ago)
• Last Synced: 2024-08-15T00:20:06.797Z (4 months ago)
• Language: Objective-C
• Homepage:
• Size: 390 KB
• Stars: 188
• Watchers: 5
• Forks: 38
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-offline-mode ★144 - Swap your app with an offline version while there's no connectivity (Components / UI)
• awesome-reactnative-ui - react-native-offline-mode - native-offline-mode/master/example.gif)| (Others)
• awesome-react-native - react-native-offline-mode ★144 - Swap your app with an offline version while there's no connectivity (Components / UI)
• awesome-reactnative-ui - react-native-offline-mode - native-offline-mode/master/example.gif)| (Others)
• awesome-react-native - react-native-offline-mode ★144 - Swap your app with an offline version while there's no connectivity (Components / UI)
• awesome-react-native-ui - react-native-offline-mode ★55 - Swap your app with an offline version while there's no connectivity (Components / UI)
• awesome-react-native - react-native-offline-mode ★144 - Swap your app with an offline version while there's no connectivity (Components / UI)

README

        
# react-native-offline-mode

A higher-order component for React Native which will conditionally show a component OR something else depending on internet connection availability.

[![ScreenShot](https://raw.githubusercontent.com/rauchy/react-native-offline-mode/master/example.gif)]

Install

-------

Make sure that you are in your React Native project directory and run:

```npm install react-native-offline-mode --save```

## Usage

Import `RequiresConnection` as a JavaScript module:

```js

import RequiresConnection from 'react-native-offline-mode';

```

Then simply wrap whichever component you want to be connection-aware with a call to `RequiresConnection`. Take a look at the [example project](https://github.com/rauchy/react-native-offline-mode/tree/master/example) or simply [this commit](https://github.com/rauchy/react-native-offline-mode/commit/ad8a892bcc2dfc15c8d1fe6fda5da17911e59b61).

### Showing a default "no connectivity" message

For example, if you want the entire app to go on hold with a "no connectivity" message, simply wrap your main component:

```js

module.exports = RequiresConnection(Main)

```

### Specifying a custom message

If you want to display a different message, simply pass it as a second parameter to `RequiresConnection`:

```js

module.exports = RequiresConnection(Main, 'no internetz for you :(')

```

### Using a custom offline component

Instead of just showing a message, you can have your app deliver different functionality when offline. To accomplish this, simply pass in the offline component as a second parameter:

```js

module.exports = RequiresConnection(OnlineMain, OfflineMain)

```

## Contributing

1. Fork it ( https://github.com/rauchy/react-native-offline-mode/fork )

2. Create your feature branch (`git checkout -b my-new-feature`)

3. Commit your changes (`git commit -am 'Add some feature'`)

4. Push to the branch (`git push origin my-new-feature`)

5. Create a new Pull Request