React-native-vector-icons: Icon.Button Disappears if Position is Absolute

[bennythomps]

Might be a problem when paired with RN 26, but when using position: 'absolute' with Icon.Button, the view is not visible. Here is an example:

      <View style={styles.container}>
        <Icon.Button  name='filter' iconStyle={{color: '#000'}} style={styles.filters}>Facebook</Icon.Button>
      </View>

  container: {
    flex: 1
  },
  filter: {
    position: 'absolute',
    top: 25,
    right: 10,
    width: 50,
    height: 50
  }

[oblador]

Did you try setting the positioning to the wrapping View instead?

[ashton]

Same happened to me trying to create a menu button and positioning it on the left top corner, any tips?

[ghost]

did anyone find a solution to this? i'm going through the same thing right now

[mtostenson]

++

[plkt1792]

+1

[vtoupet]

this is actually working on iOS, but not on Android. I am trying to stack 2 icons on top of each others to create a border effect.

Has anyone found a solution?

[brsraj]

Faced the similar issue. Instead of importing Icon from 'react-native-elements', i imported the Icon from react-native-vector-icons. It worked amazingly on both Android and iOS.

import Icon from 'react-native-vector-icons/Ionicons'; 

<View style={styles.searchContainer}>
  <TextInput
    style={styles.SearchbarInput}
    underlineColorAndroid="transparent"
    placeholder="Search"
    onChangeText={text => this.setState({ text })}
  />
  <Icon
    style={styles.searchIcon}
    name="ios-search"
  />
</View>;

Some styling

    searchIcon: {
        position: 'absolute',
        top: 16,
        ...Platform.select({
            android: {
              top: 22,
            },
          }),
        left: 33,
        color:'#444',
    },

[jstojiljkovic]

Did anyone found a working solution?

[lasharela]

I've just tried:

<View style={{ position: 'absolute', left: 20, top: 5, zIndex: 10 }}>
   <Icon name={iconName} color="white" type={iconType} name="facebook" />
</View>

And It's working

[juliobguedes]

I was getting this same error a few minutes ago, my code was something like

import { Icon } from 'react-native-elements';

<View style={/* absolute styling goes here */}>
  <Icon ... />
</View>

I have "fixed it" wrapping the Icon with a Text component, just like this:

import { Icon } from 'react-native-elements';

<View style={/* absolute styling goes here */}>
  <Text>
    <Icon ... />
  </Text>
</View>

[aliwaqar981]

I've just tried:

<View style={{ position: 'absolute', left: 20, top: 5, zIndex: 10 }}>
   <Icon name={iconName} color="white" type={iconType} name="facebook" />
</View>

And It's working

I did the same as @Iasharela It works at first but when I open drawer and then close it then Icon disappears. Did anyone found solution?

Correction: It does this only on map Screen. Working Fine on other screens

[szholdiyarov]

Closing this issue due to inactivity.