Absolute and Flexbox in React Native

Absolute and Flexbox in React Native

Ok, solved my problem, if anyone is passing by here is the answer:

Just had to add left: 0, and top: 0, to the styles, and yes, I'm tired.

position: 'absolute',
left:     0,
top:      0,

Create Layout with absolute Values and Flexbox in React Native

The issue here is that you have incorrectly ordered the classes(View, SafeView, etc) which are causing the layout to overlap and preventing you from getting the desired result.

Check my solution proposed below:

return (
  <SafeAreaView style={{flex: 1}}>
    <View style={{flexDirection: 'row', flex: 1, height: "100%"}}>
      <TouchableOpacity style={{height: 44, width: 44, margin: 10}}>
        <Image
          source={require('../../assets/images/backButton.png')}
          style={{height: '100%', width: '100%'}}
        />
      </TouchableOpacity>
      <View style={{flex: 1, backgroundColor: '#FF2F2F'}}></View>
      <Text
        style={{
          padding: 14,
          fontSize: 14,
        }}>
        1 / 6
      </Text>
    </View>
  </SafeAreaView>
);

Running example for the solution on expo Snack

Feel free to explore and edit it!

React Native absolute positioning horizontal centre

Wrap the child you want centered in a View and make the View absolute.

<View style={{position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center'}}>
  <Text>Centered text</Text>
</View>

React Native Flex Layout With Absolute Size

Does this fit your request?

  component: {
    flex: 1,
    backgroundColor: '#ff69b4'
  },
  bottomSection: {
    justifyContent: 'flex-end',
    backgroundColor: 'white',
    height: 50,
  },
  topSection: {
    flex: 1
  }

Supposing component is the container, like

  <View style={styles.component}>
    <View style={styles.topSection} />
    <View style={styles.bottomSection} />
  </View>

or take a look at this snack

Make an item stick to the bottom using flex in react-native

In React Native, the default value of flexDirection is column (unlike in CSS, where it is row).

Hence, in flexDirection: 'column' the cross-axis is horizontal and alignSelf works left/right.

To pin your footer to the bottom, apply justifyContent: 'space-between' to the container

positioning an element on top of absolute positioned element react native

You need to remove < View style={floatstyle} > and try this code

< TouchableOpacity
  disabled={true}
  style={{ position: "absolute", bottom: 5, right: 10 }}
  onPress={() => navigation.navigate("FilterByIngreds")}
>
  <Image
    style={{
      width: 100,
      height: 100,
      justifyContent: "center",
      borderRadius: 100 / 2,
      backgroundColor: "#000",
      alignItems: "center"
    }}
  />

  <View
    style={{
      width: 16,
      height: 16,
      borderWidth: 2,
      borderColor: "#f0f",
      borderRadius: 8,
      backgroundColor: "rgba(65, 204, 151, 1)",
      position: "absolute",
      top: 5,
      right: 10,
      zIndex: 5
    }}
  />
</TouchableOpacity>

Is there a way to fix this CSS Flexbox and position absolute bug?

Try to add position: relative; to FilmCard

---

Related Topics