Cannot put anything next to a horizontal draxscrollview

[StCyr]

So, I have a header bar made of a draxScrollView component and I would like to put a sticky kebab-style menu on its right. Something like this:

But, whatever I'm doing, the menu component is pushed on the next line, like this:

Could you help me?

Here's the code:

                        {/* This view is needed as an extra wrapper,
                        ScrollView can use to make the containing view sticky,
                        without changing styles on the containing view */}
                        <View>
                            <DraxScrollView
                                style={this.props.theme.stackBar}
                                horizontal
                                contentContainerStyle={this.props.theme.stackBarScrollInner}
                            >
                                {stacks.map(stack => (
                                    <DraxView
                                        key={stack.id}
                                        style={this.props.theme.stackTab}
                                        receivingStyle={this.props.theme.stackTabDraggedOver}
                                        onReceiveDragDrop={({ dragged: { payload } }) => {
                                            // Don't try to move card when the drop stack is the same
                                            if (stack.id !== payload.stackId) {
                                                console.log(`moving card ${payload.id}`)
                                                this.moveCard(payload.id, stack.id)
                                            }
                                        }}
                                    >
                                        <Pressable
                                            key={stack.id}
                                            onPress={() => {
                                                // Switches to selected stack and remember navigation
                                                console.log(`Navigating to stack ${stack.id}`)
                                                this.setState({
                                                    index: stack.id,
                                                })
                                                AsyncStorage.setItem('navigation', JSON.stringify({
                                                    boardId: this.props.route.params.boardId,
                                                    stackId: stack.id,
                                                }))
                                            }}
                                        >
                                            <Text style={[this.props.theme.stackTabText, this.state.index === stack.id ? this.props.theme.stackTabTextSelected : this.props.theme.stackTabTextNormal]}>
                                                {stack.title}
                                            </Text>
                                        </Pressable>
                                    </DraxView>
                                ))}
                            </DraxScrollView>
                        </View>

[lafiosca]

I'm unclear on what the problem is that you're running into. The sample code doesn't seem to include the kebab menu button, but regardless this seems like a standard View styling question to me, unrelated to Drax. I think you should be able to create a wrapper View (as you did here) which lays out its children horizontally, then have it contain a DraxScrollView with flex 1 followed by a View of fixed width for your kebab button.

[lafiosca]

I'm going to close this issue for now, but we can reopen it if needed.