Qfyilyi

My program consist of the following: A bar that when clicked will expand/collapse a component right below it (in my case a FlatList returned by ProjectUpdatesListScreen). This is done through the use of react-native-collapsible.
Right below these two there is another bar of the same dimensions and properties as the first one. (Disregard what components they are in the code, the only thing that matters about them is the StyleSheet).

The issue I encounter is that when the collapsible component expands, it pushes the 2nd bar out of the screen, when it should remain within the bounds of the screen.

My code is the following:

import { Image, Linking, StyleSheet, Text, TouchableOpacity, View } from 'react-native';

import Collapsible from 'react-native-collapsible';

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



export default class CreateUpdateScreen extends Component {

    constructor(props) {

        super(props);

        this.state = {

            updatesIsOpen: true,

        };

    }

    render() {

        return (



            <View style={styles.parentWrapper}>

                <View style={styles.childWrapper}>

                    <TouchableOpacity style={styles.clickableBar} onPress={() => this.setState(prevState => ({ updatesIsOpen: !prevState.updatesIsOpen }))}>

                        <Text style={styles.accordionTitle}>Updates</Text>

                    </TouchableOpacity>

                    <Collapsible collapsed={!this.state.updatesIsOpen}>

                        <ProjectUpdatesListScreen projectKey={project.key} />

                    </Collapsible>

                    <TouchableOpacity style={styles.clickableBar}>

                        <Text style={styles.accordionTitle}>Random</Text>

                    </TouchableOpacity>

                </View>

            </View>

        );

    }

}



const styles = StyleSheet.create({

    parentWrapper: {

        flex: 1,

    },

    childWrapper: {

        backgroundColor: 'orange',

    },

    clickableBar: {

        flexDirection: 'row',

        alignItems: 'center',

        backgroundColor: 'pink',

    },

    accordionTitle: {

        color: 'rgb(52, 71, 117)',

        letterSpacing: 0.64,

        fontSize: 14,

    },

    accordionChevron: {

        color: 'rgb(52, 71, 117)',

        fontSize: 30,

    }

});

Possible solution direction:

I have tried adding flex: 1 inside styles.clickableBar, and while it solves the issue, it also hides the Text inside the elements with this style, and I have no clue how to fix that side effect.

Any help will be greatly appreciated.