Simple and configurable app introduction slider for react native
Version 4.0.0 marks a move to Typescript and is a somewhat major change.
slides
-prop is now called data
so it's more in line with FlatList
renderItem
-function is strictly requiredbuttonStyle
and buttonTextStyle
props have been removed. renderXButton
-functions can be used to customize button designspaginationStyle
and hidePagination
props have been removed and a new renderPagination
-function takes their place. To disable any pagination/buttons/everything give it a function that returns null.Version 3.0.0 fixes some layout bugs and aligns the renderItem function more closely with that of FlatList.
renderItem
now receives {item, index, dimensions}
in stead of {...item, height, width}
. To migrate, just make sure to unpack the item
and dimensions
.renderItem(props){
+ const {item, index, dimensions, bottomButton} = this.props;
const style = {
- backgroundColor: props.backgroundColor,
+ backgroundColor: item.backgroundColor,
- width: props.width,
+ width: dimensions.width,
- height: props.height,
+ flex: 1,
- paddingBottom: props.bottomButton ? 132 : 64,
+ paddingBottom: bottomButton ? 132 : 64,
};
return (
<View style={[styles.mainContent, style]}>
- <Text style={[styles.title, props.titleStyle]}>{item.title}</Text>
+ <Text style={[styles.title, item.titleStyle]}>{item.title}</Text>
- <Image source={props.image} style={props.imageStyle} />
+ <Image source={item.image} style={item.imageStyle} />
</View>
);
}