react-native-rtl-ltr-swiper/README.md

A FlatList-based RTL & LTR swiper for React Native.

# 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
![LTR Mode](screenshots/LTR.gif)

### RTL Mode
![RTL Mode](screenshots/RTL.gif)

## Installation

```bash
npm install react-native-rtl-ltr-swiper
# or
yarn add react-native-rtl-ltr-swiper
```

## Usage

```typescript
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Swiper } from 'react-native-rtl-ltr-swiper';

const App = () => {
  const items = [
    { id: 1, title: 'Item 1' },
    { id: 2, title: 'Item 2' },
    { id: 3, title: 'Item 3' },
  ];

  const renderItem = ({ item }) => (
    <View style={styles.itemContainer}>
      <Text style={styles.itemText}>{item.title}</Text>
    </View>
  );

  return (
    <View style={styles.container}>
      <Swiper
        data={items}
        renderItem={renderItem}
        itemWidth={300}
        containerStyle={styles.swiperContainer}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  swiperContainer: {
    height: 200,
  },
  itemContainer: {
    width: 300,
    height: 180,
    backgroundColor: '#fff',
    borderRadius: 10,
    marginHorizontal: 10,
    justifyContent: 'center',
    alignItems: 'center',
  },
  itemText: {
    fontSize: 18,
    fontWeight: 'bold',
  },
});

export default App;
```

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| data | T[] | Yes | - | Array of items to display |
| renderItem | (info: ListRenderItemInfo<T>) => React.ReactElement | Yes | - | Function to render each item |
| itemWidth | number | No | 300 | Width of each item |
| containerStyle | StyleProp<ViewStyle> | No | - | Style for the container View |
| flatListProps | Partial<FlatListProps<T>> | 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](https://buymeacoffee.com/coderv)

💬 **Give your feedback** - [Open an issue](https://github.com/vikashwebb/react-native-rtl-ltr-swiper/issues) or [Start a discussion](https://github.com/vikashwebb/react-native-rtl-ltr-swiper/discussions)

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

## License

MIT