React Native Web Polyfills

DeviceEventEmitter.js

// @flow

import EventEmitter from 'events';

export default new EventEmitter();

FlatList.js

// @flow

import React, { Component } from 'react';
import { ScrollView, View } from 'react-native-web';

import type { StyleObj } from 'react-native/Libraries/StyleSheet/StyleSheetTypes';

type PropsType = {|
  ItemSeparatorComponent?: ?(React$ComponentType<*> | React$Element<*>),
  ListFooterComponent?: ?(React$ComponentType<*> | React$Element<*>),
  ListHeaderComponent?: ?(React$ComponentType<*> | React$Element<*>),
  ListEmptyComponent?: ?(React$ComponentType<*> | React$Element<*>),
  contentContainerStyle?: StyleObj,
  data?: Array<*>,
  horizontal?: boolean,
  keyExtractor?: (item: *) => string,
  renderItem: (obj: { index: number, item: * }) => ?React$Element<*>,
  style?: StyleObj
|};


class FlatList extends Component<PropsType> {
  renderComponent = (Component: ?(React$ComponentType<*> | React$Element<*>)) => {
    if (!Component) {
      return null;
    }

    if (React.isValidElement(Component)) {
      return Component;
    }

    // $FlowFixMe
    return <Component />;
  }

  render() {
    const {
      ItemSeparatorComponent,
      ListFooterComponent,
      ListHeaderComponent,
      ListEmptyComponent,
      contentContainerStyle,
      data = [],
      horizontal = false,
      keyExtractor,
      renderItem,
      style
    } = this.props;

    return (
      <ScrollView
        contentContainerStyle={contentContainerStyle}
        horizontal={horizontal}
        style={style}
      >
        { this.renderComponent(ListHeaderComponent) }

        { data.length === 0 ?

          this.renderComponent(ListEmptyComponent) :

          data.map((item: *, index: number): React$Node => (
            <View key={keyExtractor ? keyExtractor(item) : index}>
              { renderItem({ index, item }) }
              { index < data.length - 1 && this.renderComponent(ItemSeparatorComponent) }
            </View>
          ))
        }

        { this.renderComponent(ListFooterComponent) }

      </ScrollView>
    );
  }
}

export default FlatList;

index.js

// @flow

import * as ReactNativeWeb from 'react-native-web';
import Modal from 'react-native-web-modal';
import FlatList from './FlatList';
import DeviceEventEmitter from './DeviceEventEmitter';
import NativeModules from './NativeModules';

module.exports = {
  ...ReactNativeWeb,
  Modal,
  FlatList,
  DeviceEventEmitter,
  NativeModules
};

NativeModules.js

// @flow

class Contacts {
  static getAll(cb: (err: string) => void) {
    cb('Contacts not supported on web');
  }
}

class RNLiblinphone {
  static init(): Promise<void> {
    return Promise.resolve();
  }

  static register(): Promise<void> {
    return Promise.resolve();
  }

  static unregister(): Promise<void> {
    return Promise.resolve();
  }

  static call(): Promise<void> {
    return Promise.resolve();
  }

  static answer(): Promise<void> {
    return Promise.resolve();
  }

  static hangup(): Promise<void> {
    return Promise.resolve();
  }
}

export default {
  Contacts,
  RNLiblinphone
};