New Powerful Machines

    @nghinv/react-native-services
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    @nghinv/react-native-services


    Version MIT License All Contributors

    Installation

    Installing the package

    • Use yarn
    yarn add @nghinv/react-native-services
    • Use npm
    npm install @nghinv/react-native-services
    yarn add react-native-gesture-handler react-native-reanimated react-native-safe-area-context

    How to use

    1. Wrapper ServicesProvider in the Root Component
      ...
      return (
        <ServicesProvider
          alertProps={{
            titleProps: { color: 'blue' },
            messageProps: { color: 'black' },
            buttonProps: {
              titleColor: 'blue',
            },
          }}
          actionSheetProps={{
            headerProps: {
              titleColor: 'blue',
            },
          }}
          bottomSheetProps={{}}
          dropdownAlertProps={{}}
          loadingProps={{}}
        >
          <RootComponent />
        </ServicesProvider>
      );
      ...
    1. Use Services.Loading.show(), Services.Alert.alert({})...
    import React from 'react';
    import { View, StyleSheet, Button } from 'react-native';
    import { Services } from '@nghinv/react-native-services';
    
    export default function Example() {
      const onShowLoading = () => {
        // More props in @nghinv/react-native-loading
        Services.Loading.show();
        setTimeout(() => {
          Services.Loading.hide();
        }, 2000);
      };
    
      const onShowAlert = () => {
        // More props in @nghinv/react-native-alert
        Services.Alert.alert({
          title: 'Title',
          message: 'Message',
          actions: [{ text: 'OK' }],
        });
      };
    
      const onShowActionSheet = () => {
        // More props in @nghinv/react-native-action-sheet
        Services.ActionSheet.show({
          ...actionSheetParams,
        });
      };
    
      const onShowBottomSheet = () => {
        // More props in @nghinv/react-native-bottom-sheet
        Services.BottomSheet.show({
          ...bottomSheetParams,
        });
      };
    
      const onShowNotification = () => {
        // More props in @nghinv/react-native-dropdown-alert
        Services.DropdownAlert.show({
          ...dropdownAlertParams,
        });
      };
    
      return (
        <View style={styles.container}>
          <Button 
            title='Show loading' 
            onPress={onShowLoading} 
          />
          <Button 
            title='Show Alert' 
            onPress={onShowAlert} 
          />
          <Button 
            title='Show ActionSheet' 
            onPress={onShowActionSheet} 
          />
          <Button 
            title='Show BottomSheet' 
            onPress={onShowBottomSheet} 
          />
          <Button 
            title='Show DropDownAlert' 
            onPress={onShowNotification} 
          />
        </View>
      );
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'skyblue',
      },
    });

    Credits

    Install

    npm i @nghinv/react-native-services

    DownloadsWeekly Downloads

    10

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    8.41 kB

    Total Files

    5

    Last publish

    Collaborators

    • nghinv