React Native RTL/LTR Swiper

A flexible and customizable horizontal swiper component for React Native that supports both RTL and LTR layouts. Built on top of React Native's FlatList with additional features like snap behavior and automatic RTL support.

Features

• 🎯 Built-in RTL support
• 📱 Smooth snap behavior
• 🎨 Customizable item width
• 🔄 Automatic layout direction based on device settings
• 📦 Built on top of React Native's FlatList
• 🎯 TypeScript support

Screenshots

LTR Mode

RTL Mode

Installation

1npm install react-native-rtl-ltr-swiper
2# or
3yarn add react-native-rtl-ltr-swiper

Usage

1import React from 'react';
2import { View, Text, StyleSheet } from 'react-native';
3import { Swiper } from 'react-native-rtl-ltr-swiper';
4
5const App = () => {
6  const items = [
7    { id: 1, title: 'Item 1' },
8    { id: 2, title: 'Item 2' },
9    { id: 3, title: 'Item 3' },
10  ];
11
12  const renderItem = ({ item }) => (
13    <View style={styles.itemContainer}>
14      <Text style={styles.itemText}>{item.title}</Text>
15    </View>
16  );
17
18  return (
19    <View style={styles.container}>
20      <Swiper
21        data={items}
22        renderItem={renderItem}
23        itemWidth={300}
24        containerStyle={styles.swiperContainer}
25      />
26    </View>
27  );
28};
29
30const styles = StyleSheet.create({
31  container: {
32    flex: 1,
33    justifyContent: 'center',
34  },
35  swiperContainer: {
36    height: 200,
37  },
38  itemContainer: {
39    width: 300,
40    height: 180,
41    backgroundColor: '#fff',
42    borderRadius: 10,
43    marginHorizontal: 10,
44    justifyContent: 'center',
45    alignItems: 'center',
46  },
47  itemText: {
48    fontSize: 18,
49    fontWeight: 'bold',
50  },
51});
52
53export default App;

Props

Prop	Type	Required	Default	Description
data	T[]	Yes	-	Array of items to display
renderItem	(info: ListRenderItemInfo) => React.ReactElement	Yes	-	Function to render each item
itemWidth	number	No	300	Width of each item
containerStyle	StyleProp	No	-	Style for the container View
flatListProps	Partial<FlatListProps>	No	{}	Additional props to pass to FlatList

RTL Support

The component automatically handles RTL layout based on the device's language settings using I18nManager.isRTL. No additional configuration is needed.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support & Feedback

If you find this library helpful, consider supporting the development:

☕ Buy me a coffee - Support this project

💬 Give your feedback - Open an issue or Start a discussion

⭐ Star this repository - If you like this project, please give it a star!

License

MIT