React-native-swiper: How to do static footer?

[booboothefool]

<View style={{ flex: 1 }}>
    <View><Text>static header</Text></View>
    <Swiper ... />
    <View><Text>static footer</Text></View>
</View>

but the Swiper ends up filling the rest of the screen and hiding the static footer. I saw the height prop, but do not want to set fixed height.

[gphilipp]

@booboothefool did you find a way to do it ? Care to explain how ?

[booboothefool]

@gphilipp I just set a % on the height, and it was good enough for my needs.

const SWIPER_HEIGHT = Dimensions.get('window').height * 0.85;
const styles = EStyleSheet.create({
  container: {
    backgroundColor: '$backgroundColor',
    flex: 1,
  },
  footer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
  },
});

    return (
      <View style={styles.container}>
        <Swiper
          index={index}
          showsButtons={false}
          showsPagination
          height={SWIPER_HEIGHT}
          renderPagination={(index, total) => <View style={styles.pagination}><Text style={styles.paginationText}>{index + 1} / {total}</Text></View>}
        >
          {games.map((g, index) =>
            <View key={g.id} style={styles.container}>...</View>
          }
        </Swiper>

        <View style={styles.footer}>
          <IconE
            component={TouchableOpacity}
            onPress={() => Actions.pop()}
            reverse
            raised
            type="font-awesome"
            name="close"
            iconStyle={styles.icon}
            color="white"
          />
        </View>

      </View>
    );

[SerzN1]

IMO it should be fluid layout style instead of directly setting height

[AlanFoster]

For anyone coming to this in the future; I was able to get a static footer by wrapping a flex wrapper around the view:

<View style={{ flex: 1 }}>
   <View style={{ flex: 1 }}>
     <Swiper>
         ...
      </Swiper>
   </View>
   <YourFooter />
</View>