React native web support (gusgard#102)

* add global style

* add expo project

* Add fixes for react-native-web adding getItemLayout

* Add badget for web

* Remove src in expo-example

* Add post install for expo-example

* Add badgets

* Add badgets

Co-authored-by: Patricia Sanes <[email protected]>

.gitignore

@@ -44,3 +44,8 @@ buck-out/
 
 example/e2e/coverage
 example/artifacts
+
+
+expo-example/.expo/*
+expo-example/web-build/
+expo-example/src/

.npmignore

@@ -9,3 +9,4 @@ CHANGELOG
 babel.config.js
 bitrise.yml
 demo.gif
+expo-example/

README.md

@@ -1,6 +1,8 @@
 # :point_up_2: Swiper FlatList component
 
-![platforms](https://img.shields.io/badge/platforms-Android%20|%20iOS-brightgreen.svg)
+[![supports iOS](https://img.shields.io/badge/iOS-4630EB.svg?style=flat-square&logo=APPLE&labelColor=999999&logoColor=fff)](https://www.npmjs.com/package/react-native-swiper-flatlist)
+[![supports Android](https://img.shields.io/badge/Android-4630EB.svg?style=flat-square&logo=ANDROID&labelColor=A4C639&logoColor=fff)](https://www.npmjs.com/package/react-native-swiper-flatlist)
+[![supports web](https://img.shields.io/badge/web-4630EB.svg?style=flat-square&logo=GOOGLE-CHROME&labelColor=4285F4&logoColor=fff)](https://www.npmjs.com/package/react-native-swiper-flatlist)
 [![npm](https://img.shields.io/npm/v/react-native-swiper-flatlist.svg)](https://www.npmjs.com/package/react-native-swiper-flatlist)
 [![npm](https://img.shields.io/npm/dm/react-native-swiper-flatlist.svg)](https://www.npmjs.com/package/react-native-swiper-flatlist)
 [![Build Status](https://app.bitrise.io/app/dfeb47a453df37dd/status.svg?token=54NHsU_G5kGTSZpdEejqLA&branch=master)](https://app.bitrise.io/app/dfeb47a453df37dd)
@@ -44,7 +46,7 @@ Version 3.x was re-implemented using Typescript
 
 ### Code
 
-Using `renderItems` and `data`, [try me on Expo](https://snack.expo.io/@gusgard/react-native-swiper-flatlist-simple-with-renderitems-and-data)
+Using `renderItems` and `data` [![run in expo snack](https://img.shields.io/badge/snack-Try%20now-4630EB.svg?style=flat-square&logo=EXPO&labelColor=000&logoColor=FFF&logoWidth=20)](https://snack.expo.io/@gusgard/react-native-swiper-flatlist-simple-with-renderitems-and-data)
 
 ```jsx
 import React from 'react';
@@ -81,7 +83,7 @@ const styles = StyleSheet.create({
 export default App;
 ```
 
-Using `children`, [try me on Expo](https://snack.expo.io/@gusgard/react-native-swiper-flatlist-simple-with-children)
+Using `children` [![run in expo snack](https://img.shields.io/badge/snack-Try%20now-4630EB.svg?style=flat-square&logo=EXPO&labelColor=000&logoColor=FFF&logoWidth=20)](https://snack.expo.io/@gusgard/react-native-swiper-flatlist-simple-with-children)
 
 ```jsx
 import React from 'react';
@@ -169,7 +171,6 @@ This is a wrapper around [Flatlist](http://facebook.github.io/react-native/docs/
 ## Limitations
 
 - Vertical pagination is not supported on Android. [Doc](https://github.com/facebook/react-native/blob/a48da14800013659e115bf2b58e31aa396e678e5/Libraries/Components/ScrollView/ScrollView.js#L274)
-- `react-native-web` is not supported, due to the lack of support of some `props` used in this library. [Expo example](https://snack.expo.io/@gusgard/react-native-web-example-with-swiper)
 
 ## Author
 

example/package.json

@@ -22,7 +22,7 @@
     "jest-circus": "^26.6.3",
     "react": "16.13.1",
     "react-native": "0.63.4",
-    "react-native-swiper-flatlist": "3.0.6"
+    "react-native-swiper-flatlist": "*"
   },
   "devDependencies": {
     "@babel/core": "^7.8.4",

example/yarn.lock

@@ -6092,10 +6092,10 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
   integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
 
-react-native-swiper-flatlist@3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/react-native-swiper-flatlist/-/react-native-swiper-flatlist-3.0.4.tgz#123c6b421f7116954106e5a278cc7f9bdd880d63"
-  integrity sha512-G7MT5c7SzrlMPVSA4roxoTmZEhlww9yc1jUmY+XAyRVxiOD6U7vq+T1DardjK0xUj3OOL55pv9gxriZ4O4tWYQ==
+react-native-swiper-flatlist@*:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/react-native-swiper-flatlist/-/react-native-swiper-flatlist-3.0.6.tgz#82701e50e2ced5a0c060453367fee69b11ed8396"
+  integrity sha512-ITeABV1bpvNbuETv0PHyiXBSn9FIgLOcKpf97Rh9+qhmWujvJ34SSq+QKk7qMRKpOD4nEWadCWB55f1HX8OEug==
 
 [email protected]:
   version "0.63.4"

expo-example/.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

expo-example/App.js

@@ -0,0 +1,3 @@
+import App from './src/App';
+
+export default App;

expo-example/app.json

@@ -0,0 +1,32 @@
+{
+  "expo": {
+    "name": "expo-example",
+    "slug": "expo-example",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

expo-example/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

expo-example/package.json

@@ -0,0 +1,25 @@
+{
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "postinstall": "cp -r ../example/src ./src",
+    "start:watch": "node ../example/scripts/watch-and-copy.js",
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "react-native-swiper-flatlist": "*",
+    "expo": "~40.0.0",
+    "expo-status-bar": "~1.0.3",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
+    "react-native-web": "~0.13.12"
+  },
+  "devDependencies": {
+    "@babel/core": "~7.9.0"
+  },
+  "private": true
+}