React Native iOS ImageBackground resizeMode: 'repeat' is scaling the image. Works fine on Android

Question

I am trying to add image border to my Flatlist items. For that purpose I am using Imagebackground component. But, on iOS, ImageBackground resizeMode: 'repeat' is scaling/stretching the image. It works fine on Android. Here is the snack link. Attached are the reference images. How to make it just like the android view i.e. the border should be fine/thin not scaled?

import * as React from 'react';
import { Text, View, StyleSheet, ImageBackground, FlatList } from 'react-native';
import Constants from 'expo-constants';

export default function App() {
  const chapters = [{ id: 1 }, { id: 2 }, { id: 3 }];
  itemKeyExtractor = (item) => item.id;

  const renderItem = ({item}) => {
    return (
      <ImageBackground
        source={require('./assets/border.jpg')}
        style={{
          padding: 10,
          marginVertical: 10,
          width: 'auto',
          height: 'auto',
        }}
        imageStyle={{ resizeMode: 'repeat'}}
        resizeMode="repeat">
        <View style={styles.item}>
        <Text> {item.id}</Text>
        </View>
      </ImageBackground>
    );
  };

  return (
    <View style={styles.container}>
      <FlatList
        data={chapters}
        renderItem={renderItem}
        keyExtractor={itemKeyExtractor}
        style={{ flex: 1 }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  item: {
    flexDirection: 'row',
    backgroundColor: 'white',
    borderRadius: 100,
    padding: 10,
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

Answer 1

I suggest you figure out the image's right crop to make a patterned border. I did it on this Snack Expo example for you. This is the nearest border pattern between iOS and Android.