diff --git a/README.md b/README.md index 2ca539a..754d694 100644 --- a/README.md +++ b/README.md @@ -26,11 +26,11 @@ Version 2.x was re-implemented using React Hooks so it only works with version 0 Version 3.x was re-implemented using Typescript -| react-native-swiper-flatlist | react-native | Detox tests | -| ---------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| 1.x | <= 0.58 | [![Build Status](https://travis-ci.org/gusgard/react-native-swiper-flatlist.svg?branch=v1)](https://travis-ci.org/github/gusgard/react-native-swiper-flatlist/builds/565267550) | -| 2.x | >= 0.59 | [![Build Status](https://travis-ci.org/gusgard/react-native-swiper-flatlist.svg?branch=v1)](https://travis-ci.org/github/gusgard/react-native-swiper-flatlist/builds/749156790) | -| 3.x | >= 0.59 | [![Build Status](https://app.bitrise.io/app/dfeb47a453df37dd/status.svg?token=54NHsU_G5kGTSZpdEejqLA&branch=master)](https://app.bitrise.io/app/dfeb47a453df37dd) | +| react-native-swiper-flatlist | react-native | Detox tests | +| ---------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| 1.x | <= 0.58 | [![Build Status](https://travis-ci.org/gusgard/react-native-swiper-flatlist.svg?branch=v1)](https://travis-ci.org/github/gusgard/react-native-swiper-flatlist/builds/565267550) | +| 2.x | >= 0.59 | [![Build Status](https://travis-ci.org/gusgard/react-native-swiper-flatlist.svg?branch=v1)](https://travis-ci.org/github/gusgard/react-native-swiper-flatlist/builds/749156790) | +| 3.x | >= 0.59 | [![Build Status](https://app.bitrise.io/app/dfeb47a453df37dd/status.svg?token=54NHsU_G5kGTSZpdEejqLA&branch=master)](https://app.bitrise.io/app/dfeb47a453df37dd) | ## Examples @@ -44,54 +44,82 @@ 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) + ```jsx import React from 'react'; -import { Text, Dimensions, Image, StyleSheet, View } from 'react-native'; - +import { Text, Dimensions, StyleSheet, View } from 'react-native'; import { SwiperFlatList } from 'react-native-swiper-flatlist'; -const App = () => { - return ( - - - - 1 - - - 2 - - - 3 - - - 4 +const colors = ['tomato', 'thistle', 'skyblue', 'teal']; + +const App = () => ( + + ( + + {item} - - - ); -}; + )} + /> + +); -const { width, height } = Dimensions.get('window'); +const { width } = Dimensions.get('window'); +const styles = StyleSheet.create({ + container: { flex: 1, backgroundColor: 'white' }, + child: { width, justifyContent: 'center' }, + text: { fontSize: width * 0.5, textAlign: 'center' }, +}); + +export default App; +``` + +Using `children`, [try me on Expo](https://snack.expo.io/@gusgard/react-native-swiper-flatlist-simple-with-children) + +```jsx +import React from 'react'; +import { Text, Dimensions, StyleSheet, View } from 'react-native'; +import { SwiperFlatList } from 'react-native-swiper-flatlist'; + +const App = () => ( + + + + 1 + + + 2 + + + 3 + + + 4 + + + +); + +const { width } = Dimensions.get('window'); const styles = StyleSheet.create({ - container: { - flex: 0.5, - backgroundColor: 'white', - }, - child: { - height: height * 0.5, - width, - justifyContent: 'center', - }, - text: { - fontSize: width * 0.5, - textAlign: 'center', - }, + container: { flex: 1, backgroundColor: 'white' }, + child: { width, justifyContent: 'center' }, + text: { fontSize: width * 0.5, textAlign: 'center' }, }); export default App; ``` +### Example project with Detox tests + [Code example](./example/README.md) ## Props diff --git a/example/.eslintrc.js b/example/.eslintrc.js index 7d15e2a..a788e77 100644 --- a/example/.eslintrc.js +++ b/example/.eslintrc.js @@ -6,4 +6,9 @@ module.exports = { rules: { 'react-native/no-inline-styles': OFF, }, + globals: { + describe: false, + it: false, + beforeEach: false, + }, }; diff --git a/example/README.md b/example/README.md index a7d6137..fa61247 100644 --- a/example/README.md +++ b/example/README.md @@ -15,4 +15,4 @@ For an Android device `yarn android` For an iOS device `yarn ios` -"react-native-swiper-flatlist": "git+ssh://git@github.com:gusgard/react-native-swiper-flatlist.git#2035e86de1b68ff9ae51d19437501c558ff5421d" + diff --git a/example/e2e/firstTest.e2e.js b/example/e2e/firstTest.e2e.js index 7abf1f1..d49cc18 100644 --- a/example/e2e/firstTest.e2e.js +++ b/example/e2e/firstTest.e2e.js @@ -1,28 +1,28 @@ -const { device, expect, element, by, waitFor } = require('detox'); +const { device, expect, element, by } = require('detox'); const TEXT_IN_SCREENS = { - ZERO: '0 - Go to last index', - ONE: '1 - Press to get the previous index', - TWO: '2 - Press to get the current index', - THREE: '3 - Go to the second index', - FOURTH: '4 - Go to first index', + zero: '0 - Go to last index', + one: '1 - Press to get the previous index', + two: '2 - Press to get the current index', + three: '3 - Go to the second index', + fourth: '4 - Go to first index', }; const SCREENS = { - ZERO: 'container_swiper_screen_0', - ONE: 'container_swiper_screen_1', - TWO: 'container_swiper_screen_2', - THREE: 'container_swiper_screen_3', - FOURTH: 'container_swiper_screen_4', + zero: 'container_swiper_screen_0', + one: 'container_swiper_screen_1', + two: 'container_swiper_screen_2', + three: 'container_swiper_screen_3', + fourth: 'container_swiper_screen_4', }; const PAGINATION = { - ZERO: 'container_swiper_pagination_0', - ONE: 'container_swiper_pagination_1', - TWO: 'container_swiper_pagination_2', - THREE: 'container_swiper_pagination_3', - FOURTH: 'container_swiper_pagination_4', + zero: 'container_swiper_pagination_0', + one: 'container_swiper_pagination_1', + two: 'container_swiper_pagination_2', + three: 'container_swiper_pagination_3', + fourth: 'container_swiper_pagination_4', }; -describe('Example', () => { +describe('example with children', () => { beforeEach(async () => { await device.reloadReactNative(); }); @@ -46,78 +46,78 @@ describe('Example', () => { }); it('should tap pagination', async () => { - await element(by.id(PAGINATION.ZERO)).tap(); - await expect(element(by.text(TEXT_IN_SCREENS.ZERO))).toBeVisible(); + await element(by.id(PAGINATION.zero)).tap(); + await expect(element(by.text(TEXT_IN_SCREENS.zero))).toBeVisible(); - await element(by.id(PAGINATION.ONE)).tap(); - await expect(element(by.text(TEXT_IN_SCREENS.ONE))).toBeVisible(); + await element(by.id(PAGINATION.one)).tap(); + await expect(element(by.text(TEXT_IN_SCREENS.one))).toBeVisible(); - await element(by.id(PAGINATION.TWO)).tap(); - await expect(element(by.text(TEXT_IN_SCREENS.TWO))).toBeVisible(); + await element(by.id(PAGINATION.two)).tap(); + await expect(element(by.text(TEXT_IN_SCREENS.two))).toBeVisible(); - await element(by.id(PAGINATION.THREE)).tap(); - await expect(element(by.text(TEXT_IN_SCREENS.THREE))).toBeVisible(); + await element(by.id(PAGINATION.three)).tap(); + await expect(element(by.text(TEXT_IN_SCREENS.three))).toBeVisible(); - await element(by.id(PAGINATION.FOURTH)).tap(); - await expect(element(by.text(TEXT_IN_SCREENS.FOURTH))).toBeVisible(); + await element(by.id(PAGINATION.fourth)).tap(); + await expect(element(by.text(TEXT_IN_SCREENS.fourth))).toBeVisible(); }); it('should tap screen 0 - goToLastIndex', async () => { - await element(by.id(PAGINATION.ZERO)).tap(); - await element(by.id(SCREENS.ZERO)).tap(); - await expect(element(by.text(TEXT_IN_SCREENS.FOURTH))).toBeVisible(); + await element(by.id(PAGINATION.zero)).tap(); + await element(by.id(SCREENS.zero)).tap(); + await expect(element(by.text(TEXT_IN_SCREENS.fourth))).toBeVisible(); }); it('should tap screen 1 - getPrevIndex', async () => { // getPrevIndex 0 - await element(by.id(PAGINATION.ONE)).tap(); - await element(by.id(SCREENS.ONE)).tap(); + await element(by.id(PAGINATION.one)).tap(); + await element(by.id(SCREENS.one)).tap(); await expect(element(by.text('the previous index is 0'))).toBeVisible(); await element(by.label('OK')).atIndex(0).tap(); - await expect(element(by.text(TEXT_IN_SCREENS.ONE))).toBeVisible(); + await expect(element(by.text(TEXT_IN_SCREENS.one))).toBeVisible(); // getPrevIndex 2 - await element(by.id(PAGINATION.TWO)).tap(); - await element(by.id(PAGINATION.ONE)).tap(); - await element(by.id(SCREENS.ONE)).tap(); + await element(by.id(PAGINATION.two)).tap(); + await element(by.id(PAGINATION.one)).tap(); + await element(by.id(SCREENS.one)).tap(); await expect(element(by.text('the previous index is 2'))).toBeVisible(); await element(by.label('OK')).atIndex(0).tap(); - await expect(element(by.text(TEXT_IN_SCREENS.ONE))).toBeVisible(); + await expect(element(by.text(TEXT_IN_SCREENS.one))).toBeVisible(); // getPrevIndex 3 - await element(by.id(PAGINATION.THREE)).tap(); - await element(by.id(PAGINATION.ONE)).tap(); - await element(by.id(SCREENS.ONE)).tap(); + await element(by.id(PAGINATION.three)).tap(); + await element(by.id(PAGINATION.one)).tap(); + await element(by.id(SCREENS.one)).tap(); await expect(element(by.text('the previous index is 3'))).toBeVisible(); await element(by.label('OK')).atIndex(0).tap(); - await expect(element(by.text(TEXT_IN_SCREENS.ONE))).toBeVisible(); + await expect(element(by.text(TEXT_IN_SCREENS.one))).toBeVisible(); // getPrevIndex 4 - await element(by.id(PAGINATION.FOURTH)).tap(); - await element(by.id(PAGINATION.ONE)).tap(); - await element(by.id(SCREENS.ONE)).tap(); + await element(by.id(PAGINATION.fourth)).tap(); + await element(by.id(PAGINATION.one)).tap(); + await element(by.id(SCREENS.one)).tap(); await expect(element(by.text('the previous index is 4'))).toBeVisible(); await element(by.label('OK')).atIndex(0).tap(); - await expect(element(by.text(TEXT_IN_SCREENS.ONE))).toBeVisible(); + await expect(element(by.text(TEXT_IN_SCREENS.one))).toBeVisible(); }); it('should tap screen 2 - getCurrentIndex', async () => { - await element(by.id(PAGINATION.TWO)).tap(); - await element(by.id(SCREENS.TWO)).tap(); + await element(by.id(PAGINATION.two)).tap(); + await element(by.id(SCREENS.two)).tap(); await expect(element(by.text('the current index is 2'))).toBeVisible(); await element(by.label('OK')).atIndex(0).tap(); - await expect(element(by.text(TEXT_IN_SCREENS.TWO))).toBeVisible(); + await expect(element(by.text(TEXT_IN_SCREENS.two))).toBeVisible(); }); it('should tap screen 3 - scrollToIndex', async () => { - await element(by.id(PAGINATION.THREE)).tap(); - await element(by.id(SCREENS.THREE)).tap(); - await expect(element(by.text(TEXT_IN_SCREENS.ONE))).toBeVisible(); + await element(by.id(PAGINATION.three)).tap(); + await element(by.id(SCREENS.three)).tap(); + await expect(element(by.text(TEXT_IN_SCREENS.one))).toBeVisible(); }); it('should tap screen 4 - goToFirstIndex', async () => { - await element(by.id(PAGINATION.FOURTH)).tap(); - await element(by.id(SCREENS.FOURTH)).tap(); - await expect(element(by.text(TEXT_IN_SCREENS.ZERO))).toBeVisible(); + await element(by.id(PAGINATION.fourth)).tap(); + await element(by.id(SCREENS.fourth)).tap(); + await expect(element(by.text(TEXT_IN_SCREENS.zero))).toBeVisible(); }); // https://github.com/wix/Detox/blob/master/docs/APIRef.ActionsOnElement.md#swipedirection-speed-percentage diff --git a/example/e2e/renderItems.e2e.js b/example/e2e/renderItems.e2e.js new file mode 100644 index 0000000..0add456 --- /dev/null +++ b/example/e2e/renderItems.e2e.js @@ -0,0 +1,84 @@ +const { device, expect, element, by } = require('detox'); + +// const TEXT_IN_SCREENS = { +// zero: 'Item at index 0', +// one: 'Item at index 1', +// two: 'Item at index 2', +// three: 'Item at index 3', +// fourth: 'Item at index 4', +// }; +const SCREENS = { + zero: 'container_swiper_renderItem_screen_0', + one: 'container_swiper_renderItem_screen_1', + two: 'container_swiper_renderItem_screen_2', + three: 'container_swiper_renderItem_screen_3', + fourth: 'container_swiper_renderItem_screen_4', +}; +// const PAGINATION = { +// zero: 'container_swiper_renderItem_pagination_0', +// one: 'container_swiper_renderItem_pagination_1', +// two: 'container_swiper_renderItem_pagination_2', +// three: 'container_swiper_renderItem_pagination_3', +// fourth: 'container_swiper_renderItem_pagination_4', +// }; + +const DELAY = 2 * 1000; + +describe('example with renderItems and data', () => { + beforeEach(async () => { + await device.reloadReactNative(); + // TODO: add menu with steps! + // await element(by.id('renderItem')).tap(); + }); + + it('should see screen', async () => { + await expect(element(by.id('container_swiper_renderItem'))).toBeVisible(); + }); + + it('should execute autoplay every 2.0s', async () => { + // 0s => screen with zero + await expect(element(by.id(SCREENS.zero))).toBeVisible(); + await expect(element(by.id(SCREENS.one))).toBeNotVisible(); + await expect(element(by.id(SCREENS.two))).toBeNotVisible(); + await expect(element(by.id(SCREENS.three))).toBeNotVisible(); + await expect(element(by.id(SCREENS.fourth))).toBeNotVisible(); + + // after 2s => screen with one + await new Promise((_) => setTimeout(_, DELAY)); + + await expect(element(by.id(SCREENS.zero))).toBeNotVisible(); + await expect(element(by.id(SCREENS.one))).toBeVisible(); + await expect(element(by.id(SCREENS.two))).toBeNotVisible(); + await expect(element(by.id(SCREENS.three))).toBeNotVisible(); + await expect(element(by.id(SCREENS.fourth))).toBeNotVisible(); + + // after 4s => screen with two + await new Promise((_) => setTimeout(_, DELAY)); + + await expect(element(by.id(SCREENS.zero))).toBeNotVisible(); + await expect(element(by.id(SCREENS.one))).toBeNotVisible(); + await expect(element(by.id(SCREENS.two))).toBeVisible(); + await expect(element(by.id(SCREENS.three))).toBeNotVisible(); + await expect(element(by.id(SCREENS.fourth))).toBeNotVisible(); + + // after 6s => screen with three + await new Promise((_) => setTimeout(_, DELAY)); + + await expect(element(by.id(SCREENS.zero))).toBeNotVisible(); + await expect(element(by.id(SCREENS.one))).toBeNotVisible(); + await expect(element(by.id(SCREENS.two))).toBeNotVisible(); + await expect(element(by.id(SCREENS.three))).toBeVisible(); + await expect(element(by.id(SCREENS.fourth))).toBeNotVisible(); + + // after 8s => screen with fourth + await new Promise((_) => setTimeout(_, DELAY)); + + await expect(element(by.id(SCREENS.zero))).toBeNotVisible(); + await expect(element(by.id(SCREENS.one))).toBeNotVisible(); + await expect(element(by.id(SCREENS.two))).toBeNotVisible(); + await expect(element(by.id(SCREENS.three))).toBeNotVisible(); + await expect(element(by.id(SCREENS.fourth))).toBeVisible(); + }); + + // https://github.com/wix/Detox/blob/master/docs/APIRef.ActionsOnElement.md#swipedirection-speed-percentage +}); diff --git a/example/src/SwiperWithChildren.js b/example/src/SwiperWithChildren.js index 0233032..6527734 100644 --- a/example/src/SwiperWithChildren.js +++ b/example/src/SwiperWithChildren.js @@ -31,6 +31,7 @@ export default () => { showPagination ref={scrollRef} onChangeIndex={onChangeIndex} + // TODO: rename it to children eg: "container_swiper_children" e2eID="container_swiper" > { onPress={goToLastIndex} testID="container_swiper_screen_0" > - 0 - Go to last index + 0 - Go to last index - 1 - Press to get the previous index + 1 - Press to get the previous index - 2 - Press to get the current index + 2 - Press to get the current index - 3 - Go to the second index + 3 - Go to the second index - 4 - Go to first index + 4 - Go to first index ); @@ -78,7 +79,7 @@ const styles = StyleSheet.create({ width, justifyContent: 'center', }, - smallText: { + text: { fontSize: width * 0.1, textAlign: 'center', }, diff --git a/example/src/SwiperWithRenderItems.js b/example/src/SwiperWithRenderItems.js index 72d4240..75a71a9 100644 --- a/example/src/SwiperWithRenderItems.js +++ b/example/src/SwiperWithRenderItems.js @@ -1,11 +1,11 @@ import React from 'react'; -import { Dimensions, Image, StyleSheet } from 'react-native'; +import { Dimensions, ImageBackground, StyleSheet, Text } from 'react-native'; import { SwiperFlatList } from 'react-native-swiper-flatlist'; import { fox, cat, background, element, lion } from './images'; import { CustomPagination } from './CustomPagination'; -const { width, height } = Dimensions.get('window'); +const { width } = Dimensions.get('window'); const newImage = [lion, fox, cat, background, element]; const image = (index) => ({ image: newImage[index % newImage.length] }); @@ -15,21 +15,36 @@ export default () => { return ( } + renderItem={({ item, index }) => ( + + Item at index {index} + + )} showPagination PaginationComponent={CustomPagination} + e2eID="container_swiper_renderItem" /> ); }; const styles = StyleSheet.create({ image: { - height: height * 0.5, width, + resizeMode: 'cover', + justifyContent: 'flex-end', + }, + text: { + fontSize: width * 0.1, + color: 'whitesmoke', + textAlign: 'center', }, }); diff --git a/package.json b/package.json index f4195de..69015b0 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "main": "index.ts", "license": "Apache-2.0", "description": "React native swiper flatlist component", - "author": "Gustavo Gard ", + "author": "Gustavo Gard (https://github.com/gusgard)", "scripts": { "lint": "yarn eslint index.ts src example/scripts example/src --ext .js,.ts,.tsx", "lint:fix": "yarn lint --fix", @@ -91,5 +91,12 @@ "stack", "android", "ios" + ], + "contributors": [ + { + "name": "Gustavo Gard", + "email": "gusgard.it@gmail.com", + "url": "https://github.com/gusgard" + } ] }