How to place Search Bar inside header in React Native?

Question

I am trying to create this header for my app in React Native. There is the title of the screen, a button to go back to the previous screen, and a search bar below them taking up the entire width of the screen. All three of these elements should be part of the header.

This is what I started with. As you can see, the Search Bar is outside the header and is scrollable (which it shouldn't be).

After trying several different techniques, I'm nowhere close to my intended design. This is what I have till now :(

The code below is from my latest attempt:

Code for header:

static navigationOptions = ({ navigation }) => ({
        // headerLeft: <CloseModalButton navigation={navigation} testID='new-message-view-close' />,
        headerStyle: { backgroundColor: '#F9F9F9' },
        header: (
            <View>
                <Text fontSize={17}>{I18n.t('New_Message')}</Text>
                <SearchBox onChangeText={text => this.onSearchChangeText(text)} testID='new-message-view-search' />
            </View>
        ),
        title: I18n.t('New_Message')
    })

Styling for the searchBox component:

searchBox: {
        alignItems: 'center',
        backgroundColor: '#E6E8E9',
        borderRadius: 10,
        color: '#8E8E93',
        flexDirection: 'row',
        fontSize: 17,
        height: 43,
        margin: 8,
        marginVertical: 10,
        paddingHorizontal: 10
    },

How can I go from what I have now to my intended design? I am particularly struggling with getting the Search Bar to align correctly with the other 2 elements. Any and all help is appreciated.

Answer 1

Dropping a expo snack for the idea. Expo snack link