react-native-services-xep

React Native common services

Installation

npm install react-native-services-xep

Usage

Server connection service

Import ConnectionContextWrapper in your App.tsx. Provide server side url and api url prefix. Eg: 'https://reqres.in/api/' is break down as follows...

import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { ConnectionContextWrapper } from 'react-native-services-xep';
import { Test } from './Test';

export default function App() {
  return (
    <View style={styles.container}>
      <ConnectionContextWrapper
        serverSideUrl={'https://reqres.in'}
        apiPrefix={'api'}
      >
        <Test />
      </ConnectionContextWrapper>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});


// ... then use useConnection as a hook in a funcional component. Or you can import ConnectionContext
// to use in a class component
import React, { useEffect, FC } from 'react';
import { View, Text } from 'react-native';
import { useConnection } from 'react-native-services-xep';
export const Test: FC = () => {
  const { get } = useConnection();
  useEffect(() => {
    console.log('test ');
    get('users?page=2').then((data) => {
      console.log('test ', data);
    });
  }, []);
  return (
    <View style={{ flex: 1, width: '100%', backgroundColor: 'purple'}}>
      <Text>Hello</Text>
    </View>
  );
};

AsyncStorage

AsyncStorage is an unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.

import React, { useEffect, FC } from 'react';
import { View, Text } from 'react-native';
import { AsyncStorage } from 'react-native-services-xep';
export const Test: FC = () => {
  const func = async () => {
    await AsyncStorage.setAsyncStorage('name', 'Xeptagon');
    return await AsyncStorage.getAsyncStorage('name');
  };
  useEffect(() => {
    func().then((r) => console.log('test ', r));
  });

  return (
    <View style={{ flex: 1, width: '100%', backgroundColor: 'purple' }}>
      <Text>Hello</Text>
    </View>
  );
};

License

MIT