CODEWITHSUNDEEP
react-native
rjpj1998
rjpj1998

Reputation: 419

Splitting vertical space betwen two components in react native

I have two components, <Scrollable /> and <PinnedToBottomed/>.

I need to split a view's vertical space betwen them. <PinnedToBottom/> must occupy how much ever space it needs at the bottom of the screen and <Scrollable/> should occupy the remaining space. <Scrollable /> is a Flatlist. So far I have tried using position:"absolute" on the parent and position:"relative", bottom:0 on the children and well as the flexbox, align-items trick.

Upvotes: 0

Views: 550

Answers (2)

Vahid Alimohamadi
Vahid Alimohamadi

Reputation: 5878

Do you mean like this?:

import React from 'react';
import {View, FlatList, Text} from 'react-native';

export default () => {
  return (
    <View style={{flex: 1}}>
      <View
        style={{
          flex: 1,
          backgroundColor: 'green',
          borderWidth: 1,
          borderColor: 'tomato',
        }}>
        {/* <FlatList /> */}
      </View>
      <View style={{backgroundColor: 'yellow', borderWidth: 1}}>
        <Text>lorem</Text>
        <Text>lorem</Text>
        <Text>lorem</Text>
        <Text>lorem</Text>
      </View>
    </View>
  );
};

enter image description here

Upvotes: 1

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16364

You should use the marginTop :'auto' which will pin the to bottom. You can see the sample code here.

const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
];

export default App = () => {
  return (
    <View style={{ flex: 1 }}>
  <FlatList
        data={DATA}
        renderItem={({ item }) => (
          <View><Text>123123</Text></View>
        )}
        keyExtractor={item => item.id}
      />
      <View
        style={{
          marginTop: 'auto',
          height: 10,
          width: '100%',
          backgroundColor: 'red',
        }}></View>
    </View>
  );
};

Upvotes: 1

Related Questions