@nghinv/react-native-services

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

• Dependencies

  • @nghinv/react-native-loading

  • @nghinv/react-native-alert

  • @nghinv/react-native-dropdown-alert

  • @nghinv/react-native-action-sheet

  • @nghinv/react-native-bottom-sheet

  • @nghinv/react-native-icons

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>
  );
  ...

2. 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

• @Nghi-NV