ReactNative FlatList is not rendered properly in Arabic Right To Left

Question

I have a FlatList to display list of users, when I change the device language to arabic, RTL is not rendered correctly. The arrows should be pointing the other way.

Here is the screenshot of how it looks on mobile.

Could you suggest if I am missing anything.

Here is my code.

FlatListScreen.js

    import React, {Component} from 'react';
import {View, Text, FlatList} from 'react-native';
import {List, ListItem, SearchBar} from 'react-native-elements';

class FlatListScreen extends Component{
    constructor(props) {
        super(props);

        this.state = {
            loading: false,
            date: [],
            page: 1,
            seed: 1,
            error: null,
            refreshing: false
        };
    }

    componentDidMount(){
        this.makeRemoteRequest();
    }

    makeRemoteRequest = () => {
        const {page, seed } = this.state;
        const url = 'https://randomuser.me/api/?seed=${seed}&page=${page}&results=20';
        this.setState({loading: true});
        fetch(url)
            .then(res => res.json())
            .then(res => {
                this.setState({
                    data: page === 1 ? res.results : [...this.state.data, ...res.results],
                    error: res.error || null,
                    loading: false,
                    refreshing: false
                });
            })
            .catch(error => {
                this.setState({error, loading: false});
            });
    };

    renderSeparator = () => {
        return (
            <View
                style={{
                    height: 1,
                    width: '86%',
                    backgroundColor: '#CED0CE',
                    marginLeft: '14%',
                }}
            />
        );
    };

    renderFooter = () => {
        if(!this.state.loading) return null;

        return (
            <View
                style={{
                    paddingVertical: 20,
                    borderTopWidth: 1,
                    borderTopColor: "#CED0CE"
                }}
            />
        )
    };

    renderHeader = () => {
        return <SearchBar 
        placeholder="Search.."
        lightTheme
        round />;
    }

    onLearnMore = (item) => {
        this.props.navigation.navigate('Profile', { ...item });
      };

    render (){
        return (
            <List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0}}>
                <FlatList
                    data = {this.state.data}
                    renderItem={({item}) => (
                        <ListItem
                            roundAvatar
                            title={`${item.name.first} ${item.name.last}`}
                            subtitle={item.email}
                            avatar={{uri: item.picture.thumbnail}}
                            containerStyle={{ borderBottomWidth: 0 }}
                            onPress={() => this.onLearnMore(item)}
                        />
                    )} 
                    keyExtractor = {item => item.email}
                    ItemSeparatorComponent={this.renderSeparator}
                    ListHeaderComponent={this.renderHeader}
                    ListFooterComponent={this.renderFooter}
                />
            </List>
        )
    }
    }

    export default FlatListScreen;

From the React-native documentation I have added following code for RTL support https://facebook.github.io/react-native/blog/2016/08/19/right-to-left-support-for-react-native-apps.html#writing-rtl-ready-components

MainActivity.java

 @Override
    protected String getMainComponentName() {
        I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
        sharedI18nUtilInstance.allowRTL(context, true);
        return "navapp";
    }

AndroidManifest.xml

<application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:allowBackup="false"
      android:theme="@style/AppTheme"
      android:supportsRtl="true">

Answer 1

Arrows showing in your FlatList are coming from the ListItem component you are using to show every record in your data. You need to check for the current language/RTL support and render arrow accordingly.

To achieve desired behavior you can use rightIcon property for ListItem component.

rightIcon

icon configuration for right icon (optional), either a name from the icon library (like material) or a React Native element like Image. Shows up unless hideChevron is set

Sample

<ListItem
  roundAvatar
  title={'title'}
  subtitle={'sub title'}
  avatar={{uri: item.picture.thumbnail}}
  containerStyle={{ borderBottomWidth: 0 }}
  onPress={() => this.onLearnMore(item)}
  rightIcon={{name: (I18nManager.isRTL ? 'chevron-left': 'chevron-right')}}
/>