How to use the xstream.periodic function in xstream

listener.complete();
  },
  stop: console.log
};

const create: Stream = xs.create(producer);
const createWithMemory: MemoryStream = xs.createWithMemory(producer);
const never: Stream<*> = xs.never();
const empty: Stream<*> = xs.empty();
const _throw: Stream<*> = xs.throw(new Error(123));
const from1: Stream = xs.from([1]);
const from2: Stream = xs.from(Promise.resolve(1));
const of: Stream = xs.of(1);
const fromArray: Stream = xs.fromArray([1,2,3]);
const fromPromise: Stream = xs.from(Promise.resolve(1));
const periodic: Stream = xs.periodic(123);
const merge: Stream = xs.merge(of, of);
const merge2: Stream = xs.merge(of, of, of, of);
const combine: Stream = xs.combine(of, of);
const combine2: Stream = xs.combine(of, of, of, of);

const listener = {
  next: console.log,
  error: console.error,
  complete: console.log
};

of.addListener(listener);
of.removeListener(listener);

const subscription: Subscription = of.subscribe({
  next: x => console.log(x),

onlineAndVisible =>
                onlineAndVisible
                    ? xs
                          .periodic(10)
                          .mapTo({
                              type: 'TICK'
                          })
                          .startWith({ type: 'RESUME' })
                    : xs.of({ type: 'PAUSE' })
        )

export function main({Screen, HTTP}) {
  let requestStars$ = xs.of({url: REPO_URL, category: 'stars'});
  let requestEvents$ = xs.of({url: COLL_URL, category: 'events'});
  let request$ = xs.merge(requestStars$, requestEvents$);
  let toast$ = xs.periodic(2000).take(1)
    .mapTo({message: 'Hello world!', type: 'show', duration: 1000});
  return {
    Screen: model(intent(Screen, HTTP)).map(view),
    Toast: toast$,
    HTTP: request$,
  };
}

.map(isTabVisible =>
        isTabVisible
          ? concat(xs.of(0), xs.periodic(2000).take(2), xs.periodic(6000))
          : xs.never(),
      )

function model(action$, givenColor$) {
  const stop$ = action$.filter(a => a.type === 'stop');
  const x$ = xs.periodic(50).startWith(0).endWhen(stop$);
  const y$ = xs.periodic(100).startWith(0).endWhen(stop$);
  const color$ = xs.merge(
    givenColor$.endWhen(stop$),
    stop$.mapTo('#FF0000')
  );
  return xs.combine((x, y, color) => ({x, y, color}), x$, y$, color$);
}

list =>
                list.length > 0
                    ? xs
                          .periodic(12000)
                          .filter(x => x > 0)
                          .startWith(0)
                          .map(x => x % list.length)
                          .map(x => list[x])
                    : xs.empty()
        )

function model(action$, givenColor$) {
  const stop$ = action$.filter(a => a.type === 'stop');
  const x$ = xs.periodic(50).startWith(0).endWhen(stop$);
  const y$ = xs.periodic(100).startWith(0).endWhen(stop$);
  const color$ = xs.merge(
    givenColor$.endWhen(stop$),
    stop$.mapTo('#FF0000')
  );
  return xs.combine((x, y, color) => ({x, y, color}), x$, y$, color$);
}

export default function getRealtimeAdapter(
  http: Derivable,
  messageAdapter: Derivable,
  roomAdapter: Derivable,
  syncInterval: Derivable,
  brokerUrl: Derivable,
  shouldSync: Derivable,
  isLogin: Derivable,
  token: Derivable
): IQRealtimeAdapter {
  const isMqttConnected = atom(false);
  const sync = getSyncAdapter(http, messageAdapter, roomAdapter, token);
  const mqtt = getMqttAdapter(messageAdapter, brokerUrl);

  xs.periodic(syncInterval.get())
    .filter(() => isLogin.get())
    .filter(() => !isMqttConnected.get() || shouldSync.get())
    .subscribe({
      next() {
        sync.synchronize();
        sync.synchronizeEvent();
      }
    });

  mqtt.onMqttConnected(() => isMqttConnected.set(true));

  return {
    get mqtt() {
      return mqtt;
    },
    onMessageDeleted(callback: Callback): Subscription {

.fold(state => !state, false)

  const buttonText$ = visible$.map(state => state ? 'hide' : 'show')
  const highlighted$ = xs.periodic(1000).fold(highlighted => !highlighted, true)
  const buttonClass$ = highlighted$.map(highlighted => joinClasses('inc', highlighted && 'highlighted'))

  const arrOfComponents = [
    <div>div</div>,
    'string',
    <br>,
    'stream: ',
    count$,
  ]

  const range = L.range(15)
  const keys$ = xs.periodic(5000)
    .startWith(0)
    .map(() =&gt; range.filter(() =&gt; Math.random() &gt; .5))

  interface Item {
    color: Stream,
    count: number,
    index: number,
  }

  interface State {
    items: Item[],
  }

  const initialState: State = {
    items: Array(15)
      .fill(undefined)

function httpRequests(start$: Stream): Stream {
  const pingReq$ = xs
    .periodic(300)
    .startWith(0)
    .endWhen(start$)
    .mapTo({ category: "ping", url: "/ping" });

  const setStoragePathReq$ = start$.mapTo({
    category: "setStoragePath",
    url: "/setStoragePath",
    method: "POST",
    send: { path: RNFS.ExternalStorageDirectoryPath + "/DatInstaller" },
  });

  const latestReq$ = start$
    .map(() => xs.periodic(2000).startWith(null as any))
    .flatten()
    .mapTo({ category: "latest", url: "/latest" });