1

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,
  },
});

iOSandroid

artsnr
  • 952
  • 1
  • 10
  • 27

1 Answers1

0

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.

marcelofreires
  • 447
  • 3
  • 8
  • 1
    @artsnr, did you try this? Look at the code and new asset called `border-pattern.jpg` – marcelofreires May 25 '23 at 14:45
  • thanks for your input. Yes, I viewed you snack and I can see both android and iOS look alike now but the problem is that I want the android pattern (the delicate one) on iOS, not the iOS pattern (the broad and scaled one) on android. – artsnr Jul 29 '23 at 10:08