Is it possible to set backgroundColor for FlatList as transparent?

I have appbackground image and want to use it as background of screen.

But ListItem in FlatList seems to require to set some color. The same question is for header.

    <FlatList
      style={styles.root}
      data={contacts}
      getItemLayout={this.getItemLayout}
      ItemSeparatorComponent={this.renderSeparator}
      keyExtractor={this.extractItemKey}
      renderItem={this.renderItem}
      enableEmptySections />

renderItem = ({ item }) => {
        return (
        <TouchableOpacity onPress={this.onPress}>
          <View style={styles.container}>
            <Avatar type='circle' style={styles.avatar} img={this.getAvatar(image, gender)} />
           <View style={{flexDirection: 'column'}}>
             <Text style={styles.text}>{`${lastName} ${firstName}`}</Text>
             <Text style={styles.phone}>{`${mobilePhone}`}</Text>
           </View>
          </View>
         </TouchableOpacity>
        );
    }

Something like here:

Is it possible to set backgroundColor for FlatList as transparent?

I have appbackground image and want to use it as background of screen.

But ListItem in FlatList seems to require to set some color. The same question is for header.

    <FlatList
      style={styles.root}
      data={contacts}
      getItemLayout={this.getItemLayout}
      ItemSeparatorComponent={this.renderSeparator}
      keyExtractor={this.extractItemKey}
      renderItem={this.renderItem}
      enableEmptySections />

renderItem = ({ item }) => {
        return (
        <TouchableOpacity onPress={this.onPress}>
          <View style={styles.container}>
            <Avatar type='circle' style={styles.avatar} img={this.getAvatar(image, gender)} />
           <View style={{flexDirection: 'column'}}>
             <Text style={styles.text}>{`${lastName} ${firstName}`}</Text>
             <Text style={styles.phone}>{`${mobilePhone}`}</Text>
           </View>
          </View>
         </TouchableOpacity>
        );
    }

Something like here:

• javascript
• reactjs
• react-native
• react-native-flatlist

1 Answer 1

Yes, just don't set a backgroundColor on your FlatList and make sure that your Image is below the FlatList.

If that doesn't work set a color using rgba(255, 255, 255, 0.0) This sets the alpha to zero meaning that the color is transparent.

https://facebook.github.io/react-native/docs/colors

Here is a quick snack https://snack.expo.io/8nM1LgJqR that has no backgroundColor set on the FlatList or the row item.

Here is the code

import React, {Component} from 'react';
import { View, StyleSheet, FlatList, Text, Image } from 'react-native';
export default class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      data: [
        {
          title: 'Card 1', city: 'London'
        },
        {
          title: 'Card 2', city: 'London 2'
        },
        {
          title: 'Card 3', city: 'London 3'
        },
        {
          title: 'Card 4', city: 'London 4'
        },
        {
          title: 'Card 5', city: 'London 5' 
        },
        {
          title: 'Card 6', city: 'London 6'
        },
        {
          title: 'Card 7', city: 'London 7'
        },
        {
          title: 'Card 8', city: 'London 8'
        },
        {
          title: 'Card 9', city: 'London 9'
        },
        {
          title: 'Card 10', city: 'London 10'
        },
      ]
    }
  }

    renderItem = ({ item }) => {
      return (
        <View style={{height: 100, borderWidth: 1, width: '100%'}}>
          <Text>{item.title}</Text>
        </View>

      );
    }
  
  render() {
    return (
      <View style={styles.container}>
      <Image style={{height: '100%', width: '100%', position:'absolute'}} source={{uri: 'https://i.sstatic/t96aT.jpg'}} />
      <FlatList
        style={{flex:1}}
        data={this.state.data}
        showsHorizontalScrollIndicator={false}
        keyExtractor={item => item.title}
        renderItem={this.renderItem}
      />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  }
});