1

I'm trying to use the Tab View component inside a ScrollView but it never show if I don't specify a minHeight, I can't understand why.

import React from 'react'
import { View, StyleSheet, Text, ScrollView } from 'react-native'
import { Tabs } from 'react-native-collapsible-tab-view'

const LongText = () => {
  return (
    <Text>
   ///Long lorep isum text
    </Text>
  )
}
const TestScreen = () => {
  return (
    <ScrollView style={{ flex: 1, backgroundColor: 'pink', padding: 5 }}>
      <View style={{ flex: 1, backgroundColor: 'yellow' }}>
        <Text>This is a TabTest</Text>
        <View style={{ flex: 1 }}> 
          <Tabs.Container>
            <Tabs.Tab name="About">
              <View style={{ flex: 1 }}>
                <LongText />
              </View>
            </Tabs.Tab>
            <Tabs.Tab name="Reviews">
              <Text>Test</Text>
            </Tabs.Tab>
          </Tabs.Container>
        </View>
        <Text>Test</Text>
      </View>
    </ScrollView>
  )
}

const styles = StyleSheet.create({})

export default TestScreen

Result without minHeight

I tried adding minHeight and it worked :

 <View style={{ flex: 1, minHeight: 400 }}>
          <Tabs.Container>

       ...

          </Tabs.Container>
  </View>

But it's not optimal because I don't know the size of the content I will put in this View in advance, and it crop the rest of it. Result with minHeight

Motaru
  • 11
  • 2

0 Answers0