Have ideas to improve npm?Join in the discussion! »

    telereso

    0.0.6-alpha • Public • Published

    Telereso

    npm

    npm package to use Telereso,

    Telereso will allow you to control your app resources (strings,images) remotely and out of the box , without the need to add extra logic ,

    Installation

    Telereso depends on Firebase to use Remote Config for resource management
    And Cloud Messaging for realtime changes (optional)

    All you need to get started is make sure your project has set up firebase (check docs),
    Setup i18n as usual (check expo setup)
    Then add Telereso dependency to your project

    # Using npm
    npm install telerso
    # Using Yarn
    yarn add telerso

    Usage

    Initialization

    Make sure your already set up your normal localization using i18n

    There are 2 options to initialization :

    1. init()
      Will not make api calls it's just to set up resources, In your App.ts file, call init() and make sure to pass i18n object:

      import React, { useState } from 'react';
      import { StyleSheet, Text, View } from 'react-native';
      import i18n from './i18n';
      import AppContainer from './src/navigations/AppNavigation';
      import { Telereso } from 'telereso';
      
      export default class App extends React.Component {
         render() {
            return (<AppContainer/>);
         }
      }
      
      Telereso.init(i18n);
      
    2. susbundedinit()
      Will make sure to fetch the latest changes from Remote Config and not to start the app unless all resources are ready.

      import React, { useState } from 'react';
      import { StyleSheet, Text, View } from 'react-native';
      import i18n from './i18n';
      import AppContainer from './src/navigations/AppNavigation';
      import { Telereso } from 'telereso';
      
      export default class App extends React.Component {
        state = {
          splashFinished: false
        }
        constructor(props) {
          super(props);
          Telereso.suspendedInit(i18n).then(() => {
            this.setState({
              splashFinished: true
            })
          });
        }
      
        render() {
          return (this.state.splashFinished ? <AppContainer /> : <Text>Loading...</Text>);
        }
      }
      

      For loading state you can choose your own splash.

    Full Initialization options

    Telereso
        .disableLog() // disable general logs
        .enableStringsLog() // enable logs for string setup for debuging locals and remote setup
        .enableDrawableLog() // enable drabel logs for debuging keys and urls fetched from remote
        .setRemoteConfigSettings({minimumFetchIntervalMillis: 36000}) // if you have custome remote config settings provide them here
        .enableRealTimeChanges() // to enable real time changes 
        .init(i18n)

    Skipping the Initialization will not cause crashes, but the app will not be able to use the remote version of the resources, So it is a way to disable remote functionality.

    Firebase

    Please follow the steps found here to set up your Remote Config correctly.

    Localization

    Now you can extend your localization in one language or even more languages by adding them directly to Remote Config,
    No extra steps needed from client.

    Images

    You can make your asset images dynamic with one simple change,
    Use RemoteImage instead of image

    Example Before

    export default class MyComponent extends React.Component {
      render() {
        return (
            <View>
              <image source={require('../assets/icons/image.png')} />
            </View>
        );
      }
    }
    

    After

    export default class MyComponent extends React.Component {
      render() {
        return (
            <View>
              <RemoteImage source={require('../assets/icons/image.png')} />
            </View>
        );
      }
    }
    

    In Remote config console make sure to use full path after the assets like icons/image.png as your key in your drawable json, like:

    {
      "icons/image.png": "<url>"
    }

    Realtime Change

    For Remote Config setup follow steps found here

    In your home component add the following :

    import messaging from '@react-native-firebase/messaging';
    import { Telereso } from 'telereso';
    
    export default class HomeScreen extends React.Component {
    
      constructor(props) {
        super(props);
        messaging().onMessage(async remoteMessage => {
          if (Telereso.handleRemoteMessage(remoteMessage)) return;
          // your normal logic
        })
      }
    }

    Install

    npm i telereso

    DownloadsWeekly Downloads

    8

    Version

    0.0.6-alpha

    License

    MIT

    Unpacked Size

    15.5 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar