React Native Web support

[ButuzGOL]

Have tried to render in web found issues

1. cant resolve DoneButton.ios => DoneButton
2. Swiper borders
3. Not swiping and moving by dots

[ButuzGOL]

did some updates and it works

import React from 'react';

import { StatusBar, View, Animated } from 'react-native';
import AppIntro from 'react-native-app-intro';

import Swiper from './Swiper';

export default class AppIntroWrapper extends AppIntro {
  onNextBtnClick = (context) => {
    if (context.state.isScrolling || context.state.total < 2) return;
    const { state } = context;
    const diff = (context.props.loop ? 1 : 0) + 1 + context.state.index;
    let x = 0;
    if (state.dir === 'x') x = diff * state.width;

    context.refs.scrollView.scrollTo({ y: 0, x });
    this.props.onSlideChange(context.state.index + 1, context.state.total);

    this.props.onNextBtnClick(context.state.index);
  };
  render() {
    const childrens = this.props.children;
    const { pageArray } = this.props;
    let pages = [];
    if (pageArray.length > 0) {
      pages = pageArray.map((page, i) => this.renderBasicSlidePage(i, page));
    } else {
      pages = childrens.map((children, i) => this.renderChild(children, i, i));
    }

    return (
      <View style={{ position: 'static' }}>
        <Swiper
          loop={false}
          width={960}
          height="100vh"
          index={this.props.defaultIndex}
          renderPagination={this.renderPagination}
          onMomentumScrollEnd={(e, state) => {
            if (this.isToTintStatusBar()) {
              StatusBar.setBackgroundColor(
                this.shadeStatusBarColor(this.props.pageArray[state.index].backgroundColor, -0.3),
                false,
              );
            }

            this.props.onSlideChange(state.index, state.total);
          }}
          onScroll={Animated.event([{ x: this.state.parallax }])}
        >
          {pages}
        </Swiper>
      </View>
    );
  }
}

import React from 'react';

import { ScrollView, StyleSheet, View } from 'react-native';
import Swiper from 'react-native-swiper';

const styles = StyleSheet.create({
  wrapper: {
    backgroundColor: 'transparent',
  },
});

export default class SwiperWrapper extends Swiper {
  renderScrollView = pages => (
    <ScrollView
      ref="scrollView"
      {...this.props}
      style={{ overflowX: 'hidden' }}
      contentContainerStyle={[styles.wrapper, this.props.style, { overflow: 'hidden' }]}
      contentOffset={this.state.offset}
      onScrollBeginDrag={this.onScrollBegin}
      onMomentumScrollEnd={this.onScrollEnd}
      onScroll={this.onScroll}
      scrollEventThrottle={16}
    >
      {pages}
    </ScrollView>
  );
}

extensions: ['.ios.js']