react-native-view-overflow: Not working for Flatlist items

I have a TabBar component and I’m adding a badge to a tab that is inside a Flatlist. I tried this module out and I’m not getting expected results.

Code snippet

  <ViewOverflow>
      <FlatList
        style={{overflow: 'visible', marginBottom: 4, zIndex: 5, elevation: 5}}
        contentContainerStyle={{overflow: 'visible'}}
        data={this.state.data}
        keyExtractor={item => item.id}
        extraData={this.state}
        horizontal={true}
        scrollEnabled={false}
        renderItem={({ item, index }) => this.renderItem({ item, index })}
      />
 </ViewOverflow>

Android screen shot 2018-04-26 at 4 40 05 pm

iOS / expected screen shot 2018-04-26 at 4 54 11 pm

react-native version: 0.50.4 react-native-view-overflow version: 0.0.3

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 20 (2 by maintainers)

Commits related to this issue

docs(flatlist): add usage with FlatList fix #7 — committed to entria/react-native-view-overflow by sibelius 6 years ago

Most upvoted comments

@testshallpasswork @jgfidelis it worked! you need to use CellRendererComponent and set to ViewOverflow to RenderItem root

try this:

<FlatList
        data={this.state.data}
        keyExtractor={item => item.id}
        CellRendererComponent={ViewOverflow}  
        renderItem={({ item, index }) => (
<ViewOverflow style={{position: 'absolute', left: 100, top: 100}}>
   // item....
</ViewOverflow>
)}
/>

xiaweiss on May 7, 2018

I used react-native-shadow-view, it dependence react-native-svg

xiaweiss on Jul 2, 2019

@xiaweiss i’m using RN 0.59.10

<FlatList
      contentContainerStyle={{ overflow: "visible" }}
      horizontal
      data={[{key: 'a'}, {key: 'b'}]}
      renderItem={({item}) => <View style={{ elevation: 4, backgroundColor: "red", padding: 10}}><Text>{item.key}</Text></View>}
    />

but still can’t view shadow from elevation 😦

pixelize on Jul 2, 2019

@testshallpasswork, did you find a solution or workaround for this problem?

jgfidelis on May 3, 2018