react-native-button-net-check

You can now use a gradient-enabled, reusable button with icon support to check internet connectivity in React Native.
The component provides customizable options such as left/right icons, gradient backgrounds, pulse animation, and status text for online/offline states.

Install

npm install react-native-button-net-check

Preview

🚀 Basic Usage

import React from 'react';
import { View } from 'react-native';
import ButtonNetCheck from 'react-native-button-net-check';

export default function App() {
  return (
    <View style={{ padding: 20 }}>
      <ButtonNetCheck
        onCheckComplete={(isConnected) => {
          console.log('Is Connected:', isConnected);
        }}
      />
    </View>
  );
}

📋 Props Reference

| Prop | Type | Default | Description | | ----------------------- | -------------------------------- | ----------------------------------- | ----------------------------------------- | | buttonStyle | StyleProp<ViewStyle> | undefined | Custom styles for the button | | textStyle | StyleProp<TextStyle> | undefined | Custom styles for the button text | | containerStyle | StyleProp<ViewStyle> | undefined | Custom styles for the container | | onCheckComplete | (isConnected: boolean) => void | undefined | Callback when network check completes | | showStatus | boolean | true | Show online/offline status text | | statusOnlineText | string | 'Online ✅' | Text displayed when connected | | statusOfflineText | string | 'Offline ❌' | Text displayed when disconnected | | checkTimeout | number | 3000 | Timeout for network check in milliseconds | | buttonTitle | string | 'Check Network' | Text displayed on the button | | isDisabled | boolean | false | Disable the button | | showLoadingIndicator | boolean | true | Show loading spinner | | loadingIndicatorProps | ActivityIndicatorProps | {} | Props for loading indicator | | Gradient Props | | | | | useGradient | boolean | true | Enable gradient background | | gradientColors | string[] | ['#4c669f', '#3b5998', '#192f6a'] | Gradient color array | | enablePulse | boolean | false | Pulse animation when offline | | iconLeft | ReactNode | null | Icon displayed on left side of button | | iconRight | ReactNode | null | Icon displayed on right side of button | | onlineColor | string | 'green' | Text color when online | | offlineColor | string | 'red' | Text color when offline |

🎨 Usage Examples

Custom Styling

<ButtonNetCheck
  buttonStyle={{
    backgroundColor: '#FF6B6B',
    borderRadius: 20,
    paddingVertical: 15,
  }}
  textStyle={{
    fontSize: 18,
    fontWeight: 'bold',
  }}
  containerStyle={{
    marginVertical: 10,
  }}
  onCheckComplete={(isConnected) => {
    console.log('Network status:', isConnected);
  }}
/>

Custom Text and Status

<ButtonNetCheck
  buttonTitle="Test Internet"
  statusOnlineText="🌐 Connected"
  statusOfflineText="📡 No Internet"
  onCheckComplete={(isConnected) => {
    Alert.alert('Network Status', isConnected ? 'You are online!' : 'You are offline!');
  }}
/>

Disabled State with Custom Loading

<ButtonNetCheck
  isDisabled={false}
  showLoadingIndicator={true}
  loadingIndicatorProps={{
    size: 'large',
    color: '#FF6B6B',
  }}
  checkTimeout={5000}
  onCheckComplete={(isConnected) => {
    // Handle result
  }}
/>

Minimal Configuration

<ButtonNetCheck
  showStatus={false}
  buttonTitle="Quick Check"
  onCheckComplete={(isConnected) => {
    // Silent check without status display
  }}
/>

🎨 Using Gradient

<ButtonNetCheck
  useGradient={true}
  gradientColors={['#FF6B6B', '#FFD93D']}
  buttonTitle="Check Network"
  onCheckComplete={(isConnected) => {
    console.log('Network status:', isConnected);
  }}
/>

💡 You can also combine pulse animation, icons, and custom colors:
<ButtonNetCheck
  useGradient={true}
  gradientColors={['#4c669f', '#3b5998', '#192f6a']}
  enablePulse={true}
  iconLeft={<SomeIcon />}
  iconRight={<AnotherIcon />}
  onlineColor="lime"
  offlineColor="orange"
  buttonTitle="Check Now"
/>

📱 Requirements

• React Native >= 0.71.0
• React >= 18.0.0
• @react-native-community/netinfo >= 11.0.0

🤝 Contributing

Feel free to submit issues and enhancement requests!

📄 License

MIT