Как разместить панель поиска внутри заголовка в React Native?

Question

Я пытаюсь создать этот заголовок для моего приложения в React Native. Здесь есть заголовок экрана, кнопка для возврата к предыдущему экрану и панель поиска под ними, занимающая всю ширину экрана. Все три из этих элементов должны быть частью заголовка.

С этого я и начал. Как видите, панель поиска находится за пределами заголовка и прокручивается (чего не должно быть).

Попробовав несколько разных техник, я не приблизился к своему замыслу. Это то, что у меня есть до сих пор: (

Код ниже взят из моей последней попытки:

Код для заголовка:

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')
    })

Стиль для компонента searchBox:

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

Как я могу перейти от того, что у меня есть сейчас, к намеченному дизайну? Я особенно борюсь за то, чтобы панель поиска правильно совмещалась с двумя другими элементами. Любая помощь приветствуется.

Answer 1

Отказ от закусочной для идеи. Экспо-закусочная ссылка