# npm
npm instal react-native-simple-banner-carousel
# yarn
yarn add react-native-simple-banner-carousel
Here is a quick example.
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { SimpleCarousel, Banner } from 'react-native-simple-banner-carousel';
export default function App() {
return (
<View style={styles.container}>
<View style={{
paddingVertical: 12,
width: '100%',
backgroundColor: '#fff',
}}>
<SimpleCarousel
data={[{
title: 'Hokkaido',
source: require('./assets/images/sapporo.jpg'),
},
{
title: 'Tokyo',
source: require('./assets/images/tokyo.jpg'),
},
{
title: 'Osaka',
source: require('./assets/images/osaka.jpg'),
},
{
title: 'Kyoto',
source: require('./assets/images/kyoto.jpg'),
},
{
title: 'Shimane',
source: require('./assets/images/shimane.jpg'),
}
]}
renderItem={(props, i, width) => {
return (
<Banner id={`${props.title}_${i}`} source={props.source} width={width} onPress={(id) => console.log(`${id} was tapped.`)} />
)
}}
/>
</View>
<StatusBar translucent={true} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f7f7f7',
alignItems: 'center',
justifyContent: 'center',
},
});
<View
style={{
paddingVertical: 12,
width: '100%',
backgroundColor: '#fff',
}}
>
<SimpleHorizontalList
data={[
{
title: 'マクドナルド札幌すすきの店',
description: '配送手数料: ¥150・5-15分',
score: 4.7,
source: require('./assets/images/pxl1.jpg'),
},
{
title: 'ケンタッキーフライドチキン すすきのノルベサ店',
description: '配送手数料: ¥100・20-30分',
score: 4.7,
source: require('./assets/images/pxl2.jpg'),
},
{
title: 'すき家 札幌駅前通北一条店',
description: '配送手数料: ¥100・5-15分',
score: 4.7,
source: require('./assets/images/pxl3.jpg'),
},
{
title: '大戸屋ごはん処 ニッセイ札幌ビル店',
description: '配送手数料: ¥100・30-40分',
score: 4.7,
source: require('./assets/images/pxl4.jpg'),
},
{
title: 'スターバックス コーヒー 札幌パルコ',
description: '配送手数料: ¥100・5-15分',
score: 4.8,
source: require('./assets/images/pxl5.jpg'),
},
]}
renderItem={(props, i, width) => {
return (
<Card
id={`${props.title}_${i}`}
width={width}
{...props}
onPress={() => console.log('hello world')}
/>
);
}}
/>
</View>
Type: Array
This property is an array of the data you want to display in the carousel. The data element is passed as the first argument of renderItem method.
Type: (props: Object, index: number, itemWidth: number) => React.ReactElement;
A method that returns the component you want to display in the carousel. I recommend that you use the Banner component.
Type: Array
This property is an array of the data you want to display in the carousel. The data element is passed as the first argument of renderItem method.
Type: (props: Object, index: number, itemWidth: number) => React.ReactElement;
A method that returns the component you want to display in the carousel. I recommend that you use the Banner component.
Type: string
This ID is a property that identifies this banner, and is passed to the onPress method.
Type: Object
The source of the image you want to display in the banner.
Type: number;
The width of the banner.
Type: (id: string) => void;
The method to be called when tapped.
Type: string
This ID is a property that identifies this banner, and is passed to the onPress method.
Type: string
Title of this card.
Type: string
Description of this card.
Type: number
Review Score.
Type: Object
The source of the image you want to display in the banner.
Type: number;
The width of the banner.
Type: (id: string) => void;
The method to be called when tapped.