Does not work with dynamic content

[Calneideck]

Pages that are created dynamically through Array.map(...) or similar do not render properly.

In this example. The first 3 pages render fine, the 4th (pink) page's top half is rendered where the bottom half should be; and the 5th page (orange) is not shown at all.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import FlipPage, { FlipPagePage } from 'react-native-flip-page';

const pages = [
  'pink',
  'orange'
]

export default function App() {
  return (
    <FlipPage>
      <FlipPagePage>
        <View style={{ ...styles.container, backgroundColor: 'red' }}>
          <Text>Page 1</Text>
        </View>
      </FlipPagePage>
      <FlipPagePage>
        <View style={{ ...styles.container, backgroundColor: 'lightgreen' }}>
          <Text>Page 2</Text>
        </View>
      </FlipPagePage>
      <FlipPagePage>
        <View style={{ ...styles.container, backgroundColor: 'lightblue' }}>
          <Text>Page 3</Text>
        </View>
      </FlipPagePage>
      {pages.map((colour, i) => (
        <FlipPagePage key={i}>
          <View style={{ ...styles.container, backgroundColor: colour }}>
            <Text>{`Page ${4 + i}`}</Text>
          </View>
        </FlipPagePage>
      ))}
    </FlipPage>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

[brunowbbs]

solved?

[darenju]

No sorry, I do not have time to take care of the repos anymore. Keep in mind that this is a POC, using with dynamic content can lead to weird behavior as of now.